[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.3", "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", "three": "0.181.2", "@react-three/fiber": "9.4.2", "@react-three/drei": "10.7.7", "@react-three/postprocessing": "3.0.4" }, "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" "use client" import dynamic from "next/dynamic" const GrapheneScene = dynamic(() => import("@/components/graphene-scene"), { ssr: false, loading: () => (

Loading Graphene...

), }) export default function Page() { return } [V0_FILE]typescriptreact:file="components/graphene-scene.tsx" isEdit="true" isQuickEdit="true" "use client" import { useRef, useMemo, useState, useEffect } from "react" import { Canvas, useFrame, useThree } from "@react-three/fiber" import { OrbitControls } from "@react-three/drei" import { type InstancedMesh, type LineSegments, Vector3, Matrix4, Quaternion, NoToneMapping } from "three" function GrapheneLattice() { const atomsRef = useRef(null) const glowRef = useRef(null) const bondsRef = useRef(null) // Generate graphene lattice const { atomPositions, bondPositions, bondCount } = useMemo(() => { const bondLength = 1.5 const sqrt3 = Math.sqrt(3) const a1 = [bondLength * sqrt3, 0] const a2 = [(bondLength * sqrt3) / 2, bondLength * 1.5] const gridSize = 8 const atoms: Vector3[] = [] for (let i = -gridSize; i <= gridSize; i++) { for (let j = -gridSize; j <= gridSize; j++) { const cellX = i * a1[0] + j * a2[0] const cellZ = i * a1[1] + j * a2[1] atoms.push(new Vector3(cellX, 0, cellZ)) atoms.push(new Vector3(cellX, 0, cellZ + bondLength)) } } // Find bonds const bondPairs: number[] = [] const tolerance = 0.1 for (let i = 0; i < atoms.length; i++) { for (let j = i + 1; j < atoms.length; j++) { const dist = atoms[i].distanceTo(atoms[j]) if (Math.abs(dist - bondLength) < tolerance) { bondPairs.push(atoms[i].x, atoms[i].y, atoms[i].z, atoms[j].x, atoms[j].y, atoms[j].z) } } } return { atomPositions: atoms, bondPositions: new Float32Array(bondPairs), bondCount: bondPairs.length / 6, } }, []) // Store original positions const originalPositions = useMemo(() => atomPositions.map((p) => p.clone()), [atomPositions]) const originalBonds = useMemo(() => bondPositions.slice(), [bondPositions]) // Initialize instanced meshes useMemo(() => { if (!atomsRef.current || !glowRef.current) return const matrix = new Matrix4() atomPositions.forEach((pos, i) => { matrix.setPosition(pos) atomsRef.current!.setMatrixAt(i, matrix) glowRef.current!.setMatrixAt(i, matrix) }) atomsRef.current.instanceMatrix.needsUpdate = true glowRef.current.instanceMatrix.needsUpdate = true }, [atomPositions]) // Animation loop useFrame(({ clock }) => { if (!atomsRef.current || !glowRef.current || !bondsRef.current) return const time = clock.elapsedTime const matrix = new Matrix4() const position = new Vector3() const quaternion = new Quaternion() const scale = new Vector3() // Animate atoms with phonon wave originalPositions.forEach((pos, i) => { const dist = Math.sqrt(pos.x ** 2 + pos.z ** 2) const yOffset = Math.sin(dist * 0.3 - time * 2) * 0.5 position.set(pos.x, yOffset, pos.z) // Atom core matrix.setPosition(position) atomsRef.current!.setMatrixAt(i, matrix) // Pulsing glow const glowScale = 1 + Math.sin(time * 3 + i * 0.1) * 0.2 scale.setScalar(glowScale) matrix.compose(position, quaternion, scale) glowRef.current!.setMatrixAt(i, matrix) }) atomsRef.current.instanceMatrix.needsUpdate = true glowRef.current.instanceMatrix.needsUpdate = true // Animate bonds const bondAttr = bondsRef.current.geometry.getAttribute("position") const arr = bondAttr.array as Float32Array for (let i = 0; i < bondCount; i++) { const idx = i * 6 const dist1 = Math.sqrt(originalBonds[idx] ** 2 + originalBonds[idx + 2] ** 2) const dist2 = Math.sqrt(originalBonds[idx + 3] ** 2 + originalBonds[idx + 5] ** 2) arr[idx + 1] = Math.sin(dist1 * 0.3 - time * 2) * 0.5 arr[idx + 4] = Math.sin(dist2 * 0.3 - time * 2) * 0.5 } bondAttr.needsUpdate = true }) return ( {/* Atom cores - InstancedMesh for performance */} {/* Atom glow - InstancedMesh */} {/* Bonds - LineSegments */} ) } function GPUInfo({ onGPUInfo }: { onGPUInfo: (info: string) => void }) { const { gl } = useThree() useEffect(() => { const debugInfo = gl.getContext().getExtension("WEBGL_debug_renderer_info") if (debugInfo) { const renderer = gl.getContext().getParameter(debugInfo.UNMASKED_RENDERER_WEBGL) onGPUInfo(renderer) } else { onGPUInfo("WebGL 2.0") } }, [gl, onGPUInfo]) return null } export default function GrapheneScene() { const [gpuInfo, setGpuInfo] = useState("") const [showInfo, setShowInfo] = useState(true) return (

{/* Header */}

Graphene

{/* Data grid */}

Formula C Structure Hexagonal 2D Bond length 1.42 Å Atoms 2 per unit cell

{/* Divider */}

{/* Source link */} Novoselov et al., Science 2004

{gpuInfo ? gpuInfo.split("/")[0]?.trim() || "GPU" : "WebGL"}

drag to rotate • scroll to zoom

) }

About

Tags

Share

About

Tags

Share

More from vpesh

More Templates Like This

About

Tags

Share

About

Tags

Share

More from vpesh

More Templates Like This