Gemini 3 Animations: High-End Landing Pages & Instagram Carousels
Gemini 3 is the best model at creating animations right now. It's not even close. Learn how to build high-end animated landing pages and Instagram carousels using Gemini 3 and Aura.
On this page
THE ANIMATION REVOLUTION
Why Gemini 3 Leads in Animation
Gemini 3 is the best model at creating animations right now. It's not even close. In this comprehensive guide, you'll learn 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. Whether you're creating Instagram slides or full landing pages, Gemini 3 delivers animations that feel natural and polished.
What You'll Learn:
- The Instagram slide formula and how to structure prompts
- The "Style Thief" technique using JSON prompts
- Refining designs with shadows, typography, and spacing
- Adding scroll animations and on-scroll effects
- Using Nano Banana Pro for generative images
- Building full landing pages from scratch
- Advanced animation prompts (flashlight, rotation, marquee)
- Customizing Unicorn Studio backgrounds
Community Creations & Inspiration
The Aura community has been creating amazing animated designs. From templates that are easy to remix to completely custom creations, users are pushing the boundaries of what's possible with Gemini 3.
The Instagram Slide Formula
Instagram slides aren't just static images—they're essentially landing pages optimized for mobile. Understanding the formula helps you create engaging content that works both as Instagram slides and as portfolio websites.
The Structure:
- Cover: The first slide that grabs attention
- 6 Steps: The tutorial or explanation sections
- CTA: Call to action at the end
Each section should be full-width with a 3:4 aspect ratio card, vertically and horizontally centered, like a site section with h-screen pagination.
Instagram Slides Prompt Template:
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}The "Style Thief" Technique (JSON Prompting)
One of the most powerful techniques is extracting the design system from an existing template and applying it to your own content. This "Style Thief" technique uses JSON prompts to capture fonts, colors, spacing, shadows, animations, and more.
The Process:
- Copy the HTML code from a template you like
- Go to Gemini AI Studio (Gemini 3 chat)
- Paste the code and use this prompt:
Give me the JSON format of the styles of this design.
Think design system. I want:
- The fonts
- The colors
- The spacing
- The shadows
- The animation
- The layout
- The main button styles
- The animation script
- The animation keyframe instructions
- Adaptive layout
- Icons
- And so on- Copy the JSON output
- Go back to Aura and prompt: "Adapt to this style" and paste the JSON
- Gemini 3 will apply the design system to your content
Refining Design, Shadows & Typography
After generating your initial design, refinement is key. Use Aura's design mode to make surgical edits without regenerating everything.
Typography
Change fonts to match your brand. Space Grotesque works great for futuristic designs. Adjust font weights and tracking for better hierarchy.
Shadows
Use Aura's shadow presets: Beautiful 2XL, Angle Shadow (Large, Extra Large, Super Strong). The darker the background, the stronger shadows you can use.
Colors
Adjust background colors for better contrast. Use Tailwind colors for consistency. Ensure text is always readable.
Vertical Lines
Add vertical lines container size for a futuristic style. This adds depth with subtle outlines and drop shadows.
Adding Animation on Scroll
Scroll animations make designs feel alive. Use code snippets for more accurate results than prompting alone.
Animation on Scroll Prompt:
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.Reference the code snippet "Animation on Scroll" and "Animation Keyframe" from Aura's code snippets library for best results.
Generative Images with Nano Banana Pro
Nano Banana Pro is a new feature in Aura that lets you generate high-resolution images (2K, up to 4K) directly within your design workflow.
Features:
- 2K resolution (2x), up to 4K
- Custom aspect ratios (3:4 for Instagram slides)
- Progressive blur effects
- Light/dark background options
Example prompt: "Make the bottom half use progressive blur and work as a light background with dark text possible on top"
Optimizing for Mobile & Instagram Format
For Instagram slides, you need to optimize for mobile viewing and screenshot-taking.
Mobile Optimization Prompt:
Make the cards full screen in mobile. Remove the
rounded corners because in Instagram you don't want
to show rounded corners if you're taking a screenshot.
Remove the card border. Add a nav bar with up/down
arrows and dots in the middle.This creates a full-screen layout optimized for Instagram's 3:4 format that also works beautifully as a portfolio website.
Building a Full Landing Page from Scratch
Start with an inspiration image, use the Prompt Builder for consistency, and add animations using code snippets.
The Workflow:
- Paste an inspiration design image
- Use Prompt Builder to select icons (Solar Duotone Bold), logos (SVG logos), and animations
- Add "Animation on Scroll" and "Animation Keyframe" code snippets
- Generate the landing page
- Refine fonts, colors, shadows, and images
- Add border gradients and custom buttons
Advanced Animation Prompts
Border Beam Animation:
Add a 1px border beam animation around the
pill-shaped button on hover.Text Clip Animation:
Add a vertical text clip slide down animation
letter by letter.Marquee Loop:
Add a marquis infinite loop slow animation to the
logos using alpha mask.Card Rotation:
Animate the big card to rotate between 3 cards in
a loop. Add prev/next arrows to switch between cards.Flashlight Effect:
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.Customizing Unicorn Studio Backgrounds
Unicorn Studio backgrounds are free to use as-is, but customization requires a Pro account. Aura provides remixable backgrounds you can customize.
Customization Options:
- Beam animation types (Star, Square, Triangle, Nova)
- Thickness, scale, color, and blend mode
- Texture adjustments (width, height, saturation, exposure)
- God rays and chromatic aberration
- Mouse tracking for interactive effects
- Play/pause controls