LiquidEther
Colored dye follows pointer movement, curls through a retained velocity field, and gradually dissipates.
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. Keep important content in children and provide a pause control for continuous animation. Reduced motion renders a static frame; unsupported WebGL retains the styled container and content.
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.
- A bounded velocity and dye simulation retains, transports, and dissipates each plume. Pointer movement adds dye and momentum; an autonomous drifting source runs when the pointer is absent. Pausing and zero-delta redraws preserve the field, and a seeded plume provides a deterministic reduced-motion still.
- Visual idea inspired by Liquid Ether from React Bits (MIT + Commons Clause). Independently implemented for Gaudi; no React Bits source, shaders or assets are included.
Related
PointerA pointer effect scoped to its container, with direct, spring and lazy tracking, hover feedback, and native input fallbacks.AeroShardsFaceted 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.