Iris Reveal 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 IrisReveal from "./IrisReveal";

export default function Example() {
  return (
    <IrisReveal
      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%237c909c%22%20d%3D%22M0%200h800v1000H0z%22%2F%3E%3Cellipse%20cx%3D%22420%22%20cy%3D%22820%22%20rx%3D%22260%22%20ry%3D%2280%22%20fill%3D%22url(%23shade)%22%2F%3E%3Crect%20x%3D%22235%22%20y%3D%22510%22%20width%3D%22330%22%20height%3D%22290%22%20rx%3D%22145%22%20fill%3D%22url(%23cream)%22%2F%3E%3Crect%20x%3D%22185%22%20y%3D%22260%22%20width%3D%22440%22%20height%3D%22250%22%20rx%3D%22125%22%20transform%3D%22rotate(-18%20405%20385)%22%20fill%3D%22url(%23blue)%22%2F%3E%3C%2Fsvg%3E"}
      alt={"Two rounded stone forms balanced in a blue studio"}
      cover={"A NEW\nPERSPECTIVE"}
      color={"#202b35"}
      inkColor={"#d9e4eb"}
      duration={1000}
      aspectRatio={"4 / 3"}
      defaultOpen={false}
      label={"Open or close image aperture"}
      style={{
        "fontSize": 34,
        "letterSpacing": "-.05em",
        "lineHeight": 1.15,
        "whiteSpace": "pre-line"
      }}
    />
  );
}

Using Iris Reveal

Put the closed-state content in cover and the revealed image in src. Provide alt for the image and label for the toggle.

Use open with onOpenChange when another control operates the aperture. aspectRatio reserves the image space before it loads.

Props

Name	Type	Required	Default	Description
src	string	No	""	Image URL beneath the cover.
alt	string	No	""	Accessible description of the image.
cover	ReactNode	No	undefined	Text or non-interactive React content on the cover.
open	boolean	No	undefined	Optional controlled open state.
defaultOpen	boolean	No	false	Initial open state when uncontrolled.
onOpenChange	function	No	undefined	Called with the requested open state.
color	string	No	"#1c2430"	Cover background.
inkColor	string	No	"#d6e0e7"	Cover text and ring colour.
duration	number	No	900	Aperture transition duration in milliseconds.
aspectRatio	string	No	"4 / 3"	CSS aspect ratio for the viewport.
label	string	No	"Toggle image reveal"	Accessible toggle label.
className	string	No	""	Additional classes merged with the component styles.
style	CSSProperties	No	undefined	Inline styles for caller-defined sizing, typography, and appearance.