Parallax Scene 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 ParallaxScene from "./ParallaxScene";

export default function Example() {
  return (
    <ParallaxScene
      layers={[
        {
          "id": "base",
          "depth": 0.2,
          "src": "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22600%22%20height%3D%22450%22%20viewBox%3D%220%200%20600%20450%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22p%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23f4e9d8%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23a59382%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cellipse%20cx%3D%22310%22%20cy%3D%22360%22%20rx%3D%22155%22%20ry%3D%2230%22%20fill%3D%22%234e3e3222%22%2F%3E%3Cpath%20d%3D%22m140%20280%20160-70%20170%2070-170%2080Z%22%20fill%3D%22%23eee0c9%22%2F%3E%3Cpath%20d%3D%22m140%20280%20160%2080v30l-160-80Z%22%20fill%3D%22%23bda990%22%2F%3E%3Cpath%20d%3D%22m300%20360%20170-80v30l-170%2080Z%22%20fill%3D%22url(%23p)%22%2F%3E%3C%2Fsvg%3E"
        },
        {
          "id": "ring",
          "depth": 0.7,
          "src": "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22600%22%20height%3D%22450%22%20viewBox%3D%220%200%20600%20450%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22r%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23ead7a3%22%2F%3E%3Cstop%20offset%3D%22.45%22%20stop-color%3D%22%23c6a36c%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23806448%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cellipse%20cx%3D%22340%22%20cy%3D%22208%22%20rx%3D%2280%22%20ry%3D%2296%22%20fill%3D%22none%22%20stroke%3D%22url(%23r)%22%20stroke-width%3D%2228%22%20transform%3D%22rotate(22%20340%20208)%22%2F%3E%3C%2Fsvg%3E"
        },
        {
          "id": "fold",
          "depth": 1.3,
          "src": "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22600%22%20height%3D%22450%22%20viewBox%3D%220%200%20600%20450%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22b%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23c4d1dc%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23697e9b%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22m194%20137%2088-39%2041%20147-107%2053Z%22%20fill%3D%22url(%23b)%22%2F%3E%3Cpath%20d%3D%22m282%2098%2078%2098-37%2049Z%22%20fill%3D%22%23556980%22%2F%3E%3Cpath%20d%3D%22m216%20298%20107-53%2037-49-29%20118Z%22%20fill%3D%22%23344b68%22%2F%3E%3C%2Fsvg%3E"
        },
        {
          "id": "orb",
          "depth": 1.8,
          "src": "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22600%22%20height%3D%22450%22%20viewBox%3D%220%200%20600%20450%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%22s%22%20cx%3D%22.3%22%20cy%3D%22.25%22%3E%3Cstop%20stop-color%3D%22%23e0b098%22%2F%3E%3Cstop%20offset%3D%22.7%22%20stop-color%3D%22%23bc806b%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23865447%22%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Cellipse%20cx%3D%22424%22%20cy%3D%22321%22%20rx%3D%2242%22%20ry%3D%229%22%20fill%3D%22%23493e3433%22%2F%3E%3Ccircle%20cx%3D%22420%22%20cy%3D%22283%22%20r%3D%2237%22%20fill%3D%22url(%23s)%22%2F%3E%3C%2Fsvg%3E"
        }
      ]}
      label={"A folded blue sculpture, brass ring and clay sphere on a stone plinth"}
      strength={24}
      background={"#d1c5b5"}
      aspectRatio={"4 / 3"}
      radius={20}
    />
  );
}

Using Parallax Scene

Supply transparent images with a shared canvas size through layers. Arrange them from back to front and give nearer objects larger depth values.

Describe the combined artwork with label, or leave it empty for decoration. The scene stays still on touch devices and under reduced motion, while pointer exit resets every layer.

Props

Name	Type	Required	Default	Description
layers	Array<{ id?, src, depth?, fit? }>	No	[]	Transparent image layers in back-to-front order. Depth defaults to one and fit to contain.
label	string	No	""	Accessible description for the combined illustration. An empty label makes the art decorative.
strength	number	No	24	Maximum pointer movement scale in pixels.
background	string	No	"#d1c5b5"	Scene background.
aspectRatio	string	No	"4 / 3"	Reserved frame aspect ratio.
radius	number	No	20	Frame corner radius.
children	ReactNode	No	undefined	Optional foreground content above the artwork.
className	string	No	""	Additional classes on the root element.
style	CSSProperties	No	undefined	Inline styles for sizing, typography and appearance.