Loading…
Live page · scroll inside
Freecircular/recycling · light · landing page · gsap · lenis · html
Ringfold
A business-recycling cooperative's site in chalk white, ink, cobalt and ochre: a very heavy two-word headline over a year's tonnage, a material loop where a token runs a five-stage ring (collect, sort, clean, remake, use) for aluminium, PET, glass, paper or textiles and each turn applies that material's loss to the share still in use, a three-step pickup row, a sample member report table and open bin prices.
What's inside
- 01Heavy wordmark barTurns translucent after 80 px.
- 02Heavy two-word headlineH1 lines rise from masks; the tonnage counts up; the rule draws from the left.
- 03Cycling material loopThe token travels the ring once every 10 s; as it passes a stage the node fills and the list moves its highlight; each full turn adds one to the loop count and applies the material's loss, so the share still in use falls (aluminium barely, textiles fast); switching material resets the count and crossfades the texts; the pause toggle stops the token.
- 04How pickups workSteps rise in turn.
- 05Sample member reportRows rise in turn; kilograms count up.
- 06Bin pricesRows rise in turn.
- 07Minimal footerNone.
Utility pages in the same file: 404 · Style guide · Password · Changelog
How to use it
From prompt to a live page.
- 01Walk the page
The preview is the real template: loader, scene, scroll choreography. Scroll inside it or open it full-screen.
- 02Pick a palette
Token sets re-tint the whole page live, scene included. The prompt carries the one you chose.
- 03Pick your stack
Single HTML, Next.js, React, Vue, Astro, WordPress blocks, Shopify sections or a Webflow build guide.
- 04Copy the prompt
It carries the art direction, the tokens, the motion system and every section's layout, motion and content, in order.
- 05Make it yours, then iterate
Swap copy and images first, keeping the structure. Then refine section by section rather than re-running the whole prompt.
