Soroush Asadi
aea3b4f800
10 skills for building high-quality video templates with Remotion/Three.js: design-styles, character-design, aspect-ratios, template-composition, sound-effects, music-picker, template-catalog, svg-colors, persian-fonts, and flatrender-template-seo (category/tags/SEO/related, code-verified). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
55 lines
4.3 KiB
Markdown
55 lines
4.3 KiB
Markdown
---
|
|
name: remotion-template-catalog
|
|
description: A taxonomy of video template TYPES to build for FlatRender, with the purpose, key editable elements, suggested style/aspect, and 2D-vs-3D recommendation for each. Use when deciding what template to create next, planning a content batch, or scoping a requested template into a known pattern.
|
|
---
|
|
|
|
# Template catalog — what to build
|
|
|
|
FlatRender already has these (services/remotion `TEMPLATES`): IlluminatedCircles, KineticQuote, GradientPromo, VerticalStory, LogoMotion, Opener, InstaPromo, YouTubeIntro, Slideshow, HappyBirthday, SalePromo, QuoteCard, EventInvite, Countdown, GlitterReveal (editable logo), NowruzGreeting (2D characters), + 3D: Hero3D, Nowruz3D, Birthday3D, Promo3D.
|
|
|
|
Use this map to pick the NEXT one and to scope a request into a pattern. Each row: key editable elements · suggested style · best aspect(s) · 2D/3D.
|
|
|
|
## Brand / logo
|
|
- **Logo reveal** — logo + tagline · any style · all aspects · 2D or 3D. (have: IlluminatedCircles, LogoMotion, GlitterReveal, Hero3D)
|
|
- **Opener / intro sting** — title + subtitle · cinematic/kinetic · 16:9, 9:16 · 2D/3D. (have: Opener)
|
|
- **Outro / subscribe / end-card** — CTA + socials + logo · flat/neon · 16:9, 9:16 · 2D. (gap)
|
|
- **Lower-third / name tag** — name + role · clean/glass · 16:9 · 2D. (gap)
|
|
|
|
## Social / marketing
|
|
- **Instagram post/story promo** — headline + image + CTA · gradient/bold · 1:1, 9:16. (have: InstaPromo, VerticalStory)
|
|
- **YouTube intro/outro** — channel + subscribe · energetic · 16:9. (have: YouTubeIntro)
|
|
- **TikTok/Reels hook** — big kinetic text · trendy · 9:16 · 2D. (gap)
|
|
- **Sale / discount** — badge + headline + CTA · bold/3D gifts · all. (have: SalePromo, Promo3D)
|
|
- **Product showcase / turntable** — product image/3D + specs · 3D cinematic · 16:9, 1:1. (gap — high value)
|
|
- **Testimonial / review** — quote + stars + name/photo · clean · 1:1, 9:16. (gap)
|
|
- **Explainer / feature list** — icon + text steps · isometric/flat · 16:9. (gap)
|
|
- **Real-estate / listing** — photos + price + details · elegant · 16:9, 1:1. (gap)
|
|
- **Restaurant / menu / food** — dish image + price · warm/appetizing · 1:1, 9:16. (gap)
|
|
|
|
## Greetings / occasions (great for characters + 3D)
|
|
- **Birthday** — name + message · party/3D cake · all. (have: HappyBirthday, Birthday3D)
|
|
- **Nowruz (نوروز)** — greeting + year · spring characters/3D Haft-Sin · all. (have: NowruzGreeting, Nowruz3D)
|
|
- **Yalda (یلدا)** — pomegranate/watermelon, candles, warm night · 2D/3D · all. (gap — high value, Persian)
|
|
- **Wedding / engagement** — names + date · luxury gold/floral · all. (gap)
|
|
- **Eid / Ramadan / Mehregan** — lantern/crescent/autumn motifs · ornate · all. (gap, Persian/region)
|
|
- **New Year / holidays** — countdown + fireworks · festive 3D · 16:9, 9:16. (gap)
|
|
- **Condolence / tribute** — respectful, minimal, slow · muted palette · all. (gap)
|
|
|
|
## Content / text
|
|
- **Quote card** — quote + author · kinetic/typographic · 1:1, 9:16. (have: QuoteCard, KineticQuote)
|
|
- **Countdown** — target + number · energetic riser · all. (have: Countdown)
|
|
- **Event invite** — title + date/place + RSVP · elegant · 1:1, 9:16. (have: EventInvite)
|
|
- **Slideshow / photo gallery** — N images + captions · clean transitions · all. (have: Slideshow)
|
|
- **Music visualizer** — audio-reactive bars + cover · neon/3D · 1:1, 9:16. (gap)
|
|
|
|
## How to choose next
|
|
1. Prefer **gaps** with high value for an Iran-facing product: Yalda, wedding, product showcase, testimonial, lower-thirds, outro/subscribe, music visualizer.
|
|
2. Pick a STYLE that differs from neighbors (don't ship five dark-particle reveals) — see `remotion-design-styles`.
|
|
3. Decide 2D vs 3D by subject (logos/products/abstract → 3D shines; text/character/illustrative → 2D or hybrid).
|
|
4. Confirm a storyboard with the user for anything character- or scene-heavy.
|
|
|
|
## Per-template build steps
|
|
Storyboard (confirm) → build composition (lib helpers, design-styles, character-design) → make it fit all aspects (`remotion-aspect-ratios`) → wire editable text/logo/colors (`remotion-template-composition`, `remotion-svg-colors`) → pick fonts (`persian-fonts`) → optional music/SFX → render thumbnails + preview → seed (`scripts/seed_remotion_templates.py`) → deploy.
|
|
|
|
Related: every other remotion-* skill.
|