Live page · scroll inside

Premiumspecialty coffee roaster · dark · landing page · gsap · lenis · html

Nightjar

A small coffee roaster's site in espresso black, cream and caramel: a display headline beside a circular cooling-tray photo that turns once every 40 seconds (with a pause button); then a roast-curve chart per coffee, where choosing a bean draws its temperature curve, dashed rate of rise and shaded development band with labelled turning point, yellowing, first crack and drop, and a scrubber reads time, temperature and rate of rise under the pointer or arrow keys; a subscription picker whose price card fills the coming Wednesdays you would receive coffee on; and a brew card with two photos.

Placeholder photos by Volodymyr Proskurovskyi, Patrick Fore and Yusuph jokaedi on Unsplash. Replace them with your own before launch.

What's inside

01
Night-bird wordmark bar
Turns translucent after 80 px.
02
Headline beside a turning cooling tray
Headline lines rise; the tray turns once every 40 s (linear) from first view; the pause button stops it.
03
Roast curve per bean
Choosing a bean fades the old curves, draws the new temperature curve over 1.2 s and the rate of rise after it, grows the development band and pops the markers in turn. Moving over the chart (or pressing the arrow keys) runs a scrubber along the curve with time, temperature and rate of rise.
04
Subscription picker with a delivery strip
Delivery dots fill in turn (0.04 s stagger) on each change; prices roll.
05
Brew guide with two photos
Photos unroll; recipe rows rise.
06
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…

Nightjar

What's inside

Night-bird wordmark bar

Turns translucent after 80 px.

Headline beside a turning cooling tray

Headline lines rise; the tray turns once every 40 s (linear) from first view; the pause button stops it.

Roast curve per bean

Choosing a bean fades the old curves, draws the new temperature curve over 1.2 s and the rate of rise after it, grows the development band and pops the markers in turn. Moving over the chart (or pressing the arrow keys) runs a scrubber along the curve with time, temperature and rate of rise.

Subscription picker with a delivery strip

Delivery dots fill in turn (0.04 s stagger) on each change; prices roll.

Brew guide with two photos

Photos unroll; recipe rows rise.

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.