Live page · scroll inside

Premiummusic education app/launch · light · landing page · gsap · lenis · html

Corda

A launch page for a practice app for string players, in paper white, ink, vermilion and slate blue: a headline over a ruled four-cell countdown with rolling seconds, a time-travel roadmap where a scrubber moves the date from today to April 2027 and each feature row turns Live as its date passes while an illustration panel draws the newest one (pitch trace, drone rings, bow-speed bars, practice minutes, a teacher's note on the score), a privacy statement with a definition list, a teacher's pull quote and two open plans.

What's inside

01
Wide wordmark bar
Turns translucent after 80 px.
02
Headline over ruled countdown
H1 lines rise from masks; the countdown cells rise in turn, then tick every second; the seconds digit rolls up.
03
Time-travel roadmap
Dragging the scrubber moves the date readout day by day; rows switch to Live as their date passes with a short highlight; the newest live feature is selected and its illustration draws in (strokes, bars rising); milestone buttons ease the scrubber to their date.
04
How it listens
Heading lines rise; rows rise in turn.
05
Teacher pull quote
Quote lines rise from masks.
06
Two plans side by side
Columns 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…

Corda

What's inside

Wide wordmark bar

Turns translucent after 80 px.

Headline over ruled countdown

H1 lines rise from masks; the countdown cells rise in turn, then tick every second; the seconds digit rolls up.

Time-travel roadmap

Dragging the scrubber moves the date readout day by day; rows switch to Live as their date passes with a short highlight; the newest live feature is selected and its illustration draws in (strokes, bars rising); milestone buttons ease the scrubber to their date.

How it listens

Heading lines rise; rows rise in turn.

Teacher pull quote

Quote lines rise from masks.

Two plans side by side

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