Creative studio · Dark

One-Bit

A 1-bit black-and-white universe: images become dithered point clouds, a sphere of light explodes into particles that write the title and a stream of dust descends the page stitching the sections together.

Palette

--bg#000000
absolute background
--surface#0B0B0B
plan and work cards
--text#F2F2F2
titles, particles, light button
--text-2#8C8C8C
descriptions and captions
--text-3#7A7A7A
minimal labels (4.9:1 on --bg)
--line#1F1F1F
card borders and dividers
--accent#FFFFFF
maximum brightness of the sphere and border of the highlighted plan

Typography

Display: geometric grotesque, light/regular weight (300–400), normal case, tracking -0.03em, line-height 1.0; hero at clamp(72px, 10vw, 150px), sections at clamp(32px, 3.6vw, 52px) — suggestions: Jost 300 / Outfit 300.
Body: same family 12–14px, gray.
Support/labels: 9–10px with a pixelated square marker before it ("▪ label"); occasional serif italic for a keyword within sentences (Instrument Serif Italic).
Treatments: hero words formed by particles and separated by the sphere; large light numbers; giant final wordmark made of dots with pixelated squares.

Sections

Loader — black screen with dots coming together into a sphere of light.
Nav — pixel icon + lowercase name on the left; 3 links and a small white button on the right.
Hero — two giant words on the sides separated by a luminous sphere resting on a dithered hand; short phrase with a serif italic word at the bottom left; two small buttons (light and dark).
How it works — the particle stream descends; 2-line title at the bottom left; list of 3 numbered steps with short text.
Services — title; 3 columns with a dithered image (eye, projector, symbol), numbered label, title, description and lead time.
Work — 3×2 grid of dark cards with dithered objects (helmet, face, shoe, jellyfish, horse), caption with client and a phrase in italic.
Numbers — dithered moon on the left; 2-line title and 4 large numbers in a 2×2 grid on the right.
Plans — centered 2-line title; 3 plan cards, the middle one with a light border and a badge.
CTA — centered 2-line title with buttons; dithered hand receiving a falling thread of particles.
Footer — 4 columns of links; giant particle wordmark with pixelated blocks.

Motion and interaction

Sphere exploding into a title: load/scroll → thousands of particles leave the sphere and rearrange into positions sampled from the hero text (offscreen canvas); WebGL Points with a shader.
Descending stream: scroll scrub → a river of particles descends diagonally between sections, linking hero → steps → services.
1-bit dither: shader → all images are rendered with ordered dither (Bayer 4×4/8×8) in black and white.
Cursor dispersion: mousemove → particles near the pointer are repelled and spring back.
Image reveal: on entering, the image forms from sparse to dense dots (dither threshold rises).
Lenis + GSAP ScrollTrigger: smooth scrolling and scrub.
Final wordmark: particles converge to form the name with blinking square blocks.

Components

Light button: white rectangle, 2px radius, pixel icon + 10px black text.
Dark button: 1px --line border, white text.
Pixel label: 4px square + 9px gray text.
Service card: frameless dither image, "01 · category" label, 14px title, 11px description, lead time with a dot.
Work card: --surface, --line border, dither image, 10px client + quote in serif italic.
Plan card: --surface, --line border; highlighted one with a white border and an inverted badge; light 24px price; list of 4 items; full-width button.
Number: light 36px + 2-line 9px caption.