Results for “motion-detection”

Defines the high-level motion law for multi-scene videos, ensuring seamless transitions and continuous camera movement through vector rules, carriers, causal motion, and seam enforcement.

Creates short, design-led motion graphics like kinetic typography, data visualizations, logo reveals, and animated maps, rendered as MP4 or transparent overlays.

Provides copy-paste animation patterns for React and Next.js, including buttons, modals, toasts, stagger lists, page transitions, scroll reveals, and layout animations, all built on motion-foundations tokens.

Implements accessible, performant animations and transitions in React/Next.js apps using Motion, with tokens, reduced-motion support, and device adaptation.

Use this skill for motion tokens, durations, easing, choreographed transitions, reduced-motion support. Trigger when the task involves ui/ux work related to Motion Design System, production implementation, audits, debugging, strategy, or validation.

A short, design-led motion graphic where motion is the message — kinetic typography, stat count-up, chart/data-viz hit, logo sting / brand lockup, lower-third / callout / social overlay, animated map (highlight regions, connect places, zoom to a location), animated tweet / news-article / headline, webpage / UI animation (scroll, cursor, callouts), or fusing a real image's geometry into a chart. Usually under 10s (up to ~30s), no narration or live-action subject; renders to MP4 or transparent overlay. Longer / narrated / multi-scene → /general-video. Unclear → /hyperframes.

Build complex, interactive animations in React/Next.js including drag-and-drop, gestures, text animations, SVG path drawing, custom hooks, and imperative sequences.

Define a motion system with duration tokens, easing vocabulary, and reduced-motion handling for consistent animation across a product.

Polishes existing motion against the transitions.dev motion-token scale by auditing duration, distance, scale, blur, and easing values and suggesting token-based corrections.

Audit an existing app's design system and motion, then apply a coherent, performant, reduced-motion-safe pass. Use when "motion pass", "animate the app", or "add micro-interactions across the app". One new isolated animation → design-motion.

Provides a foundational motion system for React/Next.js apps using motion/react, including tokens, spring presets, accessibility enforcement, SSR safety, and performance rules.

Implements accessible, performant UI motion for React and Next.js apps, covering tokens, patterns, and modal behavior.