Emoji Mesh

System Instruction (Optional but Recommended) Act as a World-Class Frontend Engineer & Creative Coder. You specialize in React, Three.js, React Three Fiber, and Tailwind CSS. You prioritize performance (using InstancedMesh), aesthetic polish (glassmorphism, smooth transitions), and responsive design. Goal Build a React application that takes any emoji and renders it as a 3D cloud of particles (voxels) using Three.js. The user can interact with the particles, change display modes, and download screenshots. Tech Stack React 19 Tailwind CSS (for UI) @react-three/fiber (for the 3D scene) @react-three/drei (for Controls, Environment, Shadows) three (Core library) @heroicons/react (UI Icons) Core Features & Architecture The Voxelizer Component (Voxelizer.tsx) Logic Create an off-screen HTML5 Canvas. Render the selected emoji text into the center of the canvas using a robust font stack: - "Apple Color Emoji" - "Segoe UI Emoji" - "Noto Color Emoji" Append \uFE0F to force emoji presentation. Sampling Read the pixel data (getImageData). Map pixels with alpha > 50 to 3D positions. Modes Flat - Map X/Y coordinates directly to the 3D grid. Volumetric - Implement an inflation algorithm. - Calculate the distance of every solid pixel to the nearest empty pixel. - Use this distance to create thickness (z-axis depth), making the emoji look like a 3D inflated balloon or sphere. Rendering Use THREE.InstancedMesh for high performance (rendering 2000+ particles). Particle Style Allow toggling between simple cubes and tiny plane meshes using the emoji itself as a texture. Interaction Implement a physics-like effect in useFrame. When the mouse hovers over particles, they should gently repel and rotate away from the cursor, then return to their original position. The Main UI (App.tsx) Layout A full-screen dark canvas background. Responsiveness Desktop - A floating glass-morphism sidebar on the right (blurred background, translucent white borders). Mobile - The sidebar transforms into a bottom sheet/drawer that slides up from the bottom. Controls Emoji Grid - A scrollable grid of curated emojis with pagination. Display Mode - Toggle between "Flat" and "Volumetric". Sliders - Control "Density" (resolution of the sampling canvas). - Control "Voxel Scale" (particle size). Colors - Color pickers for the "Tint" (lighting/particle color). - Color picker for "Background". Toggle - Switch between "Emoji" texture particles and "Square" geometry. Capture Button - A generic button in the bottom-left corner labeled "📸 Capture". - When clicked, it must snapshot the WebGL canvas and download it as a PNG. - Requires preserveDrawingBuffer: true in Canvas config. Visual Aesthetic (Crucial) Theme - Dark, Cyberpunk / High-end tech feel. Materials - Use MeshStandardMaterial with slight roughness. Lighting - Ambient light + Point lights to create depth. UI Style - “Liquid Glass” - Heavily rely on: - backdrop-blur - bg-white/10 - border-white/20 - rounded-[2rem] Animations - Smooth transitions for the sidebar opening/closing: - translate-x on desktop - translate-y on mobile Scene Setup Add OrbitControls (with auto-rotate disabled by default). Add ContactShadows below the model to ground it. Add Environment (preset: "city") for realistic reflections.