Fluted Glass React Component

LIVE PREVIEWInteract with the component

Just React. No extra dependencies.

Copy the component and its CSS module into your project.

CSS Modules

Usage

Matches your current playground settings.

import FlutedGlass from "./FlutedGlass";

export default function Example() {
  return (
    <FlutedGlass
      src={"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22800%22%20height%3D%221000%22%20viewBox%3D%220%200%20800%201000%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22bg%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23e3d8c5%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23a6a09d%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22blue%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23bdd0dc%22%2F%3E%3Cstop%20offset%3D%22.45%22%20stop-color%3D%22%236e879f%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23283a50%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22cream%22%20x2%3D%221%22%20y2%3D%22.8%22%3E%3Cstop%20stop-color%3D%22%23f8e9d0%22%2F%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%23d4b38e%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23896854%22%2F%3E%3C%2FlinearGradient%3E%3CradialGradient%20id%3D%22shade%22%3E%3Cstop%20stop-color%3D%22%23272026%22%20stop-opacity%3D%22.4%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23272026%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Cpath%20fill%3D%22%23c8bfb0%22%20d%3D%22M0%200h800v1000H0z%22%2F%3E%3Ccircle%20cx%3D%22515%22%20cy%3D%22260%22%20r%3D%22100%22%20fill%3D%22%23eee2be%22%2F%3E%3Cpath%20d%3D%22M0%20640h200V520h200V400h200V280h200v720H0Z%22%20fill%3D%22%23a26450%22%2F%3E%3Cpath%20d%3D%22M0%20740h200V620h200V500h200V380h200v620H0Z%22%20fill%3D%22%23c58d72%22%2F%3E%3Cpath%20d%3D%22M0%20850h200V730h200V610h200V490h200v510H0Z%22%20fill%3D%22%23dfb397%22%2F%3E%3C%2Fsvg%3E"}
      alt={"A circular pale sun above terracotta architectural steps"}
      strips={14}
      distortion={1.6}
      label={"Focus to clear the glass"}
      aspectRatio={"4 / 3"}
      duration={650}
    />
  );
}

Using Fluted Glass

Use an image with clear shapes or contrast so the refraction remains visible. strips controls the number of glass ridges and distortion controls their strength.

Provide alt for the image and label for the reveal surface. Use revealed when the clear state should be controlled by another part of the interface.

Props

Name	Type	Required	Default	Description
src	string	No	""	Image URL to refract.
alt	string	No	""	Accessible description of the image.
strips	number	No	14	Number of glass ridges, clamped between 3 and 40.
distortion	number	No	1.6	Horizontal refraction scale per ridge, clamped to at least one.
revealed	boolean	No	undefined	Optional controlled clear state; otherwise hover or keyboard focus clears the image.
label	string	No	"Focus to reveal the image"	Accessible label for the focusable reveal surface.
aspectRatio	string	No	"4 / 3"	CSS aspect ratio for the image viewport.
duration	number	No	650	Refraction transition duration in milliseconds.
className	string	No	""	Additional classes merged with the component styles.
style	CSSProperties	No	undefined	Inline styles for caller-defined sizing, typography, and appearance.