Audiovisual production · Dark

Dailies

A black-and-white behind-the-scenes film stays pinned behind the entire page and only shows through holes cut into each section, as if the site were a sheet of paper laid over the screen.

Palette

--bg#0b0b0b
intro background and base behind the video
--papel#eae6e0
"sheet" that covers the video in the content sections
--texto-claro#f4f2ee
brand and text over the video
--texto-escuro#111111
headlines on paper, dark button
--texto-2#8c8780
captions, metadata
--acento#e0342b
"REC" dot and card hover (the interface's only touch of color)

Typography

Display: heavy grotesque, weight 800, uppercase for the brand and mixed case for titles, tracking -0.04em, line-height 0.9; brand at clamp(4rem,13vw,12rem) — suggestions: Archivo (800) / General Sans (Fontshare, 700).
Body: grotesque 400–500, 18–24px for studio statements, 11–12px for captions — suggestions: Inter / Geist.
Support/labels: mono 9px uppercase, tracking 0.16em, in brackets in the intro — suggestions: JetBrains Mono / Space Mono.
Treatments: the final "O" of the brand is a half-filled circle (moon/shutter); giant brand in the footer as a mask: the video plays through the letters.

Sections

Intro — black screen, three small clips stacked in the center doing a quick montage; mono labels in brackets on the sides (name / count 0–100).
Hero — full-bleed B&W video (set montage: camera, eye, focus, boom); giant white brand in the center; minimal nav (3 links on the left, outline reel pill + solid quote pill on the right); base with service type on the left and a data point on the right.
Studio sheet — paper covers the video; large phrase on 2–3 lines; a central rectangular hole shows the video; side microtexts in label/phrase pairs.
Work — grid of 3 vertical cards (project photos, in color); the middle card is a hole with a centered phrase; caption below with client and type · year.
Big window — full-bleed hole with a headline at the bottom left in dark gray.
Contact — paper: 2-line title on the left, contacts and pill on the right; giant brand at the bottom cut out, showing the video inside the letters.

Motion and interaction

Fixed montage: continuous → a
Holes: scroll → each section is paper with cut-outs (mask/clip or SVG with evenodd); the hole grows from 60% to 100% of the width as it centers.
Intro: load → count 0→100 in ~2.2s, stacked clips expand until they become the hero.
Brand: scroll → hero brand rises with 0.6 parallax and disappears behind the sheet.
Card hover: cursor → photo scales 1.04 and a red dot appears.
Tech: Lenis + GSAP ScrollTrigger + CSS mask.

Components

Outline pill: 1px border, 6px ▶ icon + 10px text.
Solid pill: white background (over video) / black (over paper), 10px text + arrow.
Hole: rectangular cut-out with no radius in the paper, revealing the fixed video.
Work card: 3:4 image, 11px caption + 8px mono metadata.
Mask brand: giant text with background-clip: text over the video.
Intro label: 9px mono in brackets.