Live page · scroll inside

Freeeducation/online course · light · landing page · gsap · lenis · html

Quiet Takes

A presale page for a five-week home-recording course, in warm white, ink, plum and slate blue: a very large serif headline over ruled course facts, a curriculum where choosing a week redraws the same spoken sentence's waveform as it would sound after that week (the hum floor sinks, echo tails dry up, pops shrink, clipping lifts, quiet phrases even out) with a reviewer score and noise floor rolling beside it, a teacher note, a student quote and a three-step early-bird price ladder.

What's inside

01
Serif wordmark bar
Turns translucent after 80 px.
02
Large serif headline with course facts
H1 lines rise from masks; columns rise in turn; seats count down to the remaining number.
03
Week-by-week waveform
Choosing a week tweens the waveform from its current state to the new one over 1 s (hum floor sinks, echo tails shorten, pop spikes shrink, clipped tops round off, uneven phrases even out), the readouts roll to the new score and floor, and the row opens to its lessons.
04
Teacher note
Paragraphs rise.
05
Student pull quote
Lines rise from masks.
06
Early-bird price ladder
Rows rise in turn; the current row's tint wipes in.
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…

Quiet Takes

What's inside

Serif wordmark bar

Turns translucent after 80 px.

Large serif headline with course facts

H1 lines rise from masks; columns rise in turn; seats count down to the remaining number.

Week-by-week waveform

Choosing a week tweens the waveform from its current state to the new one over 1 s (hum floor sinks, echo tails shorten, pop spikes shrink, clipped tops round off, uneven phrases even out), the readouts roll to the new score and floor, and the row opens to its lessons.

Teacher note

Paragraphs rise.

Student pull quote

Lines rise from masks.

Early-bird price ladder

Rows rise in turn; the current row's tint wipes in.

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.