This project was built with:

Web Background Assets for HeyGen Using Spline3D

Ashwani Kumar

Verified

Spline Designer

Spline

3D Technology

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.

Likes

Views

Timeline

Mar 5, 2025 - Mar 18, 2025

Clients

HeyGen