https://claude.ai/public/artifacts/70a6ade6-ce2a-468a-86cb-c71bf2e28b73,import React, { useState, useEffect } from 'react';
import { Sparkles, Zap, Globe, Film, Share2, Download, Copy, Check } from 'lucide-react';
const MercedesCinematicApp = () => {
const [selectedUniverse, setSelectedUniverse] = useState(null);
const [customPrompt, setCustomPrompt] = useState('');
const [copied, setCopied] = useState(false);
const [favorites, setFavorites] = useState([]);
const [showShareModal, setShowShareModal] = useState(false);
const universes = [
{
id: 1,
title: "Chrome Souls",
subtitle: "The Awakening",
icon: "🚗",
gradient: "from-slate-600 to-slate-900",
prompt: "Hyperrealistic biometric 10D rendering of sentient Mercedes-Benz S-Class with expressive LED eyes and adaptive grille mouths, personalities emerging through micro-movements in carbon fiber bodies. Photorealistic German engineering with emotion-mapping technology showing thermal signatures and electromagnetic fields. Stuttgart neon-lit streets, rain creating perfect reflections on obsidian paint finishes.",
tags: ["Biometric", "10D", "Hyperrealism"]
},
{
id: 2,
title: "Sky Dominion",
subtitle: "AMG Assault",
icon: "✈️",
gradient: "from-blue-600 to-indigo-900",
prompt: "Mind-bending 7D visualization of Mercedes-AMG GT Black Series flying through stratospheric layers, aerodynamic wings deploying with hydraulic precision. Hyperrealistic jet turbines integrated into wheel wells, shooting crystallized ice projectiles from headlight cannons. Volumetric clouds parting around chrome bodies at 400mph, leaving blue flame contrails.",
tags: ["Flying", "7D", "Weapons"]
},
{
id: 3,
title: "Elemental Highway",
subtitle: "Power Unleashed",
icon: "⚡",
gradient: "from-orange-600 to-red-900",
prompt: "Photorealistic 3D/10D hybrid rendering: Mercedes EQS electric sedans channeling pure lightning through batteries, shooting electric arcs from side mirrors. G-Class SUVs with earth-manipulation abilities, tires churning molten lava. Biometric signature glowing through transparent body panels showing power cores pulsing like hearts.",
tags: ["Elemental", "Powers", "Electric"]
},
{
id: 4,
title: "Middle-Earth Motors",
subtitle: "Gollum's Mercedes",
icon: "💍",
gradient: "from-green-800 to-gray-900",
prompt: "Hyperrealistic crossover: Corrupted ancient Mercedes-Benz 300SL Gullwing covered in cave moss and precious metal inlays, headlights glowing like Gollum's eyes. Biometric scans reveal tortured consciousness trapped in chrome, whispering through exhaust pipes. Mordor's volcanic landscape with 10D depth showing every rust particle and crack in century-aged leather seats.",
tags: ["Fantasy", "Crossover", "LOTR"]
},
{
id: 5,
title: "Titan Protocol",
subtitle: "Transformer Genesis",
icon: "🤖",
gradient: "from-purple-600 to-pink-900",
prompt: "7D biometric visualization of 200-foot-tall Mercedes-Benz Titan mechs, transformation sequences showing every gear, piston, and hydraulic line in microscopic detail. Hyperrealistic metallic textures with battle damage, oil leaks, heat distortion. Bot faces constructed from Mercedes grilles, three-pointed stars rotating as eyes, shooting plasma beams from hood-mounted cannons.",
tags: ["Giant Bots", "Transformers", "Epic"]
},
{
id: 6,
title: "Multiverse Autobahn",
subtitle: "Infinite Realities",
icon: "🌀",
gradient: "from-cyan-600 to-blue-900",
prompt: "Mind-bending 10D concept: Mercedes vehicles existing simultaneously across parallel dimensions - steampunk brass Mercedes in Victorian London, bioluminescent organic Mercedes in alien jungles, crystalline ice Mercedes on frozen planets. Hyperrealistic portals showing depth of field across realities, each universe rendered with distinct physics and lighting models.",
tags: ["Multiverse", "Portal", "Dimensions"]
},
{
id: 7,
title: "Desert Kings",
subtitle: "The Last Convoy",
icon: "🏜️",
gradient: "from-yellow-700 to-orange-900",
prompt: "Photorealistic post-apocalyptic Mercedes Unimog trucks with reactive armor plating, shooting sandstorm projectiles from roof-mounted turrets. Biometric HUD overlays showing vehicle vitals, fuel levels, and emotional states through dashboard personalities. 7D rendering captures every grain of sand, every bullet hole, every weathered Mercedes emblem.",
tags: ["Post-Apocalyptic", "Combat", "Desert"]
},
{
id: 8,
title: "Velocity Gods",
subtitle: "Olympus Racing",
icon: "⚡",
gradient: "from-amber-500 to-yellow-900",
prompt: "Hyperrealistic Greek mythology meets Mercedes: Flying Mercedes-Maybach S680 chariots with golden particle effects, shooting lightning bolts (Zeus edition) and tidal waves (Poseidon edition). 10D biometric scanning shows divine energy flowing through luxury interiors, constellation patterns emerging on panoramic sunroofs during flight sequences.",
tags: ["Mythology", "Gods", "Flying"]
},
{
id: 9,
title: "Nano-Swarm",
subtitle: "The Silver Plague",
icon: "🔬",
gradient: "from-gray-500 to-slate-900",
prompt: "Mind-bending microscopic 10D journey: Mercedes vehicles composed of billions of intelligent nanobots, able to disperse and reform. Hyperrealistic macro photography shows individual chrome particles separating to dodge attacks, then coalescing into solid form. Shooting metallic swarm projectiles that consume enemy vehicles molecule by molecule.",
tags: ["Nano-tech", "Swarm", "Sci-Fi"]
},
{
id: 10,
title: "Aurora Protocol",
subtitle: "Arctic Sentinels",
icon: "❄️",
gradient: "from-blue-400 to-cyan-900",
prompt: "7D biometric hyperrealism: Translucent ice-crystal Mercedes G-Wagons patrolling frozen tundras, shooting subzero freeze rays that crystallize air molecules. Northern lights reflect through transparent bodies revealing mechanical hearts. Vehicle breath creates visible vapor clouds, tire treads leaving bioluminescent tracks in snow rendered at 10 billion polygons.",
tags: ["Ice", "Arctic", "Freeze Powers"]
},
{
id: 11,
title: "Quantum Highway",
subtitle: "Probability Drivers",
icon: "🌌",
gradient: "from-violet-600 to-purple-900",
prompt: "10D rendering showing Mercedes EQE vehicles existing in superposition - simultaneously in multiple lanes, multiple colors, multiple timelines. Hyperrealistic quantum effects: particle trails, wave function collapses, shooting photon torpedoes. Biometric displays show driver and vehicle consciousness merging, creating probability clouds of possible futures.",
tags: ["Quantum", "Multiverse", "Physics"]
},
{
id: 12,
title: "Genesis Core",
subtitle: "The First Mercedes",
icon: "🌟",
gradient: "from-rose-600 to-purple-900",
prompt: "Hyperrealistic origin story: Primordial Mercedes entities emerging from liquid metal pools, biometric scans revealing DNA-like code in chassis structures. 7D visualization of evolution - from simple vintage forms to complex modern consciousness. Shooting elemental creation beams that birth new Mercedes generations, set in cosmic forge of swirling galaxies and star matter.",
tags: ["Origin", "Creation", "Cosmic"]
}
];
const copyToClipboard = (text) => {
navigator.clipboard.writeText(text);
setCopied(true);
setTimeout(() => setCopied(false), 2000);
};
const toggleFavorite = (id) => {
setFavorites(prev =>
prev.includes(id) ? prev.filter(f => f !== id) : [...prev, id]
);
};
const generateCustomPrompt = () => {
const randomUniverse = universes[Math.floor(Math.random() * universes.length)];
const effects = ["10D biometric", "7D hyperrealistic", "mind-bending 3D", "photorealistic 10D"];
const weapons = ["plasma cannons", "elemental blasters", "quantum torpedoes", "nano-swarm missiles"];
const settings = ["cyberpunk cityscape", "volcanic wasteland", "crystalline dimension", "underwater metropolis"];
const custom = `${effects[Math.floor(Math.random() * effects.length)]} rendering of Mercedes-Benz vehicles with ${weapons[Math.floor(Math.random() * weapons.length)]}, set in ${settings[Math.floor(Math.random() * settings.length)]}. Cinematic Pixar-style personalities, flying capabilities, and hyperrealistic textures showing every detail.`;
setCustomPrompt(custom);
};
return (
<div className="min-h-screen bg-gradient-to-br from-gray-900 via-slate-900 to-black text-white pb-20">
{/* Header */}
<div className="bg-gradient-to-r from-blue-600 to-purple-600 p-6 shadow-2xl">
<div className="flex items-center justify-between max-w-6xl mx-auto">
<div>
<h1 className="text-3xl font-bold flex items-center gap-2">
<Film className="w-8 h-8" />
Mercedes Cinematic Universe
</h1>
<p className="text-blue-100 text-sm mt-1">AI Prompt Generator for Visual Artists</p>
</div>
<Sparkles className="w-10 h-10 animate-pulse" />
</div>
</div>
{/* Custom Prompt Generator */}
<div className="max-w-6xl mx-auto p-4 mt-6">
<div className="bg-gradient-to-br from-purple-900/50 to-pink-900/50 rounded-2xl p-6 border border-purple-500/30 backdrop-blur">
<h2 className="text-2xl font-bold mb-4 flex items-center gap-2">
<Zap className="w-6 h-6 text-yellow-400" />
Random Prompt Generator
</h2>
<button
onClick={generateCustomPrompt}
className="w-full bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white py-4 rounded-xl font-bold text-lg transition-all transform hover:scale-105 mb-4"
>
Generate Random Prompt ✨
</button>
{customPrompt && (
<div className="bg-black/40 rounded-xl p-4 border border-purple-500/30">
<p className="text-sm leading-relaxed mb-3">{customPrompt}</p>
<button
onClick={() => copyToClipboard(customPrompt)}
className="bg-purple-600 hover:bg-purple-700 px-4 py-2 rounded-lg text-sm flex items-center gap-2 transition-all"
>
{copied ? <Check className="w-4 h-4" /> : <Copy className="w-4 h-4" />}
{copied ? 'Copied!' : 'Copy Prompt'}
</button>
</div>
)}
</div>
</div>
{/* Universe Grid */}
<div className="max-w-6xl mx-auto p-4 mt-6">
<h2 className="text-2xl font-bold mb-4 flex items-center gap-2">
<Globe className="w-6 h-6" />
Choose Your Universe
</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{universes.map((universe) => (
<div
key={universe.id}
onClick={() => setSelectedUniverse(universe)}
className={`bg-gradient-to-br ${universe.gradient} rounded-2xl p-6 cursor-pointer transition-all transform hover:scale-105 hover:shadow-2xl border-2 ${
selectedUniverse?.id === universe.id ? 'border-yellow-400' : 'border-transparent'
}`}
>
<div className="flex justify-between items-start mb-3">
<div className="text-5xl">{universe.icon}</div>
<button
onClick={(e) => {
e.stopPropagation();
toggleFavorite(universe.id);
}}
className="text-2xl"
>
{favorites.includes(universe.id) ? '⭐' : '☆'}
</button>
</div>
<h3 className="text-xl font-bold mb-1">{universe.title}</h3>
<p className="text-sm text-gray-300 mb-3">{universe.subtitle}</p>
<div className="flex flex-wrap gap-2">
{universe.tags.map((tag, idx) => (
<span key={idx} className="bg-white/20 px-2 py-1 rounded-full text-xs">
{tag}
</span>
))}
</div>
</div>
))}
</div>
</div>
{/* Selected Universe Detail */}
{selectedUniverse && (
<div className="max-w-6xl mx-auto p-4 mt-6">
<div className={`bg-gradient-to-br ${selectedUniverse.gradient} rounded-2xl p-6 border-2 border-yellow-400 shadow-2xl`}>
<div className="flex justify-between items-start mb-4">
<div>
<h2 className="text-3xl font-bold mb-2 flex items-center gap-3">
<span className="text-5xl">{selectedUniverse.icon}</span>
{selectedUniverse.title}
</h2>
<p className="text-xl text-gray-300">{selectedUniverse.subtitle}</p>
</div>
<button
onClick={() => setSelectedUniverse(null)}
className="text-3xl hover:scale-110 transition-transform"
>
✕
</button>
</div>
<div className="bg-black/40 rounded-xl p-4 mb-4 border border-white/20">
<p className="text-sm leading-relaxed">{selectedUniverse.prompt}</p>
</div>
<div className="flex gap-3">
<button
onClick={() => copyToClipboard(selectedUniverse.prompt)}
className="flex-1 bg-white/20 hover:bg-white/30 backdrop-blur px-6 py-3 rounded-xl font-bold flex items-center justify-center gap-2 transition-all"
>
{copied ? <Check className="w-5 h-5" /> : <Copy className="w-5 h-5" />}
{copied ? 'Copied!' : 'Copy Prompt'}
</button>
<button
onClick={() => setShowShareModal(true)}
className="flex-1 bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 px-6 py-3 rounded-xl font-bold flex items-center justify-center gap-2 transition-all"
>
<Share2 className="w-5 h-5" />
Share
</button>
</div>
</div>
</div>
)}
{/* Share Modal */}
{showShareModal && (
<div className="fixed inset-0 bg-black/80 backdrop-blur flex items-center justify-center z-50 p-4">
<div className="bg-gradient-to-br from-gray-800 to-gray-900 rounded-2xl p-6 max-w-md w-full border border-purple-500/30">
<h3 className="text-2xl font-bold mb-4">Share This Universe</h3>
<p className="text-gray-300 mb-4">Share this cinematic prompt with your creative team!</p>
<div className="flex gap-3 mb-4">
<button className="flex-1 bg-blue-600 hover:bg-blue-700 py-3 rounded-xl font-bold transition-all">
</button>
<button className="flex-1 bg-green-600 hover:bg-green-700 py-3 rounded-xl font-bold transition-all">
</button>
<button className="flex-1 bg-purple-600 hover:bg-purple-700 py-3 rounded-xl font-bold transition-all">
Discord
</button>
</div>
<button
onClick={() => setShowShareModal(false)}
className="w-full bg-gray-700 hover:bg-gray-600 py-3 rounded-xl font-bold transition-all"
>
Close
</button>
</div>
</div>
)}
{/* Bottom Navigation */}
<div className="fixed bottom-0 left-0 right-0 bg-gradient-to-r from-gray-900 to-slate-900 border-t border-gray-700 p-4">
<div className="max-w-6xl mx-auto flex justify-around">
<button className="flex flex-col items-center gap-1 text-purple-400 hover:text-purple-300 transition-colors">
<Globe className="w-6 h-6" />
<span className="text-xs font-semibold">Universes</span>
</button>
<button className="flex flex-col items-center gap-1 text-gray-400 hover:text-gray-300 transition-colors">
<Sparkles className="w-6 h-6" />
<span className="text-xs font-semibold">Generate</span>
</button>
<button className="flex flex-col items-center gap-1 text-gray-400 hover:text-gray-300 transition-colors">
<Download className="w-6 h-6" />
<span className="text-xs font-semibold">Saved ({favorites.length})</span>
</button>
</div>
</div>
</div>
);
};
export default MercedesCinematicApp;
.png)
