Live page · scroll inside

Premiumlaw firm · light · landing page · gsap · lenis · html

Verdict

A law-firm site in ivory and oxblood whose headline phrases sit under redaction bars that slide away as you scroll, with an engraved seal that strokes itself in for the preloader, the process block and the sealed reply of the consult form.

What's inside

01
Seal preloader
The seal's rings and scales stroke in over 1.4 s, the name fades up, then the slab lifts away and the hero intro begins.
02
Fixed bar with seal mark
Turns translucent ivory with a blur after 80 px of scroll; link underlines draw on hover.
03
Redacted headline hero
Lines rise from masks; the redaction bars cover the phrases at first, then slide off to the right as the hero scrolls away (scrubbed), revealing 'the facts', 'in order' and 'on record'; the photo settles from 1.1 scale and the seal strokes in and turns 4°/s.
04
Practice areas list
Rows rise in with an 80 ms stagger; on hover the row's rule turns oxblood and the detail unfolds through grid-template-rows 0fr→1fr at 0.5 s; the index counts from 00 to its value when the list enters.
05
Record with redacted docket
Figures count up over 2 s on enter; docket rows rise in; each row's redaction bar slides off to the right 0.9 s after the row appears, staggered, revealing the matter.
06
Partner portraits
Each photograph unrolls from the bottom (clip-path inset) on enter with a 120 ms stagger; on hover the image desaturates to a duotone and the caption slides up 6 px.
07
Four-step process with seal
Pinned for 2.2 viewport heights; as the block scrubs, the seal strokes itself in from 0 to 100 % and the steps light up in turn (muted → ink) with a vertical oxblood progress rule beside them; on mobile the block is not pinned and the seal is already inked.
08
Request counsel form
Heading lines rise; the form card unrolls; the submit button fills left to right on hover; submitting swaps the card for a sealed 'Received' state with the seal inking in.
09
Minimal footer
None beyond link colour on hover.

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…

What's inside

Seal preloader

The seal's rings and scales stroke in over 1.4 s, the name fades up, then the slab lifts away and the hero intro begins.

Fixed bar with seal mark

Turns translucent ivory with a blur after 80 px of scroll; link underlines draw on hover.

Redacted headline hero

Lines rise from masks; the redaction bars cover the phrases at first, then slide off to the right as the hero scrolls away (scrubbed), revealing 'the facts', 'in order' and 'on record'; the photo settles from 1.1 scale and the seal strokes in and turns 4°/s.

Practice areas list

Rows rise in with an 80 ms stagger; on hover the row's rule turns oxblood and the detail unfolds through grid-template-rows 0fr→1fr at 0.5 s; the index counts from 00 to its value when the list enters.

Record with redacted docket

Figures count up over 2 s on enter; docket rows rise in; each row's redaction bar slides off to the right 0.9 s after the row appears, staggered, revealing the matter.

Partner portraits

Each photograph unrolls from the bottom (clip-path inset) on enter with a 120 ms stagger; on hover the image desaturates to a duotone and the caption slides up 6 px.

Four-step process with seal

Pinned for 2.2 viewport heights; as the block scrubs, the seal strokes itself in from 0 to 100 % and the steps light up in turn (muted → ink) with a vertical oxblood progress rule beside them; on mobile the block is not pinned and the seal is already inked.

Request counsel form

Heading lines rise; the form card unrolls; the submit button fills left to right on hover; submitting swaps the card for a sealed 'Received' state with the seal inking in.

Minimal footer

None beyond link colour on hover.

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.