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:
Concept & Prompting: iterated on Gemini prompts to refine tetrahedron arrangement, color palette, and motion characteristics. #
Asset Generation: used Google AI Studio to generate high-resolution stills and short animated loops. Exported PNGs and MP4s for the demo. #
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. #
Polish: added subtle audio ambience and optional ElevenLabs narration for an immersive intro if submitting to audio-related prize categories. #
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):**
**JS (paste into CodePen JS panel):**