Built with Spline
Web Background Assets for HeyGen Using Spline3D
Ashwani Kumar
Verified
Overview
I created a high-quality glass gradient moving effect animation for HeyGen's hero section using Spline3D. This project focused on delivering a smooth, interactive, and lightweight visual experience while maintaining web performance and aesthetic appeal.
Project Goal
Design a modern, fluid hero section animation that aligns with HeyGen’s AI-driven branding.
Implement four variations to provide flexibility in visuals and interaction.
Optimize performance for seamless web integration.
Process & Execution
1. Conceptualizing the Glass Gradient Effect
HeyGen’s visual identity required an animation that was sleek, engaging, and dynamic. I designed a glass-like gradient movement that adds a premium, futuristic touch without overwhelming the UI.
2. Creating Four Unique Versions
Each version featured a distinct animation style to test and refine the best experience:
Version 1: Glass with Chromatic Aberration & Flowing Gradient Waves
This version featured a glass-like surface with chromatic aberration, creating a realistic light distortion effect at the edges.
2. A vibrant gradient of colors moved like waves in the background of the glass, adding a fluid and organic feel.
3. This approach mimicked natural light refractions, giving the hero section an AI-inspired, futuristic aesthetic.
Version 2: Gradient Effect with Stylized Pixelation (No Glass Effect)
This version removed the glass effect, focusing on a clean, digital gradient.
Introduced a stylized pixelation effect, adding a futuristic, glitch-inspired look.
Result: A bold, high-tech visual style that feels modern and dynamic.
Version 3: Looping Cubes with a Purple-Blue-Neon Gradient
Instead of a traditional background animation, this version used looping cubes moving in and out continuously.
The cubes were layered with a gradient of purple, blue, and neon blue, adding depth and motion.
Result: A dynamic, geometric animation that brought energy and complexity to the hero section.
Version 4: High-Refraction Glass with a Blue-Neon-Purple Wave Gradient
A high-refraction glass effect that bent and distorted elements around it.
A blue, neon, and purple wave gradient in the background, adding fluidity and movement.
Impact: A striking light-bending effect, making the glass feel more realistic and immersive.
Final Outcome
The animation brought HeyGen’s hero section to life, reinforcing its AI-powered brand identity. Thanks to Spline3D, it remained smooth, interactive, and web-friendly, enhancing user engagement.
Want a Custom Web 3D Animation?
I specialize in Spline3D, web animations, and interactive 3D elements for websites. If you need a high-performance hero section like HeyGen’s, let’s connect!
Like this project
Posted Mar 21, 2025
Designed dynamic Spline3D backgrounds for HeyGen with glass, gradients, refractions, and 3D elements.
