Textured glass

bunx shadcn@latest add @modulo/textured-glass

Requires an active Modulo key and a project configured for shadcn.

{
  "registries": {
    "@modulo": {
      "url": "<registry-url>/r/{name}.json",
      "headers": {
        "Authorization": "Bearer ${MODULO_REGISTRY_KEY}"
      }
    }
  }
}

Usage

import { TexturedGlass } from "@/components/textured-glass/TexturedGlass";

export default function Example() {
  return (
    <TexturedGlass
      src="/photo.jpg"
      alt="Portrait through textured glass"
      roughness={0.68}
      distortion={0.012}
    />
  );
}

React, Three.js, and Transformers.js. All six source files install together. Give the component an image URL and a bounded container.

Interaction

Move the pointer across the image to change the camera angle and light. An estimated depth map shapes the photograph into a mesh behind the glass. Closer objects move differently from distant ones. Focus the image and use the arrow keys for keyboard control.

Focus depth ranges from distant objects at 0 to nearby objects at 1. Focus blur softens objects outside that depth. Object depth controls the mesh relief. Depth map displays the estimate, with brighter areas closer to you.

Uploads stay in your browser. The first upload downloads Depth Anything V2 Small and analyzes the image in a worker. Later uploads reuse the model. The default image uses its precomputed depth map. The demo accepts images up to 20 MB. Use default restores stay.jpeg. Save PNG captures the current view.

Depth is estimated from one photograph. Large movements can stretch object boundaries where hidden image content is unavailable.

Pause freezes the camera and light. Hidden tabs and offscreen previews stop rendering. Reduced motion keeps a still view while image uploads and settings remain available.

Reconstructed from Neilson Koerner-Safrata's video. The original shader is unpublished, so exact fidelity has not been verified.