Frontend systems work
`next`, `react`, strictly typed motion layers, responsive discipline, `prefers-reduced-motion`, and clean console/build output make up the implementation baseline.
View live repoMotion design studio / typographic performance
Type is the interaction.
Kinetic Type treats letterforms as choreography. Oversized sans-serif atoms assemble, disperse, and reform along scroll velocity—because the best interface is no interface, only motion.
01 / Proof floor
Receipts before rhetoric.
Every proof card tells you what kind of evidence you are looking at. Real work is real; concepts are labeled; built demos are inspectable.
Kinetic field
The moving background on this page is a generated type-dash field. Velocity changes dispersion; stillness tightens the pack. This is not a video loop.
See study 01Kinetic identity system
A speculative brand system where logos, nav labels, and body copy react to cursor proximity and scroll acceleration. Useful, fictional, and waiting to be built for a paying client.
Reduced-motion path
Respects the browser’s `prefers-reduced-motion` setting. When active, this site becomes a static high-contrast type poster—still legible, still informed, still beautiful.
Read breakdown02 / Motion studies
Typography is the entire interaction model.
Each study is a small working proof. They exist to make motion talk semantics.
Assemble / disperse / reform
Per-character transforms driven by IntersectionObserver. Letters reveal on section entry and scatter on exit.
Velocity kerning
A speculative study where letter-spacing breathes with scroll velocity. Faster scrolling opens air; slower scrolling tightens the line.
Clip-path narrative
Published motion technique: reveal panels use animated `clip-path: inset(...)` to simulate theatrical curtains across content transitions.
Type as telemetry
Scroll-speed and direction render as live motion readouts in the footer. Watch the kinetic signal as you move through the page.
03 / Motion thesis
Not decoration. Structure.
Kinetic Type argues that motion should obey information rules, not brand whims. Letters move because users move. Typefaces are not skins—they are the interaction model.
- Readability first: motion can slow reading but must never destroy legibility.
- State-bounded: animation happens within tight time/space budgets, not open-ended loops.
- Honest labels: applied motion techniques are labeled real, concept, or built demo.
- Reduced always: the motion thesis includes the anti-motion thesis in the same file.
Decision surface
Motion first.
Proof second.
Pixels third.
This pilot tests typography as the entire interaction model. If it works, the next step is a client project where motion is not decoration—it is the diagram.