Shader Card

Card with animated WebGL shader background effect

shader-card-tw

Shader Card

A stunning card component with an animated shader effect

60fps constantly

Fully customizable

Lightweight & performant

Responsive everywhere

Customize

Effect Color

Auto Play

Width

320

Height

400

Speed

0.5

Position Y

0.15

Scale

4.0

Branch Intensity

2.0

Vertical Extent

1.5

Horizontal Extent

1.5

Effect Radius

0.90

Effect Boost

0.50

Noise Scale

1.5

Width Factor

1.50

Wave Amount

0.15

Edge Min

0.000

Edge Max

1.00

Falloff Power

2.0

Blur

5.0

Opacity

0.80

Props

Name	Type	Default	Description
`width`	number	`400`	Width of the card in pixels
`height`	number	`500`	Height of the card in pixels
`borderRadius`	string	`"12px"`	Border radius of the card
`speed`	number	`1.0`	Animation speed multiplier (0.1 - 3.0)
`color`	string	`"#FF9FFC"`	Color of the effect in hex format
`positionY`	number	`0.1`	Vertical position of effect (0-1, where 0 is top, 1 is bottom)
`scale`	number	`3`	Scale of the effect (minimum 0.5 for 50% visibility)
`effectRadius`	number	`0.9`	Radius of the effect core
`effectBoost`	number	`0.5`	Boost intensity multiplier
`edgeMin`	number	`0.0`	Edge minimum threshold
`edgeMax`	number	`0.5`	Edge maximum threshold
`falloffPower`	number	`2`	Falloff power for gradient
`noiseScale`	number	`1.5`	Noise scale factor
`widthFactor`	number	`0.5`	Horizontal width factor
`waveAmount`	number	`0.5`	Wave distortion amount
`branchIntensity`	number	`0.5`	Branching intensity (higher = more branches)
`verticalExtent`	number	`1.5`	Vertical extension (higher = taller effect)
`horizontalExtent`	number	`1.5`	Horizontal extension (higher = wider effect)
`blur`	number	`0`	Blur amount in pixels
`opacity`	number	`1`	Opacity of the shader effect (0-1)
`children`	ReactNode	`undefined`	Content to render on top of the shader
`className`	string	`""`	Additional CSS classes for styling
`fragmentShader`	string	`undefined`	Custom GLSL fragment shader code (optional)
`autoPlay`	boolean	`true`	Whether to automatically play the animation

widthnumber

Width of the card in pixels

Default400

heightnumber

Height of the card in pixels

Default500

borderRadiusstring

Border radius of the card

Default"12px"

speednumber

Animation speed multiplier (0.1 - 3.0)

Default1.0

colorstring

Color of the effect in hex format

Default"#FF9FFC"

positionYnumber

Vertical position of effect (0-1, where 0 is top, 1 is bottom)

Default0.1

scalenumber

Scale of the effect (minimum 0.5 for 50% visibility)

Default3

effectRadiusnumber

Radius of the effect core

Default0.9

effectBoostnumber

Boost intensity multiplier

Default0.5

edgeMinnumber

Edge minimum threshold

Default0.0

edgeMaxnumber

Edge maximum threshold

Default0.5

falloffPowernumber

Falloff power for gradient

Default2

noiseScalenumber

Noise scale factor

Default1.5

widthFactornumber

Horizontal width factor

Default0.5

waveAmountnumber

Wave distortion amount

Default0.5

branchIntensitynumber

Branching intensity (higher = more branches)

Default0.5

verticalExtentnumber

Vertical extension (higher = taller effect)

Default1.5

horizontalExtentnumber

Horizontal extension (higher = wider effect)

Default1.5

blurnumber

Blur amount in pixels

Default0

opacitynumber

Opacity of the shader effect (0-1)

Default1

childrenReactNode

Content to render on top of the shader

Defaultundefined

classNamestring

Additional CSS classes for styling

Default""

fragmentShaderstring

Custom GLSL fragment shader code (optional)

Defaultundefined

autoPlayboolean

Whether to automatically play the animation

Defaulttrue