Loading…
Live page · scroll inside
Premiumfood/meal delivery · light · landing page · gsap · lenis · html
Fenwick Kitchen
A dietitian-planned lunch delivery site in oat white, ink, tomato and herb green: a chunky rounded headline beside a dietitian's ruled note, a plate builder where − / + steppers in hand portions (palm, fist, thumb) re-slice a top-view plate by volume and fill four macro rings against a chosen goal with a calorie figure and a plain verdict, the week's five lunches as a ruled menu, a dietitian's quote and three plans.
What's inside
- 01Rounded wordmark barTurns translucent after 80 px.
- 02Warm headline with dietitian lineH1 lines rise from masks; facts rise in turn.
- 03Plate builder with macro ringsEach portion change tweens the wedges to their new angles (0.6 s) and the rings to their new share of the goal; rings over 110 % turn the second accent; the calorie figure rolls; the verdict line updates.
- 04This week's menuRows rise in turn.
- 05Dietitian pull quoteLines rise from masks.
- 06Three plans in open columnsColumns 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.
