Loading…
Live page · scroll inside
Freearborist and tree surgeons · dark · landing page · gsap · lenis · html
Pollard
A tree surgeon's site laid out like a natural-history plate on a near-black moss ground: a serif headline beside a tall photo of a veteran oak; then a felled oak's cross-section generated from 93 years of ring widths, where pointing or dragging over the wood dates the ring under the pointer, lights its band, turns a reading needle to it and tells the year's story (the 1976 drought, the 1990 storm, the wet summer of 2007), with a ring-width chronology chart under it that selects the same year; then six services with figure numbers and prices, a survey method beside a parkland oak, and a storm call-out band over a canopy photo with counters.
Placeholder photos by Peter Herrmann, Ben Marler and Melissa on Unsplash. Replace them with your own before launch.
What's inside
- 01Pollard-mark wordmark barTurns solid with a hairline after 80 px; link underlines grow with scaleX.
- 02Headline beside a veteran oakHeadline lines rise from masks; copy, photo and credentials rise in turn.
- 03Ring reader with a chronology chartRings appear from the pith out, then the needle walks to 1976. Pointing or dragging reads the ring under the pointer; the chart selects by year.
- 04Figure-numbered service listRows rise in turn; hovering draws a lichen rule across the top of the row.
- 05Survey method beside a parkland oakSteps rise in turn; the 1 in 5 counter runs.
- 06Storm call-out over the canopyCopy and counters rise; counters run from zero.
- 07Single-line 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.
