Glass Tile — React Glass Effect

A wall of glass bricks on the shared optical pipeline: one biconvex lens lives in a layer that travels to the hovered brick and bulges through it — a single renderer, however many bricks.

View source

Starting live preview

Usage

import { GlassTile } from "@/components/GlassTile";

export function Wall() {
  return <div style={{ height: 520 }}><GlassTile interactive
    {...{
      interactive: true,
      columns: 4,
      refraction: 0.55,
      dispersion: 0.45,
      tint: "#e0eef4"
    }}
  /></div>;
}

Implementation notes & API

A responsive grid of glass bricks; the travelling lens gives the hovered brick refraction, dispersion and rim bulge (pActive drives it), so hover feedback stays one draw call. tiles accepts your own brick labels/content; without it a neutral wall renders. Provide a sized parent. columns, gap and tileHeight shape the wall; refraction is the resting bend, dispersion the spectral split, rim the Fresnel edge, tint the glass color. Pointer-free layouts keep the resting bend only. Reduced motion stills the lens travel; keyboard focus moves it too.

Property	Type	Notes / default
`interactive`	`boolean`	false in the library; enabled in this preview
`fallback`	`ReactNode`	Shown when the renderer is unavailable
`className / style`	`string / CSSProperties`	Applied to the outer container

View source on GitHubFree for commercial projects · MIT