Claude Code skill · MIT

Motion design that is code.

106 frame-exact effects for PVs, trailers and kinetic type. Pick one, copy it into your Remotion project, set its props. A re-render gives the same film, so you can edit, re-cut and re-render.

Install the skill Browse the effects ↓

106effects

6categories

66clips in this gallery

MIT+ Apache-2.0 ports

Six of the library's effects playing: ink blot, slam text, dolly zoom, ASCII glyph filter, shatter and extruded type

Code, not clipsEvery effect is a React component driven by the frame number. Change a prop, re-render: no generated video to throw away.

Cut to the beatThe skill measures your track's tempo grid, plans shots on it and checks the finished film for freezes, flashes and drifting cuts.

Measured, not promisedRe-rendering a frame gives the same pixels for 89 effects and at most 2 levels of anti-aliasing rounding for the other 17.

Use it in three steps

Needs Claude Code, Node.js 18+, ffmpeg and Python 3.10+. The effects themselves only need Remotion.

1 · Install the skill

One clone into your skills folder.

git clone --depth 1 https://github.com/saikizhou-cyber/s17-motion-art.git ~/.claude/skills/s17-motion-art

2 · Ask for a film

In Claude Code, describe what you want.

/s17-motion-art Make a 30-second PV for ./track.wav, original characters, three creative directions first.

3 · Or just take an effect

Copy only the effects you use into any Remotion project.

python ~/.claude/skills/s17-motion-art/library/gallery/pick.py ink-blot,slam-text --to src/s17

The effects

Real renders of the library's own demos (640×360, looped, no edits). Click a clip to pause it.

ink-blot: Ink blot - A coloured ink blot spreads from a point with a ragged, smoky edge until it swallows the frame, then a ragged hole opens from the same spot and pushes the ink out past the edges onto the next scene.

velvet-curtain: Velvet curtain - A heavy red stage curtain with deep sheened folds sweeps in from the right with its hem trailing, the picture dims beside it; then it is drawn back and the next scene brightens up behind it.

shatter: Shatter - A crack flashes across the frame, then it splits into glass shards that burst outward from the centre, spinning and swelling past the camera to uncover the next scene.

glitch-cut: Glitch cut - The frame tears into horizontal slices with RGB split and block leaks and hard-swaps scenes inside the mess: a 14-frame light tear, then a 30-frame heavy datamosh burst with scanlines and strobe.

dust-dissolve: Dust dissolve - The outgoing frame crumbles into fine square specks of itself, bright shapes and lettering first, that shrink and blow off downwind in a fan of streams while the next scene is uncovered behind a dark ash rim.

blob-reveal: Blob reveal - A lumpy central blob and rings of satellite bubbles bloom out of the middle, their edges wobbling with a rotating wave and melting together, and the next scene fills in through them.

versus-slam: Versus slam - Two pictures on a slanted seam race in from opposite sides, collide on the diagonal with a white flash, spikes and a screen shake, and a yellow VS stamp is pressed onto the seam.

tile-wipe: Tile wipe - A 16x9 grid of rounded yellow and black tiles pops in from the centre outwards, each spinning up from nothing, snaps shut into a solid checkerboard over the old scene, then shrinks away from the edges inwards to uncover the new one.

bar-wipe: Bar wipe - Five slanted bars sweep across from the middle out, each led by a yellow band, revealing the next scene in ~18 frames.

comic-panels: Comic panels - The shot is cut into three slanted comic panels with paper gutters and ink outlines that slap in two frames apart as wide, close-up and detail angles; the middle one then swells over the page into the next shot.

crt-off: CRT off - The picture squashes to a bright horizontal line with red/blue fringing, pinches to a dot and dies to black; B then powers on from a dot through a line to full frame.

flare-sweep: Flare sweep - A thin blue anamorphic streak with a glowing core races in from the left, blooms to a full white-out at the midpoint where the shot changes, then streaks away to the right.

halftone-wipe: Halftone wipe - A wave of ink-edged dots swells across the frame at 30 degrees, the new scene inside each dot, until the dots touch and merge into the full picture.

impact-cut: Impact cut - Hard cut on the beat: the outgoing shot squeezes in, two flash frames hide the swap, the new shot lands punched in at 1.12x and shakes itself still.

lens-punch: Lens punch - The old shot dives into a fisheye zoom with radial blur, roll and red/blue fringing, hard cut at the midpoint, the new shot settles out of the same distortion with a little handheld shake.

pixelate: Pixelate - The frame breaks into square blocks that tick up to a coarse 32 x 18 grid, blocks flip to the next scene around the midpoint, then the grid ticks back down to sharp.

revolve: Revolve - The frame whips around a point like a spinning camera: rotation, a core twist, zoom to 2.2x and motion blur, the scene swaps under the blur and unwinds into B.

screen-melt: Screen melt - The old picture is sliced into 30 hard-edged columns that slide off the bottom at different speeds, the middle columns running ahead, exposing the next scene behind them.

shape-burst: Shape burst - Ink, paper and yellow rings burst out of the centre one after another until yellow covers the frame, then burst back and open a hole onto the new scene.

spiral-cover: Spiral cover - A dark whirlpool of spiral arms with a smoky, glowing edge spreads from a point until it covers the frame, then a hole with the same glowing rim opens from that spot onto the next scene.

strobe-cut: Strobe cut - The two shots flip back and forth, slowly at first then every frame, optionally with black frames between, and settle on the new shot.

swish: Swish - Zoom-through: the old shot rushes into a single point at 5x with motion blur, cuts, and the new shot flies out as a mirror-tiled swarm that slows into one full frame.

text-mask-zoom: Text mask zoom - NEXT slams onto a paper backdrop with the next scene visible only inside its letters; the camera then falls through the X until the new scene fills the frame.

slam-text: Slam text - A word drops from 2.6x to 1x in 6 frames with a rotation settle, a 2-frame flash card and a decaying shake.

extrude-pop: Extrude pop - A flat heavy word lifts off the page on a solid stepped extrusion with a stamp overshoot, then keeps breathing slightly.

rush-type: Rush type - One word at a time: it arrives, rests sharp, then rushes at the camera leaving vertical red / green / blue shutter trails before the next word cuts in.

scramble-decode: Scramble decode - Wrong glyphs cycle through every character slot and resolve to the real text left to right, each lock flashing a block; the exit scrambles it away from the last character back.

dust-text: Dust text - A word drains to grey and crumbles through a noise threshold while small dust quads (and optional red petals) are born where the letters vanish, drift on the wind, rise and fade out.

type-wall: Type wall - Rows of one word fill the frame and scroll in opposite directions at different speeds, solid, outline and a colour band, surging and skewing on the beat.

split-flap: Split flap - An airport board: each character is a two-leaf card stepping along a drum alphabet, the upper leaf falling and the lower leaf landing with hinge shading, cells settling left to right.

bar-reveal: Bar reveal - A solid accent bar wipes across each line at line height in 8 frames, then moves on and leaves the text sliding into place in its wake; a second bar takes it away on exit.

beat-words: Beat words - One auto-fitted word on screen at a time, hard-cut on each beat frame; the entrance rotates (drop, slide left, slide right, pop, plus stomp, slam, flicker) and the held word keeps creeping in.

char-cascade: Char cascade - Each character rises 0.6 em while fading in and de-blurring on an expo-out curve, 2 frames apart; modes rise, drop and scale-stamp, ordered from the start, end, centre or at random.

echo-stack: Echo stack - One crisp line focuses in at the centre while cyan outline copies unfold above and below, squash toward the edge, fade and keep drifting like a drum.

glitch-text: Glitch text - The word stutters on held frames, jumps in horizontal slices with red / cyan ghosts and symbol flips, then locks clean; repeatable on beats.

mask-rise: Mask rise - Each line swings up from behind its own invisible mask edge with a slight tilt and blur, lines 4 frames apart; the exit slides them up and out through the same edge.

number-roll: Number roll - An odometer: each digit is a 0-9 strip that spins up and lands on its digit with a snap, places stopping left to right behind motion ghosts, the whole number popping when the last one locks.

outline-draw: Outline draw - Glyph outlines trace themselves as a stroke letter by letter, then a fill wipes up inside each one and one diagonal sheen crosses the word.

paragraph-reveal: Paragraph reveal - A four-line lore paragraph climbs out of invisible line masks character by character (SplitText finds the real line breaks), two words glow yellow, then the lines slide out upwards one after another; also word-slide and character-flip modes.

sliced-text: Sliced text - A huge word cut into uneven strips that slide in from alternating sides, land one after another, close their seams into a solid word and leave out of the opposite side.

text-cylinder: Text cylinder - The word sits on every face of a lit 3D drum; each letter spins up from behind the screen one after another, brakes and settles on the front face with a rock-back.

tracking-in: Tracking in - Letter-spacing collapses from 0.42 em to tight while the text fades in and sharpens (eased or a springy squeeze); hits pulse the tracking open and shut on the beat.

type-plane: Type plane - A heavy extruded word lies on a receding plane; a perspective camera dollies at its first letter, which explodes toward the lower left while the last letters hold.

typewriter: Typewriter - Text types in left to right at a speed or on a [frame, count] schedule (a few characters, a held beat, then a burst) with a solid-while-typing blinking block cursor and a flash on each new character.

dolly-zoom: Dolly zoom - The hero holds one size while the corridor behind swells 1.9x and pylons rush outward: the camera backs off as the lens zooms in.

bullet-time: Bullet time - The burst freezes mid-air while the camera yaws 55 degrees around it through 3D layers, hovers, swings back, and time resumes.

rack-focus: Rack focus - The foreground bust goes soft as the neon sign behind it sharpens, hexagonal bokeh discs swelling and shrinking with the pull, then it racks back.

card-flurry: Card flurry - Ten cards burst out of the centre and tumble through a 3D field, near ones dark and soft, backs flashing as they turn; one swings to a stop face-on in a glow.

crash-zoom: Crash zoom - The wide shot slams into a close-up on a chosen point in 6 frames with radial speed blur, then lands with an elastic overshoot or a dead stop and a decaying shake.

parallax-stack: Parallax stack - Seven depth layers (sky to foreground) slide at different speeds as the camera pans right and pushes in 1.45x, with depth blur and haze.

kanada-snap: Kanada snap - Five panels in a row each whip in from a fisheye 3D pose (turned ~60 degrees, 1.5x, 320 px lens) and snap flat in 18 frames, swing 5 degrees past, shake and drop a hard shadow.

camera-shake: Camera shake - The whole frame jolts on each hit: either smooth noise on x / y / roll that starts violent and dies gently (trauma squared), or hard 1-frame offsets from a decaying table.

dutch-roll: Dutch roll - The whole frame hangs at -10 degrees with a slow drift, then rolls past level and settles dead flat on the beat.

handheld: Handheld - The frame drifts and tilts like a shoulder-held camera: three octaves of smooth noise on x, y and roll, with presets for a steady glide and a running bob.

letterbox: Letterbox - 2.35:1 bars slam in from top and bottom with a hairline halo on their inner edges, flick open for one glitch frame, and slam away.

slow-push: Slow push - The shot creeps in toward a focus point with a built-up start and a faint Lissajous drift, corners darkening as it goes; reversible as a pull-back.

smear-frames: Smear frames - A card whipped across the frame drags four countable ghost copies that merge into it on landing; the lane below uses a dense shutter blur instead.

gradient-map: Gradient map - The whole picture re-inked in a 2..6 colour ramp by luminance: indigo-pink-gold, then a colour swap to ice, with the ramp sliding over the image and a final 5-band poster step.

ascii-glyph: ASCII glyph - The picture re-printed as terminal characters, each cell choosing the glyph whose shape fits its tones and edges (strokes follow outlines); mono phosphor or tinted by the scene.

ink-edges: Ink edges - Pen-ink lines snap onto every contour, the colour falls away to leave line art on paper; then a second shot redraws the scene as pink-to-cyan neon contours on black.

block-glitch: Block glitch - Wide rectangles jump to other parts of the picture, flip to green/magenta, or show the scene a few frames ago.

impact-frame: Impact frame - A 6-frame crash zoom slams into the target, then for exactly 3 frames the picture flips to a high-contrast black-and-white negative with 30 radial speed lines and a red/cyan fringe, and snaps back with a decaying shake.

