Shader Card
shader-card-tw
Shader Card
A stunning card component with an animated shader effect
60fps constantly
Fully customizable
Lightweight & performant
Responsive everywhere
Customize
320
400
0.5
0.15
4
2
1.5
1.5
0.9
0.5
1.5
1.5
0.15
0
1
2
5
0.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 |