Animation & Graphics Agent Skills

Generates a premium single-page HTML landing page with 3D CSS animations, GSAP scroll effects, and mouse-parallax depth. Forces structured intake (product pitch, audience, brand, tone) before generating copy or markup.

Build cinematic, scroll-driven 2.5D websites with parallax depth, text animations, and premium effects using CSS and JavaScript.

Craft polished visual web artifacts — pages, dashboards, prototypes, slide decks, animations, UI mockups, and data visualizations — using HTML, CSS, JavaScript, and React.

Transform articles or scripts into click-driven 16:9 web presentations that look like videos, with optional AI voiceover synthesis.

Provides a production-ready UI motion system for React/Next.js with performance, accessibility, and usability guidelines.

Create zero-dependency, animation-rich HTML presentations from scratch or by converting PowerPoint files, with viewport-fit enforcement and visual style exploration.

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

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.

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

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

Build web-based games and game engines using HTML5 Canvas, WebGL, and JavaScript with frameworks like Phaser, Three.js, and Babylon.js.

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

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

Animate React and Next.js components with GSAP using the useGSAP hook, refs, and context-safe patterns for automatic cleanup and SSR compatibility.

Provides GSAP utility functions for math, value mapping, randomization, snapping, and unit parsing in animations.

Create scroll-driven animations with pinning, scrubbing, and trigger-based timelines using GSAP ScrollTrigger.

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

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

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

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

Create zero-dependency, animation-rich HTML presentations from scratch or by converting PowerPoint files, with a fixed 16:9 stage and distinctive design.

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

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

Set up 3D scenes with Three.js, including scene, camera, renderer, Object3D hierarchy, coordinate systems, and math utilities.

Add visual effects to Three.js scenes using EffectComposer: bloom, depth of field, anti-aliasing, ambient occlusion, and custom screen-space shaders.

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

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

Build a single renderable HyperFrames composition using HTML with data-* timing attributes, clips, tracks, sub-compositions, variables, and deterministic rendering rules.

Ensures scene-to-scene transitions composite correctly on the master timeline by defining render prerequisites, including the white-flash guard and how the injector overlaps wrappers.

Creates seek-safe 2D/3D keyframe animations using GSAP, CSS, Anime.js, WAAPI, FLIP, SVG morph/draw, and text trails for HyperFrames compositions.

Renders UI content inside 3D iPhone and MacBook mockups using CSS transforms, with glass lens flares, ground reflection, and an optional turntable animation.

Creates educational single-frame posters with pixel art mascots and kinetic typography using pure CSS keyframe animations, no JavaScript required.

Renders tweet content as a realistic X (Twitter) post card image for video overlays or image sharing, with interactive metrics and customizable themes.

Renders a Spotify Now Playing card with album art, progress bar, and playback controls for video overlays or personal pages.

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

Generates a single-file HTML hero section with WebGL-inspired fluid background and overlaid quote, suitable for video intros, landing pages, or posters.