Moto Card — A members-only card site built as a 3D product film
Moto Card is a members-only metal payment card. The site is closer to a product film than a landing page — a dark stage, a slowly revealed object, and a single application route at the end of it.
Challenge
A premium card is a commodity on paper — the value is entirely in how exclusive and well-made it feels. Photography alone flattens a metal card, and a conventional feature list would have put it in the same bracket as every mass-market rewards product.
Approach
We staged the card in 3D on a dark set and drove the reveal from scroll, so the object rotates and catches light as the visitor moves through the page. Entry is deliberately narrow: a single 'apply for access' action, with membership terms as the only competing link.
Building a stage, not a page
The whole site sits on near-black. A single plinth holds the card under directional light, and everything else — navigation, copy, the one call to action — is set at low contrast around it so nothing pulls focus from the object.
Restraint is the mechanism. Scarcity of elements on the page is what makes the product read as scarce.
Motion tied to scroll
The card is a real-time 3D object rather than a video loop, rendered with Three.js and sequenced with GSAP. Scroll position drives rotation and lighting, so the visitor controls the reveal and the product is examined rather than merely shown.
Because it is geometry rather than footage, the same asset serves every breakpoint and every colourway without re-rendering a new file.
An application-only front door
There is no signup form and no pricing table. One action — apply for access — and a membership link beside it. That is the entire conversion surface, and it does more for the positioning than any amount of copy about exclusivity would.
Build
The site is built in Webflow, with GSAP driving the motion timeline, Three.js rendering the card, and a smooth-scroll layer keeping the scroll-linked animation stable across browsers. Webflow keeps copy and imagery editable by the client without touching the animation code.
What shipped
- Real-time 3D card rendered with Three.js on a dark product stage
- Scroll-driven reveal sequenced with GSAP
- Single application-only conversion path
- Built in Webflow so content stays client-editable
Frequently asked
A metal card is judged on finish and weight, which flat photography loses. Rendering it in real time lets the visitor rotate it under moving light, and one asset covers every breakpoint and colourway.
Yes. The reveal is tied to scroll position rather than a fixed timeline, and the smooth-scroll layer keeps it stable across browsers; the geometry is the same asset at every screen size.
Because the product is application-only. A pricing table or signup form would contradict the positioning, so the entire conversion surface is a single apply action.
Inside the site
“The website feels more like a product experience than a normal landing page. The 3D card animation was a big part of what we wanted, and Sakura executed it beautifully.”