MicroSlats
Rounded 10×25px slats catch broad rolling swells, crest glints and a fading pointer wake.
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.
- Scale changes slat dimensions; slat height stays fixed through each swell.
- Visual idea inspired by MicroSlats 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.