Motion Animation Style
UI motion stays under 300ms, GPU-only, interruptible, and never blocks input; scroll narratives use GSAP ScrollTrigger when the idea requires it.
Default UI motion
Reticle Design System encodes Emil Kowalski constraints: custom ease-out curves (no ease-in), button press at scale(0.97) (~160ms), entry from scale(0.95) not zero, stagger 30-80ms without blocking clicks. Source: Reticle Design System
Animate transform and opacity only on hot paths. Framer Motion shorthand x/y props are not hardware-accelerated; prefer explicit translateX/Y. Source: Reticle Design System
Global vs local
Keyframes, @property, and document-wide scrollbars live in globals.css. Components use Tailwind + cn() for transitions. Source: CSS UI Enforcement
Scroll and 3D
Marketing and portfolio surfaces may use GSAP ScrollTrigger, Three.js, or R3F per Design and Animation and Frontend and Design Skills routing. Do not import scroll libraries for a single fade-in.
SVG Interaction Studies
For bespoke SVG interaction work, the durable pattern is: draw the asset deliberately in Figma, export a clean SVG, then animate hover/click states with Motion only where the geometry benefits from real vector control. The Cleon Designs artifact is a good reference: an isometric grid of outlined cubes where individual blocks lift, slide, and respond to pointer movement. It works because the source illustration is simple, the interaction target is spatially obvious, and the motion is a single idea. Source: X/@cleondesigns, 2026-06-08
Do not treat this as a default app animation style. Use it for portfolio/showcase moments, onboarding diagrams, or product-story illustrations where the SVG itself is the interface.
Dot-Field Pointer Motion
Animated dot fields work when the dots reveal pointer state rather than act as wallpaper. Kaolti's reviewed demo keeps a large dark dot matrix quiet, then uses amber/white point clusters and compact card states to show hover and click transitions around the cursor. Keep the motion tied to one input idea, preserve the actual hit target, and provide a reduced-motion/static version for production UI. Source: X/@kaolti and local video review, 2026-07-03
Agents
When agents author UI, point them at taste skills and Reticle presets instead of inventing new easing curves per component. Source: skills/engineering/taste-skills-playbook/SKILL.md
Timeline
- 2026-04-06 | Reticle animation rules documented. Source: Reticle Design System
- 2026-05-11 | CSS UI enforcement separates globals keyframes from component utilities. Source: CSS UI Enforcement
- 2026-05-31 | Motion animation style page compiled. Source: compiled from wiki graph
- 2026-06-30 | Added the SVG interaction-study rule after reviewing @cleondesigns' Figma-exported SVG plus Motion hover/click cube-grid artifact. Decision: route as a motion-style pattern, not a new tool or skill. Source: X/@cleondesigns, 2026-06-08
- 2026-07-03 | Added dot-field pointer motion after reviewing @kaolti's hover/click dot-pattern artifact. Decision: use as a single-purpose tactile motion layer with reduced-motion fallback, not as default background decoration. Source: X/@kaolti, 2026-04-17