Dither

Flowing waves rendered with ordered dithering and a limited tonal palette.

AnimationsBackgrounds@gaudi/design-system/animations/DitherView in Storybook Source

Installation

pnpm add github:ahmadassaf/design-system

Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.

import { Dither } from '@gaudi/design-system/animations/Dither';

Usage

import { Dither } from '@gaudi/design-system/animations/Dither';
<Dither height={500} paused={false} />

Examples

Playground

Storybook

API

13 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.
An 8×8 ordered threshold pattern quantizes a continuous wave field. The first colors entry supplies its tint; background supplies the other end of the tonal range. Pointer movement reveals a brighter local region.
Visual idea inspired by Dither from React Bits (MIT + Commons Clause). Independently implemented for Gaudi; no React Bits source, shaders or assets are included.

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.FaultyTerminalA curved phosphor display of changing pixel glyphs, scanlines and intermittent signal faults.