Ribbons
Customize Ribbons
Base Thickness30px
Speed Multiplier0.5
Max Age500
Props
| Property | Type | Default | Description |
|---|---|---|---|
| colors | string[] | ['#ff9346', '#7cff67', '#ffee51', '#5227FF'] | Array of colors for the ribbons. |
| baseSpring | number | 0.03 | Spring constant for ribbon physics. |
| baseFriction | number | 0.9 | Friction coefficient for ribbon movement. |
| baseThickness | number | 30 | Base thickness of the ribbons. |
| offsetFactor | number | 0.05 | Factor controlling ribbon offset. |
| maxAge | number | 500 | Maximum age of ribbon points before removal. |
| pointCount | number | 50 | Number of points per ribbon. |
| speedMultiplier | number | 0.6 | Multiplier for animation speed. |
| enableFade | boolean | false | Enable fading effect for ribbons. |
| enableShaderEffect | boolean | false | Enable shader effects for ribbons. |
| effectAmplitude | number | 2 | Amplitude of shader effects. |
| backgroundColor | number[] | [0, 0, 0, 0] | Background color as RGBA array. |
| className | string | "" | Additional CSS classes for the component. |
| style | React.CSSProperties | {} | Inline styles for the component. |
Dependencies
ogl
Created with ❤️ by Cybershoora