Creative studio · Light

Ink

The cursor drags thick black ink across white paper and, inside the stain, the studio's name appears in red-chrome balloon-inflated letters — then the page plunges into a gallery black with inflatable objects, loose letters with physics and cinematic case studies.

Palette

--bg#F9F9F9
white background of the hero
--preto#080808
ink, wordmark, dark sections
--moldura#171719
outer border that wraps the rounded panels
--vermelho#E3241C
inflated letters, balloon objects, active marker
--cromo#C9CACD
silver balloons, highlights
--texto#FFFFFF
text on black
--texto-2#8C8C8C
small mono and captions on black (5.9:1)
--texto-claro-2#6B6B6B
small mono on the hero's white (5.1:1)

Typography

Display: wide extra-bold grotesque (heavy/black), uppercase for the edge-to-edge wordmark, tracking -0.03em — clamp(6rem, 20vw, 20rem); section titles in mixed case 800 clamp(2rem, 4vw, 3.6rem) — suggestions: Archivo Black / Inter 900
Body: neutral grotesque 400–500, 13–15px — suggestions: Inter / Geist
Support/labels: monospace 9–10px uppercase, tracking 0.06em, in parentheses or with "→" ("(IDEAS WITH AIR INSIDE)") — suggestions: JetBrains Mono / Space Mono
Treatments: two-layer wordmark (flat black and an inflated embossed red version revealed by the ink mask); loose letters with physics scattered around; case-study title with wide tracking (0.4em) in a thin serif/grotesque over a photo; "s°" symbol as the logo.

Sections

Nav — symbol logo top left, "MENU +" top right in mono; small 2-line phrase right below the logo; list of services in mono at the top right.
Hero (white panel with rounded corners inside a dark frame) — giant black wordmark in the central band; the cursor paints viscous black ink with splatters and, inside the ink, the wordmark turns into red inflated letters; footer with a black pill button "book a chat", location in the center and socials on the right in mono.
Manifesto (black panel) — inflatable objects (silver cloud, red lightning bolt) floating; mono label; large 3-line phrase rising.
Letters with physics — word broken into white letters that fall, bounce and scatter across the black screen; mono labels in the corners.
Work — asymmetric grid of case studies (images of different sizes) with a mono caption and a phrase; CTA "see the featured case ↓".
Featured case — full-bleed photo/video with a spaced name; zoom-out until the image becomes a screen inside a concrete room; large caption below.
Process — long phrase at the top; large photo of an inflatable installation; small object on the side; mono caption.
Services — 2-line title on the left; list of services on the right with a mono note.
CTA + footer — 2-line title, 2 mono outline buttons, socials; giant white wordmark cropped at the bottom.

Motion and interaction

Revealing ink: cursor → fluid/metaball simulation that leaves a trail with mass (thins and drips, splatters), used as a mask between the black wordmark and the red inflated wordmark; WebGL (fluid shader / ping-pong FBO) or 2D canvas with metaballs.
Inflated letters: rendered in 3D (extruded text with a glossy red material and balloon normal map) or a pre-rendered image, visible only inside the mask.
Shrinking panel: scroll → hero becomes a card with growing margin and radius (inset 0→12px, radius 0→16px) while the black panel rises over it (sticky stacking).
Floating inflatables: continuous + cursor → objects sway (y ±10px, rotate ±4°) and move away from the cursor.
Letters with physics: on enter → letters fall with gravity and collide (Matter.js) and can be dragged.
Case zoom-out: scroll scrub → full-bleed image scales 1→0.45 and reveals the room around it (pin).
Phrases rise: lines with a yPercent 100→0 mask.
Lenis across the whole page.

Components

Frame: body with a --moldura background and panels with margin 12px, radius 16px.
Pill button: 26px, black background (on light) or white outline (on dark), 9px uppercase mono text + "→".
Mono label: 9px uppercase in parentheses.
Case card: image with no radius, mono caption "02 — name · year" + 12px phrase.
Inflatable object: PNG/3D with specular highlight, no shadow.
Service row: 13px text, 28px height, no bullets.