Light streak

Dark shader background with a sweeping ribbon of light.

Usage

import { LightStreakBackground } from '@/components/blocks/background-04'


<LightStreakBackground className="h-screen" />


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


// The nebula preset, softer and with less grain
<LightStreakBackground
  className="min-h-[560px]"
  palette="nebula"
  intensity={0.9}
  grain={0.4}
  speed={0.7}
/>

Install

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

npx shadcn@latest add @pastaui-pro/background-04

yarn dlx shadcn@latest add @pastaui-pro/background-04

bunx --bun shadcn@latest add @pastaui-pro/background-04

Source

Props

Light streak props
Prop	Type	Default	Description
palette	'blue' \| 'nebula'	= 'blue'	Preset colour scheme. 'blue' is a blue ribbon with a navy haze; 'nebula' is the original violet ribbon with an indigo haze and lilac core.
colors	Partial<{ base: string; haze: string; primary: string; secondary: string; core: string }>	= { base: '#0A0A0A', haze: '#0A2A66', primary: '#2B7FFF', secondary: '#8EC5FF', core: '#F2F8FF' }	Hex colours that override single tones of the palette: the near-black base, the deep haze around the ribbon, its main glow, the brighter tone around the core and the almost white core.
intensity	number	= 1	Brightness of the ribbons. Lower values keep the core from turning white.
grain	number	= 0.5	Strength of the film grain, from 0 to 1.
speed	number	= 1	How fast the ribbon sways and breathes. 0 freezes it.
fluteWidth	number	= 56	Width of each fluted glass slice in CSS pixels on wide screens. Slices narrow on smaller screens, down to 24px.
children	ReactNode	= —	Content rendered on top of the background.
className	string	= —	Additional classes for the wrapper, such as a min height or layout.
style	CSSProperties	= —	Inline styles for the wrapper.