Squircle Shift
Morphing squircle shape animation
squircle-shift-tw
Customize
Tweak the props liveAnimation
0.3
3
Grid Settings
20
1
0.06
10
Wave Effects
0.2
0.1
1
Position
1
1
1
Colors
#c084fc1.5
Background
#ffffff#333333Props
| 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 |
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:
0.3colorLayersnumberNumber of color channel iterations (1-3)
Default:
3gridFrequencynumberGrid pattern frequency
Default:
25gridIntensitynumberGrid pattern intensity
Default:
1waveSpeednumberWave animation speed multiplier
Default:
0.2waveIntensitynumberWave displacement intensity
Default:
0.1spiralIntensitynumberSpiral/rotation effect intensity
Default:
1lineThicknessnumberLine/dot thickness
Default:
0.06falloffnumberDistance falloff factor
Default:
1centerXnumberHorizontal center offset
Default:
1centerYnumberVertical center offset
Default:
1colorTintstringPrimary color tint
Default:
"#c084fc"lightBackgroundstringBackground color for light mode
Default:
"#ffffff"darkBackgroundstringBackground color for dark mode
Default:
"#000000"brightnessnumberOverall brightness
Default:
1.5phaseOffsetnumberGrid phase offset
Default:
10classNamestringAdditional CSS classes
Default:
""