Fintech · Light

Cobalt

A cloud of 3D papers — invoices, receipts, tax slips — spins over a flat cobalt blue and, with the scroll, sorts itself out: it flies, stacks and arranges around the product, with huge white numbers telling the promise.

Palette

--cobalto#1A38CC
main background of the colored sections, numbers on light
--cobalto-escuro#13238F
solid buttons on light, hover
--branco#FFFFFF
headlines and numbers on cobalt, light buttons
--bg-claro#EEEEF3
interleaved light sections
--papel#F4F4F7
color of the 3D papers and price cards
--texto#12142B
text on light
--texto-2#5E6285
captions on light (5.1:1) / rgba(255,255,255,.72) on cobalt

Typography

Display: rounded geometric grotesque in extrabold weight, mixed case, tracking -0.035em, line-height 0.95, titles on 2–3 lines — clamp(2.4rem, 4.6vw, 4.2rem) — suggestions: Plus Jakarta Sans 800 / Outfit 800
Giant numbers: same family 800, 12–16vw, tabular-nums ("00:00" timer, "day 00", prices)
Body: same family 400–500, 13–15px, line-height 1.45
Support/labels: 10px 500 with an index ("01 · issue Cobalt"); monospace in a thermal-printer style for text inside the receipts — suggestions: IBM Plex Mono / Space Mono
Treatments: circular "paid" stamp in blue outline on the papers; counting timer; testimonials printed on a receipt with a serrated edge.

Sections

Nav — tiny lowercase logo with a period on the left, 3 small links in the center, white pill button with blue text on the right.
Hero — flat cobalt; 3-line title on the left with a paragraph; cloud of 3D papers spinning on the right and invading the title; footer with a micro-offer on the left and "scroll to organize ↓" on the right.
Organization — with the scroll, the papers fly and snap into an orderly grid (document mosaic) while a title + 3 check items appear.
Transition to light — the paper grid exits through the top and the light section rises.
Feature 1 (issue) — light background: giant blue timer counting 00:00→00:19 on the left, 2-line title and text; phone mockup with a form on the right.
Feature 2 (pay tax slip) — cobalt: title on the left, giant "day NN" number on the right; horizontal row of monthly slips that, as you scroll, receive "paid" stamps one by one.
Feature 3 (cash flow) — light: title + text + mini-statement (in/out/left) and papers stacking alongside.
Testimonials / counters — cobalt: large title and a long receipt with mono testimonials that descends and sways.
Pricing — 2 paper cards held with a clip, slightly rotated, one white and one translucent light blue.
Final CTA + footer — a single giant centered phrase, pill button; one-line footer.

Motion and interaction

Paper cloud: load → ~60 curved planes (papers) slowly swirl in a vortex; cursor pushes/repels; Three.js/R3F with instancing.
Papers get organized: scroll scrub → each paper interpolates from a chaotic position to a grid cell (position + rotation + slight curvature); GSAP ScrollTrigger pin.
Timer: on enter → counter 00:00→00:19 in 1.9s, steps; the phone button "blinks" at the end.
Stamps: horizontal scrub → the row slides and each slip gets a stamp with scale 1.6→1 and rotate -12°.
Descending receipt: scrub → receipt y -100%→0 with a sway (rotate ±2°).
Price cards: on enter → drop from above with rotation and settle (back.out).
Lenis for smooth scrolling.

Components

Pill button: 30px, white background, cobalt 11px 700 text; dark-cobalt variant on light; white outline variant.
Check item: 12px line check icon + 13px white text.
Phone mockup: 220×440, 32px radius, 6px white border, white screen with a form (32px inputs, dark-cobalt button).
Monthly slip: 86×120 paper card, month label, gray lines, SVG barcode at the bottom.
Stamp: 48px circle, 2px double cobalt border, "paid" text 12px 700, rotate -12°.
Receipt: 280px wide, paper background, 10px mono text, serrated bottom edge (mask with an 8px zigzag).
Price card: paper with a metal clip at the top, 14px name, 32px 800 price, 3 items at 11px.