YouTube

Gemini 3 can animate web designs like a senior designer

2025-11-27 · 15:39 UTC ·DesignCode ·2 min read

Brief

Gemini 3 tutorial (DesignCode, 2025-11-27) demonstrates a workflow using Aura to generate animated landing pages and Instagram carousels. It covers layout prompting, the 'Style Thief' JSON technique, scroll and marquee animations, interactive flashlight and border-beam effects, templates/assets, and an Instagram-ready 8-slide conversion workflow.

Why it matters

Gemini 3 paired with Aura is used to produce high-end animated landing pages and Instagram carousels; the tutorial (published 2025-11-27) walks through building a full landing page at 29:40 and advanced animations (flashlight, rotation, border beams) at 37:30.

Key details

  • At 11:25 the presenter demonstrates the 'Style Thief' JSON prompting technique to 'steal' styles; supplied animation prompt examples include 'Animate when in view: fade in, slide in, blur in, element by element' and 'Add a 1px border beam animation around the pill-shaped button on hover.'
  • The video supplies templates (Nebula, Sakura, Insta Slides V1/V2), an asset link to a Unicorn Studio Background remix, and an Instagram Slides prompt that converts content into 8 sections (1 cover, 6 step sections, 1 CTA) with 3/4 aspect ratio cards and h-screen pagination.
Source evidence

Gemini 3 is the best model at creating animations right now. It's not even close. In this video, I’ll show you how to build high-end animated landing pages and Instagram carousels using Gemini 3 and Aura.

We cover everything from "stealing" styles using JSON prompts to advanced scroll animations, border beams, and interactive flashlight effects.

✨ Main Tool: http://aura.build

🔗 Resources & Templates

Templates:
Nebula: https://nebula.aura.build
Sakura: https://sakura.aura.build
Insta Slides V1: https://instagram-slides-01.aura.build
Insta Slides V2: https://instagram-slides-02.aura.build

Assets:
Unicorn Studio Background Remix: https://unicorn.studio/remix/5VrCwgw3Fc530VETvedZ

⏳ Timestamps
00:00 Intro: What Gemini 3 can do
02:10 Community Creations & Inspiration
04:15 Tools: Screen Studio & Aura Stats
06:40 The Instagram Slide Formula
08:25 Prompting Gemini 3 for Layouts
11:25 The "Style Thief" Technique (JSON Prompting)
15:20 Refining Design, Shadows & Typography
18:50 Adding Animation on Scroll
22:30 Generative Images with Nano Banana Pro
26:15 Optimizing for Mobile & Instagram Format
29:40 Building a Full Landing Page from Scratch
37:30 Advanced Animation Prompts (Flashlight, Rotation)
39:20 Customizing Unicorn Studio Backgrounds
43:00 Summary & Outro

🤖 Animation Prompts Used

Intro + Animation on Scroll:
"Animate when in view: fade in, slide in, blur in, element by element. Use 'both' instead of 'forwards'. Don't use opacity 0. Add a clip animation to the background, column by column using clip-path."

Buttons:
"Add a 1px border beam animation around the pill-shaped button on hover."

Text Animation:
"Add a vertical text clip slide down animation letter by letter."

Logos Looping:
"Add a marquis infinite loop slow animation to the logos using alpha mask."

Content Switching:
"Animate the big card to rotate between 3 cards in a loop. Add prev/next arrows to switch between cards."

Flashlight on Hover:
"Add a subtle flashlight effect on hover/mouse position to both background and border of the cards."

Testimonials Looping:
"Make the cards animate marquis in an infinite loop with alpha mask slowly."

📱 Instagram Slides Prompt:
"Turn this into 8 sections for instagram slides: each section is full-width with 3/4 aspect ratio card v-center h-center inside like a site section with h-screen pagination: 1 cover, 6 sections explaining the steps, 1 cta. Add numbers, {YourName}. Here's the content: {YOUR LONG FORM TEXT} {INSERT DESIGN SCREENSHOT OR CODE}"

Channel: DesignCode
Published: 2025-11-27
Video URL: https://www.youtube.com/watch?v=jyfOAoMnxbY