Marketing · Light

Creator

Magazine editorial with a flesh-and-blood digital 3D character: she walks in between giant serif letters, dissolves into a point cloud over dark wine, and the points reassemble into extruded typography, until everything becomes a flat invitation red.

Palette

--bg#EFEDE9
paper background of the hero and the "how it works" section
--accent#E91A24
character's outfit, buttons, entire final band
--wine#2D020B
dark background of the particles section
--wine-glow#7A0E22
radial light spots on the wine background
--text#141212
headlines and text on paper
--text-light#F7F1EE
headlines on wine/red
--text-2#6E6863
metadata, secondary nav (4.7:1 on --bg)
--line#D8D3CD
underlines, thin dividers

Typography

Display: high-contrast condensed serif (didone display) weight 200–300, normal case, tracking -1%, giant (clamp(120px, 22vw, 360px)) and section titles at clamp(48px, 6vw, 96px) broken into misaligned lines (one on the left, another on the right) — suggestions: Bodoni Moda (high opsz, 400) / thin Playfair Display SC; for the condensed look, "Instrument Serif"
Body: condensed text serif 400, 14–16px, line-height 1.2, in blocks of 2–3 lines — suggestions: Newsreader / Instrument Serif
Support/labels: small sans 9–10px, gray, and lists with a leading slash ("/ item") in a staircase — suggestions: Inter / Geist
Treatments: giant name where each letter enters separately and the character stands between the letters (layers in front/behind); title split into two offset lines; large serif numbers at the bottom of a section.

Sections

Nav — small serif wordmark + gray descriptor on the left; underlined "book" link on the right.
Hero — paper background; giant serif name centered; 3D character walks in from the right and stops between the letters, waves; serif support text at the bottom left, metadata below, small paragraph + red button at the bottom right.
Dissolve — the character turns into a point cloud while the paper background rises and gives way to wine with radial spots; serif title in two offset lines; footer with a note and a large number.
Points become text — particles scatter across the screen and recompose into extruded 3D letters (red/white/chrome) that rotate; staircase list on the left and serif paragraph on the right.
How it works (tunnel) — paper background with a pinkish haze; a giant word forms in the center and tilted vertical video/photo cards orbit in depth, passing by the camera; spaced red label above the word.
Final invitation — a red card with rounded corners grows to fill the screen; giant serif phrase split across both sides with the character in the middle, dissolving into strokes; text on the left and an email field in a light pill on the right.
Footer — thin line with credits and notices at 9px.

Motion and interaction

Walk-in entrance: load → rigged 3D model ("walk" → "idle" → "wave" animation) enters from x +40% to the center in ~2.5 s; letters of the name fade in with a stagger (the first arrives later, in gray).
Layers between letters: some letters sit in front of the character and others behind (two canvases/z-index).
Dissolve into points: scroll scrub → mesh vertices become points (shader with progress), scatter with noise; background interpolates paper → wine.
Points → 3D text: scroll scrub → particle positions interpolate to points sampled from a TextGeometry; at the end, the extruded mesh appears and rotates ±15° with the cursor.
Card tunnel: scroll scrub → cards advance along the z axis (from -2000 to +400), rotate slightly and vanish as they pass the camera; letters of the central word approach until they form the word.
Expanding red card: scroll → clip-path inset with radius 24px → 0; giant phrase enters from the sides.
Cursor: in the 3D sections, the character's head/gaze follows the pointer (lerp 0.08).

Components

Underlined link: 10px text with a 1px underline, 3px offset.
Red button: #E91A24 pill, white 10–11px text, 28px height.
Metadata block: "/ label — value" in 9px gray.
Staircase list: items with a leading slash, each indented 16px more.
Media card: 9:16 portrait with 10px radius, mono caption overlaid at the bottom, tilted ±8°.
Email field: light #F2EEEA pill, 64px height, centered serif text.
Split title: two lines, one left-aligned and one right-aligned.