Elastic Sticker

A sticker you can peel off the page and paste back

elastic-sticker-tw

Customize

Image

Border

Back

Sheen

Width

300px

Radius

20px

Border Width

8px

Sheen Strength

0.60

Rotation

-4°

Lift

80px

Tilt

28°

Bend

0.50

Elasticity

0.50

Shadow

0.50

Hover Peel

0.50

Autoplay Speed

1.00

Idle Delay

2.50s

AutoplayIdle HintSnap BackDraggable

Props

Name	Type	Default	Description
`src`	string	`Abstract color study`	Image printed on the sticker. Transparent PNG or SVG images become die-cut stickers whose border follows their outline.
`alt`	string	`"Sticker"`	Accessible name of the sticker.
`width`	number	`300`	Width of the sticker in pixels, border included. It shrinks to fit narrower containers.
`height`	number	`—`	Height in pixels. Defaults to the image's own aspect ratio.
`radius`	number	`20`	Corner radius in pixels. Die-cut stickers follow their outline instead.
`border`	number	`8`	Width of the die-cut border around the image, in pixels. 0 prints the image edge to edge.
`borderColor`	string	`"#FFFFFF"`	Colour of the die-cut border.
`backColor`	string	`"#E9E7EF"`	Colour of the sticker's back, seen when a corner curls over.
`sheenColor`	string	`"#FFFFFF"`	Colour of the light reflected by the surface as it bends and tilts.
`finish`	"gloss" \| "matte" \| "holo"	`"gloss"`	Surface of the print. holo adds a foil rainbow that shifts with the viewing angle.
`sheen`	number	`0.6`	Strength of the reflections, from 0 (none) to 1.
`rotation`	number	`0`	Resting angle in degrees, for a hand-placed look.
`lift`	number	`80`	How far the sticker rises toward you while held, in pixels.
`tilt`	number	`28`	Largest lean in degrees as the sticker swings behind fast moves.
`bend`	number	`0.5`	How much the sheet curls while held, from 0 (a stiff card) to 1 (thin paper).
`elasticity`	number	`0.5`	How long the sheet keeps wobbling after a stop, from 0 to 1.
`shadow`	number	`0.5`	Strength of the shadow, which softens and spreads as the sticker lifts.
`hoverPeel`	number	`0.5`	How far the corner nearest the pointer curls up on hover. 0 turns it off.
`idleHint`	boolean	`true`	Lift a corner now and then, so visitors see the sticker can be peeled.
`draggable`	boolean	`true`	Let the pointer, touch and arrow keys move the sticker.
`bounds`	"parent" \| "none"	`"parent"`	Keep the sticker inside its parent element, with a rubbery pull at the edges.
`snapBack`	boolean	`false`	Return the sticker to where it started when it is released.
`raiseOnDrag`	boolean	`true`	Bring the sticker in front of other stickers when it is picked up.
`autoplay`	boolean	`false`	Peel the sticker up and swing it around on its own while nobody is interacting.
`autoplaySpeed`	number	`1`	Speed of that demonstration.
`idleDelay`	number	`2.5`	Seconds of inactivity before autoplay resumes.
`defaultPosition`	{ x: number; y: number }	`{ x: 0, y: 0 }`	Starting offset from where the sticker sits in the layout, in pixels.
`onDragStart`	() => void	`—`	Called when the sticker is picked up.
`onDragEnd`	(position: { x: number; y: number }) => void	`—`	Called with the offset where the sticker lands, after a drag or a keyboard move.
`ref`	{ peel, reset, moveTo }	`—`	peel() lifts the sticker and sets it back down. reset() returns it home. moveTo(x, y) glides it to an offset.
`className`	string	`—`	Classes for the sticker element.
`style`	CSSProperties	`—`	Inline styles for the sticker element.

srcstring

Image printed on the sticker. Transparent PNG or SVG images become die-cut stickers whose border follows their outline.

DefaultAbstract color study

altstring

Accessible name of the sticker.

Default"Sticker"

widthnumber

Width of the sticker in pixels, border included. It shrinks to fit narrower containers.

Default300

heightnumber

Height in pixels. Defaults to the image's own aspect ratio.

Default—

radiusnumber

Corner radius in pixels. Die-cut stickers follow their outline instead.

Default20

bordernumber

Width of the die-cut border around the image, in pixels. 0 prints the image edge to edge.

Default8

borderColorstring

Colour of the die-cut border.

Default"#FFFFFF"

backColorstring

Colour of the sticker's back, seen when a corner curls over.

Default"#E9E7EF"

sheenColorstring

Colour of the light reflected by the surface as it bends and tilts.

Default"#FFFFFF"

finish"gloss" | "matte" | "holo"

Surface of the print. holo adds a foil rainbow that shifts with the viewing angle.

Default"gloss"

sheennumber

Strength of the reflections, from 0 (none) to 1.

Default0.6

rotationnumber

Resting angle in degrees, for a hand-placed look.

