Pet World

# Prompt: 3D Pet Exploration Universe Landing Page

Build a high-performance React landing page using Vite, TypeScript, Tailwind CSS, Framer Motion, Three.js (R3F/Drei), and Lucide-React.

### 1. Core Technology Stack
- **Framework:** React 18 + Vite + TypeScript.
- **Styling:** Tailwind CSS (JIT).
- **3D Engine:** Three.js via `@react-three/fiber` and `@react-three/drei`.
- **Animation:** `framer-motion` for UI components; `useFrame` for 3D loops.
- **Icons:** `lucide-react`.

### 2. Design System & Aesthetics
- **Typography:** 'Outfit' (Google Fonts). Apply `-webkit-font-smoothing: antialiased`.
- **Colors:** 
  - `brand.space`: #060914 (BG)
  - `brand.panel`: #0E1424 (Cards)
  - `brand.blue`: #60A5FA (Primary)
  - `brand.cyan`: #22D3EE (Accent)
  - `brand.text`: #DCE6F5 (Body)
- **Theme:** Playful "furry" textures and 3D pet models. Use R3F particle systems for floating fur tufts and leaves.

### 3. Section-By-Section Implementation
- **Navbar:** Fixed glassmorphism (`bg-brand-space/70 backdrop-blur-md border-b border-white/10`). Includes "Orbit" glyph logo and a pill-shaped gradient CTA button.
- **Hero:** Full-screen R3F Canvas. Central draggable low-poly "Pet Planet". H1: "Explore worlds, not websites" using `mask-rise` stagger animation. HUD displays live pet coordinates.
- **Features (Bento Grid):** Responsive cards with `brand.panel` backgrounds. Implement parallax Y-axis movement via `useScroll`. 3D pet assets should "pop out" of card boundaries on hover with `brand.cyan` outer glows.
- **Explore (3D Node Map):** Interactive R3F scene with orbiting nodes for pet biomes. Camera uses scroll-linked zoom mapping `useScroll` to Z-position.
- **Footer:** Minimalist grid with social links and "PetWorld" branding.

### 4. Animations & Micro-Interactions
- **Magnetic CTAs:** Custom hook for buttons to follow cursor proximity.
- **Pet Pop-outs:** Random rotation and scale transitions using `animate={{ rotate: 360, scale: 1 }}` when sections enter viewport.
- **Particles:** R3F `Points` system for soft fur particles and colorful floating leaves.
- **Scroll:** Enable smooth behavior via `html { scroll-behavior: smooth }`.

### 5. Technical Requirements
- **Performance:** Support `prefers-reduced-motion` to toggle 3D loops.
- **Optimization:** Lower R3F segment counts and particle density for mobile devices.
- **Layout:** Enforce `body { overflow-x: hidden }`.
- **Assets:** 
  - Fur: `https://images.unsplash.com/photo-1589994160839-163cd26797d7?q=80&w=800`
  - Nature: `https://images.unsplash.com/photo-1501004318641-b39e6451bec6?q=80&w=800`