Glitter Warp
Starfield warp tunnel with glittering particle effects
glitter-warp-tw
Customize
Tweak the props liveAnimation
1x
0
Star Settings
20
0.1
0.05
Appearance
#B19EEF1x
Props
| Name | Type | Default | Description |
|---|---|---|---|
width | number | string | "100%" | Width of the component in pixels or CSS value |
height | number | string | "100%" | Height of the component in pixels or CSS value |
speed | number | 1.0 | Animation speed multiplier |
color | string | "#ffffff" | Star color in hex format |
density | number | 15.0 | Density of stars (higher = more spread out) |
brightness | number | 1.0 | Star brightness multiplier |
starSize | number | 0.1 | Star size (higher = larger stars) |
focalDepth | number | 0.05 | Focal depth for perspective (lower = stronger 3D effect) |
turbulence | number | 0.0 | Turbulence intensity for wavey distortion |
autoPlay | boolean | true | Whether to automatically play the animation |
className | string | "" | Additional CSS classes |
children | React.ReactNode | undefined | Content to render on top of the glitter effect |
widthnumber | stringWidth of the component in pixels or CSS value
Default:
"100%"heightnumber | stringHeight of the component in pixels or CSS value
Default:
"100%"speednumberAnimation speed multiplier
Default:
1.0colorstringStar color in hex format
Default:
"#ffffff"densitynumberDensity of stars (higher = more spread out)
Default:
15.0brightnessnumberStar brightness multiplier
Default:
1.0starSizenumberStar size (higher = larger stars)
Default:
0.1focalDepthnumberFocal depth for perspective (lower = stronger 3D effect)
Default:
0.05turbulencenumberTurbulence intensity for wavey distortion
Default:
0.0autoPlaybooleanWhether to automatically play the animation
Default:
trueclassNamestringAdditional CSS classes
Default:
""childrenReact.ReactNodeContent to render on top of the glitter effect
Default:
undefined