Loading...
Loading...
Found 8 Skills
This skill should be used when the user asks to "fix janky CSS animation", "make animation 60fps", "stop layout thrashing", "animate width/height/top/left smoothly", "convert animation to transform", "animate box-shadow performantly", "animate height auto", "FLIP animation", or "why is my scroll/hover animation choppy".
Use when implementing Disney's 12 animation principles with pure CSS animations and transitions
Use this skill when overlaying HTML elements on the PixiJS v8 canvas. Covers DOMContainer with element, anchor, and scene-graph-driven CSS transforms, the pixi.js/dom side-effect import, DOMPipe registration, visibility sync, pointer-events handling. Triggers on: DOMContainer, pixi.js/dom, DOMPipe, HTML overlay, input on canvas, iframe overlay, DOMContainerOptions, element, anchor, constructor options.
iPhone + MacBook GLTF-style static showcase, with real HTML content embedded in screens, glass lens refraction, 360° turntable composition
Wrap animated SVG elements in a div to enable hardware acceleration. Apply when animating SVG icons or elements, especially in 8-bit retro components with pixel art animations.
Learn how to create an interactive, draggable DOM using a Lit web component with CSS transforms and slots, enabling you to manipulate HTML and SVG elements within a canvas-like environment.
Hard-won, measured rules for animating text and shipping registry components in snapcn. READ THIS BEFORE you animate a scale or transform on text, pick an easing curve, add will-change, set a transformOrigin, split a word into per-letter spans, or touch a component that has a rendered demo. Explains why scaled text looks "stuck" and "shaky" in a browser (glyph pixel snapping, font hinting), which fixes are real and which are cargo cult, why aggressive ease-out curves freeze on a frame clock, and how to verify an animation by measuring rendered frames instead of eyeballing it. Triggers - scale animation, zoom text, transform, transformOrigin, easing, cubic-bezier, ease-out, will-change, jitter, judder, stutter, wobble, blurry text, text not smooth, letters stuck, Remotion component, registry component, preview looks wrong.
Best practices for writing Remotion animations that stay intuitive for coding agents and remain editable in Remotion Studio Visual Mode — keeping values literal and inline where the Studio can find them, rather than hidden behind indirection. Use when writing or refactoring a Remotion composition, or when an animation is correct in code but not editable in the Studio. Triggers - Remotion Studio, Visual Mode, editable animation, interpolate, spring, composition props.