Skip to content
GaudiGaudi Design System home

Search documentation

Search every page, heading and paragraph.

PixelBlast

Separate square pixels form drifting dithered patterns; clicks send circular waves through the field.

AnimationsBackgrounds@gaudi/design-system/animations/PixelBlastView in StorybookSource

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 { PixelBlast } from '@gaudi/design-system/animations/PixelBlast';

Usage

import { PixelBlast } from '@gaudi/design-system/animations/PixelBlast';
<PixelBlast height={360} paused />

Examples

Playground

Storybook

API

10 props

Accessibility

The canvas is decorative and hidden from assistive technology; children remain accessible. Reduced motion shows a still frame, and unavailable graphics use a static color fallback. Provide a visible pause control when motion continues beside meaningful content. Keep text contrast independent of the moving artwork.

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.
  • Squares keep the same size as density changes. A click creates an outward-moving wave that fades; paused and reduced-motion surfaces do not respond.
  • Visual idea inspired by Pixel Blast from React Bits (MIT + Commons Clause). Independently implemented for Gaudi; no React Bits code or assets are included.
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.FaultyTerminalA curved phosphor display of changing pixel glyphs, scanlines and intermittent signal faults.