vibe-motion
Install Remotion 3d Ticker
Pick your agent. Every command is ready to paste.
npx skills add vibe-motion/skills --skill remotion-3d-tickerThe open skills CLI detects your agents (Claude Code, Cursor, Codex and 70+ more) and installs to the right folder. Add -g to install globally.
01
Install it
Run the command above, or upload the folder in Claude.
02
Ask naturally
Describe the task. Your agent loads remotion-3d-ticker when the request matches its description.
03
Name it if needed
If it does not trigger, say “use the remotion-3d-ticker skill”. In Codex, type $remotion-3d-ticker.
Remotion 3D Vertical Ticker
This skill provides a reusable architectural pattern and component for creating infinite, multi-column 3D scrolling animations (often used for photo galleries, 3D照片滚动墙, tech-stack showcases, or credit rolls) in Remotion.
How it works
The infinite scrolling illusion is achieved using domain duplication and modular arithmetic, combined with CSS 3D transforms:
- The Math of Infinity: We duplicate the content list (
[...items, ...items]). We calculate a `progress` from 0 to 1 based on the frame rate and desired loop duration. We translate the column from `0%` to `-50%` (or `-50%` to `0%` for reverse). Because the content is duplicated, the frame at `-50%` looks identical to the frame at `0%`, creating a seamless loop when it resets. - 3D Perspective: A parent wrapper applies `perspective: 1000px`, `rotateX(20deg)`, and `scale(1.2)`. The scale is crucial to ensure the tilted top and bottom edges stretch beyond the 2D screen bounds, preventing empty background bleeding.
- Masking: CSS `linear-gradient` overlays are placed absolutely at the top and bottom with a high `zIndex` to smoothly fade the content into the background color.
How to use this skill
When a user requests a vertical scrolling gallery or infinite ticker:
- Copy the asset: Provide or copy the generic component located at
assets/VerticalTicker.tsxinto their project's components/animations folder. - Configure: Guide the user to import and render the
<VerticalTicker />component within their Remotion<Composition />. - Adapt Data: The component is data-agnostic. It accepts any array of image URLs or React nodes as columns. You can specify different `durationInSeconds` and `direction` (1 or -1) per column to achieve parallax.
Provided Assets
assets/VerticalTicker.tsx: The highly reusable, strongly-typed Remotion component implementing the 3D infinite scroll pattern.
Tips for Remotion 3d Ticker
- • Start a fresh session after installing so your agent picks up the new skill.
- • It bundles reference files. The agent reads them only when needed, so they cost no context until then.
- • It is part of a pack with 15 skills. Install only the ones you need with --skill to keep triggers precise.
- • If two skills overlap, mention the one you want by name.
Questions about Remotion 3d Ticker
What does the Remotion 3d Ticker skill do?
Creates infinite 3D vertical scrolling ticker animations in Remotion. Use when you need to build a parallax gallery, infinite image scroll, multi-column continuous vertical scrolling effect, or a 3D photo wall (3D照片滚动墙 / 3D相册瀑布流).
How do I install Remotion 3d Ticker?
Run "npx skills add vibe-motion/skills --skill remotion-3d-ticker" in your project. The skills CLI installs it for Claude Code, Cursor, Codex and 70+ other agents. In Claude on the web, upload the skill folder as a ZIP under Customize > Skills.
Does Remotion 3d Ticker work in Cursor and Codex?
Yes. Remotion 3d Ticker uses the open SKILL.md format, so it works in Claude Code, Claude, Cursor, OpenAI Codex, Gemini CLI, GitHub Copilot and other agents that support agent skills.
Is Remotion 3d Ticker free?
Remotion 3d Ticker is open source on GitHub. It is free to install; check the license before commercial use.
Who made Remotion 3d Ticker?
Remotion 3d Ticker is published by vibe-motion in the vibe-motion/skills repository, together with 14 other skills.
