Origami 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 OrigamiReveal from "./OrigamiReveal";

export default function Example() {
  return (
    <OrigamiReveal
      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%22url(%23bg)%22%20d%3D%22M0%200h800v1000H0z%22%2F%3E%3Cellipse%20cx%3D%22423%22%20cy%3D%22792%22%20rx%3D%22280%22%20ry%3D%2285%22%20fill%3D%22url(%23shade)%22%2F%3E%3Cpath%20fill%3D%22url(%23blue)%22%20d%3D%22m230%20290%20190-70%20180%20150-50%20350-160%2095-170-190Z%22%2F%3E%3Cpath%20fill%3D%22%23bdc9d0%22%20d%3D%22m230%20290%20190-70-30%20340-170%2065Z%22%2F%3E%3Cpath%20fill%3D%22%23718ca1%22%20d%3D%22m420%20220%20180%20150-175%20170-35%2020Z%22%2F%3E%3Cpath%20fill%3D%22%23344b61%22%20d%3D%22m425%20540%20175-170-50%20350-160%2095Z%22%2F%3E%3Cpath%20fill%3D%22%239bafbd%22%20d%3D%22m220%20625%20170-65v255Z%22%2F%3E%3C%2Fsvg%3E"}
      alt={"Folded blue sculpture on warm stone"}
      cover={"UNFOLD\nSOMETHING"}
      color={"#c5b3cc"}
      inkColor={"#3a2d40"}
      duration={1100}
      aspectRatio={"4 / 3"}
      defaultOpen={false}
      label={"Fold or unfold the image cover"}
      style={{
        "fontSize": 36,
        "fontWeight": 600,
        "letterSpacing": "-.05em",
        "whiteSpace": "pre-line"
      }}
    />
  );
}

Using Origami Reveal

Supply the folded cover through cover and the image beneath through src. aspectRatio defines the resting composition.

Use open with onOpenChange for controlled expansion. Provide alt for the image and label for the reveal control.

Props

Name	Type	Required	Default	Description
src	string	No	""	Image URL revealed beneath the folded paper.
alt	string	No	""	Accessible description of the revealed image.
cover	ReactNode	No	undefined	Text or non-interactive React content on the folded cover.
open	boolean	No	undefined	Optional controlled unfolded state.
defaultOpen	boolean	No	false	Initial unfolded state when uncontrolled.
onOpenChange	function	No	undefined	Called with the requested unfolded state.
color	string	No	"#d4bfdc"	Paper colour; the four faces derive subtle shading from it.
inkColor	string	No	"#33283e"	Cover content colour.
duration	number	No	900	3D folding transition duration in milliseconds.
aspectRatio	string	No	"4 / 3"	CSS aspect ratio for the bounded viewport.
label	string	No	"Toggle folded cover"	Accessible label for the folding toggle.
className	string	No	""	Additional classes merged with component styles.
style	CSSProperties	No	undefined	Inline styles for caller-defined sizing, typography, and appearance.