[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import dynamic from "next/dynamic" import { Suspense } from "react" const Globe = dynamic(() => import("@/components/Globe"), { ssr: false }) export default function Home() { return (

Loading...}>

) } [V0_FILE]typescriptreact:file="components/Contact.tsx" isMerged="true" "use client" import type React from "react" import { motion } from "framer-motion" import { useState } from "react" export default function Contact() { const [formState, setFormState] = useState({ name: "", email: "", message: "" }) const handleSubmit = (e: React.FormEvent) => { e.preventDefault() // Handle form submission here console.log(formState) } const handleChange = (e: React.ChangeEvent) => { setFormState({ ...formState, [e.target.name]: e.target.value }) } return (

Get in Touch

Name

Message

Send Message

) } [V0_FILE]css:file="app/globals.css" isMerged="true" @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)); overflow: hidden; } * { backface-visibility: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } [V0_FILE]javascript:file="tailwind.config.js" isFixed="true" isQuickEdit="true" isMerged="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}", "./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: { backgroundImage: { "gradient-radial": "radial-gradient(var(--tw-gradient-stops))", "gradient-conic": "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))", }, 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: [require("tailwindcss-animate")], } [V0_FILE]typescriptreact:file="components/Globe.tsx" isEdit="true" isQuickEdit="true" "use client" import { useEffect, useRef, useState } from "react" import * as THREE from "three" import { OrbitControls } from "three/examples/jsm/controls/OrbitControls" import { Color } from "three" export default function Globe() { const mountRef = useRef(null) const [isHighResLoaded, setIsHighResLoaded] = useState(false) const [showHint, setShowHint] = useState(true) useEffect(() => { if (!mountRef.current) return // Create scene, camera, and renderer const scene = new THREE.Scene() const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000) const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }) renderer.setSize(window.innerWidth, window.innerHeight) renderer.setPixelRatio(window.devicePixelRatio) mountRef.current.appendChild(renderer.domElement) // Create a starfield const starsGeometry = new THREE.BufferGeometry() const starsCount = 10000 const positions = new Float32Array(starsCount * 3) for (let i = 0; i < starsCount; i++) { positions[i * 3] = (Math.random() - 0.5) * 2000 positions[i * 3 + 1] = (Math.random() - 0.5) * 2000 positions[i * 3 + 2] = (Math.random() - 0.5) * 2000 } starsGeometry.setAttribute("position", new THREE.BufferAttribute(positions, 3)) const starsMaterial = new THREE.PointsMaterial({ color: 0xffffff, size: 0.7, sizeAttenuation: true, }) const stars = new THREE.Points(starsGeometry, starsMaterial) scene.add(stars) // Create UFO class for managing UFO instances class UFO { mesh: THREE.Group scene: THREE.Scene speed: number direction: THREE.Vector3 startPosition: THREE.Vector3 endPosition: THREE.Vector3 active = false trail: THREE.Points trailPositions: Float32Array trailGeometry: THREE.BufferGeometry constructor(scene: THREE.Scene) { this.scene = scene // Create UFO mesh const ufoGroup = new THREE.Group() // Create saucer body const bodyGeometry = new THREE.CapsuleGeometry(0.5, 0.2, 4, 8) bodyGeometry.rotateZ(Math.PI / 2) const bodyMaterial = new THREE.MeshPhongMaterial({ color: 0xcccccc, emissive: 0x333333, shininess: 100, }) const body = new THREE.Mesh(bodyGeometry, bodyMaterial) // Create dome const domeGeometry = new THREE.SphereGeometry(0.3, 16, 16, 0, Math.PI * 2, 0, Math.PI / 2) const domeMaterial = new THREE.MeshPhongMaterial({ color: 0x88ccff, transparent: true, opacity: 0.7, emissive: 0x4488ff, shininess: 100, }) const dome = new THREE.Mesh(domeGeometry, domeMaterial) dome.position.set(0, 0.1, 0) // Create glow const glowGeometry = new THREE.SphereGeometry(0.6, 16, 16) const glowMaterial = new THREE.ShaderMaterial({ vertexShader: ` varying vec3 vNormal; void main() { vNormal = normalize(normalMatrix * normal); gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } `, fragmentShader: ` varying vec3 vNormal; void main() { float intensity = pow(0.7 - dot(vNormal, vec3(0.0, 0.0, 1.0)), 2.0); gl_FragColor = vec4(0.1, 0.6, 1.0, 1.0) * intensity; } `, transparent: true, blending: THREE.AdditiveBlending, side: THREE.BackSide, }) const glow = new THREE.Mesh(glowGeometry, glowMaterial) // Add all parts to the group ufoGroup.add(body) ufoGroup.add(dome) ufoGroup.add(glow) // Create trail this.trailGeometry = new THREE.BufferGeometry() const trailCount = 20 this.trailPositions = new Float32Array(trailCount * 3) for (let i = 0; i < trailCount; i++) { this.trailPositions[i * 3] = 0 this.trailPositions[i * 3 + 1] = 0 this.trailPositions[i * 3 + 2] = 0 } this.trailGeometry.setAttribute("position", new THREE.BufferAttribute(this.trailPositions, 3)) const trailMaterial = new THREE.PointsMaterial({ color: 0x88ccff, size: 0.2, transparent: true, opacity: 0.7, blending: THREE.AdditiveBlending, sizeAttenuation: true, }) this.trail = new THREE.Points(this.trailGeometry, trailMaterial) scene.add(this.trail) this.mesh = ufoGroup this.mesh.scale.set(0.5, 0.5, 0.5) this.speed = 0 this.direction = new THREE.Vector3() this.startPosition = new THREE.Vector3() this.endPosition = new THREE.Vector3() scene.add(this.mesh) } activate() { if (this.active) return this.active = true // Set random start position far from the center const theta = Math.random() * Math.PI * 2 const phi = Math.random() * Math.PI const radius = 30 + Math.random() * 20 this.startPosition.set( radius * Math.sin(phi) * Math.cos(theta), radius * Math.sin(phi) * Math.sin(theta), radius * Math.cos(phi), ) // Set random end position on the opposite side this.endPosition.set( -this.startPosition.x + (Math.random() - 0.5) * 10, -this.startPosition.y + (Math.random() - 0.5) * 10, -this.startPosition.z + (Math.random() - 0.5) * 10, ) // Set direction and position this.mesh.position.copy(this.startPosition) this.direction.subVectors(this.endPosition, this.startPosition).normalize() // Set random speed this.speed = 0.3 + Math.random() * 0.5 // Orient the UFO to face the direction of travel this.mesh.lookAt(this.endPosition) // Initialize trail positions for (let i = 0; i < this.trailPositions.length / 3; i++) { this.trailPositions[i * 3] = this.mesh.position.x this.trailPositions[i * 3 + 1] = this.mesh.position.y this.trailPositions[i * 3 + 2] = this.mesh.position.z } // Make visible this.mesh.visible = true this.trail.visible = true } deactivate() { this.active = false this.mesh.visible = false this.trail.visible = false } update() { if (!this.active) return // Move UFO this.mesh.position.addScaledVector(this.direction, this.speed) // Update trail for (let i = this.trailPositions.length / 3 - 1; i > 0; i--) { this.trailPositions[i * 3] = this.trailPositions[(i - 1) * 3] this.trailPositions[i * 3 + 1] = this.trailPositions[(i - 1) * 3 + 1] this.trailPositions[i * 3 + 2] = this.trailPositions[(i - 1) * 3 + 2] } // Set the head of the trail to the current position this.trailPositions[0] = this.mesh.position.x this.trailPositions[1] = this.mesh.position.y this.trailPositions[2] = this.mesh.position.z // Update the buffer attribute this.trailGeometry.attributes.position.needsUpdate = true // Check if UFO has reached its destination const distanceToEnd = this.mesh.position.distanceTo(this.endPosition) if (distanceToEnd < 2) { this.deactivate() } // Add some wobble to the UFO movement this.mesh.rotation.z += Math.sin(Date.now() * 0.005) * 0.01 } } // Create UFO manager const ufos: UFO[] = [] const MAX_UFOS = 3 for (let i = 0; i < MAX_UFOS; i++) { ufos.push(new UFO(scene)) } // Function to randomly activate UFOs const activateRandomUFO = () => { const inactiveUFOs = ufos.filter((ufo) => !ufo.active) if (inactiveUFOs.length > 0) { const randomIndex = Math.floor(Math.random() * inactiveUFOs.length) inactiveUFOs[randomIndex].activate() } } // Set interval to randomly spawn UFOs const ufoSpawnInterval = setInterval(() => { if (Math.random() < 0.3) { // 30% chance each interval activateRandomUFO() } }, 3000) // Check every 3 seconds // Create an atmospheric glow using a custom shader const atmosphereVertexShader = ` varying vec3 vNormal; void main() { vNormal = normalize(normalMatrix * normal); gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } ` const atmosphereFragmentShader = ` uniform vec3 glowColor; varying vec3 vNormal; void main() { float intensity = pow(0.6 - dot(vNormal, vec3(0.0, 0.0, 1.0)), 2.0); gl_FragColor = vec4(glowColor, 1.0) * intensity; } ` const atmosphereGeometry = new THREE.SphereGeometry(5.2, 32, 32) const atmosphereMaterial = new THREE.ShaderMaterial({ vertexShader: atmosphereVertexShader, fragmentShader: atmosphereFragmentShader, blending: THREE.AdditiveBlending, side: THREE.BackSide, transparent: true, uniforms: { glowColor: { value: new Color(0x3a86ff) }, }, }) const atmosphereMesh = new THREE.Mesh(atmosphereGeometry, atmosphereMaterial) scene.add(atmosphereMesh) // Create iridescent wireframe globe with custom shader const wireframeGeometry = new THREE.SphereGeometry(5, 32, 32) const edges = new THREE.EdgesGeometry(wireframeGeometry) const iridescenceVertexShader = ` varying vec3 vPosition; varying vec3 vNormal; varying vec3 vViewPosition; void main() { vPosition = position; vNormal = normalize(normalMatrix * normal); vec4 mvPosition = modelViewMatrix * vec4(position, 1.0); vViewPosition = -mvPosition.xyz; gl_Position = projectionMatrix * mvPosition; } ` const iridescenceFragmentShader = ` uniform vec3 baseColor; uniform float time; varying vec3 vPosition; varying vec3 vNormal; varying vec3 vViewPosition; void main() { // Calculate view direction vec3 viewDir = normalize(vViewPosition); // Calculate fresnel effect for iridescence float fresnel = pow(1.0 - abs(dot(vNormal, viewDir)), 3.0); // Create iridescent color shift vec3 iridescence = baseColor + 0.5 * vec3( sin(fresnel * 8.0 + time * 0.5) * 0.5 + 0.5, sin(fresnel * 8.0 + time * 0.5 + 2.0) * 0.5 + 0.5, sin(fresnel * 8.0 + time * 0.5 + 4.0) * 0.5 + 0.5 ); // Add glow effect float glow = pow(fresnel, 1.5) * 0.8; // Final color with transparency gl_FragColor = vec4(iridescence, fresnel * 0.7 + 0.3); } ` const wireframeMaterial = new THREE.ShaderMaterial({ vertexShader: iridescenceVertexShader, fragmentShader: iridescenceFragmentShader, uniforms: { baseColor: { value: new THREE.Color(0x3a86ff) }, time: { value: 0 }, }, transparent: true, side: THREE.DoubleSide, wireframe: true, blending: THREE.AdditiveBlending, }) const wireframeGlobe = new THREE.Mesh(wireframeGeometry, wireframeMaterial) scene.add(wireframeGlobe) // Add a subtle glow effect for the wireframe const wireframeGlowGeometry = new THREE.SphereGeometry(5.05, 32, 32) const wireframeGlowMaterial = new THREE.ShaderMaterial({ vertexShader: atmosphereVertexShader, fragmentShader: atmosphereFragmentShader, blending: THREE.AdditiveBlending, side: THREE.FrontSide, transparent: true, uniforms: { glowColor: { value: new Color(0x3a86ff) }, }, }) const wireframeGlow = new THREE.Mesh(wireframeGlowGeometry, wireframeGlowMaterial) scene.add(wireframeGlow) // Create solid globe (initially invisible) const solidGeometry = new THREE.SphereGeometry(4.9, 64, 64) const solidMaterial = new THREE.MeshPhongMaterial({ color: 0x1a237e, transparent: true, opacity: 0, }) const solidGlobe = new THREE.Mesh(solidGeometry, solidMaterial) scene.add(solidGlobe) // Add ambient light const ambientLight = new THREE.AmbientLight(0xffffff, 0.5) scene.add(ambientLight) // Add point light const pointLight = new THREE.PointLight(0xffffff, 1) pointLight.position.set(10, 10, 10) scene.add(pointLight) camera.position.z = 10 const controls = new OrbitControls(camera, renderer.domElement) controls.enableDamping = true controls.dampingFactor = 0.05 controls.rotateSpeed = 0.5 controls.enableZoom = false const colors = [ new Color(0x3a86ff), // Blue new Color(0x8338ec), // Purple new Color(0xff006e), // Pink new Color(0xfb5607), // Orange new Color(0xffbe0b), // Yellow ] let colorIndex = 0 let nextColorIndex = 1 let colorT = 0 const colorTransitionSpeed = 0.005 const lerpColor = (a: Color, b: Color, t: number) => { const color = new Color() color.r = a.r + (b.r - a.r) * t color.g = a.g + (b.g - a.g) * t color.b = a.b + (b.b - a.b) * t return color } let animationId: number const animate = () => { animationId = requestAnimationFrame(animate) // Color transition logic colorT += colorTransitionSpeed if (colorT >= 1) { colorT = 0 colorIndex = nextColorIndex nextColorIndex = (nextColorIndex + 1) % colors.length } const currentColor = lerpColor(colors[colorIndex], colors[nextColorIndex], colorT) // Update materials with new color if (wireframeGlobe.material instanceof THREE.ShaderMaterial) { wireframeGlobe.material.uniforms.baseColor.value = currentColor wireframeGlobe.material.uniforms.time.value += 0.01 } if (wireframeGlow && wireframeGlow.material instanceof THREE.ShaderMaterial) { wireframeGlow.material.uniforms.glowColor.value = currentColor } if (solidGlobe.material instanceof THREE.MeshPhongMaterial) { solidGlobe.material.color = currentColor } if (atmosphereMesh.material instanceof THREE.ShaderMaterial) { atmosphereMesh.material.uniforms.glowColor.value = currentColor } // Rotate the globes, atmosphere, and starfield for dynamic effect wireframeGlobe.rotation.y += 0.001 if (wireframeGlow) wireframeGlow.rotation.y += 0.001 solidGlobe.rotation.y += 0.001 atmosphereMesh.rotation.y += 0.0005 stars.rotation.y += 0.0001 ufos.forEach((ufo) => ufo.update()) controls.update() renderer.render(scene, camera) // Update UFOs ufos.forEach((ufo) => ufo.update()) } animate() // Load high-resolution textures const textureLoader = new THREE.TextureLoader() const loadTexture = (url: string) => new Promise((resolve) => { textureLoader.load(url, (texture) => resolve(texture)) }) Promise.all([ loadTexture("/earth-texture-compressed.jpg"), loadTexture("/earth-bump-compressed.jpg"), loadTexture("/earth-specular-compressed.jpg"), ]).then(([texture, bumpMap, specularMap]) => { const highResMaterial = new THREE.MeshPhongMaterial({ map: texture as THREE.Texture, bumpMap: bumpMap as THREE.Texture, bumpScale: 0.05, specularMap: specularMap as THREE.Texture, specular: new THREE.Color("grey"), }) // Transition to the high-res textured globe const transitionDuration = 1 // seconds const startTime = Date.now() const transitionToHighRes = () => { const elapsedTime = (Date.now() - startTime) / 1000 const progress = Math.min(elapsedTime / transitionDuration, 1) solidGlobe.material = highResMaterial solidGlobe.material.opacity = progress if (wireframeGlobe.material instanceof THREE.ShaderMaterial) { wireframeGlobe.material.opacity = 0.5 * (1 - progress) } if (wireframeGlow && wireframeGlow.material instanceof THREE.ShaderMaterial) { wireframeGlow.material.opacity = 0.5 * (1 - progress) } if (progress < 1) { requestAnimationFrame(transitionToHighRes) } else { setIsHighResLoaded(true) scene.remove(wireframeGlobe) scene.remove(wireframeGlow) } renderer.render(scene, camera) } transitionToHighRes() }) const handleResize = () => { camera.aspect = window.innerWidth / window.innerHeight camera.updateProjectionMatrix() renderer.setSize(window.innerWidth, window.innerHeight) } window.addEventListener("resize", handleResize) const hintTimer = setTimeout(() => { setShowHint(false) }, 3000) // Hide hint after 3 seconds return () => { window.removeEventListener("resize", handleResize) cancelAnimationFrame(animationId) mountRef.current?.removeChild(renderer.domElement) controls.dispose() clearTimeout(hintTimer) if (wireframeGlow) wireframeGlow.geometry.dispose() if (wireframeGlow) wireframeGlow.material.dispose() clearInterval(ufoSpawnInterval) ufos.forEach((ufo) => { scene.remove(ufo.mesh) scene.remove(ufo.trail) if (ufo.trailGeometry) ufo.trailGeometry.dispose() ufo.mesh.traverse((child) => { if (child instanceof THREE.Mesh) { child.geometry.dispose() if (child.material instanceof THREE.Material) { child.material.dispose() } else if (Array.isArray(child.material)) { child.material.forEach((material) => material.dispose()) } } }) }) } }, []) return (

{showHint && (

Drag to explore

)}

) }

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This