Loading…
Live page · scroll inside
Freeevents/webinar · light · landing page · gsap · lenis · html
Fieldnote Live
A free online session page for a user-research tool, in notebook cream, ink, teal and rust: a slab-serif headline beside a date slab that shows the session in the visitor's own time zone, a time-zone picker that slides the three-hour session block along a 24-hour strip with shaded night hours (splitting it across midnight) and re-times a six-item agenda rail, a typographic speaker list with monogram tiles and an open registration form.
What's inside
- 01Slab wordmark barTurns translucent after 80 px.
- 02Event headline with date slabH1 lines rise from masks; the date slab rises; the local time line fades in once it is worked out.
- 03Time-zone picker and agenda railPicking a city slides the session block along the strip to its local hours (transform only, 0.8 s) and the agenda's times roll to the new values; the sentence updates to say whether it falls in the working day, the evening or the night.
- 04Speakers as a typographic listRows rise in turn.
- 05Registration formForm rises; the confirmation replaces the button text.
- 06Minimal 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.
