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).
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).
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:
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);
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)";
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.
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.
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.
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).
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.
transform: none was silently erasing the work-grid stagger — moved the stagger from transforms to margins.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®