Prism
Customize Prism
Time Scale0.5
Height3.5
Base Width5.5
Scale3.6
Hue Shift0.0
Color Frequency1.0
Noise0.50
Glow1.0
Hover Strength2.0
Inertia0.05
Bloom1.0
Offset X0.0
Offset Y0.0
Props
| Property | Type | Default | Description |
|---|---|---|---|
| animationType | 'rotate' | 'hover' | '3drotate' | 'rotate' | Type of animation for the prism. |
| timeScale | number | 0.5 | Scale factor for animation speed. |
| height | number | 3.5 | Height of the prism. |
| baseWidth | number | 5.5 | Base width of the prism. |
| scale | number | 3.6 | Scale of the prism. |
| hueShift | number | 0 | Hue shift for color effects. |
| colorFrequency | number | 1 | Frequency of color changes. |
| noise | number | 0.5 | Amount of noise effect. |
| glow | number | 1 | Intensity of glow effect. |
| transparent | boolean | true | Enable transparency. |
| hoverStrength | number | 2 | Strength of hover effects. |
| inertia | number | 0.05 | Inertia for smooth animations. |
| bloom | number | 1 | Bloom effect intensity. |
| suspendWhenOffscreen | boolean | false | Suspend animation when offscreen. |
| offset | { x: number; y: number } | { x: 0, y: 0 } | X and Y offset position. |
| className | string | "" | Additional CSS classes for the component. |
| style | React.CSSProperties | {} | Inline styles for the component. |
Dependencies
ogl
Created with ❤️ by Cybershoora