Live page · scroll inside

PremiumGarden design studio · light · landing page · gsap · lenis · html

Sprout

A garden designer's site in linen, fern green and terracotta: an arched photo of a late-summer border beside a serif statement, then one illustrated border that moves through a whole year as you scroll or drag a month slider, with tulips in spring, an amelanchier that blossoms, leafs, turns scarlet and drops, perennials that grow, flower and go to seed, grasses that bleach to straw, a sun that climbs and sinks and frost in winter. Then two finished gardens with their key plants, a four-step process with fees and a green visit band.

Placeholder photos by Howard Walsh and Barney Goodman on Unsplash. Replace them with your own before launch.

What's inside

01
Fern bar
Solid after 80 px.
02
Photo left, statement right
The photo unrolls; statement lines rise.
03
A border through twelve months
As the section scrolls past, the border moves through the year from March to February: stems grow and are cut back, flowers open and go to seed, grasses turn from green to straw, the tree blossoms, leafs, turns scarlet and drops, the sun climbs and sinks, and frost settles in winter. Dragging the slider takes over and eases the scene to that month.
04
Two gardens
Cards rise; photos unroll.
05
How a garden happens
Rows rise in turn.
06
Visit band
Lines rise.
07
Footer
None.

Utility pages in the same file: 404 · Style guide · Password · Changelog

How to use it

From prompt to a live page.

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 templates

Free♥ 0

Abacus

Accountancy practice

Template

Premium♥ 0

Kittiwake Air

travel/regional airline

Template

Premium♥ 0

Laneline

sport/mobile app

Template

Free♥ 0

Beacon

Feature flags

Template

Loading…

Sprout

Placeholder photos by Howard Walsh and Barney Goodman on Unsplash. Replace them with your own before launch.

What's inside

Fern bar

Solid after 80 px.

Photo left, statement right

The photo unrolls; statement lines rise.

A border through twelve months

As the section scrolls past, the border moves through the year from March to February: stems grow and are cut back, flowers open and go to seed, grasses turn from green to straw, the tree blossoms, leafs, turns scarlet and drops, the sun climbs and sinks, and frost settles in winter. Dragging the slider takes over and eases the scene to that month.

Two gardens

Cards rise; photos unroll.

How a garden happens

Rows rise in turn.

Visit band

Lines rise.

Footer

None.

How to use it

From prompt to a live page.

Walk the page

The preview is the real template: loader, scene, scroll choreography. Scroll inside it or open it full-screen.

Pick a palette

Token sets re-tint the whole page live, scene included. The prompt carries the one you chose.

Pick your stack

Single HTML, Next.js, React, Vue, Astro, WordPress blocks, Shopify sections or a Webflow build guide.

Copy the prompt

It carries the art direction, the tokens, the motion system and every section's layout, motion and content, in order.

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.