[V0_FILE]html:file="index.html" type="html" isMerged="true" Graphene Crystal Lattice - Interactive 3D

Graphene Crystal Lattice

Hexagonal honeycomb structure

🖱️ Drag to rotate | 🔍 Scroll to zoom

[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" "use client" import { GrapheneVisualization } from "@/components/graphene-visualization" export default function Page() { return (

) } [V0_FILE]css:file="app/globals.css" isEdit="true" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(0 0 0); --foreground: oklch(1 0 0); --card: oklch(0.1 0 0); --card-foreground: oklch(0.95 0 0); --popover: oklch(0.1 0 0); --popover-foreground: oklch(0.95 0 0); --primary: oklch(0.8 0.2 195); --primary-foreground: oklch(0.1 0 0); --secondary: oklch(0.75 0.25 330); --secondary-foreground: oklch(1 0 0); --muted: oklch(0.2 0 0); --muted-foreground: oklch(0.6 0 0); --accent: oklch(0.8 0.2 195); --accent-foreground: oklch(0.1 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.985 0 0); --border: oklch(0.2 0 0); --input: oklch(0.2 0 0); --ring: oklch(0.8 0.2 195); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); --cyan: oklch(0.8 0.2 195); --magenta: oklch(0.75 0.25 330); } .dark { --background: oklch(0 0 0); --foreground: oklch(1 0 0); --card: oklch(0.1 0 0); --card-foreground: oklch(0.95 0 0); --popover: oklch(0.1 0 0); --popover-foreground: oklch(0.95 0 0); --primary: oklch(0.8 0.2 195); --primary-foreground: oklch(0.1 0 0); --secondary: oklch(0.75 0.25 330); --secondary-foreground: oklch(1 0 0); --muted: oklch(0.2 0 0); --muted-foreground: oklch(0.6 0 0); --accent: oklch(0.8 0.2 195); --accent-foreground: oklch(0.1 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.985 0 0); --border: oklch(0.2 0 0); --input: oklch(0.2 0 0); --ring: oklch(0.8 0.2 195); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); --cyan: oklch(0.8 0.2 195); --magenta: oklch(0.75 0.25 330); } @theme inline { --font-sans: "Geist", "Geist Fallback"; --font-mono: "Geist Mono", "Geist Mono Fallback"; --font-serif: "Georgia", "Times New Roman", serif; --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); --color-cyan-400: var(--cyan); --color-magenta-400: var(--magenta); --color-zinc-300: oklch(0.75 0 0); --color-zinc-400: oklch(0.6 0 0); --color-zinc-500: oklch(0.5 0 0); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]json:file="package.json" isEdit="true" isQuickEdit="true" 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" }, "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", "@types/three": "^0.181.0" } } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Geist, Geist_Mono } from "next/font/google" import "./globals.css" const _geist = Geist({ subsets: ["latin"] }) const _geistMono = Geist_Mono({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Graphene Crystal Structure Visualization", description: "Interactive 3D model of graphene hexagonal lattice with phonon wave simulation", generator: "v0.app", icons: { icon: [ { url: "/icon-light-32x32.png", media: "(prefers-color-scheme: light)", }, { url: "/icon-dark-32x32.png", media: "(prefers-color-scheme: dark)", }, { url: "/icon.svg", type: "image/svg+xml", }, ], apple: "/apple-icon.png", }, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/graphene-visualization.tsx" isEdit="true" isQuickEdit="true" "use client" import { Canvas, useFrame } from "@react-three/fiber" import { OrbitControls } from "@react-three/drei" import { useRef, useEffect, useMemo, useState } from "react" function generateGrapheneLattice(gridSize: number) { const atoms: { x: number; y: number; z: number }[] = [] const bonds: { from: number; to: number }[] = [] const a = 1.42 const dx = a * Math.sqrt(3) const dy = a * 1.5 const offsetX = (gridSize * dx) / 2 const offsetY = (gridSize * dy) / 2 for (let row = 0; row < gridSize; row++) { for (let col = 0; col < gridSize; col++) { const xOffset = (row % 2) * (dx / 2) const x = col * dx + xOffset - offsetX const y = row * dy - offsetY atoms.push({ x, y, z: 0 }) atoms.push({ x: x + dx / 2, y: y + a / 2, z: 0 }) } } const bondThreshold = a * 1.1 for (let i = 0; i < atoms.length; i++) { for (let j = i + 1; j < atoms.length; j++) { const dxi = atoms[i].x - atoms[j].x const dyi = atoms[i].y - atoms[j].y const dist = Math.sqrt(dxi * dxi + dyi * dyi) if (dist > 0.1 && dist <= bondThreshold) { bonds.push({ from: i, to: j }) } } } return { atoms, bonds } } function GrapheneScene({ gridSize }: { gridSize: number }) { const { atoms, bonds } = useMemo(() => generateGrapheneLattice(gridSize), [gridSize]) const atomsRef = useRef(null) const glowRef = useRef(null) const bondsRef = useRef(null) const threeRef = useRef(null) const [ready, setReady] = useState(false) const bondPositions = useMemo(() => { const positions = new Float32Array(bonds.length * 6) bonds.forEach((bond, i) => { const a1 = atoms[bond.from] const a2 = atoms[bond.to] positions[i * 6] = a1.x positions[i * 6 + 1] = a1.y positions[i * 6 + 2] = 0 positions[i * 6 + 3] = a2.x positions[i * 6 + 4] = a2.y positions[i * 6 + 5] = 0 }) return positions }, [atoms, bonds]) useEffect(() => { let cancelled = false async function init() { const THREE = await import("three") if (cancelled) return threeRef.current = THREE await new Promise((resolve) => requestAnimationFrame(resolve)) if (cancelled) return if (!atomsRef.current || !glowRef.current) { console.log("[v0] Refs not ready, retrying...") await new Promise((resolve) => requestAnimationFrame(resolve)) if (cancelled || !atomsRef.current || !glowRef.current) { console.log("[v0] Refs still not ready") return } } console.log("[v0] Initializing", atoms.length, "atoms") const tempObject = new THREE.Object3D() for (let i = 0; i < atoms.length; i++) { const atom = atoms[i] tempObject.position.set(atom.x, atom.y, 0) tempObject.scale.setScalar(1) tempObject.updateMatrix() atomsRef.current.setMatrixAt(i, tempObject.matrix) glowRef.current.setMatrixAt(i, tempObject.matrix) } atomsRef.current.instanceMatrix.needsUpdate = true glowRef.current.instanceMatrix.needsUpdate = true console.log("[v0] Initialization complete") setReady(true) } init() return () => { cancelled = true } }, [atoms]) useFrame(({ clock }) => { if (!ready || !threeRef.current || !atomsRef.current) return const THREE = threeRef.current const time = clock.getElapsedTime() const tempObject = new THREE.Object3D() for (let i = 0; i < atoms.length; i++) { const atom = atoms[i] const wave = Math.sin(atom.x * 0.15 + time * 2) * Math.cos(atom.y * 0.15 + time * 1.5) * 0.3 const scale = 1 + Math.abs(wave) * 0.15 tempObject.position.set(atom.x, atom.y, wave) tempObject.scale.setScalar(scale) tempObject.updateMatrix() atomsRef.current.setMatrixAt(i, tempObject.matrix) if (glowRef.current) { glowRef.current.setMatrixAt(i, tempObject.matrix) } } atomsRef.current.instanceMatrix.needsUpdate = true if (glowRef.current) { glowRef.current.instanceMatrix.needsUpdate = true } if (bondsRef.current?.geometry?.attributes?.position?.array) { const positions = bondsRef.current.geometry.attributes.position.array for (let i = 0; i < bonds.length; i++) { const bond = bonds[i] const a1 = atoms[bond.from] const a2 = atoms[bond.to] const wave1 = Math.sin(a1.x * 0.15 + time * 2) * Math.cos(a1.y * 0.15 + time * 1.5) * 0.3 const wave2 = Math.sin(a2.x * 0.15 + time * 2) * Math.cos(a2.y * 0.15 + time * 1.5) * 0.3 positions[i * 6 + 2] = wave1 positions[i * 6 + 5] = wave2 } bondsRef.current.geometry.attributes.position.needsUpdate = true } }) return ( ) } export function GrapheneVisualization() { const [gridSize, setGridSize] = useState(15) const atomCount = gridSize * gridSize * 2 return (

SCIENCE · 2004

Electric Field Effect in
Atomically Thin Carbon Films

K. S. Novoselov et al. · Manchester

Controls

Grid {gridSize}×{gridSize}

setGridSize(Number(e.target.value))} className="h-1.5 w-full cursor-pointer appearance-none rounded-lg bg-zinc-800 accent-cyan-400 md:h-2" />

Atoms {atomCount.toLocaleString()}

Legend

Carbon atom (C)

C-C bond (1.42 Å)

Phonon waves — lattice vibrations propagating through crystal

Structure

Honeycomb lattice with sp² hybridization. Each carbon bonds to 3 neighbors at 120°.

Electric Field

Applied field modulates carrier concentration, enabling transistor behavior.

Mobility

Electron mobility ~10,000 cm²/V·s — 10× higher than silicon.

DRAG · Rotate

SCROLL · Zoom

) }

Graphene Crystal Lattice

Electric Field Effect in Atomically Thin Carbon Films

Electric Field Effect in
Atomically Thin Carbon Films

About

Tags

Share

More from vpesh

More Templates Like This

About

Tags

Share

About

Tags

Share

More from vpesh

More Templates Like This