google midjourney nano banana kling veo rare

prompts.ai

I need you to build a high-end, interactive 3D Automotive Showcase website. The goal is a "scrollytelling" experience where the user scrolls (or uses buttons) to move a camera around a 3D car model, highlighting specific features with smooth transitions.

Tech Stack:

• React (Vite ecosystem)
• @react-three/fiber & @react-three/drei
• Zustand (for state management)
• Tailwind CSS
• Lucide React (or SVG icons) for UI

Assets to use:

• 3D Model: https://pub-02d132b7ade94372a708d0a2057e464b.r2.dev/2021_porsche_911_turbo_s_992.glb
• Audio: https://pub-02d132b7ade94372a708d0a2057e464b.r2.dev/porsche.mp3
• Logo 1 (Crest): https://pub-02d132b7ade94372a708d0a2057e464b.r2.dev/Porsche-Logo.png
• Logo 2 (Text): https://pub-02d132b7ade94372a708d0a2057e464b.r2.dev/porsche.png
• Font: Import 'Michroma' (headers) and 'Inter' (body) from Google Fonts.

Core Features & Requirements:

1. State Management (Zustand):
   • Track the currentWaypointIndex (0 to N).
   • Track carColor (default to Agate Grey).
   • Track isDarkMode.
   • Track modelUrl (allow the user to upload their own .glb or use the default Porsche).
2. The 3D Scene (Experience.tsx):
   • Lighting: Professional studio lighting. Use Environment (preset="city"), ContactShadows for the floor, and a SpotLight for key lighting.
   • Model Logic:
     • Auto-scale the model so it fits the scene regardless of original units.
     • Car Paint Logic: I need a specific feature where changing the carColor only affects the car body. You must traverse the mesh and change the material color unless the material name contains words like "glass", "window", "tire", "rim", "interior", "light", etc.
   • Camera System:
     • Do not use <OrbitControls>.
     • Create a custom CameraHandler component.
     • It should accept an array of WAYPOINTS. Each waypoint has a position (camera location) and target (where the camera looks).
     • Use THREE.MathUtils.lerp inside useFrame to smoothly transition the camera and the lookAt target when the index changes.
3. The Waypoints (Storytelling):
   Define a constant array of waypoints with: { title, description, position: [x,y,z], target: [x,y,z], placement: 'top-left' | 'center-right', etc. }.
   • Frame 1: Side view, Intro.
   • Frame 2: Front grill zoom.
   • Frame 3: Wheel zoom.
   • Frame 4: Side profile.
   • Frame 5: Rear view.
   • Frame 6: Top-down view.
   • Frame 7: "Exit" view (camera moves away).
4. The UI Overlay:
   • Typography: 'Michroma' for uppercase headers, 'Inter' for descriptions.
   • Positioning: The text should change position based on the waypoint placement property (e.g., top-left, bottom-right) to avoid covering the car.
   • Animations: Text should fade out/blur when changing slides and fade in/unblur when settling.
   • Intro Animation: On the very first slide, show a large Porsche crest in the background that fades out when the user scrolls to the second slide.
   • Controls:
     • Previous/Next arrow buttons.
     • Mute toggle.
     • Dark mode toggle.
     • "Change Model" button (resets to an upload screen).
     • Color Picker: A row of colored squares to change the car paint.
5. Interactivity:
   • Allow navigation via Mouse Wheel (throttled), Arrow Keys, or on-screen buttons.
   • Support Drag & Drop to upload a custom .glb file.

‍

🧸 Interactive 3D Gummy Bear — React App Specification

✅ Tech Stack

• Framework: React + TypeScript
• Styling: Tailwind CSS
• 3D Engine: Three.js via:
  • @react-three/fiber
  • @react-three/drei
  • @react-spring/three
• Icons: Lucide-React

🎯 Objective

Create an interactive, hyper-realistic 3D gummy bear that behaves like a soft, translucent jelly object with physics-driven interaction and polished UI controls.

🧩 3D Model — Procedural Generation

• Construct the gummy bear programmatically by merging primitive geometries:
  • CapsuleGeometry → body and limbs
  • SphereGeometry → head, ears, snout
• Arm Positioning (Important):
  • Place arms lower on the torso
  • Rotate them forward toward the Z-axis
  • Avoid upward or outward angles
• The final mesh should appear as one seamless molded piece — no visible separations.

