Squircle Shift
Morphing squircle shape animation
squircle-shift-tw
Customize
Animation
0.3
3
Grid Settings
20
1
0.06
10
Wave Effects
0.2
0.1
1
Position
1
1
1
Colors
1.5
Background
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 | 0.3 | Animation speed multiplier |
| colorLayers | number | 3 | Number of color channel iterations (1-3) |
| gridFrequency | number | 25 | Grid pattern frequency |
| gridIntensity | number | 1 | Grid pattern intensity |
| waveSpeed | number | 0.2 | Wave animation speed multiplier |
| waveIntensity | number | 0.1 | Wave displacement intensity |
| spiralIntensity | number | 1 | Spiral/rotation effect intensity |
| lineThickness | number | 0.06 | Line/dot thickness |
| falloff | number | 1 | Distance falloff factor |
| centerX | number | 1 | Horizontal center offset |
| centerY | number | 1 | Vertical center offset |
| colorTint | string | "#c084fc" | Primary color tint |
| lightBackground | string | "#ffffff" | Background color for light mode |
| darkBackground | string | "#000000" | Background color for dark mode |
| brightness | number | 1.5 | Overall brightness |
| phaseOffset | number | 10 | Grid phase offset |
| className | string | "" | Additional CSS classes |