← BACK TO SITE

HOW THIS
WAS BUILT

A transparent teardown of the KIN—ETIK® showpiece: concept, art direction, AI image prompts, the signature motion techniques, and the three iteration passes that got it here. Everything designed, coded and art-directed end-to-end by Claude (Fable 5).

01CONCEPT

The brief: KIN—ETIK®, a brutalist motion-design studio (CDMX / Berlin). Swiss brutalism × acid rave. Loud, confident, anti-decoration — the site itself is the showreel. Terse uppercase copy, arrogant in a charming way.

Every design decision follows one rule: motion is the content. No decorative flourishes — every animation either reacts to the visitor (cursor, scroll velocity) or relentlessly loops like a rave visual (marquees, grain).

PALETTE

#0A0A0A — VOID BLACK
#F2F2F0 — OFF-WHITE
#C6FF00 — ACID
#FF3B00 — ALARM (SPARINGLY)

TYPE SYSTEM

02ASSETS — GPT IMAGE 2

Four "selected work" stills, generated with OpenAI GPT Image 2 (quality: high) and art-directed by prompt: subject, materials, lighting, lens, mood, palette, and an explicit "no text / no watermark". Each image was visually inspected before acceptance. Exact prompts:

Liquid chrome blob on black with acid-green rim light
work-chrome.webp — 1024×1024
"Award-winning motion design still frame: a hyperreal liquid chrome blob suspended mid-morph against a pure black void, mirror-polished mercury surface with crisp abstract studio reflections, a thin acid lime-green rim light tracing one edge, extreme sharpness, high-end 3D render aesthetic, centered composition, deep black background, cinematic contrast, no text, no watermark, no logo"
Extreme macro of CRT phosphor stripes mid-glitch
work-crt.webp — 1536×1024
"Extreme macro photograph of a CRT screen surface mid-glitch: glowing RGB phosphor subpixel stripes forming an abstract corrupted signal pattern, visible scanlines, heavy chromatic aberration, mostly near-black frame with electric lime-green and hot orange-red phosphor bars, shallow depth of field with soft bokeh at edges, dark moody lighting, analog video texture, no text, no watermark, no recognizable image on screen"
Brutalist concrete monolith raked by acid-green neon
work-concrete.webp — 1536×1024
"Brutalist raw board-formed concrete monolith photographed at night in thin fog, a single harsh acid lime-green neon light raking across the concrete texture from the left revealing every ridge, deep pure-black shadows swallowing the right side, low dramatic angle, architectural fine-art photography, 35mm lens, cinematic and ominous, no people, no text, no watermark"
Black 3D letterform fragments, one acid green
work-type.webp — 1024×1024
"Abstract typographic sculpture: monumental extruded 3D letterform fragments in matte charcoal black colliding and stacking in dark space, one single fragment coated in glossy fluorescent acid green, lit by one hard white studio strobe from above, floating dust particles, pure black background, high-contrast premium 3D render, abstract shapes only, no readable words, no text, no watermark"

03TECHNIQUES

KINETIC HERO — VARIABLE-FONT REPULSION

Each hero letter is a span. Every frame, the distance from cursor to letter-center produces a smoothstepped force that repels the letter, skews it, and — the signature move — drives Archivo's variable wght/wdth axes, so letters physically thin out as you push through them. All values are lerped for weight.

var f = clamp(1 - dist / RADIUS, 0, 1);
f = f * f * (3 - 2 * f);                    // smoothstep
L.w = lerp(L.w, 900 - f * 620, 0.12);        // weight collapses 900 → 280
L.el.style.fontVariationSettings =
  '"wght" ' + L.w + ', "wdth" ' + (110 + (900 - L.w) * 0.016);

SCROLL-VELOCITY SKEW

The work grid skews proportionally to scroll speed — scroll hard and the whole grid shears like a dropped frame, then eases back via double-lerped decay.

skewTarget = clamp((scrollY - lastY) * 0.35, -9, 9);
skew = lerp(skew, skewTarget, 0.1);
skewTarget = lerp(skewTarget, 0, 0.12);      // decay to rest
workGrid.style.transform = "skewY(" + skew + "deg)";

MIX-BLEND-MODE: DIFFERENCE CURSOR

A fixed white disc with mix-blend-mode: difference inverts everything under it — black turns white, acid turns violet. It scales up over interactive targets and displays a mono label (VIEW / SEND). Native cursor hidden only on pointer: fine devices.

MANIFESTO SCROLL-MARQUEE

Each manifesto line's X-position is bound to its distance from viewport center (±34vw), with alternating directions — the section reads like a marquee that you drive with the scrollbar.

FILM GRAIN + MARQUEES + HOVER-REVEAL

Grain: an inline-SVG feTurbulence tile on a fixed overlay, jittered with a 4-step keyframe. Marquees: duplicated tracks, pure CSS translateX loops in three tempers (acid, ghost-outline, alarm). Capabilities: a fixed thumbnail follows the lerped cursor and tilts with horizontal mouse velocity.

ACCESSIBILITY

prefers-reduced-motion kills marquees, grain jitter, cursor and all kinetic transforms; semantic landmarks, alt text on all imagery, visible focus states, AA contrast for all body copy, and graceful degradation on touch devices (no hidden cursor, no repulsion).

04PROCESS — 3 PASSES

After feature-completeness the site went through three ruthless audit passes (desktop 1280px + mobile 375px screenshots, console checks, accessibility snapshot) — each pass fixed and added.

PASS 01 — STRUCTURE & BREAKAGE

PASS 02 — RHYTHM, HIERARCHY & WEIGHT

PASS 03 — POLISH & SOPHISTICATION

05SHIP IT

Static files, zero build step. Deploy the site directory to Cloudflare Pages:

npx wrangler pages deploy . --project-name kinetik

Then go make some pixels misbehave. ← Back to KIN—ETIK®