🍬 Material & Appearance

Use MeshTransmissionMaterial from @react-three/drei to achieve a jelly-like look.

Material must support configurable:

• Roughness → controls blur
• Transmission → controls translucency
• Color

Internal Glow

• Add a pointLight inside the bear mesh.
• Light intensity must be user-adjustable.

🎞 Animation & Interaction

Idle Animation

• Bear should gently float when inactive.

Physics-Based Interaction

Implement a squeeze + wobble effect using @react-spring/three.

On click/tap:

• Bear squashes slightly.

On release:

• Bear rebounds and wobbles with high tension (jello-like behavior).

💡 Scene & Lighting

3-Point Lighting Setup

• Ambient light
• Strong Key light
• Dedicated Backlight (Rim light)
  • Enhances subsurface scattering

🌗 Environment Modes

Dark Mode

• Background: #000000
• Include a star field using <Stars />

Light Mode

• Background: soft gray

🎛 UI Controls (Overlay)

Top Right

• Toggle button → Dark / Light mode

Bottom Left — Glassmorphism Panel

Include two sliders:

• Inner Light
  • Controls intensity of internal point light
• Blur
  • Maps to material roughness

Bottom Center

• Preset color buttons:
  • Red
  • Green
  • Yellow
  • Clear
  • (extendable)
• Custom color picker input

Bottom Right — Glassmorphism Panel

• Slider labeled “Opaqueness”
  • Controls the inverse of transmission

⚙️ Technical Constraints

• Use functional components + hooks
• Canvas must:
  • Fill the viewport
  • Handle resizing gracefully

‍

Create a React application using react-three-fiber and three.js that renders a full-screen, interactive liquid surface simulation.

Core Simulation Logic:

• Implement a GPU-based 'Ping-Pong' FBO (Frame Buffer Object) simulation to solve the wave equation.
• Use a Simulation Shader that tracks height (Red channel) and velocity (Green channel). It should propagate waves using a neighbor-average (Laplacian) approach and apply viscosity damping.
• Mouse clicks or touch drag events should write to the simulation texture to create ripples.

Rendering & Aesthetics:

• Use a Render Shader that calculates surface normals dynamically based on the simulation height map.
• Implement 11 distinct visual modes, switchable via Arrow Keys. The modes must include:
  1. Dark Chrome: Cinematic metallic look with subtle film grain.
  2. Holographic: Iridescent rainbow colors based on Fresnel angle with faint digital noise.
  3. Molten Gold: High-contrast gold with sharp specular highlights.
  4. Midnight Ocean: Deep blue/teal colors.
  5. Vaporwave: Pink-to-cyan gradient, a retro grid reflection effect, heavy CRT static fuzz, and scanlines.
  6. Radioactive Slime: Glowing toxic green.
  7. Oil Slick: Dark surface with turbulent interference patterns and gritty texture.
  8. Magma: Cracks of hot glowing lava cooling into dark rock.
  9. Glacial: Icy white/blue with sharp refraction.
  10. Deep Space: Dark nebula look with sparkling stars and high ISO sensor noise.
  11. Thermal Burst: A specific grainy aesthetic featuring a deep blue background transitioning to electric blue, magma orange, and core white based on wave height, overlaid with heavy animated film grain.

Technical Constraints:

• The simulation resolution should be around 512x512.
• Include a generic noise/grain function in the shader to apply retro 'fuzz' to specific modes (Vaporwave, Oil Slick, Deep Space, etc.).
• Ensure the canvas is full-screen and handles device pixel ratio correctly.

‍

System Instruction (Optional but Recommended)

Act as a World-Class Frontend Engineer & Creative Coder.
You specialize in React, Three.js, React Three Fiber, and Tailwind CSS.
You prioritize performance (using InstancedMesh), aesthetic polish (glassmorphism, smooth transitions), and responsive design.

User Prompt

Project

Create a "Emoji Mesh" 3D Web Application.

Goal

Build a React application that takes any emoji and renders it as a 3D cloud of particles (voxels) using Three.js.
The user can interact with the particles, change display modes, and download screenshots.

Tech Stack

• React 19
• Tailwind CSS (for UI)
• @react-three/fiber (for the 3D scene)
• @react-three/drei (for Controls, Environment, Shadows)
• three (Core library)
• @heroicons/react (UI Icons)

