Results for “animation-detail”

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

Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight.

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

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

Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight.

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.

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

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

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

Builds interactive HTML sketches with working states, transitions, and a shared CSS theme system for design exploration.

Extracts complete metadata from a TikTok video page by reading SSR-embedded data, including author profile, engagement stats, music info, hashtags, and slideshow images.

Design and implement new isolated motion — micro-interactions, page transitions, scroll, hover — with Framer Motion, CSS, or GSAP. Use when adding one animation to a new surface. Existing-app coherent pass → enhance-motion. Do not fire for "motion pass across the app".

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.

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

Create advanced animations with GSAP. Use when building complex timelines, scroll-driven animations, SVG morphing, text animations, or high-performance web animations beyond CSS capabilities.

GSAP animation for HTML/React — core tweens, timelines, ScrollTrigger, React useGSAP hooks, performance best practices. Use when building animated web pages, scroll-driven effects, React/Next.js animations, or any HTML/CSS animation beyond simple transitions. Pairs with claude-design / guizang-ppt / html-to-video.

Create an on-scroll animation trigger using IntersectionObserver with Tailwind-friendly animation classes and keyframes. Use when asked for scroll-reveal, animate-on-scroll, or sequencing element animations when they enter the viewport.

Use when designing or implementing product-grade web motion like Stripe, Linear, Apple, and Vercel. Covers motion principles, easing/duration defaults, choreography patterns, scroll/hover interactions, performance, accessibility (reduced motion), and implementation guidance.

Encodes Emil Kowalski's design engineering philosophy — UI polish, component design, animation decisions, and the invisible details that make software feel great. Use as the reference/philosophy layer for interaction craft. For the narrower, task-specific pieces of this same philosophy, see `animate` (build one animation), `review-animations` (review a diff), `improve-animations` (audit a codebase), `find-animation-opportunities` (find what's missing motion), `animation-vocabulary` (name an effect), `apple-design` (gesture/spring physics), `ask-sonner` (the Sonner toast library). Source: github.com/emilkowalski/skills.