diff --git a/examples/workflows/remotion-quickstart.md b/examples/workflows/remotion-quickstart.md index 1514d90..1f2a9c2 100644 --- a/examples/workflows/remotion-quickstart.md +++ b/examples/workflows/remotion-quickstart.md @@ -378,6 +378,118 @@ npm run build --- +## 📚 Ressources ComplĂ©mentaires + +### 🎯 Top 3 Essentielles (Start Here) + +| Ressource | Type | URL | Pourquoi | +|-----------|------|-----|----------| +| **Official Resources** | Hub central | [remotion.dev/docs/resources](https://www.remotion.dev/docs/resources) | 50+ templates, intĂ©grations, effects | +| **Fireship Tutorial** | VidĂ©o (8min) | [This video was made with code](https://www.youtube.com/watch?v=deg8bOoziaE) | Intro ultra-rapide, 1M+ vues | +| **Discord Community** | Support live | [Remotion Discord](https://discord.com/servers/remotion-809501355504959528) | 5.6K+ membres, bot AI intĂ©grĂ© | + +### 📖 Tutoriels Écrits RecommandĂ©s + +| Article | Niveau | URL | SpĂ©cialitĂ© | +|---------|--------|-----|-----------| +| **ClipCat Beginner's Guide** | DĂ©butant | [Create Videos Programmatically](https://www.clipcat.com/blog/create-videos-programmatically-using-react-a-beginners-guide-to-remotion/) | Installation pas-Ă -pas | +| **Prismic Tutorial** | DĂ©butant | [Learn to Create Videos](https://prismic.io/blog/create-videos-with-code-remotion-tutorial) | Fondamentaux complets | +| **SitePoint Introduction** | IntermĂ©diaire | [Remotion Tutorial](https://www.sitepoint.com/remotion-create-animated-videos-using-html-css-react/) | Data fetching, composants | + +### đŸŽ„ Tutoriels VidĂ©o par Objectif + +**DĂ©marrer rapidement** (15 min): +- [Fireship - This video was made with code](https://www.youtube.com/watch?v=deg8bOoziaE) (8:41, 1M vues) + +**Apprendre en profondeur** (1-2h): +- [CoderOne - Create Videos with React](https://www.youtube.com/watch?v=VOX98RoITMk) (1h, exemple complet logo animĂ©) + +**IntĂ©gration Claude Code** (30 min): +- [Snapper AI - Generate Animated Videos](https://www.youtube.com/watch?v=EwKCAgt4aKI) (9:48, jan 2026) +- [chantastic - Making Remotion Videos](https://www.youtube.com/watch?v=z87bczUZ0uo) (30 min, jan 2026) + +### đŸ› ïž Templates & Exemples + +| Template | Usage | Lien | ComplexitĂ© | +|----------|-------|------|-----------| +| **Hello World** | Premier projet | [Official Templates](https://www.remotion.dev/templates/) | ⭐ Simple | +| **Audiogram** | Podcast viz | [Official Templates](https://www.remotion.dev/templates/) | ⭐⭐ Moyen | +| **GitHub Unwrapped** | Cas prod rĂ©el | [github.com/remotion-dev/github-unwrapped](https://github.com/remotion-dev/github-unwrapped) | ⭐⭐⭐ AvancĂ© | + +**Page complĂšte**: [remotion.dev/docs/resources](https://www.remotion.dev/docs/resources) (50+ templates maintenus) + +### 🏆 Success Stories (Inspiration) + +Produits rĂ©els gĂ©nĂ©rant des revenus avec Remotion: + +- **Icon.me**: $5M ARR en 30 jours (crĂ©ateur d'annonces) +- **Revid.ai**: $1M ARR en 15 mois (plateforme vidĂ©o IA) +- **Typeframes**: Post-acquisition (vidĂ©os prĂ©sentation produit) + +[Voir tous les showcases](https://www.remotion.dev/showcase) + +### 💬 OĂč Poser des Questions + +| Plateforme | URL | Meilleur pour | ActivitĂ© | +|------------|-----|---------------|----------| +| **Discord** | [Remotion Discord](https://discord.com/servers/remotion-809501355504959528) | Support rapide, bot AI | ⭐⭐⭐⭐⭐ TrĂšs Ă©levĂ©e | +| **GitHub Discussions** | [remotion-dev/discussions](https://github.com/orgs/remotion-dev/discussions) | Questions architecturales | ⭐⭐⭐ ModĂ©rĂ©e | +| **Stack Overflow** | [#remotion tag](https://stackoverflow.com/questions/tagged/remotion) | ProblĂšmes spĂ©cifiques | ⭐⭐ Faible | + +**Tip**: Sur Discord, taggez le bot CrawlChat AI pour rĂ©ponses instantanĂ©es avec sources docs. + +### 🚀 Ressources AvancĂ©es + +**Performance & Optimization**: +- [Official Performance Docs](https://www.remotion.dev/docs/performance) +- [YouTube: Optimizing Remotion Lambda](https://www.youtube.com/results?search_query=optimizing+remotion+lambda+jonny+burger) (Jonny Burger, 17 min) + +**Agent Skills & IA**: +- [Official AI Skills Docs](https://www.remotion.dev/docs/ai/skills) +- [AIbase Article](https://news.aibase.com/news/24827) (jan 2026, trĂšs rĂ©cent) + +**DĂ©ploiement**: +- [Railway Template](https://railway.com/deploy/remotion-on-rails) (1-click deploy) +- [Lambda Docs](https://www.remotion.dev/docs/lambda) (AWS serverless rendering) + +### 📊 Paquets Utiles + +| Paquet | Usage | Installation | +|--------|-------|--------------| +| `@remotion/shapes` | Formes SVG (triangles, Ă©toiles) | `npm i @remotion/shapes` | +| `remotion-transition-series` | Transitions entre scĂšnes | `npm i remotion-transition-series` | +| `remotion-subtitle` | Sous-titres automatiques | `npm i remotion-subtitle` | +| `@remotion/tailwind` | IntĂ©gration Tailwind CSS | `npm i @remotion/tailwind` | + +[Liste complĂšte sur Resources page](https://www.remotion.dev/docs/resources) + +--- + +## 🎓 ItinĂ©raire d'Apprentissage SuggĂ©rĂ© + +### Semaine 1: Fondamentaux (6-8h) +1. Lire docs officielles (2h) +2. Regarder Fireship tutorial (15 min) +3. Faire ClipCat guide - crĂ©er Hello World (2h) +4. Reproduire exemple CoderOne (2-3h) +5. Joindre Discord, poser questions + +### Semaine 2: Pratique (8-10h) +1. CrĂ©er 3 vidĂ©os diffĂ©rentes (intros, countdown, data viz) +2. Explorer GitHub Unwrapped code source +3. Tester intĂ©gration Claude Code (Agent Skills) +4. ExpĂ©rimenter avec paquets (@remotion/shapes, transitions) + +### Semaine 3: Production (ongoing) +1. CrĂ©er projet rĂ©el pour use case spĂ©cifique +2. Optimiser performances (Lambda si nĂ©cessaire) +3. Setup CI/CD (GitHub Actions) +4. Partager sur Discord pour feedback + +--- + **Créé**: 2026-01-23 +**Mis Ă  jour**: 2026-01-24 (ajout ressources) **TestĂ© avec**: Claude Code 2.1.17, Remotion 4.x, Node.js 20.x **DurĂ©e moyenne**: 15-20 min (premiĂšre vidĂ©o), 5-10 min (suivantes) +**Ressources vĂ©rifiĂ©es**: 2026-01-24 (Perplexity Pro, 50+ sources)