Live page · scroll inside

Premiumlogistics/freight forwarding · light · landing page · gsap · lenis · html

Brannock

A cold-chain freight forwarder's site in harbour white, ink, ocean blue and container yellow: a towering condensed headline over a ruled figure strip, a pinned voyage where scrolling moves one reefer container from San Antonio to a Dutch cold store over 24 days (ship along the route, stations filling, the box's temperature line drawing inside its band with one flagged excursion, log entries turning current, ETA counting down), a services index, an importer's quote and a quote form.

What's inside

01
Condensed wordmark bar
Turns translucent after 80 px.
02
Condensed headline over figure strip
H1 lines rise from masks; figures count up.
03
Scroll-driven reefer voyage
Scrolling through the pinned band (three viewport heights) moves the day from 0 to 24: the ship slides along the route path, passed stations fill, the temperature line reveals up to that day, the excursion marker appears on day 9, log entries switch from waiting to done with the current one highlighted, and the ETA counts down.
04
Services as a ruled index
Rows rise in turn.
05
Importer pull quote
Lines rise from masks.
06
Quote request form
Form 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…

Brannock

What's inside

Condensed wordmark bar

Turns translucent after 80 px.

Condensed headline over figure strip

H1 lines rise from masks; figures count up.

Scroll-driven reefer voyage

Scrolling through the pinned band (three viewport heights) moves the day from 0 to 24: the ship slides along the route path, passed stations fill, the temperature line reveals up to that day, the excursion marker appears on day 9, log entries switch from waiting to done with the current one highlighted, and the ETA counts down.

Services as a ruled index

Rows rise in turn.

Importer pull quote

Lines rise from masks.

Quote request form

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