remotion-3d-ticker
Creates infinite 3D vertical scrolling ticker animations in Remotion
Install / Use
npx skills add vibe-motion/skills --skill remotion-3d-tickerInstalls into whichever agent you are using.
SKILL.md
Installable skill definition
Quality Score
Category
Development & EngineeringSupported Platforms
Our assessment of remotion-3d-ticker
remotion-3d-ticker scores 68/100 on our quality scale, 3412th of 4,259 Development & Engineering skills we index.
Its SKILL.md is 2.2 KB long, split into 4 sections and no code examples: moderately detailed.
With 1,266 GitHub stars, it is one of the more widely adopted skills in the catalogue.
Maintenance, license and trust
- The repository was last updated 27 days ago, so remotion-3d-ticker is actively maintained.
- No license is declared. By default that means all rights are reserved: you can read it, but reusing or redistributing it is not clearly permitted. Ask the author before building on it commercially.
- Its trust signals score 88/100, with 1 caution from licensing, adoption, age or documentation. These come from repository metadata, not a code audit — read the skill file before letting an agent act on it.
remotion-3d-ticker compared with similar skills
All 4 of these similar skills score higher than remotion-3d-ticker; compare them before choosing.
| Skill | Score | Stars | Updated | Format |
|---|---|---|---|---|
| remotion-3d-ticker (this skill)by vibe-motion | 68 | 1.3k | 27d ago | SKILL.md |
| ai-job-searchby MadsLorentzen | 100 | 44.6k | 1d ago | CLAUDE.md |
| claude-howtoby luongnv89 | 100 | 41.7k | today | CLAUDE.md |
| LocalAIby mudler | 100 | 49.3k | today | MCP Server |
| algorithmic-artby anthropics | 100 | 177.9k | 8d ago | SKILL.md |
Frequently asked questions
- How do I install remotion-3d-ticker?
- Run
npx skills add vibe-motion/skills --skill remotion-3d-ticker. The install tabs above show the steps for each supported agent. - Which AI agents does remotion-3d-ticker work with?
- It is written for Universal, as a SKILL.md file. Other agents that read the same format can often use it too.
- Is remotion-3d-ticker safe to use?
- It declares no license and scores 88/100 on trust signals. Skills are instructions an agent will follow, so read the file before installing it and do not approve commands you do not understand.
- Is remotion-3d-ticker still maintained?
- The repository was last updated 27 days ago, so remotion-3d-ticker is actively maintained.
Skill content
View source on GitHubname: remotion-3d-ticker description: 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相册瀑布流).
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.
Related Skills
ai-job-search
44.6kThe job search that runs on your machine. AI job application framework built on Claude Code: evaluate postings, tailor CVs, write cover letters, prep interviews. Fork it and own it.
claude-howto
41.7kA visual, example-driven guide to Claude Code — from basic concepts to advanced agents, with copy-paste templates that bring immediate value.
LocalAI
49.3kLocalAI is the open-source AI engine. Run any model - LLMs, vision, voice, image, video - on any hardware. No GPU required.
algorithmic-art
177.9kCreating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems.
Languages
Trust signals
From repository metadata: license, adoption, age and documentation. Not a code audit — see the Safety scan above for what the skill file itself contains.