Direction 19 · STYLE_PRESETS § 19 · The Deforming Mark

DEFORM

The variable-font axis-morph is the brand behavior. Type deforms, puckers, stretches, and breathes live along its weight, width, and optical axes. Readable language in motion is the entire interface — not a decoration on top of one.

Move your cursor across the mark · scroll the page · the axes respond live

01 · PALETTE
Color is bound to an axis

The rule: if color animates, it tracks the weight axis (Exat register) so motion and color are one system, not two competing ones. Otherwise color stays flat and the deformation is the whole show. Three registers ship with the direction.

Variant B · Axis-Bound Color (weight → hue) — carries this page
Axis Low
#2546FF
light · cool
Axis Mid
#FFCE2E
mid · warm
Axis High
#FF0B00
black · hot
Stage
#0A0A0A
type is the light
wght 300 wght 650 wght 1000

This gradient is not decorative — it is the literal weight → hue lookup. As the mark above thickens, its color climbs this bar.

Variant A · Loud Kinetic (KISS)
#C800FF · #FF2D8E · #0B0B0F
Variant C · Studio Monochrome (DIA / Dumbar)
#111111 · #F2F0EB · #FF4A1C
02 · TYPOGRAPHY
The letterform is the instrument
DISPLAY · Recursive (Google Fonts, free) — animating wght · slnt · CASL · MONO · CRSV
readable language in motion
AXES — the five real variation settings driven on this page
wght
300 → 1000
Aa
slnt
-15 → 0
Aa
CASL
0 → 1 (casual)
Aa
MONO
0 → 1 (mono)
Aa
CRSV
0 → 1 (cursive)
Aa
BODY · Inter — held still on purpose

Only the display plays. Body copy stays at a single static weight, because animating body text destroys legibility and the morph belongs to the headline alone. One animated axis-system per view — two competing morphs cancel each other into noise. The payload is always legible language; the moment a frame stops being readable, the direction has drifted into shader spectacle (#13).

03 · SIGNATURE MOVES
Six behaviors, all live

Each is a real font-variation-settings animation — no CSS transform scaling anywhere on the page.

SIG 01 · AXIS-MORPHING WORDMARK
The mark breathes at rest, deforms on interaction

The hero wordmark is never truly static — a slow weight oscillation at rest, an active per-glyph morph as the cursor crosses it. Color tracks the weight via the axis-bound lookup. Scroll up to feel it; the HUD bottom-right reports the live axis values.

// rest: wght oscillates 480↔720 · hover: rings of influence
MORPH
SIG 02 · PROXIMITY-REACTIVE GLYPH RESPONSE
The page is a playable instrument

Per-glyph axis values driven by cursor distance — Exat's "rings of influence." Letters near the pointer thicken and lean; those far stay at rest. Move your cursor through the grid.

// wght = f(1 / cursor-distance) · per glyph
SIG 03 · SCROLL-LINKED AXIS ANIMATION
Scroll thickens the type

Scroll position is bound to the weight axis. As this line enters and crosses the viewport its weight climbs 300 → 1000 and its hue rides the axis-bound color bar with it. Not parallax — the type itself responds.

// wght = f(scroll progress through viewport)
scroll drives the weight
SIG 04 · AXIS-BOUND COLOR
Weight and hue are one system

When color animates, it is mapped to an axis. This counter morphs its weight as it climbs and its color is computed from that same weight — light is cool, heavy is hot. One mapping, two outputs.

// color = hueFromWeight(wght) · climbing counter
000
SIG 05 · READABLE-LANGUAGE-IN-MOTION TEST
The pucker stays a word

A KISS-style mark that deforms to mimic a mouth — width squeeze, weight pulse, optical lean — and snaps back. Every frame remains the readable word. Hover it. If it ever stopped being language, it would belong to #13, not here.

// hover: pucker cycle · always legible
KISS
SIG 06 · PRE-SIZED BOUNDING BOXES
The morph never reflows the page

Every kinetic element reserves space for its wght 1000 peak via min-height and fixed cell sizing. The box below holds steady at every axis state — toggle the peak and watch the layout stay put.

// box reserved at max state · zero reflow
STABLE
04 · EXEMPLARS · WHY NOW
Four studios, multiple outlets

Variable fonts have been a web standard for years; 2026 is when studios began treating the axis-animation as the whole identity system rather than a responsive nicety. Five channels confirmed ★NEW, anchored by four independent studios across four outlets.

01
NYC + Chamonix studio; the canonical reference. Variable axes (weight/width) driven by time, scroll, audio, and sentiment; letterforms become UI, diagrams, and sound-waves at once. The creative tools ship with the brand guidelines.
TIER 1 · TBI + INT + BP&O
02
"Mischief Amplified": a custom warped wordmark that physically deforms to mimic a kiss/mouth and reacts dynamically across screens. Loud purple + pink, deployed on Spotify / Uber / Tinder surfaces — the morph-mark as the core identity behavior.
TIER 1 · 5+ OUTLETS · APR 2026
03
Rippling flag-like waves of type; letterforms become UI, diagrams, and sound waves at once — bold, stacked, stretched, rotated. Built as a 5-year kinetic system with creative-coding + sound.
TIER 1 · BP&O · 2023→2026
04
The web-craft proof. A proximity-reactive glyph grid where variable axes morph on cursor distance (Euclidean rings of influence); color shifts blue→yellow→red as weight intensifies. Exat is a real 21-style, 1,715-glyph variable family. GSAP + ScrollTrigger + Lenis.
TIER 2 · CODROPS + AWWWARDS SOTD
05
Type that visualizes sound: variable weight, rhythm, and vibration animating in response to audio. Third corroborating studio proving the family is multi-studio, not a one-off.
TIER 1 · CORROBORATING
05 · DO-NOT-USE
The guardrails that keep it real
Faking it with CSS transform: scale / skew on a static font. The whole point is real axes — transform-scaling distorts the letterform geometry instead of morphing it. This page uses zero transform scaling.
Animating body text. Only display / hero type plays; morphing body copy is unreadable and nauseating.
Two competing morph systems on one view. One animated axis-system; two cancel each other into noise.
Illegible end-states. If a morph stays in an unreadable frame it has become a #13 abstract scene.
Collapsing into #11 Editorial-Motion. If type is calm and motion lives between blocks, that's #11 restraint — not type-as-spectacle.
Collapsing into #13 Generative Tech-Flex. The discriminator is the payload: readable type here vs. a rendered scene there.
Layout reflow on morph. Pre-size bounding boxes to the max axis state.
Decorative-only motion. The morph must mean something — a kiss, a sound, a data value, proximity.