Crypto brokerage · Light

Eagle

Old-bank heraldry meets crypto: a 3D chrome eagle crosses the page over pale sea-green and absolute black, enormous uppercase didones, and metallic coins spinning in a ring around the letters of the name.

Palette

--agua#C1E7E8
sea-green background of the opening and highlight sections
--preto#000000
dark sections, buttons, shields
--branco#FFFFFF
light vault sections, text on black
--tinta#0A0A0A
headlines on light
--texto-2#4F5858
captions, spaced uppercase labels (5.5:1 on --agua; #8A9494 on black)
--cromo#DCEEEF
eagle shine and metallic highlights
--cobalto#3A3F9E
coins and accent of the metrics

Typography

Display: high-contrast didone serif, uppercase, regular weight, tracking -0.01em, line-height 0.9 — clamp(3rem, 8vw, 8rem); giant numbers in the same style — suggestions: Playfair Display 400 / Bodoni Moda 400
Body: neutral grotesque 400, 13–15px, line-height 1.45 — suggestions: Inter / Instrument Sans
Support/labels: grotesque 9–10px uppercase with 0.22em tracking (metric and audience labels), metric numbers in serif 18–24px
Treatments: letters of the name spread across the screen width with the emblem in place of one of them; giant year with the eagle between the digits; stacked word cropped by the bottom edge; heraldic shields as cards.

Sections

Intro — black screen: the name's didone letters appear spaced out with the eagle emblem between them, then the screen opens onto the sea-green.
Nav — small emblem in the top left corner, "ENTER ↗" on the right; fixed bottom menu in two central black boxes (current section + ☰ menu).
Hero — sea-green; uppercase didone title on 3 lines, centered; 3D chrome eagle centered overlapping the base of the title; spaced side labels; "assets under custody" metric with mini-bars at the bottom left; paragraph and black button at the bottom right.
Foundation — centered paragraph at the top; giant black year with the eagle taking the place between the digits.
Services (black) — constellation of thin lines and diamonds; stacked sea-green didone word rising from the base; services with a shield icon, serif title, text and spaced uppercase link; metrics ticker at the base.
Transition — gray→white gradient.
Coins — white; spaced letters of the stablecoin's name and a ring of 3D cobalt coins spinning around them.
Featured coin — one large spinning coin, large circulation number and a small backing table.
Vault — centered 2-line didone title, text + black button; 4 shields (black/sea-green) with asset, balance and a line icon.
CTA + footer (black) — 3-line sea-green didone title on the left, text and 2 buttons on the right; 4 contact columns; giant letters of the name cropped at the bottom with the eagle in the middle.

Motion and interaction

Letter intro: load → letters appear by mask with stagger, emblem spins to the front, the black curtain lifts (≈2s).
Traveling eagle: scroll scrub → the same chrome 3D model changes position/scale/rotation between sections (hero → between the year's digits → footer); Three.js with a metallic material and envMap; GSAP ScrollTrigger.
Eagle and cursor: cursor → damped ±10° rotation.
Constellation: scroll → grid lines draw themselves (stroke-dashoffset) and a glint runs along the segments.
Stacked word: scrub → word rises from the base with overflow hidden.
Coin ring: continuous + scroll → coins spin in an elliptical orbit around the letters, each rotating on its own axis; Three.js instanced.
Ticker: continuous marquee of the metrics (≈40s per cycle).
Shields: on enter → rise with stagger; balance counters.
Lenis across the whole page.

Components

Bottom menu: two 32px black boxes (140px and 80px), 9px white text, ☰ icon.
Black button: rectangle with 6px radius, 28px, 10px white text.
Light button (on black): white background, 6px radius; secondary with a dark outline.
Metric: 8px uppercase label + 18px serif value + composition mini-bars.
Service card: 24px outlined shield icon, 28px serif title, 10px text, 9px spaced uppercase link.
Vault shield: coat-of-arms shape (clip-path), 160×200, 9px name, 18px serif balance, 28px line icon.
Ticker: 8px uppercase labels + 10px values in columns.