Ember Reveal

A burning hole that reveals the next image

ember-reveal-tw

Customize

Ember

Char

Glow

1.00

Edge

1.00

Roughness

0.50

Detail

5.0

Scorch

0.70

Smoke

0.40

Sparks

0.50

Shimmer

0.60

Burn Duration

1.8s

Pocket Size

90px

Heal

0.30s

0.12s

Interval

3.5s

Idle Delay

2.50s

HoverClick To BurnAutoplay

Props

Name	Type	Default	Description
`images`	(string \| { src: string; alt?: string })[]	`3 botanical photos`	Photos to burn through, in order. Each burn reveals the next one and the list loops.
`aspectRatio`	number	`4 / 3`	Width divided by height. 0 fills the parent's height instead. Photos are cropped to cover.
`radius`	number	`16`	Corner radius in pixels.
`emberColor`	string	`"#FF7A1F"`	Colour of the burning edge. Its hot core, deep glow and sparks are derived from it.
`charColor`	string	`"#1C120C"`	Colour of the charred band behind the flame and of the smoke.
`glow`	number	`1`	Brightness of the burning edge, from 0 (a cold char line) to 3.
`edge`	number	`1`	Width of the flame, char and scorch bands.
`roughness`	number	`0.5`	How ragged the burn is, from 0 (smooth curves) to 1 (deep fingers and stray holes).
`detail`	number	`5`	Scale of the raggedness. Higher values make smaller, busier lobes.
`scorch`	number	`0.7`	How much the photo browns ahead of the flame, from 0 to 1.
`smoke`	number	`0.4`	Smoke rising from the burning edge, from 0 to 1.
`sparks`	number	`0.5`	Sparks thrown off the edge while it burns, from 0 to 1.
`shimmer`	number	`0.6`	Heat haze that ripples the photo just above the flame, from 0 to 1.
`burnDuration`	number	`1.8`	Seconds a click takes to burn through the whole photo.
`pocketSize`	number	`90`	Radius in pixels of the hole the pointer burns while hovering. 0 turns it off.
`heal`	number	`0.3`	Seconds the hover hole takes to close behind the pointer. Longer values leave a trail.
`follow`	number	`0.12`	Seconds the hover hole takes to catch up with the pointer.
`hover`	boolean	`true`	Burn a hole that follows the pointer to peek at the next photo.
`clickToBurn`	boolean	`true`	Clicking, or pressing Enter, burns through to the next photo from that point.
`autoplay`	boolean	`false`	While nobody is interacting, a burning hole wanders on its own and burns through to the next photo every few seconds.
`interval`	number	`3.5`	Seconds between autoplay burns.
`idleDelay`	number	`2.5`	Seconds after the pointer leaves before autoplay resumes.
`onChange`	(index: number) => void	`—`	Called with the index of the photo that is now on top, after each burn.
`ref`	{ ignite, next, reset }	`—`	ignite(x, y) starts a burn from a point given as fractions of the width and height. next() burns from the centre. reset() jumps back to the first photo.
`className`	string	`—`	Classes for the root element, which fills its parent's width.
`style`	CSSProperties	`—`	Inline styles for the root element.

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

Photos to burn through, in order. Each burn reveals the next one and the list loops.

Default3 botanical photos

aspectRationumber

Width divided by height. 0 fills the parent's height instead. Photos are cropped to cover.

Default4 / 3

radiusnumber

Corner radius in pixels.

Default16

emberColorstring

Colour of the burning edge. Its hot core, deep glow and sparks are derived from it.

Default"#FF7A1F"

charColorstring

Colour of the charred band behind the flame and of the smoke.

Default"#1C120C"

glownumber

Brightness of the burning edge, from 0 (a cold char line) to 3.

Default1

edgenumber

Width of the flame, char and scorch bands.

Default1

roughnessnumber

How ragged the burn is, from 0 (smooth curves) to 1 (deep fingers and stray holes).

Default0.5

detailnumber

Scale of the raggedness. Higher values make smaller, busier lobes.

Default5

