Animate Nano Banana Designs in Remotion with AI Prompts
Generate graphics via Nano Banana (Gemini), upload to AI-powered Remotion in Cloud Code, prompt for animations like glowing text or pop-ins, add manual controls, and export reusable 'skills' markdown for fast video edits.
Generate Design Inspiration from Screenshots Using Nano Banana
Start in Gemini (or Google AI Studio) to create static images inspired by YouTube/Twitter graphics. Download full-resolution images like "Building Your Agent" text overlays. Remix existing designs by screenshotting (e.g., Ali Abdaal's numbered icons), prompting "Redesign this to be in dark mode and have white and blue tones for the text and icons" to get dark-mode versions with flipping coins showing numbers 1-10 then icons. This provides a reference layer for Remotion, turning static inspiration into animated video elements without manual design work.
Prompt AI in Cloud Code to Animate Images into Videos
In Cloud Code (with Antigravity/Cursor extension), open a new folder and prompt: "Set up an empty Remotion composition of 5 seconds in a 16 by 9 aspect ratio." This runs npx create-video@latest for a localhost preview. Upload the Nano Banana image and prompt specifics like: "Generate a 5-second animation based on the attached image where the text has a masked white glow effect, slight glow, as the time progresses." Refine iteratively: "The glow must only be present inside of the letter paths" or "Animate the drop shadow behind the letters to mimic the effect of a light hovering over the text from left to right." For complex graphics (squares, circles, lines), prompt: "Animate the attached image where the squares and circles pop in first, then the lines animate from start to finish... text fades in." Adjust: "Make the animation finish in 5 seconds, and please center the whole design." Sophisticated prompts take ~10 minutes as AI writes SVG code; results include pop-in effects for shapes before line draws and text fades.
Add Editor Controls and Create Reusable Skills
Expose parameters for manual tweaks: "Give the user the ability to adjust the strength of blur and opacity of the drop shadow in the editor." Use the sidebar sliders (e.g., shadow blur/opacity) to dial in effects like brighter, blurrier shadows without reprompting. For a 7-second flip animation, prompt positioning fixes and italic text controls. Export videos directly. Create reusability by prompting: "Create a skill for this specific animation, font, and style so that I can repeat this in the future." This generates a markdown file (e.g., "light-sweep.md") with the prompt template; upload to a new agent later, changing only the text argument for instant reuse in YouTube videos.
Build Split-Screen Layouts with Video References
For 20-second side-by-side: Prompt "Create a simple 20-second animation where we have two videos, one on the left, one on the right." Add a video-references folder with pip.mp4 (left) and main.mp4 (right), ensuring same length; prompt to replace placeholders. Results show overlapping pop-outs with customizable border radius, colors, or backgrounds. Match video lengths to avoid early cutoffs, enabling quick picture-in-picture edits with effects.