Grid City
3DPRON° 0725 · Cloud and edge platform
Loading…
- Kind
- Template
- Industry
- Art toys and collectibles
- Mood
- PlayfulGlossyPastel
- Tone
- Light
- Built with
- three.jsGSAPLenisHTML
- Prompt
- 162 KB · html, next, react, vue, astro, wordpress, shopify, webflow
- Licence
- Commercial with Pro or Lifetime
What's inside
- 01
Unboxing preloader
The bar fills with load progress; it wipes up as the toy drops in.
- 02
Announcement bar
Static; the weekday follows the drop date.
- 03
Shop nav
Solid with a blur after 40 px; the cart pill opens the drawer.
- 04
Toy hero with a drop card
The toy drops in, waves and follows the pointer; the tag's swatches hop it into another colourway; the countdown ticks and reservations creep up.
- 05
Series grid
Each card dresses the toy in its colourway with a hop and a spin; cards lift on hover.
- 06
Turntable
The turntable turns slowly; a drag spins it with inertia; the picker hops the toy into a colourway.
- 07
Blind-box odds
Each Add button puts the item in the cart and opens the drawer.
- 08
Packaging
Reveals on entry.
- 09
Designer note
Counters count up on entry.
- 10
In the wild
Static.
- 11
Reviews
Reveals on entry.
- 12
Help
Native details; the plus turns into a close mark.
- 13
Drop list
The form answers inline.
- 14
Footer
Static.
- 15
Cart drawer
Slides in on any Add; 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: Bloop hero, the Coral Classic figure waving on a butter-yellow sweep by Tileio (Generated for Tileio (Gemini, from ops/immersive/bloop-prompts.md), Tileio), Bloop Mint Fresh cut-out (from the series still) by Tileio (Generated for Tileio (Gemini, from ops/immersive/bloop-prompts.md), Tileio), Bloop Coral Classic cut-out (from the series still) by Tileio (Generated for Tileio (Gemini, from ops/immersive/bloop-prompts.md), Tileio), Bloop Cream Soda cut-out (from the series still) by Tileio (Generated for Tileio (Gemini, from ops/immersive/bloop-prompts.md), Tileio), Bloop Powder Day cut-out (the coral figure recoloured) by Tileio (Generated for Tileio (Gemini, from ops/immersive/bloop-prompts.md), Tileio), Bloop Butter Up cut-out (the mint figure recoloured) by Tileio (Generated for Tileio (Gemini, from ops/immersive/bloop-prompts.md), Tileio), Bloop blind box beside the figure by Tileio (Generated for Tileio (Gemini, from ops/immersive/bloop-prompts.md), Tileio), Bloop visor macro by Tileio (Generated for Tileio (Gemini, from ops/immersive/bloop-prompts.md), Tileio) and Bloop series, three colourways in a row on powder blue by Tileio (Generated for Tileio (Gemini, from ops/immersive/bloop-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
Kiln
FREEN° 0027 · Ceramics / E-commerce
Beacon
FREEN° 0673 · Feature flags
Folio Illus
FREEN° 0686 · Illustrator portfolio
Markwell
PRON° 0694 · software/product launch
Tuck & Tail
FREEN° 0704 · pets/treat subscription
Field Day
PRON° 0020 · summer festival
Metaballs
PRON° 0067 · marching cubes
Grid City
3DPRON° 0725 · Cloud and edge platform