[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", "@react-three/fiber": "9.5.0", "three": "0.182.0" }, "devDependencies": { "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^3.4.17", "typescript": "^5" } } [V0_FILE]plaintext:file="public/v0-logo.glb" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/v0-logo-light-4TVed2JT6XhSgvzGjzUMyTZnZjYmcN.glb" isMerged="true" [V0_FILE]typescriptreact:file="components/floating-card.tsx" isMerged="true" "use client" import type React from "react" import { useRef, useState } from "react" import { cn } from "@/lib/utils" interface FloatingCardProps { children: React.ReactNode className?: string } export function FloatingCard({ children, className }: FloatingCardProps) { const cardRef = useRef(null) const [transform, setTransform] = useState({ rotateX: 0, rotateY: 0 }) const handleMouseMove = (e: React.MouseEvent) => { if (!cardRef.current) return const rect = cardRef.current.getBoundingClientRect() const x = e.clientX - rect.left const y = e.clientY - rect.top const centerX = rect.width / 2 const centerY = rect.height / 2 const rotateX = (y - centerY) / 20 const rotateY = (centerX - x) / 20 setTransform({ rotateX, rotateY }) } const handleMouseLeave = () => { setTransform({ rotateX: 0, rotateY: 0 }) } return (

{children}

) } [V0_FILE]typescriptreact:file="components/hero-scene.tsx" isMerged="true" "use client" import { Canvas, useFrame, useThree } from "@react-three/fiber" import { Suspense, useRef, useMemo } from "react" import type * as THREE from "three" function FloatingShapes() { const groupRef = useRef(null) const shapes = useMemo(() => { return Array.from({ length: 20 }, (_, i) => ({ position: [(Math.random() - 0.5) * 20, (Math.random() - 0.5) * 20, (Math.random() - 0.5) * 10 - 5] as [ number, number, number, ], scale: Math.random() * 0.5 + 0.2, speed: Math.random() * 0.5 + 0.2, type: Math.floor(Math.random() * 3), })) }, []) useFrame((state) => { if (groupRef.current) { groupRef.current.rotation.y = state.clock.elapsedTime * 0.05 } }) return ( {shapes.map((shape, i) => ( ))} ) } function FloatingShape({ position, scale, speed, type, index, }: { position: [number, number, number] scale: number speed: number type: number index: number }) { const meshRef = useRef(null) useFrame((state) => { if (meshRef.current) { meshRef.current.position.y = position[1] + Math.sin(state.clock.elapsedTime * speed + index) * 0.5 meshRef.current.rotation.x = state.clock.elapsedTime * speed * 0.5 meshRef.current.rotation.z = state.clock.elapsedTime * speed * 0.3 } }) const geometry = useMemo(() => { switch (type) { case 0: return case 1: return default: return } }, [type]) return ( {geometry} ) } function CameraRig() { const { camera } = useThree() useFrame((state) => { camera.position.x = Math.sin(state.clock.elapsedTime * 0.1) * 0.5 camera.position.y = Math.cos(state.clock.elapsedTime * 0.1) * 0.3 camera.lookAt(0, 0, 0) }) return null } export function HeroScene() { return (

) } [V0_FILE]typescriptreact:file="components/nav-3d.tsx" isMerged="true" "use client" import { Logo3D } from "./logo-3d" import { cn } from "@/lib/utils" const navItems = [ { label: "Work", href: "#work" }, { label: "About", href: "#about" }, { label: "Services", href: "#services" }, { label: "Contact", href: "#contact" }, ] export function Nav3D() { return ( ) } [V0_FILE]typescriptreact:file="components/feature-section.tsx" isMerged="true" "use client" import { FloatingCard } from "./floating-card" const features = [ { number: "01", title: "Immersive Design", description: "Create stunning 3D experiences that captivate your audience and leave lasting impressions.", }, { number: "02", title: "Interactive Elements", description: "Every component responds to user interaction, creating a dynamic and engaging experience.", }, { number: "03", title: "Modern Technology", description: "Built with cutting-edge WebGL and Three.js for smooth, performant 3D rendering.", }, ] export function FeatureSection() { return (

A new dimension of
digital experiences

We craft immersive 3D websites that blur the line between the digital and physical world, built with WebGL and modern web technologies.

{features.map((feature) => (

{feature.number}

{feature.title}

{feature.description}

))}

) } [V0_FILE]typescriptreact:file="components/cta-section.tsx" isMerged="true" "use client" import { FloatingCard } from "./floating-card" import { Button } from "@/components/ui/button" import { ArrowRight } from "lucide-react" export function CTASection() { return (

Ready to enter the
third dimension?

Let's create something extraordinary together. Transform your digital presence with immersive 3D experiences.

) } [V0_FILE]css:file="app/globals.css" isEdit="true" isQuickEdit="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer utilities { .text-balance { text-wrap: balance; } } @layer base { :root { --font-sans: var(--font-geist-sans); --font-mono: var(--font-geist-mono); /* Light theme with soft blue-gray palette for immersive 3D feel */ --background: 228 20% 93%; --foreground: 230 25% 10%; --card: 228 20% 96%; --card-foreground: 230 25% 10%; --popover: 228 20% 96%; --popover-foreground: 230 25% 10%; --primary: 230 25% 10%; --primary-foreground: 228 20% 96%; --secondary: 228 15% 88%; --secondary-foreground: 230 25% 10%; --muted: 228 15% 88%; --muted-foreground: 230 10% 45%; --accent: 228 15% 85%; --accent-foreground: 230 25% 10%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 228 15% 82%; --input: 228 15% 85%; --ring: 230 25% 10%; --chart-1: 12 76% 61%; --chart-2: 173 58% 39%; --chart-3: 197 37% 24%; --chart-4: 43 74% 66%; --chart-5: 27 87% 67%; --radius: 0.5rem; --sidebar-background: 0 0% 98%; --sidebar-foreground: 240 5.3% 26.1%; --sidebar-primary: 240 5.9% 10%; --sidebar-primary-foreground: 0 0% 98%; --sidebar-accent: 240 4.8% 95.9%; --sidebar-accent-foreground: 240 5.9% 10%; --sidebar-border: 220 13% 91%; --sidebar-ring: 217.2 91.2% 59.8%; } .dark { --background: 0 0% 3.9%; --foreground: 0 0% 98%; --card: 0 0% 3.9%; --card-foreground: 0 0% 98%; --popover: 0 0% 3.9%; --popover-foreground: 0 0% 98%; --primary: 0 0% 98%; --primary-foreground: 0 0% 9%; --secondary: 0 0% 14.9%; --secondary-foreground: 0 0% 98%; --muted: 0 0% 14.9%; --muted-foreground: 0 0% 63.9%; --accent: 0 0% 14.9%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 0 0% 14.9%; --input: 0 0% 14.9%; --ring: 0 0% 83.1%; --chart-1: 220 70% 50%; --chart-2: 160 60% 45%; --chart-3: 30 80% 55%; --chart-4: 280 65% 60%; --chart-5: 340 75% 55%; --sidebar-background: 240 5.9% 10%; --sidebar-foreground: 240 4.8% 95.9%; --sidebar-primary: 224.3 76.3% 48%; --sidebar-primary-foreground: 0 0% 100%; --sidebar-accent: 240 3.7% 15.9%; --sidebar-accent-foreground: 240 4.8% 95.9%; --sidebar-border: 240 3.7% 15.9%; --sidebar-ring: 217.2 91.2% 59.8%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" import { Nav3D } from "@/components/nav-3d" import { HeroScene } from "@/components/hero-scene" import { FeatureSection } from "@/components/feature-section" import { CTASection } from "@/components/cta-section" export default function Home() { return (

{/* Hero Content */}

WebGL / 3D / Interactive

IMMERSIVE

A highly immersive and interactive creative website that blurs the line between the real world and digital, built with WebGL.

{/* Footer */}

) } [V0_FILE]typescriptreact:file="components/logo-3d.tsx" isEdit="true" "use client" import { Canvas, useFrame, useThree } from "@react-three/fiber" import { Suspense, useRef, useEffect, useState } from "react" import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js" import * as THREE from "three" function Model({ url }: { url: string }) { const [scene, setScene] = useState(null) const modelRef = useRef(null) const [isDragging, setIsDragging] = useState(false) const [previousMouse, setPreviousMouse] = useState({ x: 0, y: 0 }) const velocity = useRef({ x: 0, y: 0 }) const { gl } = useThree() useEffect(() => { const loader = new GLTFLoader() loader.load( url, (gltf) => { const loadedScene = gltf.scene.clone() const box = new THREE.Box3().setFromObject(loadedScene) const center = box.getCenter(new THREE.Vector3()) loadedScene.position.sub(center) const size = box.getSize(new THREE.Vector3()) const maxDim = Math.max(size.x, size.y, size.z) const scale = 1.5 / maxDim loadedScene.scale.setScalar(scale) setScene(loadedScene) }, undefined, (error) => console.error("Error loading model:", error), ) }, [url]) useEffect(() => { const canvas = gl.domElement const handlePointerDown = (e: PointerEvent) => { setIsDragging(true) setPreviousMouse({ x: e.clientX, y: e.clientY }) velocity.current = { x: 0, y: 0 } } const handlePointerMove = (e: PointerEvent) => { if (!isDragging || !modelRef.current) return const deltaX = e.clientX - previousMouse.x const deltaY = e.clientY - previousMouse.y modelRef.current.rotation.y += deltaX * 0.01 modelRef.current.rotation.x += deltaY * 0.01 velocity.current = { x: deltaX * 0.01, y: deltaY * 0.01 } setPreviousMouse({ x: e.clientX, y: e.clientY }) } const handlePointerUp = () => { setIsDragging(false) } canvas.addEventListener("pointerdown", handlePointerDown) canvas.addEventListener("pointermove", handlePointerMove) canvas.addEventListener("pointerup", handlePointerUp) canvas.addEventListener("pointerleave", handlePointerUp) return () => { canvas.removeEventListener("pointerdown", handlePointerDown) canvas.removeEventListener("pointermove", handlePointerMove) canvas.removeEventListener("pointerup", handlePointerUp) canvas.removeEventListener("pointerleave", handlePointerUp) } }, [gl, isDragging, previousMouse]) useFrame((_, delta) => { if (modelRef.current) { if (!isDragging) { velocity.current.x *= 0.95 velocity.current.y *= 0.95 modelRef.current.rotation.y += velocity.current.x modelRef.current.rotation.x += velocity.current.y // Subtle auto-rotation when velocity is nearly zero if (Math.abs(velocity.current.x) < 0.001 && Math.abs(velocity.current.y) < 0.001) { modelRef.current.rotation.y += delta * 0.3 } } } }) if (!scene) return null return ( ) } export function Logo3D({ className }: { className?: string }) { return (

) }

A new dimension of digital experiences

{feature.title}

Ready to enter the third dimension?

IMMERSIVE

A new dimension of
digital experiences

Ready to enter the
third dimension?

About

Tags

Share

About

Tags

Share

More from estebansuarez

More Templates Like This

About

Tags

Share

About

Tags

Share

More from estebansuarez

More Templates Like This

v0 is ready