Components / Prism Glass

Prism Glass

A GPU refractive lens — spectral dispersion, uniform frost and a directional rim light, from an SDF-defined shape with no 3D model involved. It refracts the texture you hand it, not the DOM behind it.

Usage

import PrismGlass from '@/components/prism-glass'

<PrismGlass
  image={photo}
  shape="circle"
  mode="cursor"
  size={20}
  refraction={100}
  depth={60}
  dispersion={60}
/>

Installation

npx shadcn@latest add https://morphiq.prathampatel.design/r/prism-glass.json

Model

n₁·sin θ₁ = n₂·sin θ₂,   n = n(λ)

refraction through an SDF-shaped lens, with the index varying by wavelength

Props

Property	Type	Default	Description
`image`	`string`	`'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg=='`	Image URL rendered full-bleed behind (and refracted by) the glass.
`texture`	`{ readonly isTexture: true }`	—	A three.js texture to refract instead of `image` — a render target's texture, for scene glass. Its sampler settings are left as you set them.
`transparent`	`boolean`	`false`	Let the page show through where the lens is not, instead of drawing `image` full-bleed behind it.
`mask`	`string`	—	Silhouette (SVG or PNG) used as the lens outline. Overrides `shape`. Converted to a signed-distance field on load, so curves work.
`shape`	`'circle' \| 'rect' \| 'pill' \| 'cursor'`	`'circle'`	Lens outline. `pill` is a rounded rect with fully-rounded ends.
`mode`	`'cursor' \| 'static'`	`'cursor'`	`cursor` follows the pointer; `static` sits at `position`.
`size`	`number \| [number, number]`	`20`	circle/cursor: radius i.e. half-height (0-100). rect/pill: `[width, height]`.
`radius`	`number`	`7`	Corner radius (0-100) for `shape="rect"`. Ignored otherwise.
`position`	`[number, number]`	`[0.5, 0.5]`	Position in `static` mode, normalised `[x, y]` from 0 to 1.
`follow`	`number`	`0.09`	Follow easing. 0 snaps instantly; higher trails more.
`refraction`	`number`	`100`	Master strength (0-100). At 0 the glass is invisible.
`depth`	`number`	`60`	Reach of the refraction band and the warp magnitude (0-100).
`dispersion`	`number`	`0`	Spectral colour separation (0-100).
`frost`	`number`	`0`	Uniform frosting across the lens (0-100).
`splay`	`number`	`0`	Tangential stretch along the edge (0-100).
`lightAngle`	`number`	`45`	Direction of the rim light, in degrees.
`lightIntensity`	`number`	`100`	Rim light brightness (0-100).
`dpr`	`number \| [number, number]`	`[1, 2]`	Device pixel ratio passed to the renderer.