diff --git a/PROMPT_GALLERY.md b/PROMPT_GALLERY.md index 136631a..22a0d28 100644 --- a/PROMPT_GALLERY.md +++ b/PROMPT_GALLERY.md @@ -88,6 +88,44 @@ Adding `FAL_KEY` to your `.env` unlocks FLUX image generation. These prompts com --- +## Animation Pipeline — Anime/Ghibli Style (FAL_KEY, ~$0.15) + +These use the **Animation pipeline** with `image_animation` approach — FLUX-generated still images brought to life through multi-image crossfade, cinematic camera motion, particle overlays, and ambient music. No video generation APIs needed. Each 30-second video costs ~$0.15. + +### Ghibli Fantasy World + +> "Create a 30-second Ghibli-style animated video of a magical floating library in the clouds at golden hour. Books drift between shelves, warm light streams through stained glass windows, and a small cat naps on a reading desk." + +**What you get:** 6 anime scenes with 12 FLUX-generated images, camera motion (zoom, pan, Ken Burns, drift), sparkle and light-ray particles, cinematic vignette, hero title overlay, and auto-sourced ambient music with energy-optimized offset. + +**Estimated time:** 10-15 minutes | **Cost:** ~$0.15 + +### Underwater Exploration + +> "Make a 30-second anime-style animation of an underwater temple with bioluminescent coral, ancient ruins covered in sea moss, luminous jellyfish drifting past stone pillars, and shafts of sunlight piercing the deep blue." + +**What you get:** Deep ocean atmosphere with mist and sparkle particles, pan and drift camera motion, blue-green lighting overlays, section title overlays, and oceanic ambient soundtrack. + +**Estimated time:** 10-15 minutes | **Cost:** ~$0.15 + +### Seasonal Journey + +> "Create a 30-second Ghibli-style animated video showing the four seasons in a Japanese countryside village — cherry blossoms in spring, fireflies in summer, red maple leaves in autumn, and snow-covered thatched roofs in winter." + +**What you get:** 6 scenes transitioning through seasons with petal, firefly, sparkle, and mist particles matching each season. Warm-to-cool lighting transitions and ambient seasonal soundtrack. + +**Estimated time:** 10-15 minutes | **Cost:** ~$0.15 + +### Steampunk Cityscape + +> "Make a 30-second anime-style animation of a steampunk city at dusk — airships floating between brass towers, steam rising from street vents, clockwork birds perching on copper lampposts, and a lone inventor walking home through cobblestone streets." + +**What you get:** Industrial-fantasy atmosphere with mist and sparkle particles, parallax and zoom camera motion, warm amber lighting overlays, and steampunk-ambient soundtrack. + +**Estimated time:** 10-15 minutes | **Cost:** ~$0.15 + +--- + ## Full Setup Prompts (~$1-$3) With video generation (Veo, Kling, Runway) + premium TTS (ElevenLabs) + music (Suno). These produce broadcast-quality content. @@ -150,6 +188,8 @@ With video generation (Veo, Kling, Runway) + premium TTS (ElevenLabs) + music (S **Ask for the zero-key path.** If you want free results, say "use only free tools" or "no paid APIs." The agent will route to Piper TTS, stock media, and Remotion-only compositions. +**For anime/Ghibli-style videos,** mention the style explicitly: "Ghibli-style" or "anime-style." Describe the atmosphere, lighting, and mood. The agent uses the Animation pipeline with FLUX image generation and Remotion's anime scene engine — multi-image crossfade, camera motion, and particle overlays create the illusion of animation from still images. Cost is minimal (~$0.15 for 30 seconds). + --- ## Contributing Prompts diff --git a/README.md b/README.md index fe99dfa..3385e1d 100644 --- a/README.md +++ b/README.md @@ -36,10 +36,22 @@ Turn your AI coding assistant into a full video production studio. Describe what > **"VOID — Neural Interface"** — a product ad produced with just one API key (OpenAI). 4 AI-generated images (gpt-image-1), TTS narration, auto-sourced royalty-free music, word-level subtitles via WhisperX, and Remotion data visualizations. Total cost: **$0.69**. Zero manual asset work.
- +
-> **"LUMINA — Bioluminescent Terrarium"** — a product ad with zero narration, driven entirely by music, typography, and AI-generated imagery. 5 FLUX-generated images, cinematic ambient soundtrack from Pixabay, animated data visualizations (KPI grids, bar charts, comparison cards), and layered stat reveal overlays. Total cost: **$0.15**. No voiceover, no manual editing. +> **"Afternoon in Candyland"** — a Ghibli-style anime animation. A little girl's whimsical afternoon adventure through candy gates, gumdrop rivers, and lollipop gardens. 12 FLUX-generated images with multi-image crossfade, cinematic camera motion (zoom, pan, Ken Burns), sparkle/petal/firefly particle overlays, and ambient music with auto-detected energy offset. Total cost: **$0.15**. No video generation, no manual editing. + +
+ +
+ +> **"Mori no Seishin"** — a Ghibli-style anime animation of a forest spirit's journey through ancient woods. 12 FLUX-generated images with parallax crossfade, drift and pan camera motion, firefly and petal particles, cinematic vignette lighting, and ambient forest soundtrack. Total cost: **$0.15**. Still images brought to life through Remotion's animation engine. + +
+ +
+ +> **"Into the Abyss"** — a deep ocean exploration rendered in anime style. Bioluminescent gardens, coral cathedrals, and creatures of light — 12 FLUX-generated images with sparkle and mist particle overlays, light-ray effects, smooth camera motion, and ambient oceanic soundtrack. Total cost: **$0.15**. Zero video generation APIs needed. Works with **Claude Code, Cursor, Copilot, Windsurf, Codex** — any AI coding assistant that can read files and run code. @@ -142,7 +154,11 @@ Copy any of these into your AI coding assistant after setup. Each one runs a ful > "Make a data-driven explainer about coffee consumption around the world" -### With FAL_KEY (~$0.50–$1.50) +### With FAL_KEY (~$0.15–$1.50) + +> "Create a 30-second Ghibli-style animated video of a magical floating library in the clouds at golden hour" + +> "Make a 30-second anime-style animation of an underwater temple with bioluminescent coral and ancient ruins" > "Create an animated explainer about how CRISPR gene editing works, using AI-generated visuals" diff --git a/pipeline_defs/animation.yaml b/pipeline_defs/animation.yaml index f740c61..c123196 100644 --- a/pipeline_defs/animation.yaml +++ b/pipeline_defs/animation.yaml @@ -35,6 +35,7 @@ compatible_playbooks: - clean-professional - flat-motion-graphics - minimalist-diagram + - anime-ghibli stages: # ── Pre-Production ────────────────────────────────────────────── diff --git a/remotion-composer/public/demo-props/candyland.json b/remotion-composer/public/demo-props/candyland.json new file mode 100644 index 0000000..488a364 --- /dev/null +++ b/remotion-composer/public/demo-props/candyland.json @@ -0,0 +1,151 @@ +{ + "cuts": [ + { + "id": "scene-1-candy-gate", + "source": "", + "in_seconds": 0, + "out_seconds": 5, + "type": "anime_scene", + "images": [ + "candyland/scene1-candy-gate-a.png", + "candyland/scene1-candy-gate-b.png" + ], + "animation": "zoom-in", + "particles": "sparkles", + "particleColor": "#FFE082", + "particleCount": 22, + "particleIntensity": 0.6, + "backgroundColor": "#0A0A1A", + "vignette": true, + "lightingFrom": "rgba(255,200,100,0.15)", + "lightingTo": "transparent" + }, + { + "id": "scene-2-candy-forest", + "source": "", + "in_seconds": 5, + "out_seconds": 10, + "type": "anime_scene", + "images": [ + "candyland/scene2-candy-forest-a.png", + "candyland/scene2-candy-forest-b.png" + ], + "animation": "pan-right", + "particles": "petals", + "particleColor": "#FF6B9D", + "particleCount": 18, + "particleIntensity": 0.5, + "backgroundColor": "#0A0A1A", + "vignette": true, + "lightingFrom": "transparent", + "lightingTo": "rgba(255,107,157,0.1)" + }, + { + "id": "scene-3-gumdrop-river", + "source": "", + "in_seconds": 10, + "out_seconds": 15, + "type": "anime_scene", + "images": [ + "candyland/scene3-gumdrop-river-a.png", + "candyland/scene3-gumdrop-river-b.png" + ], + "animation": "pan-left", + "particles": "sparkles", + "particleColor": "#87CEEB", + "particleCount": 15, + "particleIntensity": 0.4, + "backgroundColor": "#0A0A1A", + "vignette": true, + "lightingFrom": "rgba(100,200,255,0.1)", + "lightingTo": "transparent" + }, + { + "id": "scene-4-lollipop-garden", + "source": "", + "in_seconds": 15, + "out_seconds": 20, + "type": "anime_scene", + "images": [ + "candyland/scene4-lollipop-garden-a.png", + "candyland/scene4-lollipop-garden-b.png" + ], + "animation": "drift-up", + "particles": "fireflies", + "particleColor": "#A8E6CF", + "particleCount": 20, + "particleIntensity": 0.55, + "backgroundColor": "#0A0A1A", + "vignette": true, + "lightingFrom": "transparent", + "lightingTo": "rgba(168,230,207,0.12)" + }, + { + "id": "scene-5-chocolate-mountain", + "source": "", + "in_seconds": 20, + "out_seconds": 25, + "type": "anime_scene", + "images": [ + "candyland/scene5-chocolate-mountain-a.png", + "candyland/scene5-chocolate-mountain-b.png" + ], + "animation": "zoom-out", + "particles": "mist", + "particleColor": "#DDA0DD", + "particleCount": 5, + "particleIntensity": 0.35, + "backgroundColor": "#0A0A1A", + "vignette": true, + "lightingFrom": "rgba(160,100,200,0.08)", + "lightingTo": "transparent" + }, + { + "id": "scene-6-sunset-farewell", + "source": "", + "in_seconds": 25, + "out_seconds": 30, + "type": "anime_scene", + "images": [ + "candyland/scene6-sunset-farewell-a.png", + "candyland/scene6-sunset-farewell-b.png" + ], + "animation": "ken-burns", + "particles": "sparkles", + "particleColor": "#FFB347", + "particleCount": 28, + "particleIntensity": 0.7, + "backgroundColor": "#0A0A1A", + "vignette": true, + "lightingFrom": "rgba(255,180,71,0.12)", + "lightingTo": "rgba(255,107,157,0.1)" + } + ], + "overlays": [ + { + "type": "hero_title", + "in_seconds": 0.5, + "out_seconds": 4.5, + "text": "Afternoon in Candyland", + "subtitle": "A whimsical journey" + }, + { + "type": "section_title", + "in_seconds": 25.5, + "out_seconds": 29.5, + "text": "Every sweet dream begins here...", + "accentColor": "#FFB347", + "position": "bottom-center" + } + ], + "audio": { + "music": { + "src": "candyland/ambient-music.mp3", + "volume": 0.15, + "fadeInSeconds": 2, + "fadeOutSeconds": 3, + "offsetSeconds": 43, + "loop": false + } + } +} diff --git a/remotion-composer/public/demo-props/deep-ocean.json b/remotion-composer/public/demo-props/deep-ocean.json new file mode 100644 index 0000000..93713b9 --- /dev/null +++ b/remotion-composer/public/demo-props/deep-ocean.json @@ -0,0 +1,154 @@ +{ + "cuts": [ + { + "id": "scene-1-abyss-awakens", + "source": "", + "in_seconds": 0, + "out_seconds": 5, + "type": "anime_scene", + "images": [ + "deep-ocean/test-scene1-abyss.png", + "deep-ocean/scene1-abyss-b.png" + ], + "animation": "zoom-in", + "particles": "sparkles", + "particleColor": "#00E5FF", + "particleCount": 20, + "particleIntensity": 0.5, + "backgroundColor": "#020810", + "vignette": true, + "lightingFrom": "rgba(0,229,255,0.08)", + "lightingTo": "transparent" + }, + { + "id": "scene-2-bioluminescent-garden", + "source": "", + "in_seconds": 5, + "out_seconds": 10, + "type": "anime_scene", + "images": [ + "deep-ocean/scene2-garden-a.png", + "deep-ocean/scene2-garden-b.png" + ], + "animation": "pan-right", + "particles": "fireflies", + "particleColor": "#A8E6CF", + "particleCount": 25, + "particleIntensity": 0.6, + "backgroundColor": "#020810", + "vignette": true + }, + { + "id": "scene-3-coral-cathedral", + "source": "", + "in_seconds": 10, + "out_seconds": 15, + "type": "anime_scene", + "images": [ + "deep-ocean/scene3-coral-a.png", + "deep-ocean/scene3-coral-b.png" + ], + "animation": "drift-up", + "particles": "mist", + "particleColor": "#FFFFFF", + "particleCount": 5, + "particleIntensity": 0.4, + "backgroundColor": "#020810", + "vignette": true, + "lightingFrom": "transparent", + "lightingTo": "rgba(168,230,207,0.10)" + }, + { + "id": "scene-4-creatures-of-light", + "source": "", + "in_seconds": 15, + "out_seconds": 20, + "type": "anime_scene", + "images": [ + "deep-ocean/scene4-creatures-a.png", + "deep-ocean/scene4-creatures-b.png" + ], + "animation": "pan-left", + "particles": "sparkles", + "particleColor": "#FFB347", + "particleCount": 18, + "particleIntensity": 0.5, + "backgroundColor": "#020810", + "vignette": true + }, + { + "id": "scene-5-the-deep-trench", + "source": "", + "in_seconds": 20, + "out_seconds": 25, + "type": "anime_scene", + "images": [ + "deep-ocean/scene5-trench-a.png", + "deep-ocean/scene5-trench-b.png" + ], + "animation": "zoom-out", + "particles": "light-rays", + "particleColor": "#4FC3F7", + "particleCount": 3, + "particleIntensity": 0.35, + "backgroundColor": "#020810", + "vignette": true, + "lightingFrom": "rgba(79,195,247,0.08)", + "lightingTo": "rgba(0,0,0,0.2)" + }, + { + "id": "scene-6-return-to-light", + "source": "", + "in_seconds": 25, + "out_seconds": 30, + "type": "anime_scene", + "images": [ + "deep-ocean/scene6-ascent-a.png", + "deep-ocean/scene6-ascent-b.png" + ], + "animation": "ken-burns", + "particles": "fireflies", + "particleColor": "#FFE082", + "particleCount": 22, + "particleIntensity": 0.65, + "backgroundColor": "#020810", + "vignette": true, + "lightingFrom": "rgba(0,100,200,0.08)", + "lightingTo": "rgba(255,224,130,0.12)" + } + ], + "overlays": [ + { + "type": "hero_title", + "in_seconds": 0.5, + "out_seconds": 4.5, + "text": "Into the Abyss", + "subtitle": "Where Light Is Born from Darkness" + }, + { + "type": "section_title", + "in_seconds": 10.5, + "out_seconds": 14.0, + "text": "Ancient Beyond Measure", + "accentColor": "#A8E6CF", + "position": "bottom-center" + }, + { + "type": "section_title", + "in_seconds": 25.5, + "out_seconds": 29.5, + "text": "The deep remembers.", + "accentColor": "#FFE082", + "position": "bottom-center" + } + ], + "audio": { + "music": { + "src": "deep-ocean/ambient-ocean.mp3", + "volume": 0.15, + "fadeInSeconds": 2, + "fadeOutSeconds": 3, + "offsetSeconds": 55 + } + } +} diff --git a/remotion-composer/public/demo-props/mori-no-seishin.json b/remotion-composer/public/demo-props/mori-no-seishin.json new file mode 100644 index 0000000..512c458 --- /dev/null +++ b/remotion-composer/public/demo-props/mori-no-seishin.json @@ -0,0 +1,146 @@ +{ + "cuts": [ + { + "id": "scene-1-awakening", + "source": "", + "in_seconds": 0, + "out_seconds": 5, + "type": "anime_scene", + "images": [ + "mori-no-seishin/test-scene1-awakening.png", + "mori-no-seishin/scene1-awakening-b.png" + ], + "animation": "zoom-in", + "particles": "fireflies", + "particleColor": "#FFE082", + "particleCount": 18, + "particleIntensity": 0.5, + "backgroundColor": "#0A0A1A", + "vignette": true + }, + { + "id": "scene-2-gate", + "source": "", + "in_seconds": 5, + "out_seconds": 10, + "type": "anime_scene", + "images": [ + "mori-no-seishin/scene2-gate-a.png", + "mori-no-seishin/scene2-gate-b.png" + ], + "animation": "pan-right", + "particles": "mist", + "particleColor": "#FFFFFF", + "particleCount": 4, + "particleIntensity": 0.5, + "backgroundColor": "#0A0A1A", + "vignette": true, + "lightingFrom": "rgba(255,200,100,0.15)", + "lightingTo": "transparent" + }, + { + "id": "scene-3-stream", + "source": "", + "in_seconds": 10, + "out_seconds": 15, + "type": "anime_scene", + "images": [ + "mori-no-seishin/scene3-stream-a.png", + "mori-no-seishin/scene3-stream-b.png" + ], + "animation": "pan-left", + "particles": "sparkles", + "particleColor": "#87CEEB", + "particleCount": 15, + "particleIntensity": 0.4, + "backgroundColor": "#0A0A1A", + "vignette": true + }, + { + "id": "scene-4-canopy", + "source": "", + "in_seconds": 15, + "out_seconds": 20, + "type": "anime_scene", + "images": [ + "mori-no-seishin/scene4-canopy-a.png", + "mori-no-seishin/scene4-canopy-b.png" + ], + "animation": "drift-up", + "particles": "fireflies", + "particleColor": "#FFF3B0", + "particleCount": 25, + "particleIntensity": 0.6, + "backgroundColor": "#0A0A1A", + "vignette": true, + "lightingFrom": "transparent", + "lightingTo": "rgba(255,243,176,0.12)" + }, + { + "id": "scene-5-overlook", + "source": "", + "in_seconds": 20, + "out_seconds": 25, + "type": "anime_scene", + "images": [ + "mori-no-seishin/scene5-overlook-a.png", + "mori-no-seishin/scene5-overlook-b.png" + ], + "animation": "zoom-out", + "particles": "light-rays", + "particleColor": "#FFE082", + "particleCount": 3, + "particleIntensity": 0.35, + "backgroundColor": "#0A0A1A", + "vignette": true, + "lightingFrom": "rgba(255,180,71,0.1)", + "lightingTo": "rgba(255,107,157,0.08)" + }, + { + "id": "scene-6-dance", + "source": "", + "in_seconds": 25, + "out_seconds": 30, + "type": "anime_scene", + "images": [ + "mori-no-seishin/scene6-dance-a.png", + "mori-no-seishin/scene6-dance-b.png" + ], + "animation": "ken-burns", + "particles": "sparkles", + "particleColor": "#FFB347", + "particleCount": 30, + "particleIntensity": 0.7, + "backgroundColor": "#0A0A1A", + "vignette": true, + "lightingFrom": "rgba(255,180,71,0.08)", + "lightingTo": "rgba(100,80,200,0.1)" + } + ], + "overlays": [ + { + "type": "hero_title", + "in_seconds": 0.5, + "out_seconds": 4.5, + "text": "Mori no Seishin", + "subtitle": "Spirit of the Forest" + }, + { + "type": "section_title", + "in_seconds": 25.5, + "out_seconds": 29.5, + "text": "They were never alone.", + "accentColor": "#FFB347", + "position": "bottom-center" + } + ], + "audio": { + "music": { + "src": "mori-no-seishin/ambient-piano.mp3", + "volume": 0.18, + "fadeInSeconds": 2, + "fadeOutSeconds": 3, + "offsetSeconds": 56 + } + } +} diff --git a/remotion-composer/src/Explainer.tsx b/remotion-composer/src/Explainer.tsx index 8d63a6a..797ec4a 100644 --- a/remotion-composer/src/Explainer.tsx +++ b/remotion-composer/src/Explainer.tsx @@ -34,6 +34,9 @@ import { CaptionOverlay, WordCaption } from "./components/CaptionOverlay"; import { SectionTitle } from "./components/SectionTitle"; import { StatReveal } from "./components/StatReveal"; import { HeroTitle } from "./components/HeroTitle"; +import { AnimeScene } from "./components/AnimeScene"; +import type { CameraMotion } from "./components/AnimeScene"; +import type { ParticleType } from "./components/ParticleOverlay"; // Load Space Grotesk font for cinematic typography const { fontFamily } = loadFont("normal", { @@ -102,6 +105,15 @@ interface Cut { scale?: number; position?: string | { x: number; y: number }; }; + // Anime scene props (type: "anime_scene") + images?: string[]; + particles?: ParticleType; + particleColor?: string; + particleCount?: number; + particleIntensity?: number; + vignette?: boolean; + lightingFrom?: string; + lightingTo?: string; } interface Overlay { @@ -124,6 +136,11 @@ interface AudioConfig { music?: AudioLayer & { fadeInSeconds?: number; fadeOutSeconds?: number; + /** Start playback from this offset in seconds (skip quiet intros). + * Use the audio_energy tool to find the optimal offset. */ + offsetSeconds?: number; + /** Loop the music if it's shorter than the video duration. */ + loop?: boolean; }; } @@ -439,6 +456,25 @@ const SceneRenderer: React.FC<{ cut: Cut }> = ({ cut }) => { ); } + // --- Anime scene (multi-image crossfade + particles) --- + if (cut.type === "anime_scene" && cut.images && cut.images.length > 0) { + return ( + + ); + } + // --- Media types (image / video fallback) --- const animation = cut.animation || cut.transform?.animation; @@ -546,10 +582,13 @@ export const Explainer: React.FC = ({