Gemini Prompt for Google AI Studio Image Generation

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