Skip to content

Horizon glow

Dark shader background with two light bands at a horizon.

Usage

Usage
import { HorizonGlowBackground } from '@/components/blocks/background-02'


<HorizonGlowBackground className="h-screen" />


// Optional: layer your own content on top
<HorizonGlowBackground className="min-h-[560px]">
  <div />
</HorizonGlowBackground>


// The twilight preset, with a flatter, brighter horizon lower down
<HorizonGlowBackground
  className="min-h-[640px]"
  palette="twilight"
  intensity={1.1}
  curvature={0.7}
  horizon={0.75}
  speed={0.6}
/>

Install

pnpm dlx shadcn@latest add @pastaui-pro/background-02

Source

Props

Horizon glow props
PropTypeDefaultDescription
palette'blue' | 'twilight'= 'blue'Preset colour scheme. 'blue' fades from a white core through our blue into navy; 'twilight' is the original lavender and violet on deep indigo.
colorsPartial<{ base: string; accent: string; highlight: string; core: string }>= { base: '#030B1E', accent: '#2B7FFF', highlight: '#8EC5FF', core: '#F2F8FF' }Hex colours that override single tones of the palette: the deep base, the saturated mid-tone of the bands, the lighter tone around the core and the near-white core at the edges.
intensitynumber= 1Brightness of the bands. Lower values keep the core from turning white.
curvaturenumber= 1How strongly the bands bend away from the horizon toward the edges. 0 gives a flat line of light.
horizonnumber= 0.69Vertical position of the horizon, from 0 (top) to 1 (bottom).
speednumber= 1How fast the bands breathe and shimmer. 0 freezes them.
childrenReactNode= —Content rendered on top of the background.
classNamestring= —Additional classes for the wrapper, such as a min height or layout.
styleCSSProperties= —Inline styles for the wrapper.