Мастерство Клода для создания кинетической типографии / логотипа / промо-графики бренда ** как код ** с Remotion (React) и доставкой MP4. Он охватывает весь путь: чтение справочного клипа и логотипа бренда SVG, проект «сцена за бит» с многоразовыми помощниками анимации, цикл проверки по контакту, как 9:16, так и 16:9 выводов из одной кодовой базы, и Remotion Studio для настроек.

Построен при клонировании движения справочного промо для hundredable.com — рабочий процесс общий, видео не включено.

##Установка

Claude Code (CLI / настольное приложение) — клонируйте навык в папку навыков:

Или только для одного проекта: копировать skills/remotion-motion-graphics в /.claude/skills/.

claude.ai / Cowork — скачать dist/remotion-motion-graphics.skill (или захватить его из последнего выпуска) и загрузить его в Настройки → Возможности → Навыки.

Затем просто попросите движущуюся часть: навык запускает запросы, такие как * «сделать анимированный логотип из этого SVG» *, * «сделать промо-клип, такой как это видео» *, * «Письмо» * или любая работа с кодом удаления.

Структура папок

Что делает рабочий процесс

1. ** Сначала прочитайте материал.

Remotion Motion Graphics - Agent Skill

A Claude skill for building kinetic-typography / logo / brand promo motion graphics as code with Remotion (React) and shipping an MP4. It covers the whole path: reading a reference clip and a brand’s SVG logo, a scene-per-beat project with reusable animation helpers, a verify-by-contact-sheet loop, both 9:16 and 16:9 outputs from one codebase, and Remotion Studio for tweaks.

Built while cloning the motion of a reference promo for hundredable.com — the workflow is general, the video is not included.

Install

Claude Code (CLI / desktop app) — clone the skill into your skills folder:

git clone https://github.com/Boriwatopal/agent-skill-remotion-motion-graphics.git /tmp/rmg && \
cp -R /tmp/rmg/skills/remotion-motion-graphics ~/.claude/skills/ && rm -rf /tmp/rmg

Or for one project only: copy skills/remotion-motion-graphics into /.claude/skills/.

claude.ai / Cowork — download dist/remotion-motion-graphics.skill (or grab it from the latest release) and upload it in Settings → Capabilities → Skills.

Then just ask for a motion piece: the skill triggers on requests like “make an animated logo from this SVG”, “make a promo clip like this video”, “ทำโมชั่นโลโก้”, or any Remotion code work.

Folder Structure

skills/remotion-motion-graphics/
  SKILL.md                              # The workflow: read material → scaffold → scenes → verify → deliver
  assets/                               # Starter code to copy into src/
    theme.template.ts                   #   brand colours, PORTRAIT/LANDSCAPE presets, named scene durations
    layout.ts                           #   useLayout() — every position derives from the frame size
    anim.ts                             #   easing curves, prog(), springAt(), riseStyle(), typed()
    fonts.ts, Main.template.tsx, Root.template.tsx
    components/
      Backgrounds.tsx                   #   LightBg / DarkBg with brand glow
      Cursors.tsx                       #   arrow + dot cursors that spring between targets
      Words.tsx                         #   word-by-word reveal with optional exit
      SvgArt.tsx                        #   animate SVG artwork per path (letter pop, character bounce)
  scripts/
    analyze_reference.sh                # contact sheets from a reference video → beat map
    svg_to_paths.mjs                    # SVG → TypeScript path data + bounding-box report
    check_render.sh                     # low-res render + contact sheets for a composition
    still_frame.sh                      # one frame from an MP4 at a timestamp
  references/
    scene-patterns.md                   # 16 motion patterns with the timings that worked
    verification-and-gotchas.md         # the check loop and the traps met in practice