Your Promise

No product to demo, only a story.

Before the site, the crew had only a crowdfunding page. That page could take a donation, but it couldn't make anyone care enough to give one. The site had to hold a visitor long enough for the story to land, then point them to a donate button.

It also had a lot to carry: a promo video, 58 behind-the-scenes photos, 36 crew profiles, merchandise, and separate donation paths for local and international backers. It had to work as well on a phone as on a desktop, and one developer had about two months to build it.

The crew also needed to know which calls to action worked, so donate, merch and contact clicks had to be tracked from the first day.

Let the scroll tell it.

• A
  Story driven by scroll position

  Titles, backgrounds and paragraphs fade with scroll progress. Each paragraph tracks its own scroll target along a keyframed opacity curve, smoothed with a spring, and the hero fades out as the story begins. The story scroll is shorter on mobile.

• B
  Film-strip reels off the render loop

  58 behind-the-scenes photos run in two reels moving in opposite directions. A per-frame motion value drives them and wraps them into a loop, so React doesn't re-render once per frame. At 768px and below they switch to plain horizontal scrolling.

• C
  3D flip crew cards

  36 profiles flip in 3D to reveal a bio. On desktop, hover is debounced by 200 ms and cancelled on unmount, which stops the cards flickering. On mobile a tap flips them, and headshots load only when a card scrolls into view.

• D
  Scroll-aware navigation

  A reusable waypoint between sections tracks which of seven nav targets is active. Nav links stagger in after the hero intro through chained animation controls, and on mobile they collapse into a full-screen menu.

• E
  Hand-built SVG instead of image files

  44 SVG components cover the illustrations and 24 icons. Several can be recoloured through props, and all of them animate and scale per breakpoint without a single image request.

Measured, and light where it counts.

• Typed conversion analytics. On top of page views, a wrapper limits custom events to four typed keys: local donate, international donate, merch and contact. A typo in an event name can't send data to a key nobody reads.
• Media on demand. The video player loads client-side only and autoplays muted once it scrolls into view. Every image ships as WebP.
• A responsive pass per section. Each section got its own responsive commit, from small screens up to 2xl.

A page people stayed on.

The site packs ten sections, 36 crew profiles, 58 behind-the-scenes photos and four tracked conversion events into one page. Visitors spent about 47 seconds engaged on average and fired 3,140 events across 164 users. Traffic came from direct visits, Google search, and a steady stream of referrals from the crowdfunding page.