scorchnumber

How much the photo browns ahead of the flame, from 0 to 1.

Default0.7

smokenumber

Smoke rising from the burning edge, from 0 to 1.

Default0.4

sparksnumber

Sparks thrown off the edge while it burns, from 0 to 1.

Default0.5

shimmernumber

Heat haze that ripples the photo just above the flame, from 0 to 1.

Default0.6

burnDurationnumber

Seconds a click takes to burn through the whole photo.

Default1.8

pocketSizenumber

Radius in pixels of the hole the pointer burns while hovering. 0 turns it off.

Default90

healnumber

Seconds the hover hole takes to close behind the pointer. Longer values leave a trail.

Default0.3

follownumber

Seconds the hover hole takes to catch up with the pointer.

Default0.12

hoverboolean

Burn a hole that follows the pointer to peek at the next photo.

Defaulttrue

clickToBurnboolean

Clicking, or pressing Enter, burns through to the next photo from that point.

Defaulttrue

autoplayboolean

While nobody is interacting, a burning hole wanders on its own and burns through to the next photo every few seconds.

Defaultfalse

intervalnumber

Seconds between autoplay burns.

Default3.5

idleDelaynumber

Seconds after the pointer leaves before autoplay resumes.

Default2.5

onChange(index: number) => void

Called with the index of the photo that is now on top, after each burn.

Default—

ref{ ignite, next, reset }

ignite(x, y) starts a burn from a point given as fractions of the width and height. next() burns from the centre. reset() jumps back to the first photo.

Default—

classNamestring

Classes for the root element, which fills its parent's width.

Default—

styleCSSProperties

Inline styles for the root element.

Default—

Name

Type

Default

Description

images

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

3 botanical photos

Photos to burn through, in order. Each burn reveals the next one and the list loops.

aspectRatio

number

4 / 3

Width divided by height. 0 fills the parent's height instead. Photos are cropped to cover.

radius

number

16

Corner radius in pixels.

emberColor

string

"#FF7A1F"

Colour of the burning edge. Its hot core, deep glow and sparks are derived from it.

charColor

string

"#1C120C"

Colour of the charred band behind the flame and of the smoke.

glow

number

1

Brightness of the burning edge, from 0 (a cold char line) to 3.

edge

number

1

Width of the flame, char and scorch bands.

roughness

number

0.5

How ragged the burn is, from 0 (smooth curves) to 1 (deep fingers and stray holes).

detail

number

5

Scale of the raggedness. Higher values make smaller, busier lobes.

scorch

number

0.7

How much the photo browns ahead of the flame, from 0 to 1.

smoke

number

0.4

Smoke rising from the burning edge, from 0 to 1.

sparks

number

0.5

Sparks thrown off the edge while it burns, from 0 to 1.

shimmer

number

0.6

Heat haze that ripples the photo just above the flame, from 0 to 1.

burnDuration

number

1.8

Seconds a click takes to burn through the whole photo.

pocketSize

number

90

Radius in pixels of the hole the pointer burns while hovering. 0 turns it off.

heal

number

0.3

Seconds the hover hole takes to close behind the pointer. Longer values leave a trail.

follow

number

0.12

Seconds the hover hole takes to catch up with the pointer.

hover

boolean

true

Burn a hole that follows the pointer to peek at the next photo.

clickToBurn

boolean

true

Clicking, or pressing Enter, burns through to the next photo from that point.

autoplay

boolean

false

While nobody is interacting, a burning hole wanders on its own and burns through to the next photo every few seconds.

interval

number

3.5

Seconds between autoplay burns.

idleDelay

number

2.5

Seconds after the pointer leaves before autoplay resumes.

onChange

(index: number) => void

—

Called with the index of the photo that is now on top, after each burn.

ref

{ ignite, next, reset }

—

ignite(x, y) starts a burn from a point given as fractions of the width and height. next() burns from the centre. reset() jumps back to the first photo.

className

string

—

Classes for the root element, which fills its parent's width.

style

CSSProperties

—

Inline styles for the root element.