Core Features & Architecture

The Voxelizer Component (Voxelizer.tsx)

Logic

• Create an off-screen HTML5 Canvas.
• Render the selected emoji text into the center of the canvas using a robust font stack:
  • "Apple Color Emoji"
  • "Segoe UI Emoji"
  • "Noto Color Emoji"
• Append \uFE0F to force emoji presentation.

Sampling

• Read the pixel data (getImageData).
• Map pixels with alpha > 50 to 3D positions.

Modes

• Flat
  • Map X/Y coordinates directly to the 3D grid.
• Volumetric
  • Implement an inflation algorithm.
  • Calculate the distance of every solid pixel to the nearest empty pixel.
  • Use this distance to create thickness (z-axis depth), making the emoji look like a 3D inflated balloon or sphere.

Rendering

• Use THREE.InstancedMesh for high performance (rendering 2000+ particles).

Particle Style

• Allow toggling between simple cubes and tiny plane meshes using the emoji itself as a texture.

Interaction

• Implement a physics-like effect in useFrame.
• When the mouse hovers over particles, they should gently repel and rotate away from the cursor, then return to their original position.

The Main UI (App.tsx)

Layout

• A full-screen dark canvas background.

Responsiveness

• Desktop
  • A floating glass-morphism sidebar on the right (blurred background, translucent white borders).
• Mobile
  • The sidebar transforms into a bottom sheet/drawer that slides up from the bottom.

Controls

• Emoji Grid
  • A scrollable grid of curated emojis with pagination.
• Display Mode
  • Toggle between "Flat" and "Volumetric".
• Sliders
  • Control "Density" (resolution of the sampling canvas).
  • Control "Voxel Scale" (particle size).
• Colors
  • Color pickers for the "Tint" (lighting/particle color).
  • Color picker for "Background".
• Toggle
  • Switch between "Emoji" texture particles and "Square" geometry.
• Capture Button
  • A generic button in the bottom-left corner labeled "📸 Capture".
  • When clicked, it must snapshot the WebGL canvas and download it as a PNG.
  • Requires preserveDrawingBuffer: true in Canvas config.

Visual Aesthetic (Crucial)

• Theme
  • Dark, Cyberpunk / High-end tech feel.
• Materials
  • Use MeshStandardMaterial with slight roughness.
• Lighting
  • Ambient light + Point lights to create depth.
• UI Style
  • “Liquid Glass”
  • Heavily rely on:
    • backdrop-blur
    • bg-white/10
    • border-white/20
    • rounded-[2rem]
• Animations
  • Smooth transitions for the sidebar opening/closing:
    • translate-x on desktop
    • translate-y on mobile

Scene Setup

• Add OrbitControls (with auto-rotate disabled by default).
• Add ContactShadows below the model to ground it.
• Add Environment (preset: "city") for realistic reflections.

‍

Role:
Act as a world-class senior frontend engineer specializing in React, Three.js (React Three Fiber), and UI/UX design.

Goal:
Create a high-fidelity, cinematic 3D web application called "Lumina Sphere AI". The app features a reactive, highly reflective chrome sphere situated in high-resolution environments. It integrates Google Gemini for scene analysis and geocoding.

Tech Stack:

• Framework: React 19 (ESM modules via index.html)
• 3D Engine: React Three Fiber (@react-three/fiber), React Three Drei (@react-three/drei), Three.js
• Styling: Tailwind CSS (via CDN)
• AI: Google GenAI SDK (@google/genai)
• Icons: Lucide React

Core Features & Controls:

1. The Artifact (Central Sphere):
   • Material: High-gloss chrome (roughness: 0.05, metalness: 1.0, clearcoat: 1.0).
   • Geometry Slider: A slider (0-8) controlling the detail.
     • Levels 0-7: Uses IcosahedronGeometry. Low levels look faceted (like a disco ball) with flat shading enabled.
     • Level 8 (Max): Swaps geometry to a high-res SphereGeometry (128x128 segments) and forces smooth shading for a perfect, mirror-like finish. Critical: The material key must change when switching between polygonal and smooth to force shader recompilation.
   • Color Control: A color picker to tint the chrome material.
