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

Tweak the props live

Basic

Effect Color

#5227FF

Auto Play

Width320

Height400

Speed0.5

Position Y0.15

Scale4

Effect Shape

Branch Intensity2

Vertical Extent1.5

Horizontal Extent1.5

Effect Radius0.9

Effect Boost0.5

Noise Scale1.5

Width Factor1.5

Edge & Appearance

Wave Amount0.15

Edge Min0

Edge Max1

Falloff Power2

Blur5

Opacity0.8

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

Default:400

heightnumber

Height of the card in pixels

Default:500

borderRadiusstring

Border radius of the card

Default:"12px"

speednumber

Animation speed multiplier (0.1 - 3.0)

Default:1.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)

Default:0.1

scalenumber

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

Default:3

effectRadiusnumber

Radius of the effect core

Default:0.9

effectBoostnumber

Boost intensity multiplier

Default:0.5

edgeMinnumber

Edge minimum threshold

Default:0.0

edgeMaxnumber

Edge maximum threshold

Default:0.5

falloffPowernumber

Falloff power for gradient

Default:2

noiseScalenumber

Noise scale factor

Default:1.5

widthFactornumber

Horizontal width factor

Default:0.5

waveAmountnumber

Wave distortion amount

Default:0.5

branchIntensitynumber

Branching intensity (higher = more branches)

Default:0.5

verticalExtentnumber

Vertical extension (higher = taller effect)

Default:1.5

horizontalExtentnumber

Horizontal extension (higher = wider effect)

Default:1.5

blurnumber

Blur amount in pixels

Default:0

opacitynumber

Opacity of the shader effect (0-1)

Default:1

childrenReactNode

Content to render on top of the shader

Default:undefined

classNamestring

Additional CSS classes for styling

Default:""

fragmentShaderstring

Custom GLSL fragment shader code (optional)

Default:undefined

autoPlayboolean

Whether to automatically play the animation

Default:true