Squircle Shift

Morphing squircle shape animation

squircle-shift-tw

Customize

Speed

0.3

Color Layers

3

Frequency

20

Intensity

1.0

Line Thickness

0.06

Phase Offset

10

Wave Speed

0.2

Wave Intensity

0.1

Spiral Intensity

1.0

Center X

1.0

Center Y

1.0

Falloff

1.0

Color Tint

Brightness

1.5

Light Mode

Dark Mode

Props

19

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 | string

Width of the component in pixels or CSS value

Default"100%"

heightnumber | string

Height of the component in pixels or CSS value

Default"100%"

speednumber

Animation speed multiplier

Default0.3

colorLayersnumber

Number of color channel iterations (1-3)

Default3

gridFrequencynumber

Grid pattern frequency

Default25

gridIntensitynumber

Grid pattern intensity

Default1

waveSpeednumber

Wave animation speed multiplier

Default0.2

waveIntensitynumber

Wave displacement intensity

Default0.1

spiralIntensitynumber

Spiral/rotation effect intensity

Default1

lineThicknessnumber

Line/dot thickness

Default0.06

falloffnumber

Distance falloff factor

Default1

centerXnumber

Horizontal center offset

Default1

centerYnumber

Vertical center offset

Default1

colorTintstring

Primary color tint

Default"#c084fc"

lightBackgroundstring

Background color for light mode

Default"#ffffff"

darkBackgroundstring

Background color for dark mode

Default"#000000"

brightnessnumber

Overall brightness

Default1.5

phaseOffsetnumber

Grid phase offset

Default10

classNamestring

Additional CSS classes

Default""