[V0_FILE]typescriptreact:file="components/celestial-object.tsx" isFixed="true" isQuickEdit="true" "use client" import { useRef, useState } from "react" import { useFrame } from "@react-three/fiber" import { useTexture } from "@react-three/drei" import { useSphere } from "@react-three/cannon" export default function CelestialObject({ position, size, mass, color, type, texture }) { const [ref, api] = useSphere(() => ({ mass: mass, position: position, args: [size], linearDamping: 0.1, angularDamping: 0.1, })) const materialRef = useRef() const [hovered, setHovered] = useState(false) // Apply random initial velocity useRef(() => { api.velocity.set((Math.random() - 0.5) * 2, (Math.random() - 0.5) * 2, (Math.random() - 0.5) * 2) api.angularVelocity.set(Math.random() * 0.2, Math.random() * 0.2, Math.random() * 0.2) }).current useFrame(() => { if (materialRef.current) { materialRef.current.emissiveIntensity = hovered ? 0.5 : 0.2 } }) // For planets with textures const planetTexture = useTexture(texture || "/textures/default.jpg") return type === "planet" ? ( setHovered(true)} onPointerOut={() => setHovered(false)} castShadow receiveShadow > ) : ( setHovered(true)} onPointerOut={() => setHovered(false)} castShadow receiveShadow > ) } [V0_FILE]typescriptreact:file="app/layout.tsx" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Interactive Space Environment", description: "Explore and interact with a 3D space environment", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/globals.css" @tailwind base; @tailwind components; @tailwind utilities; :root { --foreground-rgb: 255, 255, 255; --background-start-rgb: 0, 0, 0; --background-end-rgb: 0, 0, 0; } body { color: rgb(var(--foreground-rgb)); background: rgb(var(--background-start-rgb)); margin: 0; padding: 0; overflow: hidden; } canvas { touch-action: none; } @layer utilities { .text-balance { text-wrap: balance; } } @layer base { :root { --background: 0 0% 0%; --foreground: 0 0% 100%; --card: 0 0% 3.9%; --card-foreground: 0 0% 98%; --popover: 0 0% 3.9%; --popover-foreground: 0 0% 98%; --primary: 221.2 83.2% 53.3%; --primary-foreground: 210 40% 98%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 224.3 76.3% 48%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="tailwind.config.js" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, }, }, plugins: [], } [V0_FILE]typescriptreact:file="components/loader.tsx" export function Loader() { return (

) } [V0_FILE]typescriptreact:file="components/space-environment.tsx" isFixed="true" "use client" import { useRef, useState, useEffect, useMemo } from "react" import { Canvas, useFrame, useThree } from "@react-three/fiber" import { Stars, Trail } from "@react-three/drei" import * as THREE from "three" import { Physics, useSphere } from "@react-three/cannon" import Instructions from "./instructions" // Create a better procedural texture const createPlanetTexture = (color1 = "#1a237e", color2 = "#303f9f", size = 256) => { const canvas = document.createElement("canvas") canvas.width = size canvas.height = size const ctx = canvas.getContext("2d") if (ctx) { // Create a gradient background const gradient = ctx.createRadialGradient(size / 2, size / 2, 0, size / 2, size / 2, size / 2) gradient.addColorStop(0, color1) gradient.addColorStop(1, color2) ctx.fillStyle = gradient ctx.fillRect(0, 0, size, size) // Add some noise/details for (let i = 0; i < 20; i++) { const x = Math.random() * size const y = Math.random() * size const radius = (Math.random() * size) / 4 + size / 8 const gradientDetail = ctx.createRadialGradient(x, y, 0, x, y, radius) const alpha = Math.random() * 0.2 + 0.05 gradientDetail.addColorStop(0, `rgba(255, 255, 255, ${alpha})`) gradientDetail.addColorStop(1, "rgba(255, 255, 255, 0)") ctx.fillStyle = gradientDetail ctx.beginPath() ctx.arc(x, y, radius, 0, Math.PI * 2) ctx.fill() } // Add some small stars/highlights ctx.fillStyle = "rgba(255, 255, 255, 0.8)" for (let i = 0; i < size / 2; i++) { const x = Math.random() * size const y = Math.random() * size const radius = Math.random() * 1.5 ctx.beginPath() ctx.arc(x, y, radius, 0, Math.PI * 2) ctx.fill() } } const texture = new THREE.CanvasTexture(canvas) texture.needsUpdate = true return texture } // Visual cursor effect function CursorEffect() { const { mouse, viewport } = useThree() const ref = useRef() useFrame(({ clock }) => { if (ref.current) { const x = (mouse.x * viewport.width) / 2 const y = (mouse.y * viewport.height) / 2 ref.current.position.set(x, y, 0) // Pulse effect const scale = 1 + Math.sin(clock.getElapsedTime() * 4) * 0.1 ref.current.scale.set(scale, scale, scale) } }) return ( ) } // Mouse interaction with physics objects function MouseInteraction() { const { mouse, viewport } = useThree() const [sphereRef, api] = useSphere(() => ({ type: "Kinematic", args: [5], // Larger interaction radius position: [0, 0, 0], })) useFrame(() => { // Convert mouse position to 3D space const x = (mouse.x * viewport.width) / 2 const y = (mouse.y * viewport.height) / 2 // Update the position of the invisible sphere api.position.set(x, y, 0) }) return ( ) } // Celestial object with physics and visual effects function SpaceObject({ position, size, color1, color2, mass = 1, type = "planet" }) { const meshRef = useRef() const [ref, api] = useSphere(() => ({ mass, position, args: [size], linearDamping: 0.2, // Lower damping for smoother movement angularDamping: 0.2, })) // Create texture const texture = useMemo(() => createPlanetTexture(color1, color2), [color1, color2]) // State for hover effect const [hovered, setHovered] = useState(false) // Apply a small random velocity on mount to make objects float useEffect(() => { const randomVelocity = [(Math.random() - 0.5) * 0.3, (Math.random() - 0.5) * 0.3, (Math.random() - 0.5) * 0.3] api.velocity.set(...randomVelocity) const randomAngularVelocity = [ (Math.random() - 0.5) * 0.1, (Math.random() - 0.5) * 0.1, (Math.random() - 0.5) * 0.1, ] api.angularVelocity.set(...randomAngularVelocity) // Keep objects within bounds const unsubscribe = api.position.subscribe((pos) => { const [x, y, z] = pos const bound = 15 if (Math.abs(x) > bound || Math.abs(y) > bound || Math.abs(z) > bound) { // Apply force toward center const force = new THREE.Vector3(-x, -y, -z).normalize().multiplyScalar(mass * 5) api.applyForce([force.x, force.y, force.z], [0, 0, 0]) } }) return unsubscribe }, [api, mass]) // Sync the physics body with the mesh useFrame(() => { if (ref.current && meshRef.current) { const position = new THREE.Vector3() const quaternion = new THREE.Quaternion() ref.current.getWorldPosition(position) ref.current.getWorldQuaternion(quaternion) meshRef.current.position.copy(position) meshRef.current.quaternion.copy(quaternion) } }) return ( <> width} > setHovered(true)} onPointerOut={() => setHovered(false)} > {type === "planet" ? : } ) } // Boundary walls to keep objects in view function Boundaries() { const size = 30 const thickness = 0.5 return ( <> {/* Top wall */} {/* Bottom wall */} {/* Left wall */} {/* Right wall */} {/* Front wall */} {/* Back wall */} ) } // Background stars with depth function EnhancedStars() { const ref = useRef() useFrame(({ clock }) => { if (ref.current) { ref.current.rotation.y = clock.getElapsedTime() * 0.02 ref.current.rotation.x = Math.sin(clock.getElapsedTime() * 0.01) * 0.1 } }) return ( {/* Add some larger, brighter stars */} {Array.from({ length: 50 }).map((_, i) => ( ))} ) } // Main component export default function SpaceEnvironment() { const [showInstructions, setShowInstructions] = useState(true) useEffect(() => { // Hide instructions after 8 seconds const timer = setTimeout(() => { setShowInstructions(false) }, 8000) return () => clearTimeout(timer) }, []) return (

{showInstructions && setShowInstructions(false)} />}

) } [V0_FILE]typescriptreact:file="components/instructions.tsx" "use client" import { X } from "lucide-react" export default function Instructions({ onClose }) { return (

Interactive Space Environment

Move your cursor around the screen to interact with the celestial objects.

The planets and asteroids will be pushed away from your cursor, creating beautiful trails as they move through space.

Hover over objects to make them glow brighter!

This message will automatically close in a few seconds.

) } [V0_FILE]typescriptreact:file="app/page.tsx" "use client" import dynamic from "next/dynamic" import { Suspense } from "react" // Dynamically import the SpaceEnvironment component to avoid SSR issues with Three.js const SpaceEnvironment = dynamic(() => import("@/components/space-environment"), { ssr: false, loading: () => (

), }) export default function Home() { return (

} >

) }