glow: Glow / halation - Three blurred, brightened copies sit under the element and screen onto the backdrop; on a hit the wide layers swell and flare at full strength, fall over 20 frames and settle into a soft steady glow while the element punches.

riso-hit: Riso hit - On impact the element splits into a pink and a blue single-colour plate that multiply and swing in opposite directions with a decaying offset, then snap into register with a small scale pulse.

analog-glitch: Analog glitch - Scan-line strips tear sideways, the picture rolls up the screen and a green fringe snakes down it, in short bursts.

crt: CRT screen - The picture opens from a bright line into a barrel-bent glass with scanlines, RGB phosphor stripes, bloom and a dark rim.

film-grain: Film grain - Boiling grain that clumps like emulsion, strongest in the mid-tones, with a vignette and a warm glow in the lower corners.

god-rays: God rays - Warm light shafts fan out from the light, cut by the mountains and the figure, and sharpen from a soft radial smear into a rotating hard-edged sunburst.

halftone: Halftone - The scene re-printed as rotated CMYK (or RGB, one-ink dot, ruled line) screens; plates pull into register as the dots grow in.

lens-shift: Lens shift - The picture sinks to a grainy, gently waving grey while a square lens glides over it and shows the scene in full colour, bulged toward the rim with a radial RGB split.

light-leak: Light leak - A band of hot-pink, orange and gold light sweeps in from the edge, burns out to near-white at the peak while the cut happens underneath, then drains away in a soft tail.

light-streak: Light streak - Every bright point in the frame snaps out a long horizontal anamorphic streak, white-hot at the core and fading to blue (then amber) in the tails.

posterize: Posterize / cel - The picture crunches from smooth tone down to four flat cel bands that keep their own hue, drains to a pure tone ramp, comes back, then switches to a 3-step-per-channel colour crush.

rgb-split: RGB split - Red and blue ghosts jump apart on a beat (any angle, or radial from the centre) and ease back, green stays put.

screen-texture: Screen texture - Stepped film grain (a new pattern every 2nd frame), soft or hard scanlines that crawl, a radial vignette, warm lower-corner falloff and optional lens dirt, as one DOM overlay; the demo adds one layer at a time.

shockwave: Shockwave - A bright refracting ring bursts from an impact point, bending the picture outward with a colour fringe as it races across the frame and fades; two hits, each with a punch-in.

slice-glitch: Slice glitch - For 1-3 frames the picture breaks into horizontal bands and macroblocks that slide sideways, stretch and pull from the frames before and after, over a 50/50 ghost of the neighbour frame.

vhs: VHS tape - Colour smears right off every edge, lines wobble, a noisy band crawls up and the bottom tears like a worn tape.

zoom-blur: Zoom blur - The picture streaks outward from a point, a fast dolly-in smear that snaps back sharp, with a faint colour fringe.

radial-burst: Radial burst - A ring of 20 kite-shaped lines pops outward around a word on stepped radii with a ragged stagger, holds, fades; a slowly turning sunburst sits behind it.

shard-spray: Shard spray - Sharp two-tone triangle shards are flung from a point along a seeded fan, braking hard, spinning and flipping, falling under gravity and shrinking out; a few long streaks lead.

confetti: Confetti - Flat chips, strips and dots leave a cone, a point or two corner cannons at seeded speeds, lose speed to drag, then flutter down flipping and swaying; fades over the last 30 %.

hud-frame: HUD frame - The panel fades in, then corner brackets / an octagon / a notched outline draw on from their corners with a bright spark on each head, and pips and ticks flicker on.

motion-path: Motion path - Three plane glyphs fly an S-curved route in formation with autoRotate, the route drawing itself just ahead of the lead, a tapered comet behind each plane, nodes lighting as the lead passes, and rings and a lock punch on the destination marker when they land.

svg-morph: SVG morph - One emblem morphs through circle, shield, star, lightning bolt and crest on an even beat: the fill is tweened along, every arrival punches the scale with an elastic settle and a thin outline of the previous shape expands out from under it.

