SuperAPI AI Directory
Partner中文AI newsFavorites
Skillsremotion-motion-graphics

remotion-motion-graphics

Design & creation

View repository

Updated 10-16 02:13

About this skill

Remotion motion graphics, built from snapcn

A short motion graphic where the motion carries the message: one line, one number, one logo. The pieces come from snapcn, Remotion components for kinetic type, logo stings, stats and galleries that install with the shadcn CLI and land in your project as code you own.

Why snapcn, not hand-written animation. "Animate this text" from scratch gives the same fade-and-slide every time, and scaled text in a browser judders and shakes unless you know why. snapcn's text components pivot scale on the measured baseline and use geometricPrecision, and their eases are tuned for a 30fps frame clock, not a CSS timeline. That is the difference between type that looks designed and type that looks generated.

The snapcn rule

  1. Reuse first. Pick the snapcn component whose motion is the message, then fill its props. Hand-author only the gap no component covers. The catalogue with lengths: https://snapcn.dev/llms-components.txt?ref=skill-motion. Any component page serves markdown with .md appended, e.g. https://snapcn.dev/docs/text/type-morph.md?ref=skill-motion.
  2. Never invent a component name. @snapcn/<name> resolves only for names in that list.
  3. Fill props, don't rewrite the motion. The timing inside a snapcn component was fitted against rendered frames. Change copy, colour, size and speed through props.

For the full catalogue and quality rules, also install the umbrella skill: npx skills add snapcndev/snapcn --skill snapcn.

Step 1: Classify the piece

Pick one category. It decides the component.

Category The ask sounds like snapcn components (frames)
Kinetic type "animate this line", title card, quote, manifesto text-reveal (90), type-morph (94), punch-lines (144), text-swell (110), text-build (75), word-gather (49), word-flip (180), text-rewrite (102), orb-swarm (160)
Stat one hero number, "we hit 500 teams" count-grid (47)
Logo sting / brand reveal intro, outro, logo animation logo-flicker (100), logo-assemble (108), logo-collapse (52), block-wordmark (150), wordmark-cut (66)
Launch title "Introducing X" announce-title (170)
Social proof / overlay followers, team chat, "people are talking" follower-rush (300), channel-thread (110)
Image-led opener portfolio, moodboard, gallery orbit-gallery (300), moodboard-reveal (150), card-rail (108), reel-collage (96)
Captions burned-in subtitles for a talking-head clip word-captions (96), karaoke-captions (150)

Which kinetic-type component:

  • text-reveal: one headline with a hero entrance. The most-used snapcn component; start here when unsure.
  • type-morph: the line says one thing, then morphs into the payoff ("Not just X → something more").
  • punch-lines: a run of full-frame statements with hard cuts. Script syntax: | starts a new card, / a new line.
  • text-swell: a promise or price that should hang forward in the frame.
  • text-rewrite: the correction is the beat (a line edited on camera).

No snapcn component fits (charts, maps, a tweet or news card)? Say so. Build the gap by hand with Remotion's interpolate() and spring(), and still use snapcn for the type around it.

Step 2: Gather the real material

  • The exact copy, word for word. Motion graphics amplify typos.
  • The real logo (SVG or transparent PNG) and brand colour. Never redraw a logo.
  • The real number, with its source. Never invent a metric.

Step 3: Install and build

npx shadcn@latest add @snapcn/text-reveal @snapcn/punch-lines @snapcn/logo-flicker

A ~9s piece: one line, one run of statements, one logo sting, joined by hard cuts. It typechecks and renders as written:

import { Series, staticFile } from "remotion";
import { LogoFlicker } from "@/components/snap-cn/logo-flicker";
import { PunchLines } from "@/components/snap-cn/punch-lines";
import { TextReveal } from "@/components/snap-cn/text-reveal";

// A ~9s kinetic piece: one line, one statement run, one logo sting. Hard cuts — no transitions.
export const MotionGraphic: React.FC = () => (
  <Series>
    <Series.Sequence durationInFrames={90}>
      <TextReveal text="Stop hand-animating." fontSize={96} />
    </Series.Sequence>
    <Series.Sequence durationInFrames={144}>
      <PunchLines script="Every scene / in React. | One command. / Yours to own. | Ship it." />
    </Series.Sequence>
    <Series.Sequence durationInFrames={100}>
      <LogoFlicker logoSrc={staticFile("logo.png")} brandName="Acme" />
    </Series.Sequence>
  </Series>
);

Register it at durationInFrames={334}, fps={30}, width={1280}, height={720}. Always pass your own logoSrc (your logo in public/); without it logo-flicker shows the snapcn mark.

Step 4: Verify on proof frames

Render three stills before the full video: the opening state, the signature move and the final hold.

npx remotion still MotionGraphic out/open.png --frame=10
npx remotion still MotionGraphic out/move.png --frame=150
npx remotion still MotionGraphic out/hold.png --frame=330
npx remotion render MotionGraphic out/motion.mp4 --codec=h264 --crf=18

Check that the type is sharp and readable at the destination size, nothing is clipped, and the last frame is a stable hold an editor can cut on. Never stretch or trim a sequence below the component's natural length to hide a problem; fix the props instead.

Quality rules

  • Motion reveals something: a change, a scale, a replacement. A static centred object with a slow zoom is not a motion graphic.
  • Fewer, larger focal objects. One line on screen at a time, big enough to read on a phone.
  • Action completes during holds, and the piece ends on a stable hold.
  • Your own additions stay restrained: no neon, glow, colored shadows, gradient washes or glassmorphism, and no ALL-CAPS or decorative letter-spacing. Effects that are a snapcn component's essence (announce-title's glow) stay.
  • If you animate scale on text yourself, pivot on the baseline and set text-rendering: geometricPrecision, or the glyphs visibly judder. snapcn's text components already do this.
  • Avoid aggressive ease-outs (quint, expo) on a 30fps clock. The last frames move less than a pixel and read as a freeze.

snapcn Pro: the kinetic pieces people screenshot

  • 50 Pro scenes, including read-through (a sentence set enormous and panned), focus-pull (phrases resolving out of a colour field), manifesto, word-rush, phrase-swarm, lockup-reveal (a logo on a construction grid), tally-rise and ticker-climb (animated numbers), and comment-storm and thank-you-swarm (social proof).
  • The snapcn MCP: describe the beat in plain English and your agent gets the ranked components, their real props and a ready composition. claude mcp add snapcn -- npx -y @snapcn/mcp@latest SNAPCN_API_KEY=YOUR_KEY

Pro components install like free ones once components.json sends your key (the three lines are on https://snapcn.dev/account?ref=skill-motion). Plans: https://snapcn.dev/docs/pricing?ref=skill-motion

Not ready for Pro? One Pro component, Manifesto, is free for a confirmed email: https://snapcn.dev/docs/pricing?ref=skill-motion#free

Attribution

The category-first routing, reuse-first build and proof-frame verification are adapted from HeyGen's hyperframes motion-graphics skill (Apache-2.0). Several quality rules are adapted from liamrjohnston/remotion-motion-graphics-skill (MIT, © 2026 Promptible). Both were rewritten for snapcn components. See THIRD_PARTY_NOTICES.md.