Live page · scroll inside

Number 727, Template, Pro

Stride

A drop page in a light graded studio for a fictional running brand's plated road shoe, built from the owner's product stills instead of a 3D model: the cut-out shoe sits on a finely subdivided plane pushed out by its own depth map, so it has real relief, leans toward the pointer, floats and catches a key light that rakes the knit; the colourway swatches wipe the knit from one same-angle still to the next with a bright seam while the page tokens follow, and scroll carries the shoe into a pinned exploded view where it hands over to five cut-out parts (laces, knit upper, carbon plate, foam midsole, outsole) that spread apart with labels that follow them. Around it, the dense chrome of a shipped shoe shop: a drop banner with a live countdown, a nav with a bag, a buy card with price, rating, colourways, a size grid in four systems with stock per colourway, width and a delivery cutoff, an outsole band, a full spec sheet with ride meters, a fit scale and a comparison, a long-run band, reviews with filters, shipping and returns with a FAQ, the limited colourway's draw, a footer and a bag drawer; five studio backdrops re-tint the page and the shoe's light and shadow.

Unlock with Pro

PaletteStone

Token sets re-tint the page live; the prompt carries the one you chose.

Kind: Template
Industry: Running shoes
Mood: AthleticCleanPremium
Tone: Light
Built with: three.jsGSAPLenisHTML
Prompt: 138 KB · html, next, react, vue, astro, wordpress, shopify, webflow
Licence: Commercial with Pro or Lifetime

What's inside

01
Lacing-up preloader
The bar fills with load progress; it wipes up as the shoe settles in.
02
Drop banner
The countdown ticks; the weekday follows the drop date.
03
Shop nav
Solid with a blur after 40 px; the bag pill opens the drawer.
04
Shoe hero with a buy card
The shoe settles in, floats and leans toward the pointer; swatches wipe it to another colourway and move the page accents; sold-out sizes are hatched, low stock carries a dot; Signal turns the button into ‘Enter the draw’.
05
Exploded view
Scroll hands the shoe over to its parts and spreads them; list rows light up and labels follow their parts.
06
Outsole band
Stats count up on entry.
07
Tech specs
Reveals on entry.
08
Long-run band
Stats count up on entry.
09
Reviews
Filters show the matching cards and the count.
10
Shipping and returns
Native details; the plus turns into a close mark.
11
The Signal draw
The countdown ticks, entries creep up, the form answers inline.
12
Footer
Static.
13
Bag drawer
Slides in on Add to bag; Escape, the scrim or the close button shut it; focus stays inside while open.

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

3D assets: Stride One cut-out, Graphite colourway, three-quarter view by Tileio (Generated for Tileio (Gemini, from ops/immersive/stride-prompts.md), Tileio), The Stride One exploded into five parts on a pale studio sweep by Tileio (Generated for Tileio (Gemini, from ops/immersive/stride-prompts.md), Tileio), Stride One, Graphite, on a pale studio sweep by Tileio (Generated for Tileio (Gemini, from ops/immersive/stride-prompts.md), Tileio), Stride One, Bone, on a pale studio sweep by Tileio (Generated for Tileio (Gemini, from ops/immersive/stride-prompts.md), Tileio), Stride One cut-out, Signal colourway, same angle by Tileio (Generated for Tileio (Gemini, from ops/immersive/stride-prompts.md), Tileio), Bag thumbnail, Graphite by Tileio (Generated for Tileio (Gemini, from ops/immersive/stride-prompts.md), Tileio), Bag thumbnail, Bone by Tileio (Generated for Tileio (Gemini, from ops/immersive/stride-prompts.md), Tileio), Bag thumbnail, Signal by Tileio (Generated for Tileio (Gemini, from ops/immersive/stride-prompts.md), Tileio), Stride One cut-out, Bone colourway, same angle by Tileio (Generated for Tileio (Gemini, from ops/immersive/stride-prompts.md), Tileio), Depth map of the Graphite still (Depth Anything V2 small) by Tileio (Generated for Tileio (Gemini, from ops/immersive/stride-prompts.md), Tileio) and The Stride One exploded into five parts, cut out onto one atlas by Tileio (Generated for Tileio (Gemini, from ops/immersive/stride-prompts.md), Tileio).

How it works

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 like this

Bloop

3DPRO

N° 0726 · Art toys and collectibles

Grid City

3DPRO

N° 0725 · Cloud and edge platform

Abyss

3DFREE

N° 0724 · AI research assistant

Lanternfish

PRO

N° 0723 · scuba dive centre

Pollard

FREE

N° 0722 · arborist and tree surgeons

Fairlead

PRO

N° 0721 · sailing school

Abacus

FREE

N° 0670 · Accountancy practice

Kittiwake Air

PRO

N° 0671 · travel/regional airline

Loading…

Stride

What's inside

Lacing-up preloader

The bar fills with load progress; it wipes up as the shoe settles in.

Drop banner

The countdown ticks; the weekday follows the drop date.

Shop nav

Solid with a blur after 40 px; the bag pill opens the drawer.

Shoe hero with a buy card

The shoe settles in, floats and leans toward the pointer; swatches wipe it to another colourway and move the page accents; sold-out sizes are hatched, low stock carries a dot; Signal turns the button into ‘Enter the draw’.

Exploded view

Scroll hands the shoe over to its parts and spreads them; list rows light up and labels follow their parts.

Outsole band

Stats count up on entry.

Tech specs

Reveals on entry.

Long-run band

Stats count up on entry.

Reviews

Filters show the matching cards and the count.

Shipping and returns

Native details; the plus turns into a close mark.

The Signal draw

The countdown ticks, entries creep up, the form answers inline.

Footer

Static.

Bag drawer

Slides in on Add to bag; Escape, the scrim or the close button shut it; focus stays inside while open.

How it works

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.