Preview
Edge colour
Tip colour
Sky
Palette
Curtains
Height
Spread
Scale
Tilt
Rays point
Mask
Sway
Turbulence
Drift
Rays
Ray length
Edge glow
Intensity
Shimmer
Matrix
Cell
Speed
Levels
Still time
Bloom
Bloom radius
Animate
<DitherAurora curtains={3} height={0.42} spread={0.11} sway={1} turbulence={0.6} rays={8} length={0.45} glow={0.9} intensity={0.95} shimmer={0.2} scale={1} tilt={0} drift={0} direction={1} mask={0} cell={2} matrix={8} speed={1} />Installation
pnpm add astro-dithernpm i astro-ditherbun add astro-ditherOr copy the source into your project:
npx astro-dither add auroraUsage
---import { DitherAurora } from "astro-dither";---
<DitherAurora color="#4ade80" tipColor="#c4b5fd" bloom={0.6} />The signature look: folding curtains of light. Shape it with curtains, height, spread, sway, turbulence, rays and length; light it with color, tipColor, background, glow, intensity and shimmer; place it with scale, tilt, drift, direction and mask. cell, matrix, levels and bloom set how it is drawn.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
color | string | "#1f8fff" | The bright lower edge of each curtain. Hex. |
tipColor | string | color | The faint tops of the rays. Set a second colour for a two-tone sky. |
background | string | "#02060d" | The sky behind. transparent shows the page. |
curtains | number | 3 | How many curtains. Each hangs higher and dimmer. |
height | number | 0.42 | Where the lowest bright edge hangs, 0 to 1. |
spread | number | 0.11 | Vertical gap between curtains. |
sway | number | 1 | How far the edges fold. |
turbulence | number | 0.6 | Fine ripples along each edge. |
rays | number | 8 | How many rays fit across. |
length | number | 0.45 | How far the rays reach up. |
glow | number | 0.9 | Brightness of the line along each edge. |
intensity | number | 0.95 | Overall curtain brightness. |
shimmer | number | 0.2 | A slow brightness ripple. |
scale | number | 1 | Horizontal zoom. |
tilt | number | 0 | Tilt in degrees. |
drift | number | 0 | Sideways travel. |
direction | "up" | "down" | "up" | down hangs the rays from a bright top edge. |
mask | "none" | "top" | "bottom" | "edges" | "none" | Fades it out where your text sits. |
palette | string[] | the effect's | 2 to 8 colours, paper first, brightest last. transparent works. |
cell | number | 2 | Size of one dither cell in CSS pixels. Rounded to whole device pixels so cells stay even. |
matrix | 2 | 4 | 8 | "noise" | 8 | The Bayer threshold size, or noise for a random look. |
speed | number | 1 | Playback speed. 0 draws one still frame. |
stillTime | number | the effect's | The moment drawn when motion is off or reduced, in seconds. |
levels | number | 0 (all) | Tones the field snaps to before dithering. Low values give hard, posterised steps. |
bloom | number | 0 | Bloom around lit cells, 0 to 1. Set a positive prop to create the overlay before overriding it with CSS --dither-bloom. |
bloomRadius | number | 10 | Bloom blur in CSS pixels. CSS --dither-bloom-radius overrides it. |
class | string | undefined | Classes on the surface element, for size and position. |
Notes
- Decorative surfaces render
aria-hidden. Put real text on top, not inside them. - With reduced motion it draws one still frame and stops.
- It pauses when scrolled out of view or when the tab is hidden.