DEV Community

Cover image for Gemini Prompt for Google AI Studio Image Generation
Dan
Dan

Posted on

Gemini Prompt for Google AI Studio Image Generation

#devchallenge #weekendchallenge

Gemini Prompt for Google AI Studio Image Generation

Prompt (paste into Gemini image generator):

A futuristic cityscape at sunset with a swirling vortex of neon lights and flying cars; multiple translucent tetrahedron bubbles forming a luminous word-and-light matrix suspended above a skyline of glass spires; warm magenta and orange sunset on the horizon blending into electric cyan and violet neon; reflective wet streets below mirroring the tetrahedra; dynamic motion blur on flying vehicles; volumetric fog and light shafts; high-detail, cinematic wide-angle, ultra-detailed textures, rim lighting on edges, subtle lens flares, 8k, photorealistic + stylized neon cyberpunk aesthetic.

Suggested Generation Settings:

  • Model: Gemini multimodal image model
  • Aspect Ratio: 16:9 (wide cinematic)
  • Quality / Resolution: High / 8k or max available
  • Style: Cyberpunk photoreal + neon stylized
  • Guidance / Creativity: Medium-high (to keep structure but allow creative tetrahedron arrangements)
  • Seed: Leave blank for variety or set a fixed seed for reproducible results
  • Safety / Content Filters: Default on

Image Variations to Request

  • Close-up: Single tetrahedron bubble with internal micro-lights forming a single glowing word fragment.
  • Aerial: Bird’s-eye view of the vortex and traffic lanes of flying cars.
  • Night variant: Same scene fully after dark with intensified neon contrast.
  • Motion study: Long-exposure streaks from flying cars and rotating tetrahedra.

Export & Integration Notes

  • Export images as PNG for transparency-friendly assets and MP4 or animated WebP for short looping demos.
  • Generate a short 10–15s video loop from Gemini if available to show the vortex animation for your demo.
  • Use the image as background and the video loop as a hero demo in your CodePen prototype.

DEV Submission (Ready-to-publish Markdown)

Title

Multiple Tetrahedron Bubble Word and Light Matrix — A Neon Vortex Cityscape

What I Built

What I built: a generative visual piece that layers geometric tetrahedron bubbles into a floating word-and-light matrix above a futuristic city at sunset. The scene combines AI-generated imagery and short animated loops to create an immersive demo that blends photorealism with neon cyberpunk stylization. The goal was to explore geometry-driven storytelling and to showcase Google AI Studio’s multimodal generation capabilities.

Demo

Demo:

  • Live demo: embed a CodePen showing the static hero image with an autoplaying short loop and interactive controls for toggling variations.
  • Video demo: include a 10–15s MP4 loop generated from Gemini showing the vortex animation.

Code

Code:

  • Frontend: HTML/CSS/JS CodePen for the interactive demo.
  • Key snippets to include in the repo:
    • Image/video embed and responsive layout.
    • A small JS widget to cycle image variations and toggle motion blur.
    • Optional: a lightweight WebGL shader to add parallax and depth to the tetrahedron layer.

Example repo structure:

  • index.html — demo page and embed code
  • styles.css — neon styling and responsive layout
  • app.js — variation controls, autoplay loop, and simple shader hooks
  • assets/ — exported Gemini images and video loops
  • README.md — build notes and credits

How I Built It

Technical approach:

  1. Concept & Prompting: iterated on Gemini prompts to refine tetrahedron arrangement, color palette, and motion characteristics.
  2. Asset Generation: used Google AI Studio to generate high-resolution stills and short animated loops. Exported PNGs and MP4s for the demo.
  3. Prototype: built a CodePen prototype that layers the generated assets, adds UI controls to switch variations, and uses CSS + small JS for parallax and motion toggles.
  4. Polish: added subtle audio ambience and optional ElevenLabs narration for an immersive intro if submitting to audio-related prize categories.
  5. Accessibility & Performance: optimized images for web delivery, provided fallback low-res images, and ensured keyboard controls for toggles.

