Aero Shards

A GPU-driven wind sculpture of folded foil shards with crisp detail, content-safe placements, and responsive pointer interactions.

Default

Move the pointer to push the shards, click for a ripple, and press and hold to gather them around the cursor. Needs a browser with WebGPU; elsewhere the background color still shows and an error event fires. Every prop is wired to the controls underneath.

Demo Content

FeaturesAbout Sign up

New Creative Components

Don't touch them, they are pretty sharp!

Get started Learn more

Customize

Background

Shards

Accent

Placement

Material

Detail

Flow

Effect

Interaction

Scale1

Spread1

Depth1

Speed1

Spin1

Density1.5

Shard Size1.1

Stretch1

Turbulence1

Glow1

Edge Softness2

Bloom0.5

Grain0.05

Chromatic Aberration0.0075

Transition Duration1

Interaction Radius1.5

Interaction Strength0.5

Ripple Intensity1

Hold to GatherPaused

API Reference

AeroShards

Prop	Type	Default	Description
`backgroundColor`	`string`	`"#120F17"`	Background behind the wind sculpture. Lighting and bloom adapt automatically to light surfaces.
`shardColor`	`string`	`"#896ABD"`	Primary body color for the shards.
`accentColor`	`string`	`"#A855F7"`	Accent color used to derive reflections, depth, and highlights.
`placement`	`'right' \| 'left' \| 'center' \| 'full'`	`"full"`	Places the sculpture while preserving a content-safe region.
`material`	`'pearl' \| 'chrome' \| 'satin'`	`"pearl"`	Applies a complete lighting and surface finish.
`detail`	`'bold' \| 'balanced' \| 'fine'`	`"balanced"`	Balances shard count and size into a finished visual texture.
`flow`	`'stream' \| 'vortex' \| 'ribbon'`	`"stream"`	Morphs the same shards between a flowing stream, circulating vortex, and twisted ribbon without restarting the animation.
`rippleIntensity`	`number`	`1`	Strength of the click/release wave and its accent-colored illumination. Set to 0 to disable ripples.
`holdToGather`	`boolean`	`true`	Press and hold to gather a softly circulating cloud around the cursor; release to unfurl. Respects interaction="none", pause, and reduced motion.
`effect`	`'none' \| 'dither' \| 'ascii'`	`"none"`	Applies ordered color dithering or compact, shape-matched ASCII before postprocessing. Stylized modes use fewer, larger shards for readability; none preserves the original render.
`scale`	`number`	`1`	Zooms the complete shard field without changing its shard count or individual shard size.
`spread`	`number`	`1`	Controls how tightly the shards gather around the flow path.
`depth`	`number`	`1`	Controls front-to-back volume and perspective variation.
`speed`	`number`	`1`	Controls the shared travel speed of every shard.
`spin`	`number`	`1`	Controls how quickly shards roll around their direction of travel.
`interaction`	`'none' \| 'repel' \| 'attract'`	`"repel"`	Disables interaction or enables damped cursor repulsion/attraction and click ripples across the field.
`density`	`number`	`1.5`	Fine-tuning multiplier for the shard count selected by detail.
`shardSize`	`number`	`1.1`	Fine-tuning multiplier for the shard size selected by detail.
`stretch`	`number`	`1`	Controls shard length without changing their overall count.
`turbulence`	`number`	`1`	Fine-tuning multiplier for the turbulence produced by motion.
`glow`	`number`	`1`	Fine-tuning multiplier for emissive edges and reflected highlights.
`edgeSoftness`	`number`	`2`	Controls analytic antialiasing without blurring the whole image.
`bloom`	`number`	`0.5`	Adds a soft halo without blurring the shards; on light backgrounds the halo uses the shard and accent colors.
`grain`	`number`	`0.05`	Adds screen-space film grain; set to 0 for a completely clean render.
`chromaticAberration`	`number`	`0.0075`	Adds RGB edge separation; set to 0 for a color-neutral finish. Dither and ASCII use subtler separation to preserve their fine patterns.
`transitionDuration`	`number`	`1`	Controls the transition time for placement and flow formation changes.
`interactionRadius`	`number`	`1.5`	Scales the soft, flow-aligned reach of the cursor interaction.
`interactionStrength`	`number`	`0.5`	Fine-tuning multiplier for the selected interaction force.
`paused`	`boolean`	`false`	Freezes the shard field.
`@error`	`(error: Error) => void`	-	Emitted when WebGPU setup or rendering fails.

Accessibility

Keyboard shortcuts and ARIA behavior.

The root is aria-hidden and ignores pointer events; it is a decorative background, so put real content above it.
With prefers-reduced-motion set, the shard field freezes and click ripples are skipped.
Rendering sleeps while the element is off screen or the tab is hidden.

Acid Squares Aurora