Snapshot Trail

A cursor trail of photos that lean, toss and settle like prints

snapshot-trail-tw

Customize

Frame Color

Background

Image Width

168px

Image Height

236px

Radius

10px

Frame Width

8px

Shadow

0.50

Spacing

64px

Lifetime

1.40s

Max Count

Rotation

0°

Lean

0.40

Tilt

14°

Toss

0.12

Friction

0.40

Gravity

Depth

0.00

Spin

0.00

Enter Scale

0.60

Exit Scale

0.82

Bounce

0.45

Blur

0.60

Motion Blur

0.60

Desaturate

0.00

Autoplay Speed

1.00

Burst

AutoplayPaused

Props

Name	Type	Default	Description
`images`	(string \| { src: string; alt?: string })[]	`studio portrait collection`	Photos for the trail, used in turn (up to 32). Images must allow cross-origin loading.
`imageWidth`	number	`168`	Width of a snapshot in pixels.
`imageHeight`	number	`236`	Height of a snapshot in pixels.
`borderRadius`	number	`10`	Corner radius in pixels.
`fit`	"cover" \| "contain"	`"cover"`	Cover crops every photo to the snapshot size; contain keeps each photo's own proportions inside it.
`position`	"center" \| "top" \| "bottom" \| "left" \| "right"	`"center"`	Which part of a photo stays in view when it is cropped.
`frame`	"none" \| "border" \| "polaroid"	`"none"`	Print each photo with an even border or an instant-film frame with a deeper bottom edge.
`frameWidth`	number	`8`	Width of the print border in pixels.
`frameColor`	string	`"#FAF8F4"`	Colour of the print border.
`shadow`	number	`0.5`	Strength and softness of the shadow under each snapshot.
`spacing`	number	`64`	Distance in pixels the pointer travels between snapshots. Lower values make a denser trail.
`lifetime`	number	`1.4`	Seconds a snapshot stays before it leaves.
`maxCount`	number	`18`	Most snapshots on screen at once. The oldest leave early when the limit is reached.
`rotation`	number	`0`	Random rotation of each snapshot, up to this many degrees either way.
`lean`	number	`0.4`	How much snapshots lean into the direction the pointer is moving.
`tilt`	number	`14`	3D tilt in degrees as a snapshot is swept along, easing back flat as it settles.
`toss`	number	`0.12`	How much of the pointer's speed a snapshot keeps, so it slides on after it is dropped.
`friction`	number	`0.4`	How long a tossed snapshot keeps sliding, from 0 (stops quickly) to 1 (glides).
`gravity`	number	`0`	Downward pull in pixels per second squared. Snapshots fall and tumble away.
`depth`	number	`0`	Speed at which snapshots recede into the distance. Negative values bring them toward you.
`spin`	number	`0`	How much tossed or falling snapshots spin.
`enterScale`	number	`0.6`	Scale a snapshot grows from when it appears.
`exitScale`	number	`0.82`	Scale a snapshot shrinks to as it leaves.
`bounce`	number	`0.45`	Springiness of the entrance, from 0 (smooth) to 1 (bouncy).
`blur`	number	`0.6`	How soft a snapshot is as it comes into focus and as it leaves.
`motionBlur`	number	`0.6`	Blur along the direction of travel for moving snapshots.
`desaturate`	number	`0`	How much snapshots lose their colour as they age.
`stacking`	"newest" \| "oldest"	`"newest"`	Whether new snapshots land on top of the trail or slide in underneath it.
`order`	"sequence" \| "random"	`"sequence"`	Use the photos in order, or pick them at random.
`autoplay`	boolean	`true`	Draw trails on its own with natural strokes while the pointer is away, and three seconds after it stops moving.
`autoplaySpeed`	number	`1`	Speed of the autoplay strokes.
`burst`	number	`6`	Snapshots that pop out in a ring when you click or tap. 0 turns it off.
`layer`	"front" \| "back"	`"front"`	Draw the trail over the component's children, or behind them.
`backgroundColor`	string	`"transparent"`	Background of the component. Shadows and edges adapt to light and dark backgrounds.
`paused`	boolean	`false`	Stops new snapshots. Reduced-motion users get snapshots that fade in and out without moving.
`dpr`	number	`2`	Maximum device pixel ratio for the canvas.
`children`	ReactNode	`—`	Content inside the trail area. Clicks on its links and buttons never trigger a burst.
`ref`	{ burst, clear }	`—`	burst(x?, y?, count?) pops snapshots from a position given in fractions of the size; clear() lets every snapshot leave.
`className`	string	`—`	Classes for the root element. It fills its parent, with a 320px minimum height.
`style`	CSSProperties	`—`	Inline styles for the root element.

