Shape Blur

Morphing blurred geometric shape. The effect occurs on hover.

Default

Move the pointer across the shape to blur and morph its edge. Size, roundness, border and hover circle are wired to the controls underneath.

Hover Me.

Shape Size1

Roundness0.5

Border Size0.05

Circle Size0.25

Circle Edge1

Prop	Type	Default	Description
`variation`	`number`	`0`	Selects the shape variation (0-3) used by the shader. Rebuilds the scene when changed.
`pixelRatioProp`	`number`	`2`	Overrides the pixel ratio, typically set to the device pixel ratio.
`shapeSize`	`number`	`1.2`	Controls the size of the shape.
`roundness`	`number`	`0.4`	Determines the roundness of the shape's corners.
`borderSize`	`number`	`0.05`	Sets the thickness of the border.
`circleSize`	`number`	`0.3`	Determines the size of the hover circle effect.
`circleEdge`	`number`	`0.5`	Controls the edge softness of the hover circle.

Keyboard shortcuts and ARIA behavior.

Purely decorative canvas that reacts to the pointer. The shape is drawn in white, so use it on a dark surface.