[V0_FILE]json:file="package.json" { "name": "particle-sphere-3d", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "react": "^18", "react-dom": "^18", "next": "15.1.0", "@react-three/fiber": "^8.15.12", "@react-three/drei": "^9.92.7", "three": "^0.160.0", "class-variance-authority": "0.7.1", "clsx": "2.1.1", "lucide-react": "0.544.0", "tailwind-merge": "3.3.1", "tailwindcss-animate": "1.0.7", "geist": "1.5.1", "@vercel/analytics": "1.5.0" }, "devDependencies": { "typescript": "^5", "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", "@types/three": "^0.160.0", "tailwindcss": "4.1.13", "postcss": "8.5.6" } } [V0_FILE]css:file="app/globals.css" isQuickEdit="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --font-sans: var(--font-geist-sans); --font-mono: var(--font-geist-mono); --font-instrument: var(--font-instrument); /* Adding Instrument Serif font variable */ --font-instrument-serif: var(--font-instrument-serif); --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-black text-white; } } [V0_FILE]plaintext:file="public/img-1.webp" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/img-1-YIlFVKnXQMMGPiRlrhxkEPdbqTuz2Y.webp" [V0_FILE]plaintext:file="public/img-25.webp" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/img-25-VEIgUSzuxXCQD7u0AEELk9iTtuAjrs.webp" [V0_FILE]plaintext:file="public/img-20.webp" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/img-20-N9CoZnfo8SIjgpPLyeVx4vTgbQ8gmO.webp" [V0_FILE]plaintext:file="public/img-19.webp" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/img-19-rgyAphITVgQ9TYEYnLs9FYBlokMN3u.webp" [V0_FILE]plaintext:file="public/img-14.webp" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/img-14-KATv5TgytQFvgNQ2oWSHHhqAlDpcuk.webp" [V0_FILE]plaintext:file="public/img-7.webp" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/img-7-iqL7aauniwQGdXoeoDjN8Ze9XKxCTC.webp" [V0_FILE]plaintext:file="public/img-13.webp" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/img-13-HVoVZUUA3gdYpWFcEYomzdFEIQm5MP.webp" [V0_FILE]plaintext:file="public/img-24.webp" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/img-24-xrCtFkEIrLRNPVLNb4bQ0wRcHkMcQE.webp" [V0_FILE]plaintext:file="public/img-23.webp" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/img-23-MMQC0em4ugHS9xfpwxaTXwzjMosTkC.webp" [V0_FILE]plaintext:file="public/img-12.webp" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/img-12-HkzTODXFWXIyhw2d1XRmoM2cEvPnCN.webp" [V0_FILE]plaintext:file="public/img-18.webp" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/img-18-97b3yK2OHUboFDyKK87dypnNVxNXPa.webp" [V0_FILE]plaintext:file="public/img-6.webp" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/img-6-NkGVFFpCcDTtgJILEZPyTHEeAZEnuD.webp" [V0_FILE]plaintext:file="public/img-15.webp" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/img-15-p8gLHOTrSq1J5s9isp2TfwsOTG2qLf.webp" [V0_FILE]plaintext:file="public/img-9.webp" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/img-9-xy3yFD03i9tCBZ3qqaYiKSncYzvJa9.webp" [V0_FILE]plaintext:file="public/img-16.webp" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/img-16-w9t9lNKYdJkPkNpLUhl0yz3yxuj0mz.webp" [V0_FILE]plaintext:file="public/img-22.webp" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/img-22-TverMiF7rmEvAJAhwccHSlCnqS1QF1.webp" [V0_FILE]plaintext:file="public/img-3.webp" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/img-3-IRjYMlZwPmwS0TpANOqbBPVYjCkl6X.webp" [V0_FILE]plaintext:file="public/img-5.webp" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/img-5-uHzmWgOOs9aOiFdyy1mt5qM5NWQjm0.webp" [V0_FILE]plaintext:file="public/img-11.webp" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/img-11-caXeCeFGgUAgLSdEy2n8uoG4XKaGCa.webp" [V0_FILE]plaintext:file="public/img-8.webp" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/img-8-o4OpLeIfkQFmak6XsSZvxh3RKs75BU.webp" [V0_FILE]plaintext:file="public/img-10.webp" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/img-10-RfH2Rkem1DncmKERFEhn09fOYEeg7p.webp" [V0_FILE]plaintext:file="public/img-21.webp" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/img-21-K8HLxj5FYl5EWs0FzIRIKNE1R3HnCA.webp" [V0_FILE]plaintext:file="public/img-4.webp" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/img-4-XHU5uAI47x5Tqjd4q2cdonebZHspks.webp" [V0_FILE]plaintext:file="public/img-17.webp" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/img-17-C2cxy0bp4w97AgAB9xeO0JJMhpj2za.webp" [V0_FILE]plaintext:file="public/img-2.webp" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/img-2-dEk7x7fhULXW9TC0JbvGSofm6gtHlM.webp" [V0_FILE]typescriptreact:file="components/particle-sphere.tsx" isQuickEdit="true" "use client" import { useRef, useMemo } from "react" import { useFrame } from "@react-three/fiber" import { useTexture } from "@react-three/drei" import * as THREE from "three" export function ParticleSphere() { const PARTICLE_COUNT = 1500 // Reduced particle count to make images more visible const PARTICLE_SIZE_MIN = 0.005 const PARTICLE_SIZE_MAX = 0.010 const SPHERE_RADIUS = 9 const POSITION_RANDOMNESS = 4 const ROTATION_SPEED_X = 0.0 const ROTATION_SPEED_Y = 0.0005 const PARTICLE_OPACITY = 1 const IMAGE_COUNT = 24 const IMAGE_SIZE = 1.5 // Increased image size to make them more visible const groupRef = useRef(null) const textures = useTexture([ "/img-1.webp", "/img-2.webp", "/img-3.webp", "/img-4.webp", "/img-5.webp", "/img-6.webp", "/img-7.webp", "/img-8.webp", "/img-9.webp", "/img-10.webp", "/img-11.webp", "/img-12.webp", "/img-13.webp", "/img-14.webp", "/img-15.webp", "/img-16.webp", "/img-17.webp", "/img-18.webp", "/img-19.webp", "/img-20.webp", "/img-21.webp", "/img-22.webp", "/img-23.webp", "/img-24.webp", "/img-25.webp", ]) useMemo(() => { textures.forEach((texture) => { if (texture) { texture.wrapS = THREE.ClampToEdgeWrapping texture.wrapT = THREE.ClampToEdgeWrapping texture.flipY = false } }) }, [textures]) const particles = useMemo(() => { const particles = [] for (let i = 0; i < PARTICLE_COUNT; i++) { // Generate points on sphere surface with some random variation const phi = Math.acos(-1 + (2 * i) / PARTICLE_COUNT) const theta = Math.sqrt(PARTICLE_COUNT * Math.PI) * phi // Add random variation to make it more organic const radiusVariation = SPHERE_RADIUS + (Math.random() - 0.5) * POSITION_RANDOMNESS const x = radiusVariation * Math.cos(theta) * Math.sin(phi) const y = radiusVariation * Math.cos(phi) const z = radiusVariation * Math.sin(theta) * Math.sin(phi) particles.push({ position: [x, y, z], scale: Math.random() * (PARTICLE_SIZE_MAX - PARTICLE_SIZE_MIN) + PARTICLE_SIZE_MIN, color: new THREE.Color().setHSL( Math.random() * 0.1 + 0.05, // Yellow-orange hues 0.8, 0.6 + Math.random() * 0.3, ), rotationSpeed: (Math.random() - 0.5) * 0.01, }) } return particles }, [PARTICLE_COUNT, SPHERE_RADIUS, POSITION_RANDOMNESS, PARTICLE_SIZE_MIN, PARTICLE_SIZE_MAX]) const orbitingImages = useMemo(() => { const images = [] for (let i = 0; i < IMAGE_COUNT; i++) { const angle = (i / IMAGE_COUNT) * Math.PI * 2 const x = SPHERE_RADIUS * Math.cos(angle) const y = 0 // All images aligned on X-axis const z = SPHERE_RADIUS * Math.sin(angle) const position = new THREE.Vector3(x, y, z) const center = new THREE.Vector3(0, 0, 0) const outwardDirection = position.clone().sub(center).normalize() // Create a rotation that makes the plane face outward const euler = new THREE.Euler() const matrix = new THREE.Matrix4() matrix.lookAt(position, position.clone().add(outwardDirection), new THREE.Vector3(0, 1, 0)) euler.setFromRotationMatrix(matrix) euler.z += Math.PI images.push({ position: [x, y, z], rotation: [euler.x, euler.y, euler.z], textureIndex: i % textures.length, color: new THREE.Color().setHSL(Math.random(), 0.7, 0.6), // Added random colors }) } return images }, [IMAGE_COUNT, SPHERE_RADIUS, textures.length]) useFrame((state) => { if (groupRef.current) { groupRef.current.rotation.y += ROTATION_SPEED_Y groupRef.current.rotation.x += ROTATION_SPEED_X } }) return ( {/* Existing particles */} {particles.map((particle, index) => ( ))} {orbitingImages.map((image, index) => ( ))} ) } [V0_FILE]typescriptreact:file="app/page.tsx" isQuickEdit="true" "use client" import { Canvas } from "@react-three/fiber" import { OrbitControls } from "@react-three/drei" import { ParticleSphere } from "@/components/particle-sphere" export default function Home() { return (

The cosmos is within us. We are made of star-stuff. We are a way for the universe to know itself.

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isQuickEdit="true" import type React from "react" import type { Metadata } from "next" import { GeistSans } from "geist/font/sans" import { GeistMono } from "geist/font/mono" import { Instrument_Sans, Instrument_Serif } from "next/font/google" import { Analytics } from "@vercel/analytics/next" import "./globals.css" import { Suspense } from "react" const instrumentSans = Instrument_Sans({ subsets: ["latin"], variable: "--font-instrument", }) const instrumentSerif = Instrument_Serif({ subsets: ["latin"], variable: "--font-instrument-serif", weight: "400", }) export const metadata: Metadata = { title: "v0 App", description: "Created with v0", generator: "v0.app", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) }

About

Tags

Share

About

Tags

Share

More from joelbqz

More Templates Like This

About

Tags

Share

About

Tags

Share

More from joelbqz

More Templates Like This