speed-lines: Speed lines - Focus: tapered rays rush in from the edges and snap onto a point in 3 frames, hold boiling, retract. Trail: a stretching element lands on a damped spring with streaks behind it.

alert-burst: Alert burst - A fan of 2-5 sharp spikes radiates from a root point, pops in on stepped scale, then holds with beat kicks and a hand-drawn 6 fps boil; flat offset shadow.

line-unfold-panel: Line unfold panel - A white-hot line is pulled out of a point to both sides, the panel opens vertically and its content fades up; the exit squashes to a line, shrinks to a dot and blinks out like an old CRT.

path-draw: Path draw - SVG paths draw themselves on (staggered, in sync, one after another or scripted) with a fill that fades in after, or a tapered comet window with a bright head runs round them.

pattern-scroll: Pattern scroll - A seamless full-frame graphic (stripes, chevrons, dots, checker, hex, grid, diamonds, truchet) scrolls at any angle and direction in one or two colours; optional ease-up from rest.

progress-ring: Progress ring - A hard-edged conic ring (or round-capped stroke ring) fills with an eased curve while a bright frontier bar leads it and the centre number counts from the same value; a shock ring marks the end.

rec-overlay: REC overlay - White mono camcorder text with a dark outline: red REC dot blinking about every half second, battery, date stamp, running HH:MM:SS counter and viewfinder corner marks.

reticle-lock: Reticle lock - Four yellow L-brackets fly in oversized, close onto the target with an overshoot, a scan line sweeps it, then the brackets click shut with a flash, shock ring and label.

shape-morph: Shape morph - A solid shape melts into the next (circle, star, badge, hexagon, or any SVG path) with a colour mix, a swell and a twist while an outline echo turns the other way.

shockwave-rings: Shockwave rings - On a hit a thick ring pops from a point (radius on expo-out), thins to a hairline as it expands and fades; 1-3 rings stagger, a pale echo trails the first frames.

telemetry-readout: Telemetry readout - Four corner brackets draw on, small mono label:value lines fade in around them, and every value scrambles through same-type characters that lock in left to right.

trim-burst: Trim burst - A ring of short strokes shoots out of a point, grows, travels and shrinks to nothing at its reach (outer end launches fast, inner end chases), dots popping ahead.

flash-freeze: Flash freeze - A slowly pushing shot, then three white camera flashes, each hard-cutting to a tighter crop (wide, card 2.3x, digit 4x) that drops and settles like shutter afterglow.

speed-ramp: Speed ramp - The footage rushes past at 2.2x with motion blur, eases down to a crisp 0.2x window where the target crosses the centre, then speeds off again; freeze presets stop it dead on a hit.

hit-stop: Hit stop - On each hit the whole picture freezes for 2 frames under a white flash and a shake, then thaws with a decaying scale and brightness pump.

trailer-hook: Trailer hook - Three 9-frame shots hard-cut (wide, wide, 2.2x punch-in), each creeping 1 -> 1.04, then 6 frames of dead black and the title rises in.

blackout-slam: Blackout slam - Footage breathes along to a beat, cuts to 12 frames of dead black, then the title slams in from 1.35x with a shake, a flash and a ring.

beat-accelerando: Beat accelerando - Six framings hard-cut at shrinking intervals (49, 16, 12, 8, 6, 4 frames by default), the last cut slamming back to the master shot with a shake and a slow push-in.

cadence-shift: Cadence shift - A card crosses the screen in chunky 10 fps steps (on threes), then at frame 48 the same animation runs on ones: a silky sprint with stretch, afterimages, overshoot and settle.

gsap-eases: GSAP ease lanes - Eight lanes race one dot each from 0 to 1 with a different GSAP ease (power4.out, expo.inOut, back, elastic, bounce, a squashing CustomBounce, a hand-drawn CustomEase, steps) beside a curve thumbnail with a cursor and a live value readout; driven by interpolate(), not a timeline.

strobe-blackout: Strobe blackout - The picture creeps in while 2-frame black flashes come faster (8 frames apart, then 3), then a hard cut to a tight crop with a dark hammer pulse.

Also in the library

These have contact-sheet previews in the repository but no clip here yet.