Default0

liftnumber

How far the sticker rises toward you while held, in pixels.

Default80

tiltnumber

Largest lean in degrees as the sticker swings behind fast moves.

Default28

bendnumber

How much the sheet curls while held, from 0 (a stiff card) to 1 (thin paper).

Default0.5

elasticitynumber

How long the sheet keeps wobbling after a stop, from 0 to 1.

Default0.5

shadownumber

Strength of the shadow, which softens and spreads as the sticker lifts.

Default0.5

hoverPeelnumber

How far the corner nearest the pointer curls up on hover. 0 turns it off.

Default0.5

idleHintboolean

Lift a corner now and then, so visitors see the sticker can be peeled.

Defaulttrue

draggableboolean

Let the pointer, touch and arrow keys move the sticker.

Defaulttrue

bounds"parent" | "none"

Keep the sticker inside its parent element, with a rubbery pull at the edges.

Default"parent"

snapBackboolean

Return the sticker to where it started when it is released.

Defaultfalse

raiseOnDragboolean

Bring the sticker in front of other stickers when it is picked up.

Defaulttrue

autoplayboolean

Peel the sticker up and swing it around on its own while nobody is interacting.

Defaultfalse

autoplaySpeednumber

Speed of that demonstration.

Default1

idleDelaynumber

Seconds of inactivity before autoplay resumes.

Default2.5

defaultPosition{ x: number; y: number }

Starting offset from where the sticker sits in the layout, in pixels.

Default{ x: 0, y: 0 }

onDragStart() => void

Called when the sticker is picked up.

Default—

onDragEnd(position: { x: number; y: number }) => void

Called with the offset where the sticker lands, after a drag or a keyboard move.

Default—

ref{ peel, reset, moveTo }

peel() lifts the sticker and sets it back down. reset() returns it home. moveTo(x, y) glides it to an offset.

Default—

classNamestring

Classes for the sticker element.

Default—

styleCSSProperties

Inline styles for the sticker element.

Default—

Name

Type

Default

Description

src

string

Abstract color study

Image printed on the sticker. Transparent PNG or SVG images become die-cut stickers whose border follows their outline.

alt

string

"Sticker"

Accessible name of the sticker.

width

number

300

Width of the sticker in pixels, border included. It shrinks to fit narrower containers.

height

number

—

Height in pixels. Defaults to the image's own aspect ratio.

radius

number

20

Corner radius in pixels. Die-cut stickers follow their outline instead.

border

number

8

Width of the die-cut border around the image, in pixels. 0 prints the image edge to edge.

borderColor

string

"#FFFFFF"

Colour of the die-cut border.

backColor

string

"#E9E7EF"

Colour of the sticker's back, seen when a corner curls over.

sheenColor

string

"#FFFFFF"

Colour of the light reflected by the surface as it bends and tilts.

finish

"gloss" | "matte" | "holo"

"gloss"

Surface of the print. holo adds a foil rainbow that shifts with the viewing angle.

sheen

number

0.6

Strength of the reflections, from 0 (none) to 1.

rotation

number

0

Resting angle in degrees, for a hand-placed look.

lift

number

80

How far the sticker rises toward you while held, in pixels.

tilt

number

28

Largest lean in degrees as the sticker swings behind fast moves.

bend

number

0.5

How much the sheet curls while held, from 0 (a stiff card) to 1 (thin paper).

elasticity

number

0.5

How long the sheet keeps wobbling after a stop, from 0 to 1.

shadow

number

0.5

Strength of the shadow, which softens and spreads as the sticker lifts.

hoverPeel

number

0.5

How far the corner nearest the pointer curls up on hover. 0 turns it off.

idleHint

boolean

true

Lift a corner now and then, so visitors see the sticker can be peeled.

draggable

boolean

true

Let the pointer, touch and arrow keys move the sticker.

bounds

"parent" | "none"

"parent"

Keep the sticker inside its parent element, with a rubbery pull at the edges.

snapBack

boolean

false

Return the sticker to where it started when it is released.

raiseOnDrag

boolean

true

Bring the sticker in front of other stickers when it is picked up.

autoplay

boolean

false

Peel the sticker up and swing it around on its own while nobody is interacting.

autoplaySpeed

number

1

Speed of that demonstration.

idleDelay

number

2.5

Seconds of inactivity before autoplay resumes.

defaultPosition

{ x: number; y: number }

{ x: 0, y: 0 }

Starting offset from where the sticker sits in the layout, in pixels.

onDragStart

() => void

—

Called when the sticker is picked up.

onDragEnd

(position: { x: number; y: number }) => void

—

Called with the offset where the sticker lands, after a drag or a keyboard move.

ref

{ peel, reset, moveTo }

—

peel() lifts the sticker and sets it back down. reset() returns it home. moveTo(x, y) glides it to an offset.

className

string

—

Classes for the sticker element.

style

CSSProperties

—

Inline styles for the sticker element.