Live page · scroll inside

Premiumtherapy practice · light · landing page · gsap · lenis · html

Linden

A therapy-practice site in lilac grey and terracotta: a breathing pacer (60-tick ring, phase arc, expanding inner ring, three patterns, pause) sets the hero's rhythm by lifting the headline and warming the ground on each in-breath; a list of concerns that open one at a time, a single pull quote with three open steps, therapists shown by the days they work, sliding-scale fees and a short contact form with a crisis note.

What's inside

01
Quiet bar
Turns translucent after 80 px.
02
Breathing pacer hero
The inner ring scales 0.62 → 1 on the in-breath, holds, and returns on the out-breath; the progress arc fills once per phase; the h1 lines lift 4 px on the in-breath and settle on the out-breath; the hero ground tints by up to 7 % accent; pattern changes restart the cycle; pause freezes everything.
03
What we help with
Words rise with a stagger; opening a concern fades its note in and turns the plus into a minus.
04
How it works, with one quote
Quote lines rise from masks; paragraphs rise in turn.
05
Therapists by day
Rows rise; filled days pop in with a short stagger.
06
Sliding-scale fees
Rows rise in turn.
07
Gentle contact form
Fields rise; the confirmation replaces the button text.
08
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…

Linden

What's inside

Quiet bar

Turns translucent after 80 px.

Breathing pacer hero

The inner ring scales 0.62 → 1 on the in-breath, holds, and returns on the out-breath; the progress arc fills once per phase; the h1 lines lift 4 px on the in-breath and settle on the out-breath; the hero ground tints by up to 7 % accent; pattern changes restart the cycle; pause freezes everything.

What we help with

Words rise with a stagger; opening a concern fades its note in and turns the plus into a minus.

How it works, with one quote

Quote lines rise from masks; paragraphs rise in turn.

Therapists by day

Rows rise; filled days pop in with a short stagger.

Sliding-scale fees

Rows rise in turn.

Gentle contact form

Fields rise; the confirmation replaces the button text.

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.