Loading...
Loading...
Found 60 Skills
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). HyperFrames-native: single paused timeline, seek-safe, deterministic.
A single-frame motion-design composition with looping CSS animations — rotating type ring, animated globe, ticking timer, parallax labels. Renders as a hero video poster you can hand straight to HyperFrames or any keyframe-based exporter. Use when the brief asks for "motion design", "animated hero", "loop", "video poster", "title card", or pairs Open Claude Design with HyperFrames for a kinetic export.
Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight.
Use when implementing Disney's 12 animation principles in Adobe After Effects
Guidelines and examples for UI motion and animation. Use when designing, implementing, or reviewing motion, easing, timing, reduced-motion behaviour, CSS transitions, keyframes, framer-motion, or spring animations.
Use when creating commercial animations, advertising motion, brand identity animation, logo reveals, or marketing video content.
Create award-winning websites and applications with design and typography rated 10/10. Use this skill when building premium digital experiences that match the quality of elite agencies like Locomotive, Studio Freight, AREA 17, Active Theory, Hello Monday, Dogstudio, Tonik, Instrument, Resn, and Awwwards winners. Triggers include premium design, award-winning, agency-level, Awwwards quality, exceptional typography, immersive experience, 10/10 design, portfolio site, brand website, creative agency style, top-tier web design, or when building sites for luxury brands, tech companies, cultural institutions, or startups requiring exceptional visual craft.
Use when motion needs to feel physically grounded—objects falling, characters jumping, things colliding, or any element that should obey believable weight and momentum.
Expert VSL (Video Sales Letter) and product marketing video storyboard writer. Use when creating sales videos, product demos, explainer videos, social media video content, or marketing video scripts. Use when asked to "write a video script", "create a VSL", "storyboard a sales video", or "script a product demo". Produces storyboard scripts optimized for handoff to motion designer and Remotion video production.
Use when overseeing animation vision, setting creative direction for motion, or guiding teams on animation quality and consistency.
Use when building slow intentional animations between 1200-2000ms - app intros, loading sequences, storytelling moments that create emotional resonance
Use when determining how far to push motion beyond realism, calibrating animation intensity for context, or making key moments register with audiences.