Results for “motion-control”

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.

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

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.

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

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.

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

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 UI motion for React and Next.js apps, covering tokens, patterns, and modal behavior.

Provides atomic motion rules, multi-phase scene blueprints, scene transitions, motion-design techniques, and runtime adapters (GSAP, Lottie, Three.js, Anime.js, CSS, WAAPI, TypeGPU) for composing animations with HyperFrames.

Reviews animation and motion code against a high craft bar derived from Emil Kowalski's design engineering philosophy. Default to flagging; approval is earned.

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

Turns a single talking-head video into a video-to-video prompt with kinetic supers and rapid camera whips, preserving the original footage.

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.

Create and control Three.js animations including keyframe, skeletal, morph target, and animation blending.

Guidance for writing Remotion React markup with animation patterns, media handling, sequences, effects, and advanced features like 3D, audio visualization, and parameterized videos.

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

Generates a Pixar-style 3D cartoon character from a photo and animates it with a reference dance video using the MuAPI platform.