HitPay Hero Animation | Three.js + Framer Code Component

HitPay, an all-in-one payment platform for growing businesses (YC S21), had a design concept for their new website landing page that featured dynamic cloud animations. The goal: bring that concept to life in Framer by replacing static cloud imagery with a fully interactive, Three.js-powered animation system built as a custom code component.

I worked alongside HitPay's design team to translate their vision into a working prototype, focusing on a multi-stage animation sequence that would set the tone for the entire site experience.

The design called for a layered transition system triggered across page load and scroll:

Initial Load — The page opens fully covered by a thick, dynamic cloud layer rendered in Three.js/WebGL. No static images; the clouds move and shift like real sky.

Cloud Dissipation — Once the page finishes loading, the thick cloud slowly dissipates with a natural fade-out animation.

Content Reveal — As the clouds clear, the hero section grows in from the background, creating a sense of depth and emergence.

Hero Cloud Layer — A thinner, subtler cloud layer sits over the hero banner, maintaining gentle movement to keep the atmosphere alive.

Scroll Transition — As the user scrolls down, the header UI updates and the dashboard display animates into view.

I built the entire animation system as a custom Framer code component using Three.js and React Three Fiber (R3F). This meant HitPay's team could drop the component directly into their Framer project without touching code.

Key technical decisions:

Used WebGL shaders for realistic cloud rendering and movement

Built the dissipation effect as a controllable animation tied to page load state

Layered multiple cloud planes at different depths for parallax

Handled responsive behavior across desktop and mobile viewports

Integrated scroll-based triggers for the dashboard reveal sequence

The prototype was delivered as a working Framer site demonstrating all five animation stages. While the POC didn't go live (HitPay later pursued a full redesign), the component proved the concept and demonstrated that complex Three.js animations could be packaged as reusable Framer code components.