[V0_FILE]typescriptreact:file="starfield-screensaver.tsx" isMerged="true" isEdit="true" "use client" import type React from "react" import { useRef, useMemo, useEffect } from "react" import { Canvas, useFrame, useThree } from "@react-three/fiber" import { OrbitControls, PerspectiveCamera } from "@react-three/drei" import * as THREE from "three" import { useSpring } from "@react-spring/three" const StarField = ({ count = 5000, depth = 300 }) => { const mesh = useRef(null!) const light = useRef(null!) const [positions, colors] = useMemo(() => { const positions = new Float32Array(count * 3) const colors = new Float32Array(count * 3) for (let i = 0; i < count; i++) { const i3 = i * 3 positions[i3] = (Math.random() - 0.5) * 2000 positions[i3 + 1] = (Math.random() - 0.5) * 2000 positions[i3 + 2] = (Math.random() - 0.5) * depth - depth / 2 const color = new THREE.Color() color.setHSL(Math.random(), 0.7, 0.9) colors[i3] = color.r colors[i3 + 1] = color.g colors[i3 + 2] = color.b } return [positions, colors] }, [count, depth]) const [spring, api] = useSpring(() => ({ from: { scale: 1, rotation: 0 }, to: { scale: 1.2, rotation: Math.PI * 2 }, config: { duration: 10000 }, loop: true, })) useFrame((state) => { const time = state.clock.getElapsedTime() mesh.current.rotation.y = time * 0.05 mesh.current.rotation.x = time * 0.03 light.current.position.x = Math.sin(time * 0.7) * 300 light.current.position.y = Math.cos(time * 0.5) * 300 light.current.position.z = Math.cos(time * 0.3) * 300 api.start({ from: { scale: 1, rotation: mesh.current.rotation.y }, to: { scale: 1.2, rotation: mesh.current.rotation.y + Math.PI * 2 }, }) }) return ( <> ) } const Scene = () => { const { camera } = useThree() useEffect(() => { camera.position.set(0, 0, 500) }, [camera]) return ( <> ) } const StarfieldScreensaver: React.FC = () => { return (

) } export default StarfieldScreensaver [V0_FILE]typescriptreact:file="enhanced-starfield.tsx" isMerged="true" isEdit="true" "use client" import type React from "react" import { useRef, useMemo, useEffect, useState } from "react" import { Canvas, useFrame, useThree } from "@react-three/fiber" import { OrbitControls, PerspectiveCamera, Instances, Instance, useTexture } from "@react-three/drei" import * as THREE from "three" import { useSpring, a } from "@react-spring/three" const StarField = ({ count = 10000, depth = 500 }) => { const instancedMeshRef = useRef(null!) const [warpSpeed, setWarpSpeed] = useState(false) const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 }) const { viewport } = useThree() const starTexture = useTexture("/placeholder.svg?height=64&width=64") const [positions, scales, originalZ] = useMemo(() => { const positions = new Float32Array(count * 3) const scales = new Float32Array(count) const originalZ = new Float32Array(count) for (let i = 0; i < count; i++) { const i3 = i * 3 positions[i3] = (Math.random() - 0.5) * 2000 positions[i3 + 1] = (Math.random() - 0.5) * 2000 positions[i3 + 2] = (Math.random() - 0.5) * depth - depth / 2 originalZ[i] = positions[i3 + 2] scales[i] = Math.random() * 2 + 0.5 } return [positions, scales, originalZ] }, [count, depth]) useFrame((state, delta) => { const time = state.clock.getElapsedTime() for (let i = 0; i < count; i++) { const i3 = i * 3 const mesh = instancedMeshRef.current // Update Z position if (warpSpeed) { mesh.instanceMatrix.array[i3 + 14] += delta * 500 if (mesh.instanceMatrix.array[i3 + 14] > depth / 2) { mesh.instanceMatrix.array[i3 + 14] = -depth / 2 } } else { mesh.instanceMatrix.array[i3 + 14] = originalZ[i] + Math.sin(time + i) * 5 } // Update color based on mouse position const distance = Math.sqrt( Math.pow(mesh.instanceMatrix.array[i3 + 12] / 1000 - mousePosition.x, 2) + Math.pow(mesh.instanceMatrix.array[i3 + 13] / 1000 - mousePosition.y, 2), ) const hue = (distance * 0.1 + time * 0.05) % 1 const color = new THREE.Color().setHSL(hue, 0.5, 0.7) mesh.setColorAt(i, color) // Update scale const scale = scales[i] * (1 + Math.sin(time * 2 + i) * 0.1) mesh.instanceMatrix.array[i3] = scale mesh.instanceMatrix.array[i3 + 5] = scale mesh.instanceMatrix.array[i3 + 10] = scale } instancedMeshRef.current.instanceMatrix.needsUpdate = true instancedMeshRef.current.instanceColor!.needsUpdate = true }) useEffect(() => { const handleMouseMove = (event: MouseEvent) => { setMousePosition({ x: (event.clientX / window.innerWidth) * 2 - 1, y: -(event.clientY / window.innerHeight) * 2 + 1, }) } const handleTouchMove = (event: TouchEvent) => { setMousePosition({ x: (event.touches[0].clientX / window.innerWidth) * 2 - 1, y: -(event.touches[0].clientY / window.innerHeight) * 2 + 1, }) } window.addEventListener("mousemove", handleMouseMove) window.addEventListener("touchmove", handleTouchMove) return () => { window.removeEventListener("mousemove", handleMouseMove) window.removeEventListener("touchmove", handleTouchMove) } }, []) return ( {Array.from({ length: count }).map((_, i) => ( ))} ) } const Nebula = () => { const mesh = useRef(null!) const texture = useTexture("/placeholder.svg?height=1024&width=1024") useFrame((state) => { mesh.current.rotation.z += 0.0005 }) return ( ) } const ShootingStar = () => { const mesh = useRef(null!) const [active, setActive] = useState(false) const { scale, position } = useSpring({ scale: active ? 1 : 0, position: active ? [0, 0, -200] : [2000, 2000, -200], config: { duration: 1000 }, }) useEffect(() => { const interval = setInterval( () => { setActive(true) setTimeout(() => setActive(false), 1000) }, Math.random() * 5000 + 5000, ) return () => clearInterval(interval) }, []) return ( ) } const Scene = () => { const { camera } = useThree() const [warpSpeed, setWarpSpeed] = useState(false) useEffect(() => { camera.position.set(0, 0, 500) }, [camera]) useFrame((state) => { const time = state.clock.getElapsedTime() camera.position.x = Math.sin(time * 0.1) * 10 camera.position.y = Math.cos(time * 0.1) * 10 }) return ( <> setWarpSpeed(!warpSpeed)}> ) } const EnhancedStarfield: React.FC = () => { return (

) } export default EnhancedStarfield [V0_FILE]typescriptreact:file="cosmic-flow.tsx" isMerged="true" isEdit="true" "use client" import { useEffect, useRef, useState } from "react" interface Star { x: number y: number z: number px: number py: number color: string size: number speed: number } interface ParticleStream { x: number y: number angle: number speed: number particles: Array<{ x: number y: number alpha: number color: string size: number }> } export default function CosmicFlow() { const canvasRef = useRef(null) const [dimensions, setDimensions] = useState({ width: 0, height: 0 }) const starsRef = useRef([]) const streamsRef = useRef([]) const speedRef = useRef(0) const mouseRef = useRef({ x: 0, y: 0 }) const timeRef = useRef(0) const generateColor = () => { const colors = [ "#FF61D8", // magenta "#7CB9E8", // light blue "#00FF9F", // mint green "#FFD700", // gold "#FF69B4", // pink "#4169E1", // royal blue ] return colors[Math.floor(Math.random() * colors.length)] } const createParticleStream = (x: number, y: number) => { return { x, y, angle: Math.random() * Math.PI * 2, speed: Math.random() * 2 + 1, particles: Array.from({ length: 50 }, () => ({ x: x + (Math.random() - 0.5) * 100, y: y + (Math.random() - 0.5) * 100, alpha: Math.random(), color: generateColor(), size: Math.random() * 3 + 1, })), } } useEffect(() => { const handleResize = () => { if (canvasRef.current) { const { width, height } = canvasRef.current.getBoundingClientRect() setDimensions({ width, height }) canvasRef.current.width = width canvasRef.current.height = height initScene() } } const handleMouseMove = (e: MouseEvent) => { mouseRef.current = { x: e.clientX, y: e.clientY, } } const handleTouchMove = (e: TouchEvent) => { mouseRef.current = { x: e.touches[0].clientX, y: e.touches[0].clientY, } } const handlePointerDown = () => { speedRef.current = 20 } const handlePointerUp = () => { speedRef.current = 0 } window.addEventListener("resize", handleResize) window.addEventListener("mousemove", handleMouseMove) window.addEventListener("touchmove", handleTouchMove) window.addEventListener("mousedown", handlePointerDown) window.addEventListener("touchstart", handlePointerDown) window.addEventListener("mouseup", handlePointerUp) window.addEventListener("touchend", handlePointerUp) handleResize() requestAnimationFrame(animate) return () => { window.removeEventListener("resize", handleResize) window.removeEventListener("mousemove", handleMouseMove) window.removeEventListener("touchmove", handleTouchMove) window.removeEventListener("mousedown", handlePointerDown) window.removeEventListener("touchstart", handlePointerDown) window.removeEventListener("mouseup", handlePointerUp) window.removeEventListener("touchend", handlePointerUp) } }, []) const initScene = () => { // Initialize stars const stars: Star[] = Array.from({ length: 2000 }, () => ({ x: Math.random() * dimensions.width - dimensions.width / 2, y: Math.random() * dimensions.height - dimensions.height / 2, z: Math.random() * 1000 + 1, px: 0, py: 0, color: generateColor(), size: Math.random() * 2 + 0.5, speed: Math.random() * 2 + 1, })) starsRef.current = stars // Initialize particle streams const streams: ParticleStream[] = Array.from({ length: 5 }, () => createParticleStream(Math.random() * dimensions.width, Math.random() * dimensions.height), ) streamsRef.current = streams } const animate = () => { if (!canvasRef.current) return const ctx = canvasRef.current.getContext("2d") if (!ctx) return timeRef.current += 0.01 // Create gradient background const gradient = ctx.createLinearGradient(0, 0, dimensions.width, dimensions.height) gradient.addColorStop(0, "rgba(30, 0, 50, 0.8)") gradient.addColorStop(0.5, "rgba(60, 10, 60, 0.8)") gradient.addColorStop(1, "rgba(20, 0, 40, 0.8)") ctx.fillStyle = gradient ctx.fillRect(0, 0, dimensions.width, dimensions.height) // Update and draw stars const centerX = dimensions.width / 2 const centerY = dimensions.height / 2 starsRef.current.forEach((star) => { star.z -= star.speed + speedRef.current if (star.z <= 1) { star.z = 1000 star.x = Math.random() * dimensions.width - centerX + (mouseRef.current.x - centerX) * 0.1 star.y = Math.random() * dimensions.height - centerY + (mouseRef.current.y - centerY) * 0.1 return } star.px = (star.x / star.z) * 100 star.py = (star.y / star.z) * 100 const x = star.px + centerX const y = star.py + centerY if (isNaN(x) || isNaN(y) || !isFinite(x) || !isFinite(y)) return const size = Math.min(Math.max((1 - star.z / 1000) * star.size * 2, 0.1), 4) // Create star glow const gradient = ctx.createRadialGradient(x, y, 0, x, y, size * 2) gradient.addColorStop(0, star.color) gradient.addColorStop(1, "transparent") ctx.fillStyle = gradient ctx.beginPath() ctx.arc(x, y, size * 2, 0, Math.PI * 2) ctx.fill() }) // Update and draw particle streams streamsRef.current.forEach((stream) => { stream.x += Math.cos(stream.angle) * stream.speed stream.y += Math.sin(stream.angle) * stream.speed // Wrap streams around screen if (stream.x < -100) stream.x = dimensions.width + 100 if (stream.x > dimensions.width + 100) stream.x = -100 if (stream.y < -100) stream.y = dimensions.height + 100 if (stream.y > dimensions.height + 100) stream.y = -100 stream.particles.forEach((particle, i) => { const angle = (i / stream.particles.length) * Math.PI * 2 + timeRef.current particle.x = stream.x + Math.cos(angle) * 100 particle.y = stream.y + Math.sin(angle) * 50 particle.alpha = (Math.sin(timeRef.current * 2 + i) + 1) / 2 ctx.fillStyle = `${particle.color}${Math.floor(particle.alpha * 255) .toString(16) .padStart(2, "0")}` ctx.beginPath() ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2) ctx.fill() }) }) requestAnimationFrame(animate) } return

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This