Creation Details
Panel prompts:
- #1“import { Canvas } from '@react-three/fiber' import { OrbitControls, Sky } from '@react-three/drei' function Field() { return ( <mesh rotation={[-Math.PI / 2, 0, 0]} receiveShadow> <planeGeometry args={[40, 24]} /> <meshStandardMaterial color="green" /> </mesh> ) } function Ball() { return ( <mesh position={[0, 0.5, 0]} castShadow> <sphereGeometry args={[0.5, 32, 32]} /> <meshStandardMaterial color="white" /> </mesh> ) } function Goal({ position }) { return ( <group position={position}> <mesh> <boxGeometry args={[6, 3, 0.2]} /> <meshStandardMaterial color="white" wireframe /> </mesh> </group> ) } function Player({ position, color }) { return ( <group position={position}> <mesh position={[0, 1, 0]} castShadow> <capsuleGeometry args={[0.4, 1.2, 8, 16]} /> <meshStandardMaterial color={color} /> </mesh> </group> ) } const careerData = { player: { name: 'Lucas Andrade', age: 17, position: 'ATA', overall: 68, goals: 12, assists: 7, marketValue: '€4.5M' }, club: { name: 'Rio Capital FC', budget: '€85M', fans: '2.1M', leaguePosition: 3 }, objectives: [ 'Ganhar o Brasileirão', 'Fazer 20 gols na temporada', 'Chegar na Libertadores', 'Receber proposta da Europa' ], transfers: [ 'São Titan FC quer contratar seu atacante', 'Imperial Madrid Club observando jovem promessa', 'Minas Galaxy fez proposta de €12M' ] } export default function FootballGame() { const menuItems = [ 'Jogar Partida', 'Modo Carreira', 'Ultimate Team', 'Competições', 'Treinamento', 'Configurações' ] return ( <div className="w-full h-screen bg-black text-white overflow-hidden relative"> <div className="absolute inset-0 bg-gradient-to-br from-black via-zinc-900 to-green-950 opacity-95"></div> <div className="absolute top-0 left-0 z-30 w-full flex items-center justify-between px-10 py-6 backdrop-blur-xl bg-black/40 border-b border-white/10"> <div className="flex items-center gap-4"> <div className="text-4xl font-black tracking-widest bg-white text-black px-4 py-2 rounded-2xl shadow-2xl"> FOOTBALL ULTIMATE </div> <div className="hidden md:flex gap-3 ml-6"> {menuItems.map((item, index) => ( <button key={index} className="px-5 py-2 rounded-2xl bg-white/5 hover:bg-green-500 hover:text-black transition-all duration-300 font-bold border border-white/10" > {item} </button> ))} </div> </div> <div className="flex items-center gap-4"> <div className="bg-green-500 text-black px-5 py-2 rounded-2xl font-black shadow-xl"> ONLINE </div> <div className="bg-white/10 px-4 py-2 rounded-2xl border border-white/10"> Temporada 2026 </div> </div> </div> <div className="absolute top-0 left-0 z-10 w-full flex justify-center pt-4 pointer-events-none"> <div className="bg-black/80 border border-white/20 shadow-2xl rounded-3xl px-8 py-3 flex items-center gap-8 backdrop-blur-xl min-w-[700px] justify-between"> <div className="flex items-center gap-4"> <div className="w-3 h-3 rounded-full bg-red-500 animate-pulse"></div> <div className="text-2xl font-extrabold tracking-wide"> Rio Capital FC </div> </div> <div className="bg-white text-black rounded-2xl px-6 py-2 text-3xl font-black shadow-xl"> 0 - 0 </div> <div className="flex items-center gap-4"> <div className="text-2xl font-extrabold tracking-wide"> Imperial Madrid Club </div> <div className="w-3 h-3 rounded-full bg-blue-500 animate-pulse"></div> </div> <div className="bg-yellow-400 text-black rounded-xl px-4 py-2 text-xl font-black shadow-lg"> 45:00 </div> </div> </div> <Canvas shadows camera={{ position: [0, 15, 18], fov: 50 }}> <Sky sunPosition={[100, 20, 100]} /> <ambientLight intensity={0.6} /> <directionalLight castShadow intensity={2} position={[10, 20, 10]} shadow-mapSize-width={2048}”
- #2“aí o jogador faz o gol ”
Art Style: Noir Comics
Color Mode: Full Color
Panels: 2
Created: