Creative studio · Light

Tunnel

A tunnel of work thumbnails floats in depth over raw paper; the scroll passes through the tunnel and each project leaves the wall to become the opening of the case study, under a heavy grotesque wordmark and foliage-shadow light.

Palette

--bg#F3EFEC
raw paper background
--tinta#141414
wordmark, titles, solid button
--texto-2#6F6A65
metadata and captions (4.7:1 on --bg); the manifesto's "unread" state uses #B9B3AD
--acento#D0603A
terracotta: active row of the list, marker, hover
--verde#3F5E49
second brand tone for illustrations/states (occasional use)
--linha#DDD8D3
dividers of the project list and tracks
--branco#FFFFFF
chips and elevated surfaces

Typography

Display (wordmark): geometric extra-bold grotesque in lowercase, tracking -0.04em, with marked descenders; hero wordmark ~ 35vw, footer 100vw — suggestions: Satoshi Black (Fontshare) / Outfit 800
Titles: neo grotesque 500, mixed case, tracking -0.02em; case titles 64–80px; manifesto clamp(2rem, 4vw, 3.4rem) — suggestions: General Sans (Fontshare) / Inter Tight
Body: same family 400, 13–15px, line-height 1.45
Support/labels: 10–11px 400, gray, for year, discipline and city; "01 / 04" numbering
Treatments: manifesto with words that light up from gray to black with the scroll and image thumbnails inserted in the line of text; list names with the year on the left in tabular-nums.

Sections

Nav — small wordmark on the left; 3 white chips (projects, studio, contact) on the right.
Hero / tunnel — central 2-line phrase; dozens of work thumbnails scattered in depth (perspective) around it; giant wordmark in the bottom-left corner; "scroll to enter" microcopy and location/count in the bottom-right corner.
Cases in sequence — each project that leaves the wall becomes a full-bleed photo with a "0n / 04" counter at the top, large title in the bottom-left corner with a meta line above, 2-line description below and a black pill button "open case" on the right; thin progress bar at the base.
Manifesto — large text on 5–6 lines on the left, words lighting up with the scroll and embedded thumbnails; vertical timeline on the right with milestones.
Process — title on the left; pinned horizontal strip of images of the stages (sketch → build → system → application) with a numbered track below.
Project list — large title + filters as chips; table of rows (year | name | discipline | city); hover paints the row terracotta and shows a floating preview that follows the cursor.
Testimonial — centered quote on 3 lines with blurred thumbnails floating around it.
Contact + footer — question + black button on the left, underlined email and address in the center, socials on the right; 100vw wordmark at the base.

Motion and interaction

Tunnel of work: scroll scrub → camera advances in Z through image planes arranged in a ring/spiral; the near ones blur and leave the screen; Three.js (textured planes) or CSS 3D with perspective.
Project leaving the wall: end of the tunnel → a plane scales until it covers the viewport and becomes the case cover (FLIP), ~1s power3.inOut.
Case parallax: photo with scale 1.1→1 and y -6% while the case is pinned; title enters with a line mask.
Manifesto being read: scroll scrub → each word goes from --texto-2 to --tinta; inline thumbnails grow from 0 to 1.
Horizontal process: pin + scrub → strip x 0→-(width - 100vw); numbered track fills.
Preview on the list: hover → row terracotta background in 200ms; 180×220 image follows the cursor with lerp 0.12 and rotation proportional to speed (±8°).
Lenis across the whole page.

Components

Nav chip: 22px height, white background, 999px radius, 10px text.
"Open case" button: 24px black pill, 10px white text + "→".
Case cover: full-bleed photo, counter top left, 9px meta, 72px title, 11px description, 1px progress bar.
Project row: 48px height, grid 80px | 1fr | 1fr | 160px, 24px name, 11px meta, 1px divider.
Filter chip: 20px, active one black, inactive white.
Floating preview: 180×220, 4px radius, soft shadow 0 20px 40px rgba(0,0,0,.15).
Timeline: 1px vertical stroke with 10px text milestones connected by a curve.