AeroShards
Faceted shards flow through a curved stream in layers of depth.
Hold the pointer to gather the stream, then release to unfurl it.
Installation
Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.
Usage
Examples
Playground
API
10 props
Accessibility
The canvas is decorative and hidden from assistive technology. Foreground children remain readable and interactive. Provide a pause control for continuous motion, and place text on a contrasting surface. Reduced motion displays a still frame; unavailable WebGL uses a static color fallback.
Notes
- The playground layers a Gaudi header, hero and working documentation links above the effect. The Demo content switch hides only this foreground; canvas size, animation phase and pause state are retained.
- Shard size varies with depth. Hold/release changes the stream envelope without resetting its retained phase.
- Visual idea inspired by AeroShards from React Bits. Independently implemented for Gaudi from the rendered visual reference; no React Bits source code, shaders or assets are included.
Related
InputText, search, numeric and date inputs with prefix and suffix slots.11 examplesAuroraTheme-aware Aurora light curtains, with a Soft Aurora variant that forms a narrow glowing ribbon.CRTWarpCoarse phosphor cells form evolving plasma shapes beneath fine scanlines, analog grain, and local pointer distortion.DarkVeilBroad illuminated folds drift across a dark surface, with sharp creases and deep intervening shadows.DitherFlowing waves rendered with ordered dithering and a limited tonal palette.FaultyTerminalA curved phosphor display of changing pixel glyphs, scanlines and intermittent signal faults.