Envision a digital space where typography defies static display, animated by an AI-engine that treats letterforms as malleable physical materials. This fictional exhibition site showcases Kinetika, a Zurich/Berlin-based type foundry whose specimens constantly shift and evolve. Its core innovation lies in a kinetic engine that animates typography through physical-inspired transformations, creating an immersive experience where type seems to breathe and move in real-time, all without using traditional imagery or external assets. The site’s signature technique demonstrates how AI-driven code can craft living type specimens that react to user interactions, embodying motion and materiality in a stark Swiss brutalist aesthetic.
The visual environment employs a near-black backdrop complemented by off-white text, with a singular acid green accent that acts as a visual warning and focal point. The typography is meticulously constructed using web fonts stored entirely on the host, emphasizing raw material over decoration. Headlines are split into individual characters, wrapped in nested spans, enabling animated transformations. The site’s kinetic engine leverages a shared requestAnimationFrame loop to smooth out scroll-induced velocity, which then influences scale, lift, and letter spacing dynamically. User interactions like hover and focus scatter glyphs into seed-based transformations, then spring back with a fluid cubic-bezier transition. Full-bleed marquees overlay opposing text bands, featuring transparent fills with subtle strokes, creating a layered visual tension that accentuates the site’s brutalist ethos. The playground section introduces a live control slider that adjusts wave height, scatter radius, and other parameters, with CSS variables linking directly to interactive controls. The entire palette is anchored in a monochrome core—black, off-white, and a distinctive acid hue—enhancing the stark, engineered aesthetic. Underpinning all is a self-hosted, minimal resource approach, emphasizing pure code-driven motion without external dependencies.
Want this? Paste this into your AI coding agent
Build a single-page showcase website from this art-direction brief. Work like an elite creative frontend engineer; commit totally to the direction.
BRIEF (room 05 of 175, “kinetika”):
KINETIKA TYPE FOUNDRY. Fiction: a type foundry whose specimens refuse to sit still. Aesthetic: stark black/white Swiss brutal with one acid accent #d8ff3e. Fonts: anton (display specimens), archivo (UI/body), space-mono (metadata). SIGNATURE: kinetic typography engine — headlines split into per-character spans animated in JS: a wave of scaleY/tracking following scroll velocity; hover a headline and characters scatter/reassemble; a full-bleed marquee band of giant outlined type (CSS text-stroke) moving opposite directions. Interactive specimen: an input field where visitors type text and see it staged in the kinetic treatments. Type-crime ticker footer. Sections: hero (huge kinetic wordmark KINETIKA); three specimen “families” (invented names, weights table); the playground; licensing card. Unforgettable: typography that behaves like a physical material.STACK: pure HTML/CSS/JS, no build step, no frameworks, no CDNs or external requests of any kind; self-hosted fonts only; every visual is code (CSS/SVG/canvas/WebGL) — no image assets required.
QUALITY BAR: flawless at 390px, 834px and 1440px with zero horizontal overflow; tap targets >= 44px; semantic landmarks, focus-visible styles, body-text contrast >= 4.5:1; prefers-reduced-motion pauses or simplifies heavy animation; rAF loops pause when the tab is hidden; hold 60fps (cap particle counts, avoid layout thrash); rich invented content everywhere — real-sounding names, numbers and program notes, never lorem ipsum; orchestrate one beautiful staggered load moment plus scroll and hover surprises. FORBIDDEN: Inter/Roboto/Arial/system-ui, purple-gradient-on-white, and cookie-cutter hero+cards+footer layouts.
PROCESS: iterate in three documented passes — (1) build plus builder self-critique, (2) merciless external critique finding and fixing at least ten real problems, (3) art-director elevation from good to unforgettable. Screenshot at all three widths every pass and fix everything you can see.
— Original brief by Claude Fable 5 (art director), executed by the FABLE/175 pipeline.
— This room lives at https://fable-25-830.netlify.app/sites/kinetika/
This is the verbatim art-direction brief that produced the room — exposed by the exhibition itself via the “Prompt” link in the room’s footer.
The development process unfolds in three deliberate stages: initial construction based on a detailed guide, followed by rigorous critique to refine motion and user experience, and culminating in a certification phase where the design is endorsed by an art director. The build integrates a custom kinetic engine that splits headlines into individual character spans, enabling complex transformations. These spans are manipulated through a shared animation loop, which maps smoothed scroll velocities to vertical scaling, lifting, and tracking effects, creating a convincing physicality. User interactions trigger seed-based scatter effects, with CSS transitions ensuring a springy reassembly. The site’s playground leverages a rendering function that assigns randomized vectors and delays, providing a dynamic testing ground for motion parameters. Throughout, the focus remains on upholding reduced motion principles, pausing animations when accessibility settings dictate, and ensuring the layout remains untouched since 2026, emphasizing stability and consistency.
The full build notes live in the room’s design guide.
Experience the kinetic typographic wonder in its full form by visiting the AI-built exhibition site—an ongoing experiment in material-driven digital typography. Explore the entire catalog of 175 specimens at the dedicated hub, and witness firsthand how AI can craft a living, breathing type environment that challenges conventional static displays. Dive into the future of type design where motion and material collide, and discover the creative potential unlocked by intelligent code.
Visit the live room → · Browse all 175 rooms
Previously in Wing I
- Room 4: FOLIUM — A Living Herbarium
- Room 1: HELIOS — Live Solar Observatory · Station HLX-1
- Room 3: Atelier Lumen — Light Installation Studio, Antwerp
FABLE / 175 is a finished exhibition of 175 fundamentally different websites, each built end-to-end by an AI. This article is part of our series walking through it room by room.
Design for Motion: Fundamentals and Techniques of Motion Design
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
Learning Web Design: A Beginner's Guide to HTML, CSS, JavaScript, and Web Images
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
self-hosted web fonts
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
Affinity Designer 2.6 User Guide for Beginners: Step-by-Step Instructions to Master Vector Design Tools and Create Professional Graphics Fast (Graphic Skill Surge)
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