Interesting decisions:

  • Chose a sunset palette to blend natural warmth with neon contrast for visual depth.
  • Used multiple tetrahedron scales to create readable word fragments when viewed from different distances.
  • Kept motion subtle in the demo to avoid visual fatigue while preserving cinematic energy.

Prize Categories

Submitting to: Best Use of Google AI.

Optional: Best Use of ElevenLabs if you add AI narration for the demo.

Credits

Tools used: Google AI Studio (Gemini), CodePen, basic WebGL shader snippets, optional ElevenLabs for narration.

Team: Solo submission; credit collaborators by DEV username if applicable.

Ready-to-Use CodePen Starter Snippet

HTML (paste into CodePen):

<div class="hero">
  <video id="vloop" autoplay loop muted playsinline src="assets/vortex-loop.mp4"></video>
  <img id="heroImg" src="assets/tetra-matrix-hero.png" alt="Tetrahedron Bubble Matrix">
  <div class="controls">
    <button id="var1">Sunset</button>
    <button id="var2">Night</button>
    <button id="toggleMotion">Toggle Motion</button>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

JS (paste into CodePen JS panel):

const v = document.getElementById('vloop');
const img = document.getElementById('heroImg');
document.getElementById('var1').onclick = () => {
  img.src = 'assets/tetra-matrix-hero.png';
  v.src = 'assets/vortex-loop.mp4';
};
document.getElementById('var2').onclick = () => {
  img.src = 'assets/tetra-matrix-night.png';
  v.src = 'assets/vortex-loop-night.mp4';
};
let motion = true;
document.getElementById('toggleMotion').onclick = () => {
  motion = !motion;
  v.style.opacity = motion ? 1 : 0;
};
Enter fullscreen mode Exit fullscreen mode
accounts.google.com

Top comments (1)

Collapse
 
dan52242644dan profile image
Dan •

Multiple Tetrahedron Bubble Word and Light Matrix — A Neon Vortex Cityscape

Built for Weekend Challenge: Passion Edition — a generative visual demo that layers translucent tetrahedron bubbles into a floating word-and-light matrix above a futuristic cityscape at sunset. The piece combines Google AI Studio generated imagery and short animated loops with a lightweight front-end prototype to create an immersive, interactive demo.

What I Built

Overview

A cinematic, AI-generated scene that places multiple translucent tetrahedron bubbles into a dynamic word-and-light matrix suspended above a neon-lit futuristic city at sunset. The scene includes a swirling vortex of neon lights, flying cars with motion trails, volumetric fog, and reflective wet streets that mirror the tetrahedra. The demo showcases geometry-driven storytelling and the creative use of Google AI Studio’s multimodal generation.

Goals

  • Produce high-quality stills and short loops that read well as hero assets.
  • Create an interactive front-end demo that toggles variations and motion.
  • Demonstrate a polished submission for the DEV Weekend Challenge and highlight Google AI Studio usage.

Demo

Live demo

  • CodePen demo: interactive hero with autoplaying loop and controls to switch variations and toggle motion.
  • Video demo: 10–15s MP4 loop showing the vortex animation for the hero section.

How to view

  • Open the CodePen demo to see the static hero image layered with the animated loop and UI controls.
  • Use the Night variant to see intensified neon contrast and the Motion Study to observe long-exposure streaks from flying cars.

Code

Repository structure

index.html        — demo page and embed code
styles.css        — neon styling and responsive layout
app.js            — variation controls, autoplay loop, motion toggles
assets/           — exported Gemini images and video loops
README.md         — build notes and credits
Enter fullscreen mode Exit fullscreen mode

CodePen starter snippet

HTML

<div class="hero">
  <video id="vloop" autoplay loop muted playsinline src="assets/vortex-loop.mp4"></video>
  <img id="heroImg" src="assets/tetra-matrix-hero.png" alt="Tetrahedron Bubble Matrix">
  <div class="controls">
    <button id="var1">Sunset</button>
    <button id="var2">Night</button>
    <button id="toggleMotion">Toggle Motion</button>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

