Shader Card

A content card with a luminous flame rising behind it

shader-card-tw

Shader Card

A stunning card component with an animated shader effect

60fps constantly

Fully customizable

Lightweight & performant

Responsive everywhere

Customize

Flame Color

Highlight Color

Width

320px

Height

400px

Speed

0.50

Position Y

0.00

Scale

4.0

Branch Intensity

2.00

Vertical Extent

1.50

Horizontal Extent

1.50

Effect Radius

0.90

Effect Boost

0.50

Noise Scale

1.50

Width Factor

1.50

Wave Amount

0.15

Edge Min

0.000

Edge Max

1.00

Falloff Power

2.0

Contours

1.00

Flash

0.60

Blur

4.0px

Intensity

1.00

Bloom

0.80

Grain

0.25

Fade

0.60

Opacity

1.00

Tilt

8.0°

Parallax

1.00

Hover Rise

1.00

InteractiveIntroAuto Play

Props

Name	Type	Default	Description
`width`	number \| string	`400`	Width of the card. Numbers are pixels.
`height`	number \| string	`500`	Height of the card. Numbers are pixels.
`borderRadius`	string	`"12px"`	Corner radius of the card.
`color`	string	`"#5227FF"`	Colour of the flame.
`highlightColor`	string	`—`	Colour of the luminous edges and contour lines. Defaults to a lighter, warmer tone of the flame colour.
`backgroundColor`	string	`—`	Card fill. Defaults to the theme's card colour.
`speed`	number	`0.5`	Speed of the flame.
`positionY`	number	`0`	Vertical position of the flame. Higher values raise it.
`scale`	number	`4`	Zoom of the flame.
`effectRadius`	number	`0.9`	Size of the flame's core.
`effectBoost`	number	`0.5`	How full the flame burns.
`edgeMin`	number	`0`	Edge threshold at the base of the flame.
`edgeMax`	number	`1`	Edge threshold at the tip of the flame.
`falloffPower`	number	`2`	How quickly the flame fades toward its edges.
`noiseScale`	number	`1.5`	Size of the flickering detail.
`widthFactor`	number	`1.5`	Width of the flame.
`waveAmount`	number	`0.15`	How much the flame sways.
`branchIntensity`	number	`2`	How much the flame splits into tongues.
`verticalExtent`	number	`1.5`	Vertical stretch of the flame.
`horizontalExtent`	number	`1.5`	Horizontal stretch of the flame.
`contours`	number	`1`	Strength of the fine contour lines inside the flame.
`flash`	number	`0.6`	Strength of the periodic bright pulse.
`blur`	number	`4`	Soft focus on the flame, in pixels.
`intensity`	number	`1`	Brightness of the flame.
`bloom`	number	`0.8`	Glow that spills from the brightest edges.
`grain`	number	`0.25`	Fine film grain inside the flame.
`fade`	number	`0.6`	How far below the top the flame fades out, keeping the content readable.
`opacity`	number	`1`	Opacity of the flame.
`interactive`	boolean	`true`	Hover tilts the card toward the pointer and stokes the flame.
`tiltStrength`	number	`8`	Maximum tilt in degrees.
`parallax`	number	`1`	Depth between the flame and the content while tilting.
`hoverRise`	number	`1`	How much the flame rises, brightens and quickens on hover.
`intro`	boolean	`true`	The flame rises into the card when it appears.
`autoPlay`	boolean	`true`	Animate the flame.
`paused`	boolean	`false`	Freeze the flame. Reduced-motion users get a still flame.
`dpr`	number	`2`	Maximum device pixel ratio for the canvas.
`fragmentShader`	string	`—`	Custom GLSL fragment shader that replaces the flame.
`ref`	{ replay }	`—`	replay() plays the rising intro again.
`children`	ReactNode	`—`	Content shown on top of the flame.
`className`	string	`""`	Classes for the card.
`style`	CSSProperties	`—`	Inline styles for the card.

widthnumber | string

Width of the card. Numbers are pixels.

Default400

heightnumber | string

Height of the card. Numbers are pixels.

Default500

borderRadiusstring

Corner radius of the card.

Default"12px"

colorstring

Colour of the flame.

Default"#5227FF"

highlightColorstring

Colour of the luminous edges and contour lines. Defaults to a lighter, warmer tone of the flame colour.

Default—

backgroundColorstring

Card fill. Defaults to the theme's card colour.

Default—

speednumber

Speed of the flame.

Default0.5

positionYnumber

Vertical position of the flame. Higher values raise it.

Default0

scalenumber

Zoom of the flame.

Default4

effectRadiusnumber

Size of the flame's core.

Default0.9

effectBoostnumber

