[V0_FILE]css:file="app/globals.css" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { /* Updated color tokens to match monochromatic design brief */ --background: oklch(1 0 0); /* White background */ --foreground: oklch(0 0 0); /* Black foreground */ --card: oklch(0.94 0 0); /* Light gray card background */ --card-foreground: oklch(0 0 0); /* Black text on cards */ --popover: oklch(1 0 0); /* White popover background */ --popover-foreground: oklch(0 0 0); /* Black text in popovers */ --primary: oklch(0 0 0); /* Black primary color */ --primary-foreground: oklch(1 0 0); /* White text on primary */ --secondary: oklch(0.5 0 0); /* Medium gray secondary */ --secondary-foreground: oklch(1 0 0); /* White text on secondary */ --muted: oklch(0.94 0 0); /* Light gray muted */ --muted-foreground: oklch(0 0 0); /* Black text on muted */ --accent: oklch(0.8 0 0); /* Light silver accent */ --accent-foreground: oklch(0 0 0); /* Black text on accent */ --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(1 0 0); --border: oklch(0.5 0 0); /* Medium gray border */ --input: oklch(1 0 0); /* White input background */ --ring: oklch(0 0 0 / 0.2); /* Black ring with opacity */ --chart-1: oklch(0 0 0); /* Black chart color */ --chart-2: oklch(0.5 0 0); /* Gray chart color */ --chart-3: oklch(0.94 0 0); /* Light gray chart color */ --chart-4: oklch(0.8 0 0); /* Light silver chart color */ --chart-5: oklch(0 0 0); /* Black chart color */ --radius: 0.5rem; /* Reduced radius for cleaner look */ --sidebar: oklch(0.94 0 0); /* Light gray sidebar */ --sidebar-foreground: oklch(0 0 0); /* Black sidebar text */ --sidebar-primary: oklch(0 0 0); /* Black sidebar primary */ --sidebar-primary-foreground: oklch(1 0 0); /* White text on sidebar primary */ --sidebar-accent: oklch(0.8 0 0); /* Light silver sidebar accent */ --sidebar-accent-foreground: oklch(0 0 0); /* Black text on sidebar accent */ --sidebar-border: oklch(0.5 0 0); /* Medium gray sidebar border */ --sidebar-ring: oklch(0 0 0 / 0.2); /* Black sidebar ring with opacity */ } .dark { /* Updated dark mode tokens to maintain monochromatic theme */ --background: oklch(0 0 0); /* Black background */ --foreground: oklch(1 0 0); /* White foreground */ --card: oklch(0.1 0 0); /* Dark gray card */ --card-foreground: oklch(1 0 0); /* White text on cards */ --popover: oklch(0 0 0); /* Black popover */ --popover-foreground: oklch(1 0 0); /* White text in popovers */ --primary: oklch(1 0 0); /* White primary */ --primary-foreground: oklch(0 0 0); /* Black text on primary */ --secondary: oklch(0.3 0 0); /* Dark gray secondary */ --secondary-foreground: oklch(1 0 0); /* White text on secondary */ --muted: oklch(0.3 0 0); /* Dark gray muted */ --muted-foreground: oklch(0.7 0 0); /* Light gray text on muted */ --accent: oklch(0.3 0 0); /* Dark gray accent */ --accent-foreground: oklch(1 0 0); /* White text on accent */ --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.3 0 0); /* Dark gray border */ --input: oklch(0.3 0 0); /* Dark gray input */ --ring: oklch(1 0 0 / 0.2); /* White ring with opacity */ --chart-1: oklch(1 0 0); /* White chart color */ --chart-2: oklch(0.7 0 0); /* Light gray chart color */ --chart-3: oklch(0.5 0 0); /* Medium gray chart color */ --chart-4: oklch(0.3 0 0); /* Dark gray chart color */ --chart-5: oklch(1 0 0); /* White chart color */ --sidebar: oklch(0.1 0 0); /* Dark gray sidebar */ --sidebar-foreground: oklch(1 0 0); /* White sidebar text */ --sidebar-primary: oklch(1 0 0); /* White sidebar primary */ --sidebar-primary-foreground: oklch(0 0 0); /* Black text on sidebar primary */ --sidebar-accent: oklch(0.3 0 0); /* Dark gray sidebar accent */ --sidebar-accent-foreground: oklch(1 0 0); /* White text on sidebar accent */ --sidebar-border: oklch(0.3 0 0); /* Dark gray sidebar border */ --sidebar-ring: oklch(1 0 0 / 0.2); /* White sidebar ring with opacity */ } @theme inline { --font-sans: var(--font-geist-sans); --font-mono: var(--font-geist-mono); --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-background text-foreground; } } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import RotatingEarth from "@/components/rotating-earth" export default function Home() { return (

) } [V0_FILE]json:file="package.json" isEdit="true" isMerged="true" { "name": "rotating-earth-app", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "next": "15.0.0", "react": "^18.0.0", "react-dom": "^18.0.0", "d3": "^7.8.5", "@types/d3": "^7.4.3", "class-variance-authority": "0.7.1", "clsx": "2.1.1", "lucide-react": "0.542.0", "tailwind-merge": "3.3.1", "tailwindcss-animate": "1.0.7" }, "devDependencies": { "typescript": "^5.0.0", "@types/node": "^20.0.0", "@types/react": "^18.0.0", "@types/react-dom": "^18.0.0", "tailwindcss": "^4.1.9", "postcss": "8.5.6" } } [V0_FILE]typescriptreact:file="components/rotating-earth.tsx" isEdit="true" isQuickEdit="true" "use client" import { useEffect, useRef, useState } from "react" import * as d3 from "d3" interface RotatingEarthProps { width?: number height?: number className?: string } export default function RotatingEarth({ width = 800, height = 600, className = "" }: RotatingEarthProps) { const canvasRef = useRef(null) const [isLoading, setIsLoading] = useState(true) const [error, setError] = useState(null) useEffect(() => { if (!canvasRef.current) return const canvas = canvasRef.current const context = canvas.getContext("2d") if (!context) return // Set up responsive dimensions const containerWidth = Math.min(width, window.innerWidth - 40) const containerHeight = Math.min(height, window.innerHeight - 100) const radius = Math.min(containerWidth, containerHeight) / 2.5 const dpr = window.devicePixelRatio || 1 canvas.width = containerWidth * dpr canvas.height = containerHeight * dpr canvas.style.width = `${containerWidth}px` canvas.style.height = `${containerHeight}px` context.scale(dpr, dpr) // Create projection and path generator for Canvas const projection = d3 .geoOrthographic() .scale(radius) .translate([containerWidth / 2, containerHeight / 2]) .clipAngle(90) const path = d3.geoPath().projection(projection).context(context) const pointInPolygon = (point: [number, number], polygon: number[][]): boolean => { const [x, y] = point let inside = false for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) { const [xi, yi] = polygon[i] const [xj, yj] = polygon[j] if (yi > y !== yj > y && x < ((xj - xi) * (y - yi)) / (yj - yi) + xi) { inside = !inside } } return inside } const pointInFeature = (point: [number, number], feature: any): boolean => { const geometry = feature.geometry if (geometry.type === "Polygon") { const coordinates = geometry.coordinates // Check if point is in outer ring if (!pointInPolygon(point, coordinates[0])) { return false } // Check if point is in any hole (inner rings) for (let i = 1; i < coordinates.length; i++) { if (pointInPolygon(point, coordinates[i])) { return false // Point is in a hole } } return true } else if (geometry.type === "MultiPolygon") { // Check each polygon in the MultiPolygon for (const polygon of geometry.coordinates) { // Check if point is in outer ring if (pointInPolygon(point, polygon[0])) { // Check if point is in any hole let inHole = false for (let i = 1; i < polygon.length; i++) { if (pointInPolygon(point, polygon[i])) { inHole = true break } } if (!inHole) { return true } } } return false } return false } const generateDotsInPolygon = (feature: any, dotSpacing = 16) => { const dots: [number, number][] = [] const bounds = d3.geoBounds(feature) const [[minLng, minLat], [maxLng, maxLat]] = bounds const stepSize = dotSpacing * 0.08 let pointsGenerated = 0 for (let lng = minLng; lng <= maxLng; lng += stepSize) { for (let lat = minLat; lat <= maxLat; lat += stepSize) { const point: [number, number] = [lng, lat] if (pointInFeature(point, feature)) { dots.push(point) pointsGenerated++ } } } console.log( `[v0] Generated ${pointsGenerated} points for land feature:`, feature.properties?.featurecla || "Land", ) return dots } interface DotData { lng: number lat: number visible: boolean } const allDots: DotData[] = [] let landFeatures: any const render = () => { // Clear canvas context.clearRect(0, 0, containerWidth, containerHeight) const currentScale = projection.scale() const scaleFactor = currentScale / radius // Draw ocean (globe background) context.beginPath() context.arc(containerWidth / 2, containerHeight / 2, currentScale, 0, 2 * Math.PI) context.fillStyle = "#000000" context.fill() context.strokeStyle = "#ffffff" context.lineWidth = 2 * scaleFactor context.stroke() if (landFeatures) { // Draw graticule const graticule = d3.geoGraticule() context.beginPath() path(graticule()) context.strokeStyle = "#ffffff" context.lineWidth = 1 * scaleFactor context.globalAlpha = 0.25 context.stroke() context.globalAlpha = 1 // Draw land outlines context.beginPath() landFeatures.features.forEach((feature: any) => { path(feature) }) context.strokeStyle = "#ffffff" context.lineWidth = 1 * scaleFactor context.stroke() // Draw halftone dots allDots.forEach((dot) => { const projected = projection([dot.lng, dot.lat]) if ( projected && projected[0] >= 0 && projected[0] <= containerWidth && projected[1] >= 0 && projected[1] <= containerHeight ) { context.beginPath() context.arc(projected[0], projected[1], 1.2 * scaleFactor, 0, 2 * Math.PI) context.fillStyle = "#999999" context.fill() } }) } } const loadWorldData = async () => { try { setIsLoading(true) const response = await fetch( "https://raw.githubusercontent.com/martynafford/natural-earth-geojson/refs/heads/master/110m/physical/ne_110m_land.json", ) if (!response.ok) throw new Error("Failed to load land data") landFeatures = await response.json() // Generate dots for all land features let totalDots = 0 landFeatures.features.forEach((feature: any) => { const dots = generateDotsInPolygon(feature, 16) dots.forEach(([lng, lat]) => { allDots.push({ lng, lat, visible: true }) totalDots++ }) }) console.log(`[v0] Total dots generated: ${totalDots} across ${landFeatures.features.length} land features`) render() setIsLoading(false) } catch (err) { setError("Failed to load land map data") setIsLoading(false) } } // Set up rotation and interaction const rotation = [0, 0] let autoRotate = true const rotationSpeed = 0.5 const rotate = () => { if (autoRotate) { rotation[0] += rotationSpeed projection.rotate(rotation) render() } } // Auto-rotation timer const rotationTimer = d3.timer(rotate) const handleMouseDown = (event: MouseEvent) => { autoRotate = false const startX = event.clientX const startY = event.clientY const startRotation = [...rotation] const handleMouseMove = (moveEvent: MouseEvent) => { const sensitivity = 0.5 const dx = moveEvent.clientX - startX const dy = moveEvent.clientY - startY rotation[0] = startRotation[0] + dx * sensitivity rotation[1] = startRotation[1] - dy * sensitivity rotation[1] = Math.max(-90, Math.min(90, rotation[1])) projection.rotate(rotation) render() } const handleMouseUp = () => { document.removeEventListener("mousemove", handleMouseMove) document.removeEventListener("mouseup", handleMouseUp) setTimeout(() => { autoRotate = true }, 10) } document.addEventListener("mousemove", handleMouseMove) document.addEventListener("mouseup", handleMouseUp) } const handleWheel = (event: WheelEvent) => { event.preventDefault() const scaleFactor = event.deltaY > 0 ? 0.9 : 1.1 const newRadius = Math.max(radius * 0.5, Math.min(radius * 3, projection.scale() * scaleFactor)) projection.scale(newRadius) render() } canvas.addEventListener("mousedown", handleMouseDown) canvas.addEventListener("wheel", handleWheel) // Load the world data loadWorldData() // Cleanup return () => { rotationTimer.stop() canvas.removeEventListener("mousedown", handleMouseDown) canvas.removeEventListener("wheel", handleWheel) } }, [width, height]) if (error) { return (

Error loading Earth visualization

{error}

) } return (

) }

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This