Live page · scroll inside

Premiumwealth management · light · landing page · gsap · lenis · html

Halberd

A private-wealth site in ivory, ink, deep teal and brass: a very large serif headline over an engraved growth curve, a projection chart you steer with portfolio buttons and three sliders (likely range band, a 0.6 % line against a dashed 1.5 % line, milestone marks, a hover crosshair, the money the lower fee leaves with you), a partners' letter with a drop cap, a tiered fee table that prices your starting sum, advisers in a ruled grid and a regulatory footer.

What's inside

01
Engraved bar
Turns translucent after 80 px.
02
Serif headline over an engraved curve
H1 lines rise from masks; the curve draws left to right over 2.4 s and the end point fades in.
03
Steerable compound-growth chart
Every control change tweens the inputs and redraws the chart each frame, so lines bend into their new shape over 0.6 s; the range band breathes with the portfolio's volatility; the headline figure and fee difference count; the line draws on first view; the crosshair follows the pointer year by year.
04
Partners' letter
Paragraphs rise in turn.
05
Tiered fee table with your fee
Rows rise; the yearly fee counts to the value for the current starting sum.
06
Advisers in a ruled grid
Columns rise in turn.
07
Arrange a call
Rises on enter.
08
Regulatory 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…

Halberd

What's inside

Engraved bar

Turns translucent after 80 px.

Serif headline over an engraved curve

H1 lines rise from masks; the curve draws left to right over 2.4 s and the end point fades in.

Steerable compound-growth chart

Every control change tweens the inputs and redraws the chart each frame, so lines bend into their new shape over 0.6 s; the range band breathes with the portfolio's volatility; the headline figure and fee difference count; the line draws on first view; the crosshair follows the pointer year by year.

Partners' letter

Paragraphs rise in turn.

Tiered fee table with your fee

Rows rise; the yearly fee counts to the value for the current starting sum.

Advisers in a ruled grid

Columns rise in turn.

Arrange a call

Rises on enter.

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