Image Trail 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 ImageTrail from "./ImageTrail";

export default function Example() {
  return (
    <ImageTrail
      images={[
        "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%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%23d8ad8c%22%20d%3D%22M0%200h600v700H0z%22%2F%3E%3Ccircle%20cx%3D%22390%22%20cy%3D%22190%22%20r%3D%2290%22%20fill%3D%22%23f9d7ae%22%2F%3E%3Cpath%20d%3D%22M0%20450Q200%20190%20600%20410V700H0Z%22%20fill%3D%22%23b78461%22%2F%3E%3Cpath%20d%3D%22M0%20520Q380%20300%20600%20490V700H0Z%22%20fill%3D%22%23805848%22%2F%3E%3Cpath%20d%3D%22M0%20650Q250%20400%20600%20620V700H0Z%22%20fill%3D%22%234b3935%22%2F%3E%3Cpath%20d%3D%22M0%200h600v700H0z%22%20filter%3D%22url(%23n)%22%20opacity%3D%22.085%22%2F%3E%3C%2Fsvg%3E",
        "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%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%23234652%22%20d%3D%22M0%200h600v700H0z%22%2F%3E%3Cpath%20d%3D%22M-50%20560C120%2020%20300%20750%20670%20120%22%20fill%3D%22none%22%20stroke%3D%22%23648b90%22%20stroke-width%3D%22250%22%2F%3E%3Cpath%20d%3D%22M-50%20560C120%2020%20300%20750%20670%20120%22%20fill%3D%22none%22%20stroke%3D%22%2394b2af%22%20stroke-width%3D%22155%22%2F%3E%3Cpath%20d%3D%22M-50%20560C120%2020%20300%20750%20670%20120%22%20fill%3D%22none%22%20stroke%3D%22%23c1d0c4%22%20stroke-width%3D%2265%22%2F%3E%3Cpath%20d%3D%22M0%200h600v700H0z%22%20filter%3D%22url(%23n)%22%20opacity%3D%22.085%22%2F%3E%3C%2Fsvg%3E",
        "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%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%23a35574%22%20d%3D%22M0%200h600v700H0z%22%2F%3E%3Ccircle%20cx%3D%22300%22%20cy%3D%22350%22%20r%3D%22205%22%20fill%3D%22%23c77488%22%2F%3E%3Cellipse%20cx%3D%22300%22%20cy%3D%22350%22%20rx%3D%2270%22%20ry%3D%22230%22%20fill%3D%22%23f4c4bd%22%20transform%3D%22rotate(-40%20300%20350)%22%2F%3E%3Cellipse%20cx%3D%22300%22%20cy%3D%22350%22%20rx%3D%2270%22%20ry%3D%22230%22%20fill%3D%22%23e99b9f%22%20transform%3D%22rotate(40%20300%20350)%22%2F%3E%3Ccircle%20cx%3D%22300%22%20cy%3D%22350%22%20r%3D%2262%22%20fill%3D%22%2363344e%22%2F%3E%3Cpath%20d%3D%22M0%200h600v700H0z%22%20filter%3D%22url(%23n)%22%20opacity%3D%22.085%22%2F%3E%3C%2Fsvg%3E"
      ]}
      children={"Leave an impression."}
      imageWidth={140}
      imageHeight={180}
      threshold={65}
      lifetime={1200}
      maxImages={7}
      rotation={14}
      autoPlay={true}
      minHeight={420}
    />
  );
}

Using Image Trail

Supply a collection of images and leave room in the container for the trail. threshold controls how often pointer movement creates another image.

Use maxImages and lifetime to keep the trail compact. autoPlay can provide movement when there is no pointer interaction.

Props

Name	Type	Required	Default	Description
images	string[]	No	[]	Image source strings. Data URLs and remote URLs are supported; an empty array produces no trail.
children	ReactNode	No	undefined	Optional foreground content.
imageWidth	number	No	140	Trail image width in pixels.
imageHeight	number	No	180	Trail image height in pixels.
threshold	number	No	65	Pointer travel in pixels before the next image appears.
lifetime	number	No	1200	Lifetime of each image in milliseconds.
maxImages	number	No	7	Maximum simultaneous images, capped at 20.
rotation	number	No	14	Maximum alternating rotation in degrees.
autoPlay	boolean	No	false	Move the trail automatically while visible. Off by default; touch users can tap to place an image.
minHeight	number \| string	No	380	Minimum height in pixels or a CSS length. The component can fill a taller parent.
className	string	No	""	Additional CSS classes, merged with the component styles.
style	CSSProperties	No	undefined	Inline styles for caller-defined sizing and visual overrides.