Loading...
Loading...
Found 13 Skills
Build Remotion videos with snapcn — a shadcn registry of copy-paste animation components and timeline-driven UI primitives. Use when composing video scenes, adding text animations, transitions, backgrounds, UI blocks, brand/social cards, or full compositions in a Remotion project. Triggers include "snapcn", "video component", "add animation", "text reveal", "scene transition", "product demo video", "remotion component", "terminal simulator", "glass code block", and the UI-primitive tier: "video dialog", "video button", "command menu", "video select", "video tooltip". Even if the user doesn't mention snapcn, activate when they need polished video primitives for Remotion.
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.
Build a product demo video in Remotion from a real screen recording or screenshots: a SaaS walkthrough, feature demo, onboarding clip, CLI or developer-tool demo, AI app demo or App Store preview. Uses snapcn's Remotion components (@snapcn/screen-recording, cursor-track, laptop-frame, phone-frame, terminal-simulator, prompt-send, answer-stream, status-cycle) so the camera push, clicks, device frames and typed commands come pre-built instead of hand-animated. Triggers: product demo, demo video, remotion demo, product walkthrough, feature demo video, screen recording to video, app demo, SaaS demo, CLI demo, "turn my screen recording into a demo video".
Make an explainer video in Remotion: a narrated 30–90s video that explains a product, feature, idea or process, with a voiceover and burned-in captions. Script → voiceover → word timings → one snapcn scene per beat → captions → render. Uses snapcn's Remotion components (@snapcn/punch-lines, status-cycle, count-grid, laptop-frame, word-captions, karaoke-captions and more) for every beat instead of hand-animated slides. Triggers: explainer video, animated explainer, how it works video, product explainer, narrated video, voiceover video, "explain my product in a video", "make an explainer in Remotion".
Make kinetic typography in Remotion: animated text, title cards, a headline reveal, rotating words, a highlighted phrase, a line that morphs into its payoff, or a run of bold statements. Uses snapcn's text components (@snapcn/text-reveal, type-morph, text-highlight, word-flip, punch-lines, text-swell and more), which pivot scale on the measured baseline so type doesn't judder or shake the way hand-animated text does in a browser. Triggers: kinetic typography, animated text, text animation, title animation, typography video, headline animation, text reveal, "animate this line", "make the words pop".
Make a short, design-led motion graphic in Remotion, where the motion is the message: kinetic typography, a title card, a stat count-up, a logo sting or brand reveal, a social-proof overlay, an image-gallery opener or burned-in captions. Usually under 10s, up to about 30s. Built from snapcn's hand-tuned Remotion components (@snapcn/text-reveal, type-morph, punch-lines, logo-flicker, count-grid, orbit-gallery and more) so the type and timing look designed, not generated. Triggers: motion graphics, kinetic typography, remotion motion graphics, animated text, title animation, logo animation, logo sting, brand reveal, intro animation, animated stat, "make this line animate", "motion graphic with Claude Code".
How a snapcn component is allowed to look. READ THIS BEFORE you write a colour, a border, a shadow, a radius or a font stack into a registry component. snapcn ships a shadcn design system (SnapCnTheme) and a tier of shadcn UI primitives (snap-cn-ui) — components compose them, they do not re-invent them. Explains which tokens exist, how to resolve them, how to reuse a primitive's own surface instead of hand-rolling one, and why var(--token) does not survive a Remotion render. Triggers - color, colour, hex, rgba, box-shadow, drop shadow, border, hairline, radius, surface, background, theme, dark mode, styling a component, "looks wrong on white", "the shadow is bad", shadcn, Input, Button, Card.
Build a product launch video in Remotion from a brief: a launch film, feature announcement, version release, Product Hunt / X / LinkedIn promo or landing-page hero video. Composes snapcn's hand-tuned Remotion scenes (@snapcn/announce-title, hero-launch, type-morph, count-grid, wordmark-cut and more) instead of hand-animating every shot, so the result does not look like every other AI video. Brief → storyboard → install snapcn components → compose → render-audit → ship. Triggers: launch video, product launch video, remotion launch video, announcement video, release video, promo video, Product Hunt video, "make a video for my launch", "make a launch film with Claude Code".
Build Remotion videos with snapcn — a shadcn registry of copy-paste animation components and timeline-driven UI primitives. Use when composing video scenes, adding text animations, transitions, backgrounds, UI blocks, brand/social cards, or full compositions in a Remotion project. Triggers include "snapcn", "video component", "add animation", "text reveal", "product demo video", "remotion component", "terminal simulator", "device frame", "phone mockup", "burned-in captions", "karaoke captions", "logo animation", "launch video", "changelog video", and the UI-primitive tier: "video input", "typing caret". Even if the user doesn't mention snapcn, activate when they need polished video primitives for Remotion.
Make a logo animation in Remotion: a logo reveal, logo sting, intro or outro bumper, brand reveal or end card for a video, launch or YouTube channel. Uses snapcn's hand-tuned Remotion logo scenes (@snapcn/logo-flicker, logo-assemble, logo-collapse, block-wordmark, wordmark-cut) with your real logo, instead of a logo that fades in and scales up. Triggers: logo animation, logo reveal, logo sting, animated logo, intro animation, outro, brand reveal, end card, bumper, "animate my logo", "logo intro in Remotion".
Best practices for writing Remotion animations that stay intuitive for agents and editable in Remotion Studio Visual Mode.
Replicate a reference UI pixel-for-pixel and build polished, token-driven site chrome. Use when the task is to match a screenshot or live site exactly, redesign a page to look like a design reference, or build a masonry/gallery/grid layout that must feel like the source. Triggers include "pixel perfect", "exact replica", "not a single change", "match this design", "like this screenshot", "masonry grid", "design gallery", "redesign the overview", "same spacing", "same design fashion", "clone this layout", and any request that pairs a UI target image with "make it exactly like that". Also activate when measuring spacing/typography off a reference before writing CSS.