2. Environment System:
   • 4K HDRIs: The app must use high-quality 4K HDRIs from Polyhaven for background and lighting.
     • Snow Field, Venice Sunset, Chapel, Blue Studio, Pure Sky, City Night, Warehouse, Forest.
   • Google Street View Integration:
     • Allow the user to select "Street View (Google)" as an environment.
     • Input: A text box to type a location (e.g., "Eiffel Tower").
     • Logic: Use Gemini (model: gemini-3-flash-preview) to geocode the location name into lat and lng coordinates.
     • Rendering: Fetch a 1024x1024 panorama from the Google Maps Static Street View API and map it to a large sphere surrounding the scene using EquirectangularReflectionMapping.
3. Holographic Overlays:
   • Grid Toggle: Show/Hide a wireframe overlay around the sphere.
   • Grid Styles:
     • Standard: Clean latitude/longitude lines without diagonal wires.
     • Lattice: A wireframe icosahedron with glowing vertices.
4. AI Analysis (Gemini Integration):
   • A "Sync" button that sends the current scene state (colors, geometry, environment, location) to Gemini.
   • Gemini returns a JSON object containing:
     • mood: A short mood tag.
     • analysis: An artistic description of the scene.
     • suggestion: A creative tip to improve the visual.

Visual & UI/UX Design:

• Theme: Dark mode, futuristic, "System Online" aesthetic.
• Interface: A glassmorphism floating panel on the right side (backdrop-blur-2xl, bg-black/60).
• Canvas: Full-screen, toneMappingExposure: 1.2, antialias: true, shadows enabled.
• Loading: Use Suspense with a "System Online" loader indicator.

Specific External Assets (Polyhaven 4K Links):
Use these exact URLs to ensure crisp backgrounds:

