Results for “motion”

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.

Generates immersive, high-performance web interfaces with advanced motion design, typography, and architectural craftsmanship.

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.

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.

Create professional motion graphics and videos from the terminal.

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

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

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

Translates Apple's fluid interface design principles—spring animations, direct manipulation, interruptibility, and velocity handoff—into web implementations using CSS, Pointer Events, and spring libraries like Motion/Framer Motion.

Build scroll animations, parallax effects, pinned sections, and scroll-triggered reveals using GSAP ScrollTrigger or Framer Motion in vanilla JS, React, or Next.js.

Apply animation principles to UI motion for purposeful, polished interactions.

Translates Apple's fluid interface design principles—springs, interruptible motion, velocity handoff, and momentum projection—into concrete web techniques for building and reviewing gesture-driven UI.

Reviews animation and motion code against a high craft bar derived from Emil Kowalski's design engineering philosophy, flagging issues with easing, duration, performance, and accessibility.

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.

Audits a codebase's animation and motion code, then produces a prioritized list of findings and self-contained implementation plans for other agents to execute.

Import Figma designs into HyperFrames compositions as frozen assets, brand tokens, components, motion animations, and shaders.

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

Create and edit video compositions in React using Remotion, with guidance on layout, animation, assets, captions, effects, and rendering.

Look up the precise term for a web animation or motion effect from a vague description, such as 'the bouncy thing when a popover opens' → 'Pop in'.

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

Design motion, transitions, and bespoke graphics for native Rust gpui apps — the framework behind Zed and the pd-console operator console. Use for with_animation, easing curves, BoxShadow/glow, breathing dots, pane expand/zoom/slide transitions, and custom paint/Vello/wgpu surfaces. Trigger on: gpui animation, with_animation, gpui transition, gpui easing, BoxShadow, gpui shadow, pd-console motion, gpui paint/canvas, Vello, wgpu, "lift/slide/zoom/spring in gpui", reduced-motion in a native Rust UI, "animation re-renders forever", repeat() never stops. NOT for: web/React motion (→ animation-system-architect), CLI/TUI output (→ beautiful-cli-design), general non-motion GUI layout/color/typography (→ beautiful-gui-design).

Creates a hero frame with looping CSS animations including a rotating type ring, animated globe, ticking timer, and parallax labels.

Generate award-level landing pages with cinematic GSAP motion, gapless bento grids, and strict AIDA structure.

Redesign a website page for presales by extracting its brand surface, identifying tensions, and generating three differentiated variants with motion validation.

Analyze a feature and strategically add animations and micro-interactions that enhance understanding, provide feedback, and create delight.

Create award-winning, immersive web experiences with dramatic typography, purposeful motion, scroll-based composition, and performance-optimized animation.

Enforces an opinionated UI baseline to fix spacing, hierarchy, typography, and layout issues in AI-generated interfaces.

Provides design engineering guidance focused on animation principles, UI review, and interface craftsmanship.

Add scroll animations, micro-interactions, or page transitions to a component using GSAP, with reduced-motion support and performance best practices.

Creates editorial-minimalist web prototypes with warm monochrome canvas, serif display and grotesque body typography, hairline borders, and ambient micro-motion.