Live page · scroll inside

Premiumsport/mobile app · light · landing page · gsap · lenis · html

Laneline

A swimming app's landing page in pool white, deep navy, pool blue and lane-rope orange: a huge three-word headline with store buttons and figures over two dashed lane ropes that draw in, a pinned tour where scrolling moves one phone through a set list, a live length counter with a swimmer marker running the lane, strokes per length with the weak length flagged and a week of distance bars, a feature index, a coach's quote and two plans.

What's inside

01
Wordmark and get-the-app pill
Turns translucent after 80 px.
02
Lane-rope headline
H1 lines rise from masks; the lane ropes draw in from the left; figures count up.
03
Pinned phone tour
On desktop the band pins for three viewport heights and scroll moves through the four screens: each slides up and fades in over the last, the length counter runs from 1 to 32 while the swimmer marker goes back and forth along the lane, stroke bars grow, week bars rise; the step list follows. Below 900 px or with reduced motion the step buttons switch screens instead.
04
Feature index
Rows rise in turn.
05
Coach pull quote
Lines rise from masks.
06
Two plans and download row
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

Free♥ 0

Beacon

Feature flags

Template

Premium♥ 0

Dewlight

home cleaning service

Template

Loading…

Laneline

What's inside

Wordmark and get-the-app pill

Turns translucent after 80 px.

Lane-rope headline

H1 lines rise from masks; the lane ropes draw in from the left; figures count up.

Pinned phone tour

On desktop the band pins for three viewport heights and scroll moves through the four screens: each slides up and fades in over the last, the length counter runs from 1 to 32 while the swimmer marker goes back and forth along the lane, stroke bars grow, week bars rise; the step list follows. Below 900 px or with reduced motion the step buttons switch screens instead.

Feature index

Rows rise in turn.

Coach pull quote

Lines rise from masks.

Two plans and download row

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.