Interfaces thatmovelike a keynote.
A quiet design system for React + Tailwind — components, keynote-grade motion, desktop windows, and skills that keep your AI agent from shipping slop.
24,675 lines of rules, checklists, templates, and anti-patterns. Drop one into .claude/skills/ and your agent works the way you do.
Hover to peek · Click to open · Pick a file for Quick Look
Drag the line. That’s the difference.
Same content. Sizes from a golden-ratio scale, real leading, a 65ch measure, one accent.
Tools for teams of every size — powerful when you need them, quiet when you don’t.
Our platform helps teams of every size move faster with tools that are powerful, flexible and easy to use, built for the way modern companies work today and tomorrow and every day after that.
It plays by itself — every piece is a kit component, nothing is a video.
Fill in the dates and a short reason.
--primary and --ring. Try it — the whole page follows.The type in this kit is researched and built on the golden ratio. Every size is the 16px base multiplied or divided by φ = 1.618 — with a half-step of √φ when a full step is too far. Leading, measure, tracking, and weights follow the same logic. Nothing is picked by eye.
Good typography is invisible. The reader never notices the leading or the measure — they simply keep reading, a little longer than they planned, without ever feeling the effort.
Good typography is invisible. The reader never notices the leading or the measure — they simply keep reading, a little longer than they planned, without ever feeling the effort. Good typography is invisible. The reader never notices the leading or the measure — they simply keep reading, a little longer than they planned, without ever feeling the effort.
skill-typography — 2,011 lines on choosing, pairing, scaling, loading, and auditing type.The moves from product-launch videos — mask reveals, a camera that frames, cursors that click, cards that lift — each one a copy-paste file. Transform-only, and every one respects reduced motion.
Plan ahead, approved faster, signed in seconds.
motion/soft-cursor.tsxDocs- 1Request
- 2Review
- 3Approved
- 4Letter
motion/device-frame.tsxDocsWindows with traffic lights, a terminal that types, a magnifying dock, ⌘K search, and frosted notifications. Drag the windows around — close one and bring it back from the dock.
:root {
--background: 0 0% 100%;
--foreground: 0 0% 3.9%;
--muted: 0 0% 96.1%;
--border: 0 0% 89.8%;
--radius: 0.5rem;
}
.dark {
--background: 0 0% 3.9%;
--foreground: 0 0% 98%;
}Not mock-ups — real output. The video below was produced end to end with skill-motion-video.
A tutorial-style keynote of this very site: real screen recording, word-timed narration, virtual camera, synthesized music.
Portfolio, projects, and writing — “I build for the web — and I design.” Fullstack development, UI/UX, video, and photography.
A creative studio in Pematangsiantar and Medan — photo, video, and websites for bold brands, made by one team.
Quiet by default. Moving when it matters.