remotion-3d-ticker — Claude Code skill: what it does, how to install
Builds looping 3D column scroll effects for Remotion videos. Useful for multi-lane photo feeds, credits, and parallax showcases.
npx skills add vibe-motion/skills --skill remotion-3d-ticker -a claude-codeWhat remotion-3d-ticker does
This skill adds the typed VerticalTicker.tsx component to your Remotion project. The loop illusion relies on array duplication and frame-based math: columns translate vertically from 0% to -50%. The frame at -50% matches the initial state exactly. The animation resets cleanly without visual jumps.
CSS 3D transforms handle depth with perspective: 1000px and rotateX(20deg). The scale(1.2) factor is mandatory here. Without scaling, the tilted edges expose the empty canvas background. Gradient overlays positioned at the top and bottom hide outer boundaries by blending items into the background color.
The component accepts any array of React nodes or image URLs across multiple columns. Each column supports its own durationInSeconds and direction (set to 1 or -1). Varying these settings creates distinct vertical scrolling speeds across columns.
What it helps with
- build an infinite multi-column 3D photo wall in Remotion
- create vertical parallax motion with independent column speeds
- loop vertical ticker feeds without visible jump frames
- blend tilted 3D animation edges smoothly into the background
Example prompts for the agent
- Add a 3D infinite vertical photo wall to my Remotion composition.
- Configure VerticalTicker with alternating column directions and parallax speeds.
- Create a tilted vertical scroll animation for tech stack logos.
How to install remotion-3d-ticker
1Skills CLI (Vercel)
npx skills add vibe-motion/skills --skill remotion-3d-ticker -a claude-code2Manually: put the files in place
~/.claude/skills/remotion-3d-ticker/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/remotion-3d-ticker/
1Skills CLI (Vercel)
npx skills add vibe-motion/skills --skill remotion-3d-ticker -a codex2Manually: put the files in place
.agents/skills/remotion-3d-ticker/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add vibe-motion/skills --skill remotion-3d-ticker -a cursor2Manually: put the files in place
.cursor/skills/remotion-3d-ticker/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install vibe-motion/skills remotion-3d-ticker2Manually: put the files in place
.github/skills/remotion-3d-ticker/SKILL.md1Skills CLI (Vercel)
npx skills add vibe-motion/skills --skill remotion-3d-ticker -a gemini-cli2Platform CLI
gemini skills install https://github.com/vibe-motion/skills --path remotion-3d-tickerManually: put the files in place
.devin/skills/remotion-3d-ticker/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add vibe-motion/skills --skill remotion-3d-ticker -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about remotion-3d-ticker
How to install remotion-3d-ticker in Claude Code?
Run npx skills add vibe-motion/skills --skill remotion-3d-ticker -a claude-code in your project terminal.
What does remotion-3d-ticker do?
It provides a reusable VerticalTicker component that renders infinite, multi-column 3D scrolling animations inside Remotion compositions.
Why does the ticker wrapper use scaling?
A scale(1.2) transform is applied so the tilted 3D edges stretch past the canvas bounds and do not reveal empty background areas.