How full the flame burns.

Default0.5

edgeMinnumber

Edge threshold at the base of the flame.

Default0

edgeMaxnumber

Edge threshold at the tip of the flame.

Default1

falloffPowernumber

How quickly the flame fades toward its edges.

Default2

noiseScalenumber

Size of the flickering detail.

Default1.5

widthFactornumber

Width of the flame.

Default1.5

waveAmountnumber

How much the flame sways.

Default0.15

branchIntensitynumber

How much the flame splits into tongues.

Default2

verticalExtentnumber

Vertical stretch of the flame.

Default1.5

horizontalExtentnumber

Horizontal stretch of the flame.

Default1.5

contoursnumber

Strength of the fine contour lines inside the flame.

Default1

flashnumber

Strength of the periodic bright pulse.

Default0.6

blurnumber

Soft focus on the flame, in pixels.

Default4

intensitynumber

Brightness of the flame.

Default1

bloomnumber

Glow that spills from the brightest edges.

Default0.8

grainnumber

Fine film grain inside the flame.

Default0.25

fadenumber

How far below the top the flame fades out, keeping the content readable.

Default0.6

opacitynumber

Opacity of the flame.

Default1

interactiveboolean

Hover tilts the card toward the pointer and stokes the flame.

Defaulttrue

tiltStrengthnumber

Maximum tilt in degrees.

Default8

parallaxnumber

Depth between the flame and the content while tilting.

Default1

hoverRisenumber

How much the flame rises, brightens and quickens on hover.

Default1

introboolean

The flame rises into the card when it appears.

Defaulttrue

autoPlayboolean

Animate the flame.

Defaulttrue

pausedboolean

Freeze the flame. Reduced-motion users get a still flame.

Defaultfalse

dprnumber

Maximum device pixel ratio for the canvas.

Default2

fragmentShaderstring

Custom GLSL fragment shader that replaces the flame.

Default—

ref{ replay }

replay() plays the rising intro again.

Default—

childrenReactNode

Content shown on top of the flame.

Default—

classNamestring

Classes for the card.

Default""

styleCSSProperties

Inline styles for the card.

Default—

Name

Type

Default

Description

width

number | string

400

Width of the card. Numbers are pixels.

height

number | string

500

Height of the card. Numbers are pixels.

borderRadius

string

"12px"

Corner radius of the card.

color

string

"#5227FF"

Colour of the flame.

highlightColor

string

—

Colour of the luminous edges and contour lines. Defaults to a lighter, warmer tone of the flame colour.

backgroundColor

string

—

Card fill. Defaults to the theme's card colour.

speed

number

0.5

Speed of the flame.

positionY

number

0

Vertical position of the flame. Higher values raise it.

scale

number

4

Zoom of the flame.

effectRadius

number

0.9

Size of the flame's core.

effectBoost

number

0.5

How full the flame burns.

edgeMin

number

0

Edge threshold at the base of the flame.

edgeMax

number

1

Edge threshold at the tip of the flame.

falloffPower

number

2

How quickly the flame fades toward its edges.

noiseScale

number

1.5

Size of the flickering detail.

widthFactor

number

1.5

Width of the flame.

waveAmount

number

0.15

How much the flame sways.

branchIntensity

number

2

How much the flame splits into tongues.

verticalExtent

number

1.5

Vertical stretch of the flame.

horizontalExtent

number

1.5

Horizontal stretch of the flame.

contours

number

1

Strength of the fine contour lines inside the flame.

flash

number

0.6

Strength of the periodic bright pulse.

blur

number

4

Soft focus on the flame, in pixels.

intensity

number

1

Brightness of the flame.

bloom

number

0.8

Glow that spills from the brightest edges.

grain

number

0.25

Fine film grain inside the flame.

fade

number

0.6

How far below the top the flame fades out, keeping the content readable.

opacity

number

1

Opacity of the flame.

interactive

boolean

true

Hover tilts the card toward the pointer and stokes the flame.

tiltStrength

number

8

Maximum tilt in degrees.

parallax

number

1

Depth between the flame and the content while tilting.

hoverRise

number

1

How much the flame rises, brightens and quickens on hover.

intro

boolean

true

The flame rises into the card when it appears.

autoPlay

boolean

true

Animate the flame.

paused

boolean

false

Freeze the flame. Reduced-motion users get a still flame.

dpr

number

2

Maximum device pixel ratio for the canvas.

fragmentShader

string

—

Custom GLSL fragment shader that replaces the flame.

ref

{ replay }

—

replay() plays the rising intro again.

children

ReactNode

—

Content shown on top of the flame.

className

string

""

Classes for the card.

style

CSSProperties

—

Inline styles for the card.