skills-showcase

Skills Showcase

Render a category-by-category animated skills showcase video (1080x1080, 30fps, ~48s) and produce a 7-post X thread that maps skill clusters to concrete value.

Quick Start

cd skills-showcase
npm install
npx remotion studio          # Preview in browser
npx remotion render SkillsShowcase out/skills-showcase.mp4
npx remotion render SkillsShowcase out/skills-showcase.gif --every-nth-frame=3

Output Artifacts

• out/skills-showcase.mp4 — Primary X upload (H.264, ~4.7 MB)
• out/skills-showcase.gif — Fallback/preview (~7 MB)
• thread.md — 7-post X thread copy

Architecture

src/
├── index.ts                  # registerRoot entry point
├── Root.tsx                  # Composition registry (1080x1080, 30fps, 1440 frames)
├── SkillsShowcase.tsx        # Master timeline using <Series>
├── data/skills.ts            # Typed dataset: categories, skills, derived aggregates
├── scenes/
│   ├── Intro.tsx             # Title + subtitle + stats pills (4s)
│   ├── CategorySection.tsx   # Category label + staggered skill chips (2.67s each)
│   └── Outro.tsx             # Summary metric + tagline + CTA (4s)
└── components/
    └── SkillChip.tsx         # Reusable animated badge with spring entrance

Data Model

Edit src/data/skills.ts to add or remove skills. The video re-renders deterministically from this dataset.

• Category: { id, label, color, order }
• Skill: { slug, categoryId, shortDescription }
• Derived: totalSkills, totalCategories, skillsByCategory

Animation Conventions

All animations use Remotion frame-driven patterns only:

• useCurrentFrame() + useVideoConfig() for frame/fps
• spring() for entrances (damping: 200 for smooth, damping: 20 + stiffness: 200 for snappy)
• interpolate() with clamp for opacity and translation
• Zero CSS transitions or Tailwind animation utilities

Timeline Pacing

Scene	Frames	Duration
Intro	120	4.0s
15 categories × 80	1200	40.0s
Outro	120	4.0s
Total	1440	48.0s