Live page · scroll inside

Premiumsoftware/product launch · light · landing page · gsap · lenis · html

Markwell

A launch-day page for a browser highlighting tool, in cream, ink, tomato and highlighter yellow: a chunky headline with highlighter swipes, a rolling vote odometer with the live rank and launch-day clock, a board where one launch day plays out at fifteen minutes a second (each product's votes on its own curve, rows sliding as Markwell climbs from fifth to Product of the day while the launch thread fills), a keyboard-shortcut index, a maker's note and a one-day offer.

What's inside

01
Wordmark and launch pill
Turns translucent after 80 px.
02
Highlighted headline with live vote odometer
Highlighter swipes scale in from the left behind the phrases after the lines rise; the odometer digits roll as votes arrive; the rank changes with a short flip.
03
Live launch-day board
One launch day plays from 06:00 to midnight at fifteen minutes a second: each product's votes follow its own curve (early starters flatten, Markwell surges late), rows slide to their new rank by transform when one overtakes another, comments arrive at their times and slide in at the top; at midnight Markwell takes first and the row is marked Product of the day.
04
What it does
Rows rise in turn.
05
Maker's note
Lines rise; the highlight swipes in.
06
Launch-day offer
Block rises.
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…

Markwell

What's inside

Wordmark and launch pill

Turns translucent after 80 px.

Highlighted headline with live vote odometer

Highlighter swipes scale in from the left behind the phrases after the lines rise; the odometer digits roll as votes arrive; the rank changes with a short flip.

Live launch-day board

One launch day plays from 06:00 to midnight at fifteen minutes a second: each product's votes follow its own curve (early starters flatten, Markwell surges late), rows slide to their new rank by transform when one overtakes another, comments arrive at their times and slide in at the top; at midnight Markwell takes first and the row is marked Product of the day.

What it does

Rows rise in turn.

Maker's note

Lines rise; the highlight swipes in.

Launch-day offer

Block rises.

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.