91:I[903690,["/chat-static/_next/static/immutable/chunks/1w618an_vdrmm.js","/chat-static/_next/static/immutable/chunks/29ydngev9m3fy.js","/chat-static/_next/static/immutable/chunks/0aicokz-_c6hw.js","/chat-static/_next/static/immutable/chunks/06l8mr_zo_pdk.js","/chat-static/_next/static/immutable/chunks/02d62qecapvyp.js","/chat-static/_next/static/immutable/chunks/3siudrckqpsjx.js","/chat-static/_next/static/immutable/chunks/2nboxcmsh_5q6.js","/chat-static/_next/static/immutable/chunks/3p3trwcegfkeh.js","/chat-static/_next/static/immutable/chunks/19iyd8wey_a5u.js","/chat-static/_next/static/immutable/chunks/14j4bgae4zayv.js","/chat-static/_next/static/immutable/chunks/05ziczzmpg4l8.js","/chat-static/_next/static/immutable/chunks/1k4mzxl_vkpeo.js","/chat-static/_next/static/immutable/chunks/1ca1eagukd03f.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/3i0ofkmfv-4g2.js","/chat-static/_next/static/immutable/chunks/0ompgpevdvxsn.js","/chat-static/_next/static/immutable/chunks/0o0qvt0encnhv.js","/chat-static/_next/static/immutable/chunks/3hh4bpnihie8y.js","/chat-static/_next/static/immutable/chunks/3_y066xfe1cmo.js","/chat-static/_next/static/immutable/chunks/3w1zcr9c32026.js","/chat-static/_next/static/immutable/chunks/1te_-knuy9ss-.js","/chat-static/_next/static/immutable/chunks/0vmwm1j0c62ij.js","/chat-static/_next/static/immutable/chunks/120lp9kxd910m.js","/chat-static/_next/static/immutable/chunks/2k1iz3tquaf-h.js","/chat-static/_next/static/immutable/chunks/2x3mu3fgb5m94.js","/chat-static/_next/static/immutable/chunks/3mlb4bu1798-_.js","/chat-static/_next/static/immutable/chunks/1o3uedpb5nwwe.js","/chat-static/_next/static/immutable/chunks/0spguaj-i7-94.js","/chat-static/_next/static/immutable/chunks/3_-w_ojx3ellg.js","/chat-static/_next/static/immutable/chunks/1t-sssavjo13y.js","/chat-static/_next/static/immutable/chunks/2up2gjdyg5h_y.js","/chat-static/_next/static/immutable/chunks/2wjyldnvra4-5.js","/chat-static/_next/static/immutable/chunks/2ikegn6lkshq2.js","/chat-static/_next/static/immutable/chunks/0ea-o8jcr8uny.js","/chat-static/_next/static/immutable/chunks/01a5ye0bvehhg.js","/chat-static/_next/static/immutable/chunks/1gfz329mrtd08.js","/chat-static/_next/static/immutable/chunks/37vtvti040ftg.js"],"ExplicitChatIdProvider"] 92:I[838238,["/chat-static/_next/static/immutable/chunks/1w618an_vdrmm.js","/chat-static/_next/static/immutable/chunks/29ydngev9m3fy.js","/chat-static/_next/static/immutable/chunks/0aicokz-_c6hw.js","/chat-static/_next/static/immutable/chunks/06l8mr_zo_pdk.js","/chat-static/_next/static/immutable/chunks/02d62qecapvyp.js","/chat-static/_next/static/immutable/chunks/3siudrckqpsjx.js","/chat-static/_next/static/immutable/chunks/2nboxcmsh_5q6.js","/chat-static/_next/static/immutable/chunks/3p3trwcegfkeh.js","/chat-static/_next/static/immutable/chunks/19iyd8wey_a5u.js","/chat-static/_next/static/immutable/chunks/14j4bgae4zayv.js","/chat-static/_next/static/immutable/chunks/05ziczzmpg4l8.js","/chat-static/_next/static/immutable/chunks/1k4mzxl_vkpeo.js","/chat-static/_next/static/immutable/chunks/1ca1eagukd03f.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/3i0ofkmfv-4g2.js","/chat-static/_next/static/immutable/chunks/0ompgpevdvxsn.js","/chat-static/_next/static/immutable/chunks/0o0qvt0encnhv.js","/chat-static/_next/static/immutable/chunks/3hh4bpnihie8y.js","/chat-static/_next/static/immutable/chunks/3_y066xfe1cmo.js","/chat-static/_next/static/immutable/chunks/3w1zcr9c32026.js","/chat-static/_next/static/immutable/chunks/1te_-knuy9ss-.js","/chat-static/_next/static/immutable/chunks/0vmwm1j0c62ij.js","/chat-static/_next/static/immutable/chunks/120lp9kxd910m.js","/chat-static/_next/static/immutable/chunks/2k1iz3tquaf-h.js","/chat-static/_next/static/immutable/chunks/2x3mu3fgb5m94.js","/chat-static/_next/static/immutable/chunks/3mlb4bu1798-_.js","/chat-static/_next/static/immutable/chunks/1o3uedpb5nwwe.js","/chat-static/_next/static/immutable/chunks/0spguaj-i7-94.js","/chat-static/_next/static/immutable/chunks/3_-w_ojx3ellg.js","/chat-static/_next/static/immutable/chunks/1t-sssavjo13y.js","/chat-static/_next/static/immutable/chunks/2up2gjdyg5h_y.js","/chat-static/_next/static/immutable/chunks/2wjyldnvra4-5.js","/chat-static/_next/static/immutable/chunks/2ikegn6lkshq2.js","/chat-static/_next/static/immutable/chunks/0ea-o8jcr8uny.js","/chat-static/_next/static/immutable/chunks/01a5ye0bvehhg.js","/chat-static/_next/static/immutable/chunks/1gfz329mrtd08.js","/chat-static/_next/static/immutable/chunks/37vtvti040ftg.js"],"SWRDataProvider"] 93:T20e5,[V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.10", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "3.25.76", "d3": "7.9.0", "topojson-client": "3.1.0" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" import { AnimatedPeruGlobe } from "@/components/animated-peru-globe" export default function Home() { return (

) } [V0_FILE]typescriptreact:file="components/animated-peru-globe.tsx" isEdit="true" isQuickEdit="true" "use client" import type React from "react" import { useEffect, useRef, useState } from "react" import * as d3 from "d3" import { feature } from "topojson-client" interface GeoFeature { type: string geometry: any properties: any } function interpolateProjection(raw0: any, raw1: any) { const mutate: any = d3.geoProjectionMutator((t: number) => (x: number, y: number) => { const [x0, y0] = raw0(x, y) const [x1, y1] = raw1(x, y) return [x0 + t * (x1 - x0), y0 + t * (y1 - y0)] }) let t = 0 return Object.assign((mutate as any)(t), { alpha(_: number) { return arguments.length ? (mutate as any)((t = +_)) : t }, }) } function generateDotsInsideCountry( geoFeature: GeoFeature, projection: any, dotSpacing = 0.3, // Spacing in degrees ): Array<{ x: number; y: number }> { const dots: Array<{ x: number; y: number }> = [] // Peru's approximate bounding box in lat/lon const minLon = -81.5 const maxLon = -68.5 const minLat = -18.5 const maxLat = 0 // Create a path generator for point-in-polygon testing const path = d3.geoPath(projection) // Generate grid of points for (let lon = minLon; lon <= maxLon; lon += dotSpacing) { for (let lat = minLat; lat <= maxLat; lat += dotSpacing) { // Check if point is inside the country using geoContains if (d3.geoContains(geoFeature as any, [lon, lat])) { const coords = projection([lon, lat]) if (coords && !isNaN(coords[0]) && !isNaN(coords[1])) { dots.push({ x: coords[0], y: coords[1] }) } } } } return dots } export function AnimatedPeruGlobe() { const svgRef = useRef(null) const [progress, setProgress] = useState([100]) const [worldData, setWorldData] = useState([]) const [rotation, setRotation] = useState([0, 0]) const [translation, setTranslation] = useState([0, 0]) const [isDragging, setIsDragging] = useState(false) const [lastMouse, setLastMouse] = useState([0, 0]) const [animationTime, setAnimationTime] = useState(0) const width = 800 const height = 500 useEffect(() => { let animationId: number const animate = () => { setAnimationTime((prev) => prev + 0.02) animationId = requestAnimationFrame(animate) } animationId = requestAnimationFrame(animate) return () => cancelAnimationFrame(animationId) }, []) // Load world data useEffect(() => { const loadWorldData = async () => { try { const response = await fetch("https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json") const world: any = await response.json() const countries = feature(world, world.objects.countries).features const peru = countries.filter((c: any) => c.id === "604" || c.properties?.name === "Peru") setWorldData(peru) } catch (error) { console.log("[v0] Error loading world data:", error) } } loadWorldData() }, []) const handleMouseDown = (event: React.MouseEvent) => { setIsDragging(true) const rect = svgRef.current?.getBoundingClientRect() if (rect) { setLastMouse([event.clientX - rect.left, event.clientY - rect.top]) } } const handleMouseMove = (event: React.MouseEvent) => { if (!isDragging) return const rect = svgRef.current?.getBoundingClientRect() if (!rect) return const currentMouse = [event.clientX - rect.left, event.clientY - rect.top] const dx = currentMouse[0] - lastMouse[0] const dy = currentMouse[1] - lastMouse[1] const t = progress[0] / 100 if (t < 0.5) { const sensitivity = 0.5 setRotation((prev) => [prev[0] + dx * sensitivity, Math.max(-90, Math.min(90, prev[1] - dy * sensitivity))]) } else { const sensitivityMap = 0.25 setRotation((prev) => [prev[0] + dx * sensitivityMap, Math.max(-90, Math.min(90, prev[1] - dy * sensitivityMap))]) } setLastMouse(currentMouse) } const handleMouseUp = () => { setIsDragging(false) } // Initialize and update visualization useEffect(() => { if (!svgRef.current || worldData.length === 0) return const svg = d3.select(svgRef.current) svg.selectAll("*").remove() const t = progress[0] / 100 const alpha = Math.pow(t, 0.5) const scale = d3.scaleLinear().domain([0, 1]).range([600, 600]) const projection = interpolateProjection(d3.geoOrthographicRaw, d3.geoEquirectangularRaw) .scale(scale(alpha)) .translate([width / 2 + translation[0], height / 2 + translation[1]]) .rotate([76 + rotation[0], 10 + rotation[1]]) .precision(0.1) projection.alpha(alpha) if (worldData[0]) { const dots = generateDotsInsideCountry(worldData[0], projection, 0.4) svg .selectAll(".dot") .data(dots) .enter() .append("circle") .attr("class", "dot") .attr("cx", (d) => d.x) .attr("cy", (d) => d.y) .attr("r", 1.5) .attr("fill", "#6b7280") .attr("opacity", 0.6) } }, [worldData, progress, rotation, translation, animationTime]) return (

) }89:["$","$L91",null,{"chatId":"jifMVXfWRZx","children":["$","$L92",null,{"data":{"@\"active-block\",\"jifMVXfWRZx\",":{"id":"b_ehhHLf0iXNN","messageId":"Qv3eAqDpVkA175HfmZu4er6BqCZGg80r","source":"$93","language":"typescriptreact","type":"code-project","closed":true,"meta":{"type":"code-project","project":"Code","taskNameActive":"Removing yellow city dots","taskNameComplete":"Removed yellow city dots"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"jifMVXfWRZx\",":false},"children":"$L94"}]}]

About

Tags

Share

About

Tags

Share

More from shiarauzo

More Templates Like This