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.

‍

‍

Google AI Studio
rare_prompts
Copy