Skip to content
GaudiGaudi Design System home

Search documentation

Search every page, heading and paragraph.

Aurora

Theme-aware Aurora light curtains, with a Soft Aurora variant that forms a narrow glowing ribbon.

AnimationsBackgrounds@gaudi/design-system/layout/BorealisView 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 Aurora from '@gaudi/design-system/layout/Borealis';

Usage

import Borealis from '@gaudi/design-system/animations/Borealis';
<Borealis variant="soft" height={500}>{content}</Borealis>

Examples

Aurora

Storybook

Soft Aurora

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.
  • Borealis remains the public component name. Existing layout imports, direct children, outer ref, and page layout are preserved. Soft Aurora is selected with variant="soft".
  • Visual ideas inspired by React Bits Aurora and Soft Aurora (MIT + Commons Clause). Independently authored for Gaudi; no upstream source, shaders 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.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.FloatingLinesThree layered families of glowing lines cross the surface and bend around the pointer.