images(string | { src: string; alt?: string })[]

Photos for the trail, used in turn (up to 32). Images must allow cross-origin loading.

Defaultstudio portrait collection

imageWidthnumber

Width of a snapshot in pixels.

Default168

imageHeightnumber

Height of a snapshot in pixels.

Default236

borderRadiusnumber

Corner radius in pixels.

Default10

fit"cover" | "contain"

Cover crops every photo to the snapshot size; contain keeps each photo's own proportions inside it.

Default"cover"

position"center" | "top" | "bottom" | "left" | "right"

Which part of a photo stays in view when it is cropped.

Default"center"

frame"none" | "border" | "polaroid"

Print each photo with an even border or an instant-film frame with a deeper bottom edge.

Default"none"

frameWidthnumber

Width of the print border in pixels.

Default8

frameColorstring

Colour of the print border.

Default"#FAF8F4"

shadownumber

Strength and softness of the shadow under each snapshot.

Default0.5

spacingnumber

Distance in pixels the pointer travels between snapshots. Lower values make a denser trail.

Default64

lifetimenumber

Seconds a snapshot stays before it leaves.

Default1.4

maxCountnumber

Most snapshots on screen at once. The oldest leave early when the limit is reached.

Default18

rotationnumber

Random rotation of each snapshot, up to this many degrees either way.

Default0

leannumber

How much snapshots lean into the direction the pointer is moving.

Default0.4

tiltnumber

3D tilt in degrees as a snapshot is swept along, easing back flat as it settles.

Default14

tossnumber

How much of the pointer's speed a snapshot keeps, so it slides on after it is dropped.

Default0.12

frictionnumber

How long a tossed snapshot keeps sliding, from 0 (stops quickly) to 1 (glides).

Default0.4

gravitynumber

Downward pull in pixels per second squared. Snapshots fall and tumble away.

Default0

depthnumber

Speed at which snapshots recede into the distance. Negative values bring them toward you.

Default0

spinnumber

How much tossed or falling snapshots spin.

Default0

enterScalenumber

Scale a snapshot grows from when it appears.

Default0.6

exitScalenumber

Scale a snapshot shrinks to as it leaves.

Default0.82

bouncenumber

Springiness of the entrance, from 0 (smooth) to 1 (bouncy).

Default0.45

blurnumber

How soft a snapshot is as it comes into focus and as it leaves.

Default0.6

motionBlurnumber

Blur along the direction of travel for moving snapshots.

Default0.6

desaturatenumber

How much snapshots lose their colour as they age.

Default0

stacking"newest" | "oldest"

Whether new snapshots land on top of the trail or slide in underneath it.

Default"newest"

order"sequence" | "random"

Use the photos in order, or pick them at random.

Default"sequence"

autoplayboolean

Draw trails on its own with natural strokes while the pointer is away, and three seconds after it stops moving.

Defaulttrue

autoplaySpeednumber

Speed of the autoplay strokes.

Default1

burstnumber

Snapshots that pop out in a ring when you click or tap. 0 turns it off.

Default6

layer"front" | "back"

Draw the trail over the component's children, or behind them.

Default"front"

backgroundColorstring

Background of the component. Shadows and edges adapt to light and dark backgrounds.

Default"transparent"

pausedboolean

Stops new snapshots. Reduced-motion users get snapshots that fade in and out without moving.

Defaultfalse

dprnumber

