Communitygithub.com

raycfu/effects

Add any of 51 video effects to a talking-head video (orbit, spotlight, glass widgets, timeline, checklist, headline wall, comment box, phone fan, liquid glass graph, match-cut, iPhone toggles, LED sign, over-the-shoulder zoom, iMessage pop-ups, place-in-grid and more). Effects track the speaker's face and can sit behind their head. Use when the user types /effects, names one of the effects, or asks to add an effect, zoom, grade, sticker or animation to their video.

What is effects?

effects is a Claude Code agent skill that add any of 51 video effects to a talking-head video (orbit, spotlight, glass widgets, timeline, checklist, headline wall, comment box, phone fan, liquid glass graph, match-cut, iPhone toggles, LED sign, over-the-shoulder zoom, iMessage pop-ups, place-in-grid and more). Effects track the speaker's face and can sit behind their head. Use when the user types /effects, names one of the effects, or asks to add an effect, zoom, grade, sticker or animation to their video.

Works with✓Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/raycfu/claude_design_skills/tree/HEAD/effects

Ask in your favorite AI

Open a new chat with this agent skill pre-loaded.

Documentation

Effects: 51 video effects (by Ray, @raycfu)

The user is usually not technical. Keep replies short and friendly, do the work for them, and never ask them to run commands themselves.

All paths below are relative to this skill's folder (the folder this SKILL.md is in). Use its absolute path in commands.

1. First run: set up (once)

