Scroll Progress

Luminous Hexa was designed specifically for the waitlist section. A waitlist is often one of the least engaging parts of a site — a static input field with a button. I wanted to rethink that moment and give it energy, depth, and atmosphere, making the act of joining the waitlist feel like stepping into something alive.

Why the Hexagon?

The hexagon was chosen deliberately. It's a shape that appears in both nature (honeycombs, crystals) and engineering (tiling, networks), which made it a strong symbol for both structure and connectivity.

Unlike circles or squares, hexagons have edges that suggest movement while still holding symmetry. This gave me the perfect balance: a shape that could feel dynamic when animated, but not chaotic.

I started by exporting a single SVG hexagon path. That base shape was then duplicated into multiple layers inside the same <svg> container. This gave me a stack of hexagons to animate, each one independent, but visually aligned.

Layering Strategy

The animation isn't just one hexagon spinning. It's a system of layers, each slightly offset in time and motion.

9 hexagons were created, each targeted separately.
Their opacities rise and fall at different intervals.
Their rotations are staggered so the shapes never overlap in a perfectly uniform way.

This layering created a resonant, wave like effect, as if light or energy was pulsing outward from the center.

Animation Principles

Three core ideas drove the motion system:

Opacity shifts → breathing effect By fading each hexagon in and out, the system gives the impression of glowing light. It feels alive rather than flat.
Rotation → orbital energy Each hexagon rotates around its center. This adds a sense of orbit, like planets or machinery in slow, deliberate motion.
Stagger → resonance Without staggering, all layers would move in sync, which looks robotic. By offsetting the timing slightly, the animation gains natural flow, like waves crossing or sound vibrations resonating.

Together, these three rules made the animation feel less like code and more like a living system.

GSAP Implementation

GSAP controlled all the motion. In React, each SVG path was connected with a ref, giving me direct access for animation.

const vectorRef1 = React.useRef<SVGPathElement>(null);
const vectorRef2 = React.useRef<SVGPathElement>(null);
// and so on...

// Combine them into an array for easier mapping
const refs = [
  vectorRef1,
  vectorRef2,
 // all the way vectorRef9
];

Let's animate each hexagon with a timeline.

React.useEffect(() => {
  const tl = gsap.timeline({ repeat: -1, yoyo: true });

  tl.fromTo(
    refs.map(r => r.current),
    { opacity: 0, rotate: 0 }, // starting state
    {
      opacity: 0.3,            // subtle glow
      rotate: 180,             // half-turn rotation
      transformOrigin: 'center',
      duration: 5,             // slow, calming motion
      stagger: 0.2,            // slight delay between each hexagon
      ease: 'elastic.inOut(1, 0.5)', // soft elastic easing
    }
  );
}, []);

Now the each path needs to have it's own ref and fill color.

<svg width="500" height="500" viewBox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path opacity="0.8" d="M257.08..." fill={vectorColor} ref={vectorRef1} />
  // the rest of the 8 hexagons paths
</svg>

Key decisions here:

Opacity (0 → 0.3) A subtle range keeps the glow gentle. Anything higher felt distracting against the form.
Rotation (0 → 180) Half-rotations gave movement without creating visual noise from full spins.
Stagger (0.2s) This offset ensured hexagons moved one after another, creating rhythm instead of uniform motion.
Elastic easing Added softness at the start and end of movement, making the shapes feel like they were stretching and settling rather than just rotating mechanically.

Integration into the Waitlist

The challenge was integrating motion without letting it overpower the form. In the final layout, the waitlist form was placed on the left, while Luminous Hexa animated on the right as a supporting visual.

The key was to ensure the animation added atmosphere without stealing focus:

The glow and rotations were dialed back so they felt ambient rather than attention grabbing.
The subtle timing kept the motion noticeable but not dominant.
The layout itself guided the user's gaze naturally toward the left, where the email input and button were placed.

Instead of distracting users, the hexagon became a complementary backdrop. The form remained the center of interaction, while the animation provided context and anticipation, making the waitlist feel more engaging without breaking usability.

Reflection

This project showed me how even a functional section like a waitlist can benefit from motion design. By layering simple geometry with controlled animation, the waitlist gained:

Depth → the background wasn't flat anymore.
Character → the brand felt more alive.
Focus → motion guided attention toward the form.

Luminous Hexa wasn't decoration. It was interaction design, turning a static step into an engaging, memorable experience.

The takeaway? Motion doesn't need to be loud to make an impact. When used with restraint, it can transform utility into atmosphere.