Maximum device pixel ratio for the canvas.

Default2

childrenReactNode

Content inside the trail area. Clicks on its links and buttons never trigger a burst.

Default—

ref{ burst, clear }

burst(x?, y?, count?) pops snapshots from a position given in fractions of the size; clear() lets every snapshot leave.

Default—

classNamestring

Classes for the root element. It fills its parent, with a 320px minimum height.

Default—

styleCSSProperties

Inline styles for the root element.

Default—

Name

Type

Default

Description

images

(string | { src: string; alt?: string })[]

studio portrait collection

Photos for the trail, used in turn (up to 32). Images must allow cross-origin loading.

imageWidth

number

168

Width of a snapshot in pixels.

imageHeight

number

236

Height of a snapshot in pixels.

borderRadius

number

10

Corner radius in pixels.

fit

"cover" | "contain"

"cover"

Cover crops every photo to the snapshot size; contain keeps each photo's own proportions inside it.

position

"center" | "top" | "bottom" | "left" | "right"

"center"

Which part of a photo stays in view when it is cropped.

frame

"none" | "border" | "polaroid"

"none"

Print each photo with an even border or an instant-film frame with a deeper bottom edge.

frameWidth

number

8

Width of the print border in pixels.

frameColor

string

"#FAF8F4"

Colour of the print border.

shadow

number

0.5

Strength and softness of the shadow under each snapshot.

spacing

number

64

Distance in pixels the pointer travels between snapshots. Lower values make a denser trail.

lifetime

number

1.4

Seconds a snapshot stays before it leaves.

maxCount

number

18

Most snapshots on screen at once. The oldest leave early when the limit is reached.

rotation

number

0

Random rotation of each snapshot, up to this many degrees either way.

lean

number

0.4

How much snapshots lean into the direction the pointer is moving.

tilt

number

14

3D tilt in degrees as a snapshot is swept along, easing back flat as it settles.

toss

number

0.12

How much of the pointer's speed a snapshot keeps, so it slides on after it is dropped.

friction

number

0.4

How long a tossed snapshot keeps sliding, from 0 (stops quickly) to 1 (glides).

gravity

number

0

Downward pull in pixels per second squared. Snapshots fall and tumble away.

depth

number

0

Speed at which snapshots recede into the distance. Negative values bring them toward you.

spin

number

0

How much tossed or falling snapshots spin.

enterScale

number

0.6

Scale a snapshot grows from when it appears.

exitScale

number

0.82

Scale a snapshot shrinks to as it leaves.

bounce

number

0.45

Springiness of the entrance, from 0 (smooth) to 1 (bouncy).

blur

number

0.6

How soft a snapshot is as it comes into focus and as it leaves.

motionBlur

number

0.6

Blur along the direction of travel for moving snapshots.

desaturate

number

0

How much snapshots lose their colour as they age.

stacking

"newest" | "oldest"

"newest"

Whether new snapshots land on top of the trail or slide in underneath it.

order

"sequence" | "random"

"sequence"

Use the photos in order, or pick them at random.

autoplay

boolean

true

Draw trails on its own with natural strokes while the pointer is away, and three seconds after it stops moving.

autoplaySpeed

number

1

Speed of the autoplay strokes.

burst

number

6

Snapshots that pop out in a ring when you click or tap. 0 turns it off.

layer

"front" | "back"

"front"

Draw the trail over the component's children, or behind them.

backgroundColor

string

"transparent"

Background of the component. Shadows and edges adapt to light and dark backgrounds.

paused

boolean

false

Stops new snapshots. Reduced-motion users get snapshots that fade in and out without moving.

dpr

number

2

Maximum device pixel ratio for the canvas.

children

ReactNode

—

Content inside the trail area. Clicks on its links and buttons never trigger a burst.

ref

{ burst, clear }

—

burst(x?, y?, count?) pops snapshots from a position given in fractions of the size; clear() lets every snapshot leave.

className

string

—

Classes for the root element. It fills its parent, with a 320px minimum height.

style

CSSProperties

—

Inline styles for the root element.