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 Frontier 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
Size and distance set duration
The bigger an animated element is, the slower it should move, because it reads as heavier; the farther it travels, the longer the animation. Emil Kowalski's example: a large hand moves slower than small cursors. Source: X/@emilkowalski, 2026-10-09
Low frame rate on purpose
After Spider-Verse, where Miles is animated at 12 fps while the world runs at 24, Dan Billson tried stepped animation in UI. It only read as intentional with exaggerated movement; subtle motion at a low frame rate looked like a performance bug. Source: X/@danbillson, 2026-10-29
Native motion and hover that only reshapes
Emil Kowalski's /animate-expo skill, made with the Expo team, brings the same animation rules to React Native: gestures, sheets, haptics and screen transitions. Source: X/@emilkowalski, 2026-08-19
A microinteraction where hover no longer starts the motion; the motion runs on its own and hover only reshapes it. Source: X/@alimdesigner_, 2026-08-16
Choose good starting frames for animations, because they are what users see on first load and under prefers-reduced-motion. Source: X/@actualTimWilson, 2026-07-26
Emil Kowalski's design skill distills Apple-style interface and motion into 17 principles written as web code, which spread widely in Chinese-language X. Source: X/@BaoZiDaDa010, 2026-07-17
"Stop guessing animations", a Jakub Krehel piece on choosing motion deliberately. Source: X/@JameslabiQ, 2026-07-16
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