• https://dl.polyhaven.org/file/ph-assets/HDRIs/hdr/4k/snowy_field_4k.hdr
• https://dl.polyhaven.org/file/ph-assets/HDRIs/hdr/4k/venice_sunset_4k.hdr
• https://dl.polyhaven.org/file/ph-assets/HDRIs/hdr/4k/chapel_day_4k.hdr
• https://dl.polyhaven.org/file/ph-assets/HDRIs/hdr/4k/blue_photo_studio_4k.hdr
• https://dl.polyhaven.org/file/ph-assets/HDRIs/hdr/4k/kloofendal_48d_partly_cloudy_puresky_4k.hdr
• https://dl.polyhaven.org/file/ph-assets/HDRIs/hdr/4k/dikhololo_night_4k.hdr
• https://dl.polyhaven.org/file/ph-assets/HDRIs/hdr/4k/empty_warehouse_01_4k.hdr
• `https://dl.polyhaven.org/file/ph-assets/HDRIs/hdr/4k/forest_slope_4k.hdr

‍

--sref 9156148

‍

Build a high-end, minimalist virtual art gallery as a React application using Tailwind CSS.

1. Core Navigation & 3D Logic:
   Implement a scalable grid system (2x2 up to 5x5) that displays artwork.
   The primary navigation should use a 3D cube transition: when moving left or right, the entire page should appear to rotate like the face of a cube in 3D space.
   Ensure smooth CSS transitions with transform-style: preserve-3d and a perspective of at least 2000px.
2. Data & API Integration:
   Integrate the Metropolitan Museum of Art API to fetch real paintings.
   The app should fetch a random pool of objects, filter for items with images, and map them to the grid.
   Include a 'Sync' function that refreshes the collection and a 'Curator' panel (modal) that allows local editing of artwork titles and prices.
   The 'Category' field should be used to display randomly generated but realistic prices (e.g., $15,000).
3. Visual Aesthetic & Typography:
   Minimalist Gallery Style: Use a very clean, 'sterile' gallery look. The background should be a slight off-white (#f7f7f7) with a subtle radial 'spotlight' effect behind the grid.
   Typography: All text should be lowercase by default (except for IDs). Use very wide letter-spacing (tracking) for headers and labels.
   No Lines/Dividers: Avoid all tacky borders, underscores, or horizontal rules. Use whitespace and subtle shadows for grouping instead.
   Placards: Each grid item should sit in a thin white frame with a small 'placard' underneath showing the title and price.
4. Detail Modal:
   When an item is clicked, open a full-screen blurred background modal.
   Natural Dimensions: The artwork must be displayed in its natural aspect ratio (do not force it into a square).
   The detail view should include an 'Inquire' button and a 'Digital Reference' copy link. Remove all decorative icons or expanders from these buttons.
5. Technical Stack:
   Use lucide-react for icons (Settings, Refresh, Terminal).
   Implement local storage to save 'Curator' edits.
   Use a functional, modular component structure (CubeStage, GridFace, ToyItem).

‍

The Prompt: "The Immortal Fox" 3D Logic ChallengeGoal: Build a React-based 3D exploration game using Three.js and GLTFLoader where a character grows and gains "Absolute Immunity" through specific item collection milestones.Core Environment & Character:World: A vast grassy plane with a dense forest of low-poly trees and exponential fog for depth.Character: Load a 3D rigged Fox model. Implement WASD controls with a dynamic 3rd-person follow camera that adjusts its height and distance based on the fox's current scale.Animations: The fox should play its "walk/run" animation, with the timeScale mapped to its actual movement velocity. The animation must stop when the fox is idle.Gameplay Logic & State Machine:Red Mushroom Phase: Spawn 5 red mushrooms. Each collection increments a counter. At 5 mushrooms, the fox scales up by 20x (Giant Mode).The Nemesis: Purple mushrooms act as enemies. They "hunt" the fox by slowly moving toward its current position.Penalty: If a purple mushroom touches a non-immune fox, the fox loses 1 red mushroom and scales back down immediately.The Golden Milestone (The "One-Time" Rule):The moment the counter hits 5/5, a single Golden Mushroom spawns in the distance.This Golden Mushroom is a unique entity. Once it is collected, it must NEVER spawn again for the duration of the session.Absolute Immunity:Bumping into the Golden Mushroom grants "Immunity."Display a high-contrast white speech bubble above the fox's head that reads "IMMUNITY" using a Canvas texture.Permanent Transformation: Once immune, the fox is locked at 20x scale forever. Purple mushrooms can no longer reduce the mushroom count or shrink the fox. They are simply destroyed on contact.Visual Polish:UI: Use a minimalist, high-end "Axis" style configurator UI with thin tracking, uppercase labels, and a dot-matrix style collection tracker.Controls: Implement smooth mouse-drag rotation for the camera (Yaw and Pitch) with eased interpolation for a professional "Configurator" feel. Load fox from https://github.khronos.org/glTF-Sample-Viewer-Release/

Try it yourself

--sref 6866081154

Subject: A high-definition, 1/6 scale collectible action figure of Kanye West. The figure features a hyper-realistic plastic skin texture with detailed face and hands, free of dark circles.

Outfit: A heavy-weight, washed lavender purple hoodie with the hood up and a kangaroo pocket. Dark indigo, straight-leg raw denim jeans, slightly baggy and stacked over black Yeezy 500 sneakers.

Pose & Accessories (Fixed): The figure stands in a neutral, static standing pose.

• Right Hand: Raised slightly to chest height, holding a smartphone with a brown case.
• Left Hand: Hanging naturally by the side, holding a thick silver chain leash.
• Companion: A realistic plastic pug stands on the floor next to the figure's left leg, attached to the leash.

Camera Angle & Orientation: Three-quarter view from the left. The figure represents a 45-degree angle relative to the camera, revealing the left side of the profile. The figure’s head is facing the same direction as the body.

Environment: Solid white background. Soft, even, flat lighting with no hard shadows. No visible stand.

Style: Product photography, macro lens, shallow depth of field, 1/6 scale toy aesthetic.

--sref 6490284912 5574104178 5528822188 6579882019 6354862835

--sref 6490284912 5574104178 5528822188 6579882019 6354862835

--sref 5832651960

--sref 4513206756 4418566027

--sref 8166701002

--sref 6837441358 8369633930 7786845962

Photorealistic cinematic moment at night: A woman lifts her hand to block harsh headlights shining directly at her face. In the warm yellow glow of the headlights, she realizes her hand is composed of ultra-fine, digitized particles—micro-grains that shimmer with an iridescent rainbow sheen, like spectral refraction. The surrounding scene is drenched in dark purples, with only the illuminated hand and face showing warm yellow highlights mixed with rainbow particle colors. Her expression is tense, awestruck, eyes focused on her dissolving fingertips. Particles drift from her hand into the air, glowing subtly. Cinematic lighting, hyperreal skin detail, shallow depth of field, dramatic contrast, volumetric dusk atmosphere, digital-surreal aesthetic.

--ar 16:9 --style raw --v 6