Hero-section experience

For the hero, I start with a fullscreen StarsCanvas and then shrink it into the exact bounds of the hero card using getBoundingClientRect() plus motion springs for scaleX, scaleY, and x/y, so the tunnel always lands perfectly on the card regardless of viewport.

During this intro I lock scrolling and control the starfield speed (targetSpeed) so it feels like a fast warp that eases into cruise mode. As the warp settles, I fade the layer out and bring in the heading, subheading, and CTA with a shared “fade-up + blur” variant and small index-based delays, so the content appears in a clean, intentional sequence with no layout jumps.

micro-interactions and ambient visuals to tell a story

This final CTA experience is meant to feel like a transmission finally finding its audience.

The core text is a short list of translations rendered one at a time in the exact same physical position. By advancing the index every ~70ms and animating each entry with a small vertical offset and opacity change, it reads as a flickering broadcast rather than a hard text swap.

The multilingual text uses AnimatePresence with mode="popLayout" and keyed motion.divs. That ensures each language gets its own enter/exit animation (small y-offset and opacity curve), while the container layout stays stable and doesn’t reflow adjacent content.

After the last text appears, I bring in two layered systems: a ShootingStars layer (rare, directional streaks) and a StarsBackground layer (dense twinkling points).

For the falling star, I use a ShootingStars SVG that picks a random edge, calculates the angle, and moves a single gradient <rect> across the screen each frame using Math.cos/Math.sin with a random speed and delay, so streaks feel rare and organic.

Behind that, StarsBackground uses a <canvas> and requestAnimationFrame to draw a field of tiny circles whose count depends on the container area (starDensity), and I animate their opacity with a simple Math.sin wave to get the twinkle effect.

Both layers are absolutely positioned and masked with Tailwind’s radial masks to keep the glow centered around the CTA instead of covering the whole page.

More work examples done within this role can be seen HERE.