Run bash scripts/setup.sh. It prints READY when done (the first time takes 1 to 3 minutes).

  • NEED_FFMPEG: install it for them. On a Mac: brew install ffmpeg (if brew is missing, tell them to install Homebrew from brew.sh first). On Windows: winget install ffmpeg.
  • NEED_PYTHON: install Python 3.12 (Mac: brew install [email protected], Windows: winget install Python.Python.3.12), then run setup again.
  • On Windows, the Python is at .venv\Scripts\python.exe instead of .venv/bin/python.
  • Windows without bash: run py -3.12 -m venv .venv, then .venv\Scripts\python.exe -m pip install -r requirements.txt. Optional cleaner cutout: download https://github.com/PeterL1n/RobustVideoMatting/releases/download/v1.0.0/rvm_mobilenetv3_fp32.onnx into models/.
  • NEED_PYTHON_312: their default Python could not install the packages. Install Python 3.12 as above and run setup again.
  • Harmless log lines from TensorFlow Lite, MediaPipe or OpenCV (INFO:, WARNING:, W0000, [ WARN) are normal. Only Done: or saved means success.

2. Get the video and the effect

  • Video: the user drags the file into the chat, or gives a path. A vertical phone video works best.
  • Effect: from /effects <name>, or from what they describe. Match their words to the table below. Unsure? Show them the list.
  • Their name and handle: effects that show a profile (glass-widgets, comment-box, pastel-word, profile-wall, headline-wall and others) default to Ray / @raycfu. Ask the user for theirs once and pass name and handle on every effect.

3. Find the timing

  • If they say "on the word X" or "when I say ...", run .venv/bin/python scripts/words.py <video> and use those times.
  • If they give no timing, apply the effect for the whole clip, or ask which part (one short question).
  • Short windows look best: 1.5 to 4 seconds per effect.

4. Draft, check, render

  1. Write the plan next to their video as <video-name>_effects.json:
    {"effects": [
      {"fx": "orbit", "start": 3.2, "end": 6.0},
      {"fx": "backdrop-word", "start": 14.0, "end": 16.3, "text": "CLAUDE"}
    ]}
    
  2. Check frames first (fast): .venv/bin/python scripts/fx.py --plan <plan.json> <video> <folder>/check.png --still 4.5,15.2, using the middle of each effect. Look at the PNGs yourself. Fix the text, timing or options if something looks off (covers the face, cut off by the edge, unreadable).
  3. Render: .venv/bin/python scripts/fx.py --plan <plan.json> <video> <video-name>_effects.mp4. The output keeps their original audio. It renders at 1080p by default; add --width 2160 for 4K (slower).
  4. Tell them where the file is. Remind them in one line to watch it before posting: it drafts, they approve.

A single effect needs no plan: .venv/bin/python scripts/fx.py orbit <video> <out.mp4> --start 3 --end 6 --text "..." --opt key=value.

The 51 effects

#fx nameWhat it doesOptions (all optional)
1noiseReels pile up behind your head, one every quarter secondimages (folder of screenshots or clips), size
2lineupNumbered tiles fan out in an arc above your headtext (tile names joined with |)
3locked-onCorner brackets snap onto your face, the camera follows youzoom (default 1.35), text (tag)
4orbitYour reels circle your head: in front at the bottom, behind at the topimages, count, speed, size
5lean-inA fast punch-in on one wordzoom (default 1.45, max 2), speed
6backdrop-wordA giant word drops in behind youtext, color (hex), font (bold or serif)
7spotlightKills the lights, keeps you littext (glowing word behind you), color, push
8the-billPrints your instructions like a receipt into the wall above your headtext (lines joined with |)
9moodyA moody colour gradegrade (moody, bw, warm, cool, pop)
10swipeA before and after slider sweeps across yougrade (the "after" look)
11todoA checklist card beside your head ticks off as you talktext (items with |), ticks (video seconds with |), title
12comment-boxAn Instagram comment bar types a word and posts ittext (default EFFECTS)
13tapA Follow button pops up and flips to Followingat (video second of the flip), x, y (0 to 1), color
14pause-pointFreezes the frame and points at you with a hand-drawn arrowtext (label), color, label_x
15uninstallA glitchy uninstall bar breaks the frame aparttext
16reel-frameYour video shrinks into an Instagram reel cardtext (handle)
17shortcut-rainKeyboard keys rain down behind youtext (keys with |), count
18reject-stampA big red stamp slams onto the screentext, color, angle, y
19countdown-flipA 3, 2, 1 flip clock above your headfrom
20rabbit-holeThe frame tunnels into itself, spinningratio, speed, spin
21cover-starYou become a magazine cover, title behind your headtext (title), lines (with |), issue, color
22scribbleMarker doodles draw themselves around youtext (label), color
23glass-widgetsFrosted glass widgets and mini artifacts float around your head, plus an Edited by Claude pilltext (big number), name, handle, look (simple for the 3-widget version)
24red-collageBlack and white you, a giant red word behind, three lines slam intext (red word), lines (with |), tag
25split-headlineA headline card slides down and pushes you to the bottom halftext (lines with |), hl (highlighted word), pill
26pastel-wordLavender room, giant word behind you, a profile card gets followedtext, name, handle
27check-pillsGrid-paper room, reel boards behind you, a cursor clicks blue pillstext (pills with |), images
28timelineA dark red film grade with an editing timeline, a REC timecode and a glowing playheadtext (title), sub, tc
29headline-boxA punch-in with a two-line headline, the second line in a white boxtext (lines with |), zoom
30profile-wallYour reels grid fills the wall behind you while a counter ticks upimages, count, label
31tier-listA tier list drops in and Claude flies into S tiertitle, item, others
32broll-splitB-roll on top with a price-tag sticker, you belowimages, text (tag)
33phone-fanYour reels fan out like a hand of phones under a headlineimages, text (lines with |)
34dot-revealYour shot builds out of glowing dots, then snaps to the full picturecolor, cell
35headline-wallYour own headlines pile up behind your head, then a total pops in fronttext (headline::meta|...), total, label
36checklistA Claude task list under your chin: each step spins, then ticks greentext (step::meta|...), title
37liquid-glass-graphA liquid glass card under your chin: a green graph climbs while the number counts uptext (label), from, to (e.g. 197K, 59%), color
38carousel-spinYour reels spin around you in a 3D carousel, then slow to a stopimages, count, size, turns
39match-cutNews pages cut on one word, locked in a red box behind your headtext (the word, default Claude), color
40apple-togglesAn iPhone settings card under your chin flips its switches on, one line at a timetext (rows with |), ticks (seconds with |), color
41led-signThe lights drop and a glowing LED sign types itself out behind youtext (lines with |), color, push
42slow-pushA slow cinematic push-in to your face while the room melts out of focuszoom (default 1.6), blur
43over-the-shoulder-zoomThe camera pushes into one top corner and a see-through liquid glass graph pops beside your head (line climbs, number counts up), pulls back, then the other corner with a second, related bar graph. Your head stays in fronttext (two labels with |), to (two numbers with |, e.g. 197K|672K), zoom (default 2.0)
44messagesiMessage notifications pop in one after another, creamy glass with a soft glow, stacking up above the bottom of the frametext (messages with |), title (default Messages), y
45place-in-gridYou shrink into the centre tile of your 3x3 profile grid on frosted glass, then 8 reels pop in around you, one per frame, with Instagram view counts on every tileimages (folder of your reels or covers), views (9 counts with |, the 9th is yours)
46tape-labelA level strip of yellow tape with your line lands on your chest, kept off your facetext
47select-resizeA blue selection box with handles grabs your number above your head and a cursor drags it biggertext (default 2X)
48wave-trimA dark panel above your head shows your voice; the red dotted silence on both ends collapses until only your words are leftnone
49huge-strikeOne huge serif word wipes in behind your head, then a red line crosses it outtext, at (seconds into the effect when the strike lands, default 0.6)
50crayon-writeA red crayon writes your word behind your head, then underlines it and flies offtext
51fan-buildYour reel covers deal into a fan behind your head, one card at a timeimages (folder of your covers), count (default 13)

Named looks (same effect, a fancier look; they don't add to the count):

  • glitter-spotlight = spotlight with look=sparkle: the room goes dark, golden rays burst from behind your head, a big gold word with a shine sweep, twinkling sparkles and a glow around you. text (the word), color, push.
  • cover-star with look=editorial: a soft warm film look, a classic serif masthead behind your head, an issue line and elegant cover lines. text (masthead), issue, lines (3 lines with \|), right (lines with \|), color, accent, lines_y, right_y.
  • liquid-glass-graph with look=bento: the climbing graph moves to a smoked glass screen behind your head, with glass bento tiles in front of you (a donut, a KPI, bars). text, from, to, donut (29%::label), kpi (672K::label), bars (197\|140\|124::label).
  • apple-toggles now sits above you, tucked behind your head, with a gentle zoom (pos=below for the old under-the-chin card; overlap, zoom).

Aliases work too: bill, to-do, follow, stamp, countdown, cover, rain, pause.

Rules

  • Never cover the face. Everything either goes behind the person or avoids the face by itself; if a check frame still shows text over the face, move it (x, y) or shorten the text.
  • Effects run in the order listed. Put camera effects (locked-on, lean-in, spotlight) first when they overlap others.
  • Zoom never goes past 2x, so the video stays sharp.
  • This skill adds visuals only. Sound effects and captions are up to the user (CapCut works well).
  • These are starter versions. Be honest about that if the user compares them to a reel they saw.

Extra options (Ray's edition)

These were added on top of the starter effects to fix what looked off on real footage. Pass them like any other option ("key": "value" in a plan, or --opt key=value).

EffectOptionWhat it does
any card/orbit effectplay=1Plays each video in the images folder inside its card instead of a still
liquid-glass-graphpos=behindPuts the graph on a dark glass screen behind your head instead of over your chest
liquid-glass-graphsmoke=0.5..0.85Dark smoked glass instead of see-through liquid glass (no smeared copy of your body)
liquid-glass-graph, over-the-shoulder-zoomto=$32,000Currency prefixes and thousands separators count up correctly
checklistsmoke, scale=0.86, bottom=0.95, guard=0Dark readable card, smaller, sitting low so it never touches your face
checklistspan=2.9Seconds over which the ticks land, so the last tick hits your gesture
spotlightflicker=0, lift=0.8Turn off the neon flicker-on, or lower the word so your head covers part of it
cover-starmast_y=0.15Fixed masthead height (pair with a tighter crop so your head overlaps it)
comment-boxlock=1, avatar_color=#FDB827Pin the comment sheet in place, set the avatar color (letter comes from handle)

Hands in front of a card: render the effect, then run .venv/bin/python scripts/hands_front.py <original> <with_effect> <out>.

Cutout quality: if models/rvm_mobilenetv3_fp32.onnx exists, every effect uses Robust Video Matting for the person cutout (cleaner hair, no flicker). Set FX_MATTE=mp to use the original MediaPipe segmenter.

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

Related Skills