Helium 33 Website Animation
Motion Graphics / UI Animation / Web Design

This project brings a scroll-driven website concept to life for Helium 33. Instead of a page that simply scrolls up, scroll position drives the animation itself: elements move, transform, and reassemble into new layouts as the user progresses. Our designer built the visual language and page-by-page vision in Figma. My job was bringing it to life: working out the motion logic and transitions that carry the brand's meaning from screen to screen, then executing it technically from scratch.

THE MOON

The centerpiece is a moon that transforms as the user scrolls, starting rough and debris-covered, then spinning and smoothing into a polished white sphere. The designer's original moon images were AI-generated stills. With only one angle to work from, there was no way to extend that into a convincing 360-degree spin using AI video tools, so I rebuilt the moon in Maya using NASA surface textures and animated it spinning on its axis, grading the render in DaVinci Resolve to match her original.

The harder problem was the smoothing transformation. Her polished-stage images had surface detail baked in, so overlaying them on the spinning render caused a visible mismatch. I solved it by taking her final white sphere into Photoshop and building new in-between stages that actually matched the spinning geometry, then composited the full sequence in Resolve.

THE OPENING

The site opens on the logo over a warm orange-pink background, a nod to the color helium gas gives off when excited. The main site then swipes in, holding briefly before scroll input starts the animation.

For the first transition, I needed to connect the opening state (full moon, debris, orbiting dots) to a later screen: a smoother moon with a single glowing orange circle beneath it, representing Helium 33 lifting up its clients. I had the orbiting dots shift from black to orange after one rotation, referencing the excited-helium concept again, then morphed them into the circle once they merged. Every element, the dots merging, the rings fading out radially, the moon smoothing, the debris clearing, was timed to resolve together on the next composition.

TEXT

The Helium 33 wordmark was originally a static Figma composition, letters blurred and staggered like gas drifting upward. I animated it faithfully, keying each letter individually and syncing the motion to the dots' first orbit. For the rest of the site, per-letter animation would have felt excessive, so I built a simpler system: lower-emphasis words fade on opacity, key words also get blur and upward translation, and everything reveals in a staggered rhythm so it almost reads like it's being spoken aloud.

BUILDING THE REST

The next screen lifts the moon and circle upward, mostly out of frame. Transitioning from there to a screen with three stacked moon images and a final polished sphere took some choreography: staggering the old elements exiting with the new ones entering so it didn't read as one continuous wheel of moons. Once the final moon settled, I built looping, pulsing rings around it using a precomp with a loop expression, then used an animated track matte so the rings revealed gradually instead of popping on abruptly.

DELIVERY

Once finished, I exported reference and publication MP4s for the team. The developer and I tested render resolutions and file sizes to balance quality against load performance across desktop and mobile. Now we meet regularly as he builds the live site, and I review it against the mock, protecting the small details, timing, easing, spacing, so nothing gets lost between animation and finished product.

Pipeline: Figma > Maya > DaVinci Resolve > Photoshop > After Effects > MP4 export > ongoing review against live build.