Tech · Dark

Keystroke

A product page in a dark studio where a mechanical keyboard modeled in code spins, comes apart in layers, presses keys live as you type and ends up flipped onto its back, in an almost industrial presentation.

Palette

--bg#0A0A0D
near-black bluish studio background
--bg-2#16161A
panels and rails
--text#F3F2EF
headlines and numbers
--text-2#8F8E8A
descriptions and mono captions
--line#2A2A2E
guide lines of the exploded view and dividers
--cream#EBE3DA
light specs section and light keys
--cream-text#3A3936
text on the cream section (9:1)
--cream-text-2#5C5852
headers and captions on cream (5.6:1)
--alu#8A8C92
aluminum of the case (3D material)
--pcb#1F6B3A
green of the circuit board in the exploded view

Typography

Display: super-expanded grotesque, black weight, UPPERCASE, tracking 0, line-height 0.9, titles on 3 short lines with a period; clamp(40px, 6vw, 96px) — suggestions: Archivo (wdth 125, 900) / Syne 800.
Body: neutral grotesque 16–28px for section subtitles (normal case), 11–12px for body — suggestions: Inter / Geist.
Support/labels: mono 9–10px for status brackets "[ 00 / 75 ]", measurements on the guide lines, clock and indexes — suggestions: JetBrains Mono / IBM Plex Mono.
Treatments: enormous "000/total" counter in expanded display with rolling digits; large mono typing field with a caret; tabular numbers in measurements.

Sections

3D intro — keyboard without keycaps (board and switches) seen in perspective, with a mono counter "[ 00 / 75 ]" that climbs as the keycaps drop into place.
Nav — expanded logo on the left, 3 links, clock with city and time zone, white "buy +" button and menu.
Hero — assembled keyboard in perspective at the top; 3-line expanded title at the bottom left; short uppercase specs beside it; "[ scroll to explore ]" and indexes.
Touch — camera skimming low over the row of keys; 3-line subtitle and description.
Exploded view — the keyboard separates into 5 layers (keycaps, switches, plate, PCB, case) with guide lines and mono measurements; 2-line subtitle.
Switch — close-up of a keycap being lifted to reveal the switch; 3-line expanded title; "0.0 mm" readout and a force × travel graph.
Type — top-down view of the keyboard; large mono field where the visitor types and the matching keys press down in 3D.
Batch — keyboard flips and shows the underside of the case with engraving; 3-line title; large "000/300" counter with a bar.
Specifications — cream section: expanded 2-line title, keyboard in perspective, materials table in columns.
FAQ — expanded title on the left, accordion on the right.

Motion and interaction

Initial assembly: load → keycaps drop one by one (stagger) onto the switches, counter climbs from 00 to 75.
Scroll-guided camera: scroll scrub (GSAP ScrollTrigger + Three.js) → sequence of camera and object keyframes (rotation, position) per section.
Exploded view: scrub → 5 layers move apart along the Y axis with growing spacing; SVG guide lines draw and labels fade in.
Lifted keycap: scrub → a keycap rises 1.6 units and reveals the switch; neighboring keys blur (depth of field).
Real typing: keydown → the matching 3D keycap sinks 4 mm in 60ms and returns in 120ms; text appears in the field.
Flip: scrub → keyboard rotates 180° on X showing the underside.
Batch counter: digits roll like an odometer.
Light background: the specifications section switches the background to cream with a color transition.

Components

White button: 26px rectangle, 9px black mono text + "+".
Status in brackets: centered mono 9px "[ text ]".
Guide line: horizontal 1px --line with a 13px value and a 7px mono label below.
Readout: mono number 28px + small unit.
Force × travel graph: SVG with thin axes and a curve that draws itself.
Typing field: centered mono text 36px with a blinking caret.
Spec table: mono 10px columns with a gray header and dividers.
FAQ row: 12px question, "+" on the right, --line divider.