Live page · scroll inside

Freebicycle brand · light · landing page · gsap · lenis · html

Spoke

A steel bicycle brand site on white: a 32-spoke SVG wheel in the hero that spins with scroll velocity and shows the equivalent speed, a build-your-bike configurator (frame colour, groupset, wheels, bars, size) that recolours and redraws an SVG side view with a live total, a geometry table that follows the chosen size, a ride gallery and a test-ride form.

Placeholder photos by Mathias Reding and Judit Murcia on Unsplash. Replace them with your own before launch.

What's inside

01
Spoke preloader
The wheel accelerates through two turns with power2.in, the name fades, the slab lifts.
02
Fixed bar with a hub mark
Turns translucent after 80 px; underlines draw.
03
Velocity wheel hero
The wheel idles at 12°/s and adds scroll velocity (rotation += velocity × 0.35 per frame, decaying), so fast scrolling spins it hard and it coasts down; the speed readout shows the equivalent km/h; spokes blur slightly with speed (opacity by velocity); the h1 lines rise.
04
Build-your-bike configurator
Changing colour tweens the frame stroke; a wheelset choice redraws rim depth with a short spin; the bar toggle morphs the handlebar path; the total counts between values; the bike nods 1° when anything changes.
05
Geometry table
Switching a model crossfades the numbers; the chosen size column highlights and follows the size picked in the builder.
06
Ride gallery
Photos unroll with a stagger and drift at different speeds; hovering shows the caption.
07
Dealers and test rides
Chips rise; selecting a city updates the address line; submit shows a thank-you.
08
Minimal footer
None.

Utility pages in the same file: 404 · Style guide · Password · Changelog

How to use it

From prompt to a live page.

01
Walk the page
The preview is the real template: loader, scene, scroll choreography. Scroll inside it or open it full-screen.
02
Pick a palette
Token sets re-tint the whole page live, scene included. The prompt carries the one you chose.
03
Pick your stack
Single HTML, Next.js, React, Vue, Astro, WordPress blocks, Shopify sections or a Webflow build guide.
04
Copy the prompt
It carries the art direction, the tokens, the motion system and every section's layout, motion and content, in order.
05
Make it yours, then iterate
Swap copy and images first, keeping the structure. Then refine section by section rather than re-running the whole prompt.

More templates

Free♥ 0

Abacus

Accountancy practice

Template

Premium♥ 0

Kittiwake Air

travel/regional airline

Template

Premium♥ 0

Laneline

sport/mobile app

Template

Free♥ 0

Beacon

Feature flags

Template

Loading…

Spoke

Placeholder photos by Mathias Reding and Judit Murcia on Unsplash. Replace them with your own before launch.

What's inside

Spoke preloader

The wheel accelerates through two turns with power2.in, the name fades, the slab lifts.

Fixed bar with a hub mark

Turns translucent after 80 px; underlines draw.

Velocity wheel hero

The wheel idles at 12°/s and adds scroll velocity (rotation += velocity × 0.35 per frame, decaying), so fast scrolling spins it hard and it coasts down; the speed readout shows the equivalent km/h; spokes blur slightly with speed (opacity by velocity); the h1 lines rise.

Build-your-bike configurator

Changing colour tweens the frame stroke; a wheelset choice redraws rim depth with a short spin; the bar toggle morphs the handlebar path; the total counts between values; the bike nods 1° when anything changes.

Geometry table

Switching a model crossfades the numbers; the chosen size column highlights and follows the size picked in the builder.

Ride gallery

Photos unroll with a stagger and drift at different speeds; hovering shows the caption.

Dealers and test rides

Chips rise; selecting a city updates the address line; submit shows a thank-you.

Minimal footer

None.

How to use it

From prompt to a live page.

Walk the page

The preview is the real template: loader, scene, scroll choreography. Scroll inside it or open it full-screen.

Pick a palette

Token sets re-tint the whole page live, scene included. The prompt carries the one you chose.

Pick your stack

Single HTML, Next.js, React, Vue, Astro, WordPress blocks, Shopify sections or a Webflow build guide.

Copy the prompt

It carries the art direction, the tokens, the motion system and every section's layout, motion and content, in order.

Make it yours, then iterate

Swap copy and images first, keeping the structure. Then refine section by section rather than re-running the whole prompt.