Live page · scroll inside

Premiumconsumer hardware/waitlist · light · landing page · gsap · lenis · html

Pocketfern

A pre-launch waitlist for a matchstick-sized plant soil probe, in paper white, ink, fern green and terracotta: a full-width headline over an email form and a live queue whose count ticks up as named people join, a seven-day moisture chart of one calathea with the three texts the probe sent, a referral ladder where each previewed friend lifts your marker 800 places up a 5,000-place rail into the batch-one band and unlocks perks, one tester quote and a figure-led spec sheet.

What's inside

01
Wordmark and join pill
Turns translucent after 80 px.
02
Headline over form and live queue
H1 lines rise from masks; the count rises from 0; every 3.2 s someone joins: the count steps up by one to three and the ticker line slides up to the new name.
03
A week of one plant
The line draws left to right on entry; markers pop in after it; text rows rise in turn.
04
Referral ladder
Each friend moves you up 800 places: the marker climbs the ladder (transform only, 0.9 s), your place counts down, and the next perk row unlocks with a short highlight; crossing into the batch-one band tints the marker.
05
Single tester quote
Quote lines rise from masks.
06
Spec sheet
Figures count up; rows rise in turn.
07
Minimal 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…

Pocketfern

What's inside

Wordmark and join pill

Turns translucent after 80 px.

Headline over form and live queue

H1 lines rise from masks; the count rises from 0; every 3.2 s someone joins: the count steps up by one to three and the ticker line slides up to the new name.

A week of one plant

The line draws left to right on entry; markers pop in after it; text rows rise in turn.

Referral ladder

Each friend moves you up 800 places: the marker climbs the ladder (transform only, 0.9 s), your place counts down, and the next perk row unlocks with a short highlight; crossing into the batch-one band tints the marker.

Single tester quote

Quote lines rise from masks.

Spec sheet

Figures count up; rows rise in turn.

Minimal 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.