도구

Adds scroll-reveal animations that fire when elements enter the viewport, using an IntersectionObserver snippet plus keyframes and a Tailwind arbitrary animation class; tune threshold, rootMargin, duration, delay and play-once behavior.

Builds seamless infinite marquees for logos, testimonials, screenshots or tags by duplicating the item sequence and translating the track from 0 to -50%, with stable widths, faded edges, optional hover pause and reduced-motion handling.

Polishes existing motion against the transitions.dev token scale for duration, distance, scale, blur and easing, matching each value by what the motion does rather than the nearest number, with rules for open/close asymmetry, hover in and out, stagger and intent delays.

In-chat fallback for the transitions.dev Timeline Inspector's Refine button: the agent long-polls a local relay and answers jobs with motion-token tweaks or a full transition recipe swap, and applies accepted changes. Idle polling costs credits, so the persistent CLI mode is preferred.

Provides twelve drop-in CSS transitions, including card resize, number pop-in, badges, dropdowns, modals, panel reveals, page slides, icon swaps, success checks and error shakes, configured through shared CSS custom properties with no framework dependency and reduced-motion guards.

Fixes janky web animation by moving width, height, position and box-shadow animations onto compositor-only transform and opacity, using pseudo-element opacity for shadows and the FLIP technique for layout changes and height: auto, to reach smooth 60/120fps motion.

Builds frosted and liquid-glass UI: backdrop-filter blur, translucent fills, bright edge highlights and layered shadows, SVG displacement for refraction, hover, scroll and entrance motion, plus accessible reduced-transparency fallbacks.

Adds functional UI micro-interactions with Framer Motion (motion/react) and modern CSS: hover and press feedback, toggles, toasts, drawers, modals, list reorder and shared-element transitions, with 100-250ms timings, asymmetric enter and exit easing, and reduced-motion support.

Applies tiered prefers-reduced-motion handling instead of disabling everything: removes vestibular triggers like parallax and scroll hijacking, softens large movement into short fades, and keeps essential motion. Covers CSS and JS gating for GSAP, Framer Motion and Lenis, per WCAG 2.3.3.

Animates SVG with stroke draw-on effects, path morphing via GSAP MorphSVG or Flubber, motion along a path, animated icon state changes, and gradient or filter animation, choosing between CSS, SMIL and GSAP per task.

Audits animation code against Disney's 12 principles adapted for the web, checking timing, easing, physics and staging rules such as user-initiated motion under 300ms and ease-out entrances, and reports findings as file:line.

Audits CSS and JavaScript for pseudo-element and View Transitions API practices: content, positioning and z-index of ::before and ::after, replacing extra DOM nodes, expanding hit targets, naming and cleaning up view-transition-name, and ::backdrop styling. Reports findings as file:line.

Builds compact, polished landing pages for dev tools, package demos and micro-SaaS. Picks a design fingerprint (composition, palette, type, radius, surfaces, motion) so each run looks different, features a product-native demo, and keeps zero layout shift, focus states and reduced motion.