ShapeWaves
Ten-pixel cells cycle through triangle, circle and square bands, with optional text carved out of the field.
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
14 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 text cutout is empty by default. Set the text control to add your own cutout.
- 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.
- Scale changes wave size while cellSize controls glyph density. Dark bands are triangles, middle bands circles and bright bands squares.
- Visual idea inspired by ShapeWaves 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 examplesAeroShardsFaceted shards flow through a curved stream in layers of depth. Hold the pointer to gather the stream, then release to unfurl it.AuroraTheme-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.