CSS (excerpt)

.hero { position: relative; width: 100%; height: 60vh; overflow: hidden; background: linear-gradient(180deg,#ff7ab6,#0ff); }
.hero img, .hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.controls { position: absolute; right: 1rem; bottom: 1rem; display: flex; gap: .5rem; }
button { background: rgba(0,0,0,.5); color: #fff; padding: .5rem 1rem; border: none; border-radius: 6px; }
Enter fullscreen mode Exit fullscreen mode

JavaScript

const v = document.getElementById('vloop');
const img = document.getElementById('heroImg');
document.getElementById('var1').onclick = () => {
  img.src = 'assets/tetra-matrix-hero.png';
  v.src = 'assets/vortex-loop.mp4';
};
document.getElementById('var2').onclick = () => {
  img.src = 'assets/tetra-matrix-night.png';
  v.src = 'assets/vortex-loop-night.mp4';
};
let motion = true;
document.getElementById('toggleMotion').onclick = () => {
  motion = !motion;
  v.style.opacity = motion ? 1 : 0;
};
Enter fullscreen mode Exit fullscreen mode

How I Built It

Prompting and asset generation

  • Iterated on Gemini prompts in Google AI Studio to refine tetrahedron placement, color palette, and motion characteristics.
  • Generated high-resolution stills (PNG) and short animated loops (MP4) for hero and variation assets.
  • Tuned generation settings for a cinematic 16:9 aspect ratio, high detail, and a neon cyberpunk aesthetic.

Front-end prototype

  • Built a responsive CodePen demo that layers the generated assets and exposes simple UI controls to switch variations and toggle motion.
  • Added subtle CSS parallax and a lightweight shader hook for optional depth effects.
  • Optimized assets for web delivery with fallback low-res images and lazy-loading for performance.

Accessibility and polish

  • Ensured keyboard-accessible controls and descriptive alt text for images.
  • Kept motion subtle to avoid visual fatigue and provided a motion toggle for users sensitive to animation.
  • Added optional ambient audio and ElevenLabs narration for an immersive intro when submitting to audio-related categories.

Interesting technical choices

  • Sunset palette to blend natural warmth with neon contrast for depth.
  • Multiple tetrahedron scales to create readable word fragments at different zoom levels.
  • Motion blur and volumetric light to sell cinematic movement without overwhelming the viewer.

Gemini image prompt used

A futuristic cityscape at sunset with a swirling vortex of neon lights and flying cars; multiple translucent tetrahedron bubbles forming a luminous word-and-light matrix suspended above a skyline of glass spires; warm magenta and orange sunset on the horizon blending into electric cyan and violet neon; reflective wet streets below mirroring the tetrahedra; dynamic motion blur on flying vehicles; volumetric fog and light shafts; high-detail, cinematic wide-angle, ultra-detailed textures, rim lighting on edges, subtle lens flares, 8k, photorealistic + stylized neon cyberpunk aesthetic.
Enter fullscreen mode Exit fullscreen mode

Prize Categories

Primary submission

  • Best Use of Google AI — core assets and animation were generated with Google AI Studio (Gemini multimodal).

Optional

  • Best Use of ElevenLabs — if you add AI narration for the demo intro.

Credits and Tools

Tools used

  • Google AI Studio (Gemini) for image and short-loop generation
  • CodePen for the interactive front-end prototype
  • Lightweight WebGL shader snippets for optional depth/parallax
  • Optional ElevenLabs for narration and audio polish

Team

  • Solo submission. If you collaborated, list teammates by DEV username here.

Final Notes

How to reproduce

  1. Use the Gemini prompt above to generate hero stills and short loops.
  2. Export PNGs and MP4s into assets/.
  3. Paste the CodePen starter snippet into a new Pen and wire the assets.
  4. Polish with CSS parallax, optional shader depth, and accessible controls.
  5. Publish the CodePen and paste the demo link into your DEV post.

Thanks for reading — I hope this inspires you to experiment with geometry, light, and AI-driven storytelling.⛈️