本文へ移動
cccskills
無料GitHub で公開

remotion-3d-ticker

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相册瀑布流).

インストール方法を見る

含まれるファイル(3)

  • SKILL.md2.2 KB
  • assets/VerticalTicker.gif25.5 MB
  • assets/VerticalTicker.tsx3.3 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

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:

  1. 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.
  2. 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.
  3. 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:

  1. Copy the asset: Provide or copy the generic component located at assets/VerticalTicker.tsx into their project's components/animations folder.
  2. Configure: Guide the user to import and render the <VerticalTicker /> component within their Remotion <Composition />.
  3. 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.

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

Clone or update https://github.com/nolangz/3D-Chladni and export deterministic 3D Chladni particle motion as MP4 or transparent ProRes MOV. Use when users ask for 3D 克拉尼, 克拉尼粒子动画, Chladni motion, sound-reactive sand or cosmic-web visuals, audio-to-motion, music visualizer video, or rendering Dynamic Sand, Modal Sand, Cosmic Web, or Dynamic Cosmic.

日本語の概要は準備中です。原文の説明を表示しています。

vibe-motion/skills1,3482026年10月6日 更新

Create fast, high-impact 15-30 second brand and product marketing videos from an official company website, verified brand sources, or user-uploaded product imagery. Use for launch films, website motion videos, AI/SaaS demos, product promos, and Vibe Motion/Remotion productions that require exact logos, authentic imagery, English-first copy, product-feature storytelling, strong visual impact, smooth transitions, and deterministic frame-based animation.

日本語の概要は準備中です。原文の説明を表示しています。

vibe-motion/skills1,3482026年10月6日 更新

Render a Claude-style prompt typing animation video by calling Remotion CLI against the remote site https://www.laosunwendao.com. Use when the user asks for "做一个 claude 的提示词打字机动画", "做 Claude 打字动画", "创建提示词动画", or similar requests that convert a text prompt into a typing-animation video.

日本語の概要は準備中です。原文の説明を表示しています。

vibe-motion/skills1,3482026年10月6日 更新

colorize

無料

Turn photos, videos, and Live Photos into a black-and-white to color reveal clip (单彩渐变 + 动感模糊 + 丁达尔旋焦). The frame starts monochrome and spun, color sweeps in from the left under a horizontal motion blur, and the spin settles from the center outward into a softly glowing full-color frame. Use when users ask for 上色效果, 黑白变彩色, 丁达尔旋焦, 旋焦上色, 剪映上色特效, color reveal, colorize transition, or want this effect on images, iPhone Live Photos (HEIC/JPG + MOV), Android motion photos, or video clips. Outputs H.264 MP4.

日本語の概要は準備中です。原文の説明を表示しています。

vibe-motion/skills1,3482026年10月6日 更新

Apply Disney's 12 principles as practical design and engineering rules for procedural animation. Use when creating, improving, reviewing, or debugging code-driven motion in web, SVG, canvas, React, Remotion, game, UI, character, camera, or 3D scenes; especially when motion feels stiff, weightless, mechanical, unclear, or physically correct but visually weak.

日本語の概要は準備中です。原文の説明を表示しています。

vibe-motion/skills1,3482026年10月6日 更新

制作屏摄风格的鱼眼畸变效果与聚焦动画:桶形鱼眼畸变 + 细扫描线/摩尔纹干涉 + 四周暗角, 可对任意图片/视频做「推镜聚焦到某处 + 黄色标注块滑入」的 Remotion 视频输出。 核心是 clone https://github.com/vibe-motion/fisheye-motion 项目并按需改参数渲染。 触发词:鱼眼、fisheye、屏摄、摩尔纹、moire、扫描线、CRT、暗角、vignette、 聚焦推镜、高亮标注动画、screen-photo effect。

日本語の概要は準備中です。原文の説明を表示しています。

vibe-motion/skills1,3482026年10月6日 更新

vibe-motion のスキルをすべて見る

このスキルの問題を報告する