HitPay Hero Animation | Three.js + Framer Code Component by Ahmed AlsayedHitPay Hero Animation | Three.js + Framer Code Component by Ahmed Alsayed
Built with Framer

HitPay Hero Animation | Three.js + Framer Code Component

Ahmed Alsayed

Ahmed Alsayed

The Brief

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 Animation Sequence

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.

The Approach

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 Result

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.
Desktop view
Desktop view
Mobile view
Mobile view
Like this project

Posted Apr 17, 2025

Built a custom Three.js cloud animation system for HitPay's website POC in Framer, featuring dynamic cloud dissipation on load, layered hero reveals, and scroll-triggered dashboard transitions.

Likes

1

Views

60

Timeline

Jun 6, 2024 - Jul 6, 2024

Clients

HitPay