A cool multi-layer image component for React

Sep 08, 2020
A cool multi-layer image component for React


react-layered-image is an interactive, multi-layer image component for React, inspired by the Apple TV layered images.

View Demo View Github


  • Runs at 60fps on Chrome 54+, Firefox 49+, Safari 6.1+
  • Preserves aspect ratio through resizing
  • Loads images asynchronously


npm install react-layered-image

Basic example

import * as React from "react"; import { render } from "react-dom"; import LayeredImage from "react-layered-image"; const style = { position: "absolute", top: 0, right: 0, bottom: 0, left: 0, display: "flex", justifyContent: "center", alignItems: "center", }; const layers = [ "", "", "", ]; render( <div style={style}> <LayeredImage layers={layers} style={{ width: 400 }} /> </div>, document.getElementById("root"), );


By default, LayeredImage has a width of 100%. You can set the CSS
width property via a class name or via the style prop
directly. You can use any length or percentage value.

layersArray<string>Required. Array of image URLs. Use images of same dimension for best results.
aspectRationumber16 / 9Aspect ratio (width / height) of the element.
borderRadiusnumber6Radius of the element.
transitionDurationnumber0.15Duration of the transition.
transitionTimingFunctionstring"ease-out"Timing function of the transition.
lightColorstring"#fff"Color of the light element.
lightOpacitynumber0.2Opacity of the light element.
shadowColorstring"#000"Color of the shadow element.
shadowOpacitynumber0.6Opacity of the shadow element.


Start the webpack development server:

npm run dev

Use Commitizen to commit changes:

npm run commit