Shutter Gallery 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 ShutterGallery from "./ShutterGallery";

export default function Example() {
  return (
    <ShutterGallery
      items={[
        {
          "id": "arch",
          "title": "Blue hour",
          "description": "Light / Architecture",
          "image": "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20600%20700%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%22s%22%20cx%3D%22.3%22%20cy%3D%22.2%22%20r%3D%22.9%22%3E%3Cstop%20stop-color%3D%22%23f6eee1%22%2F%3E%3Cstop%20offset%3D%22.35%22%20stop-color%3D%22%23b9bec9%22%2F%3E%3Cstop%20offset%3D%22.65%22%20stop-color%3D%22%23505360%22%2F%3E%3Cstop%20offset%3D%22.82%22%20stop-color%3D%22%23d9d2ca%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2364636d%22%2F%3E%3C%2FradialGradient%3E%3ClinearGradient%20id%3D%22b%22%20x2%3D%22.8%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23adc7f5%22%2F%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%23718ac1%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%233d5184%22%2F%3E%3C%2FlinearGradient%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.7%22%20numOctaves%3D%223%22%20stitchTiles%3D%22stitch%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cpath%20fill%3D%22%23c9cec8%22%20d%3D%22M0%200h600v700H0z%22%2F%3E%3Cpath%20d%3D%22M100%20700V290a200%20200%200%200%201%20400%200v410%22%20fill%3D%22url(%23b)%22%2F%3E%3Cpath%20d%3D%22M165%20700V300a135%20135%200%200%201%20270%200v400%22%20fill%3D%22%23d5d7cf%22%2F%3E%3Cpath%20d%3D%22M225%20700V320a75%2075%200%200%201%20150%200v380%22%20fill%3D%22%23647ba7%22%2F%3E%3Ccircle%20cx%3D%22300%22%20cy%3D%22318%22%20r%3D%2248%22%20fill%3D%22%23f0d8af%22%2F%3E%3Cpath%20d%3D%22M0%20565h600v135H0%22%20fill%3D%22%23b9b9b0%22%20opacity%3D%22.2%22%2F%3E%3Cpath%20d%3D%22M0%200h600v700H0z%22%20filter%3D%22url(%23n)%22%20opacity%3D%22.045%22%2F%3E%3C%2Fsvg%3E",
          "alt": "Sculptural blue arches framing a pale gold sphere"
        },
        {
          "id": "chrome",
          "title": "Liquid metal",
          "description": "Material / Reflection",
          "image": "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20600%20700%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%22s%22%20cx%3D%22.3%22%20cy%3D%22.2%22%20r%3D%22.9%22%3E%3Cstop%20stop-color%3D%22%23f6eee1%22%2F%3E%3Cstop%20offset%3D%22.35%22%20stop-color%3D%22%23b9bec9%22%2F%3E%3Cstop%20offset%3D%22.65%22%20stop-color%3D%22%23505360%22%2F%3E%3Cstop%20offset%3D%22.82%22%20stop-color%3D%22%23d9d2ca%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2364636d%22%2F%3E%3C%2FradialGradient%3E%3ClinearGradient%20id%3D%22b%22%20x2%3D%22.8%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23adc7f5%22%2F%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%23718ac1%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%233d5184%22%2F%3E%3C%2FlinearGradient%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.7%22%20numOctaves%3D%223%22%20stitchTiles%3D%22stitch%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cpath%20fill%3D%22%2325252e%22%20d%3D%22M0%200h600v700H0z%22%2F%3E%3Cellipse%20cx%3D%22310%22%20cy%3D%22603%22%20rx%3D%22155%22%20ry%3D%2230%22%20fill%3D%22%230002%22%2F%3E%3Crect%20x%3D%22150%22%20y%3D%22115%22%20width%3D%22300%22%20height%3D%22450%22%20rx%3D%22150%22%20fill%3D%22url(%23s)%22%20transform%3D%22rotate(20%20300%20350)%22%2F%3E%3Crect%20x%3D%22240%22%20y%3D%22208%22%20width%3D%22120%22%20height%3D%22265%22%20rx%3D%2260%22%20fill%3D%22%23272731%22%20transform%3D%22rotate(20%20300%20350)%22%2F%3E%3Cpath%20d%3D%22M0%200h600v700H0z%22%20filter%3D%22url(%23n)%22%20opacity%3D%22.045%22%2F%3E%3C%2Fsvg%3E",
          "alt": "A polished silver loop against charcoal"
        },
        {
          "id": "coral",
          "title": "Warm geometry",
          "description": "Form / Colour",
          "image": "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20600%20700%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%22s%22%20cx%3D%22.3%22%20cy%3D%22.2%22%20r%3D%22.9%22%3E%3Cstop%20stop-color%3D%22%23f6eee1%22%2F%3E%3Cstop%20offset%3D%22.35%22%20stop-color%3D%22%23b9bec9%22%2F%3E%3Cstop%20offset%3D%22.65%22%20stop-color%3D%22%23505360%22%2F%3E%3Cstop%20offset%3D%22.82%22%20stop-color%3D%22%23d9d2ca%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2364636d%22%2F%3E%3C%2FradialGradient%3E%3ClinearGradient%20id%3D%22b%22%20x2%3D%22.8%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23adc7f5%22%2F%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%23718ac1%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%233d5184%22%2F%3E%3C%2FlinearGradient%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.7%22%20numOctaves%3D%223%22%20stitchTiles%3D%22stitch%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cpath%20fill%3D%22%23ead4b8%22%20d%3D%22M0%200h600v700H0z%22%2F%3E%3Ccircle%20cx%3D%22440%22%20cy%3D%22150%22%20r%3D%2276%22%20fill%3D%22%23f1d9b8%22%2F%3E%3Cpath%20d%3D%22M85%20615V365a215%20215%200%200%201%20430%200v250%22%20fill%3D%22%23bf6658%22%2F%3E%3Cpath%20d%3D%22M150%20615V372a150%20150%200%200%201%20300%200v243%22%20fill%3D%22%23d99079%22%2F%3E%3Cpath%20d%3D%22M215%20615V380a85%2085%200%200%201%20170%200v235%22%20fill%3D%22%23edb594%22%2F%3E%3Cpath%20d%3D%22M280%20615V385a20%2020%200%200%201%2040%200v230%22%20fill%3D%22%23593e42%22%2F%3E%3Cpath%20d%3D%22M0%200h600v700H0z%22%20filter%3D%22url(%23n)%22%20opacity%3D%22.045%22%2F%3E%3C%2Fsvg%3E",
          "alt": "Nested terracotta arches and a pale sun"
        },
        {
          "id": "mint",
          "title": "Quiet circles",
          "description": "Balance / Nature",
          "image": "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20600%20700%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%22s%22%20cx%3D%22.3%22%20cy%3D%22.2%22%20r%3D%22.9%22%3E%3Cstop%20stop-color%3D%22%23f6eee1%22%2F%3E%3Cstop%20offset%3D%22.35%22%20stop-color%3D%22%23b9bec9%22%2F%3E%3Cstop%20offset%3D%22.65%22%20stop-color%3D%22%23505360%22%2F%3E%3Cstop%20offset%3D%22.82%22%20stop-color%3D%22%23d9d2ca%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2364636d%22%2F%3E%3C%2FradialGradient%3E%3ClinearGradient%20id%3D%22b%22%20x2%3D%22.8%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23adc7f5%22%2F%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%23718ac1%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%233d5184%22%2F%3E%3C%2FlinearGradient%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.7%22%20numOctaves%3D%223%22%20stitchTiles%3D%22stitch%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cpath%20fill%3D%22%23c2cabd%22%20d%3D%22M0%200h600v700H0z%22%2F%3E%3Cpath%20d%3D%22M0%20530Q150%20290%20330%20430T650%20260V700H0Z%22%20fill%3D%22%2394aaa3%22%2F%3E%3Ccircle%20cx%3D%22300%22%20cy%3D%22310%22%20r%3D%22185%22%20fill%3D%22%233b6a64%22%2F%3E%3Ccircle%20cx%3D%22300%22%20cy%3D%22310%22%20r%3D%22125%22%20fill%3D%22%2390aaa0%22%2F%3E%3Ccircle%20cx%3D%22300%22%20cy%3D%22310%22%20r%3D%2260%22%20fill%3D%22%23ddd6bc%22%2F%3E%3Cpath%20d%3D%22M0%20610Q300%20470%20600%20520V700H0Z%22%20fill%3D%22%23537e73%22%2F%3E%3Cpath%20d%3D%22M0%200h600v700H0z%22%20filter%3D%22url(%23n)%22%20opacity%3D%22.045%22%2F%3E%3C%2Fsvg%3E",
          "alt": "Concentric green circles above an abstract landscape"
        }
      ]}
      defaultIndex={0}
      strips={7}
      duration={800}
      stagger={60}
      height={420}
      borderRadius={14}
      label={"Material studies"}
    />
  );
}

Using Shutter Gallery

Supply the images through items and choose strips for the number of vertical shutters. duration and stagger control the sequence.

Set height to preserve the layout while images change. Use onIndexChange to keep an external caption or indicator in sync.

Props

Name	Type	Required	Default	Description
items	object[]	No	[]	Array of { id, image, title?, description?, alt? }. Empty arrays render nothing.
defaultIndex	number	No	0	Initial image index.
onIndexChange	function	No	undefined	Called with the new image index after navigation.
strips	number	No	7	Number of vertical shutters, from 2 to 20.
duration	number	No	800	Duration of each shutter reveal in milliseconds.
stagger	number	No	60	Delay between shutters in milliseconds.
height	number \| string	No	400	Container height in pixels or a CSS length.
borderRadius	number	No	14	Corner radius in pixels.
label	string	No	"Image gallery"	Accessible gallery and navigation label.
className	string	No	""	Additional CSS classes, merged with the component styles.
style	CSSProperties	No	undefined	Inline styles for caller-defined sizing and visual overrides.