Results for “motion”

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.

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.

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.

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

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

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

Creates programmatic videos with React using Remotion, covering compositions, animations, motion graphics, and MP4 rendering, plus walkthrough and content-to-animation workflows.

Audit and fix animation performance issues including layout thrashing, compositor properties, scroll-linked motion, and blur effects.

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.

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.

Port an existing Remotion (React) composition's source to HyperFrames HTML. Use only on explicit requests to migrate from Remotion; for new compositions or uncertainty, use the general HyperFrames skill.

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.

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

Provides domain-specific guidance for building videos with Remotion, covering captions, FFmpeg operations, audio visualization, and a wide range of composition techniques.

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

Provides domain-specific best practices for creating videos with Remotion in React, covering 3D, animations, audio, captions, charts, transitions, and more.

Generates premium React/Next.js frontend code with deterministic typography, calibrated color palettes, and motion physics, enforcing anti-cliché design rules and performance guardrails.

Generates award-level UI with GSAP motion, bento grids, and Python-driven randomization for layout variety.

Creates Apple-style soft UI prototypes with squircle cards, spring motion, and ambient mesh backgrounds.

Render a proposed redesign of a page as a self-contained static HTML file, then iterate via chat-driven commands until approved.

Creates, edits, and renders videos and animations from HTML compositions using the HyperFrames framework, handling project state, input adaptation, and workflow routing.

Builds production-ready frontend pages with premium UI design, cinematic animations, AI-generated media assets, persuasive copywriting, and generative art.

Encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great.

Render videos from React/Remotion component code via inference.sh CLI. Pass TSX code, get MP4 output with configurable resolution, FPS, duration, and codec.

Provides portable CSS transitions for common UI patterns like dropdowns, modals, tooltips, and skeleton loaders. Each transition is a drop-in snippet with semantic CSS custom properties and a prefers-reduced-motion guard.

Takes a PRD, reference URL, screenshot, or keywords to produce a DESIGN.md specification, then generates production-ready web code that meets UI/UX, visual, motion, and responsive standards.