Core Engineering Rules & Architecture
Continuous single-element morphing through buttons, toggles, charts, and command palettes on a 120 BPM grid. Created by zero (@twoclipping).
Animation rules applied by your agent:
- One continuous element that never cuts: size, radius, and color morph simultaneously
- Every style computed from elapsed time inside seek(t) with no CSS transition lag
- Dual-spring mechanics: tab indicator edges ride distinct springs for organic stretch
- Subframe motion blur blending for silky smooth 60fps presentation
Example Trigger Prompts
Once installed in .claude/skills/ or .cursor/rules/, trigger your coding agent in Claude Code or Cursor using these natural prompts:
01
"Create a continuous morphing sequence across 8 UI states on 120 BPM"
02
"Build a kinetic typography video where letters seamlessly transform into UI icons"
03
"Design a Dribbble-grade kinetic UI reel with closed-form springs and direct drag physics"
SKILL.md Source Code
---
name: kinetic-typography
description: Direct, render, and orchestrate continuous morphing UI states and kinetic typography.
version: 1.0.0
author: zero (@twoclipping) via Prompt Motion
license: CC-BY-4.0
---
# Kinetic Typography & Morphing Skill
Build continuous, single-element morphing animations where the central shape transforms seamlessly through UI states (Button -> Loader -> Player -> Slider -> Tabs -> Chart -> Command Palette) without cuts.
## 1. Composition Principles
- **One Element, Never Cut**: The entire sequence transforms a single shape by animating border-radius, width, height, background color, and internal icon content.
- **Palette**: Monochromatic contrast (pure black and white) with one high-contrast accent highlight.
- **Font**: Clean modern grotesk (`Geist, Inter, system-ui`).
## 2. Temporal Architecture
- Fixed 120 BPM tempo grid: an event, morph, or key interaction occurs on every beat.
- Single HTML file, 1440x1440 square artboard.
- Every CSS property is computed strictly from time inside a pure `seek(t)` loop: no CSS transition delay, no timers, no frame-delta memory.
## 3. Mathematical Springs
- Calculate positions using analytical closed-form step responses.
- To animate continuous travels, set the current position as the sum of analytical springs triggered at each step onset.
- Dual-spring stretch: assign the leading edge a snappier spring (`omega=14`) and the trailing edge a slower spring (`omega=10`), generating liquid stretch during movement.
## 4. Gotchas to Avoid
- Never attach `will-change: transform` to containers holding scaling vector text, or browser rasterizers will blur the letters.
- Ensure the final frame's dimensions, colors, and cursor coordinates are mathematically identical to frame 0 for a flawless infinite loop.