Skip to content

Pixel tile glow

Dark shader background of frosted glass tiles over a glow.

Usage

Usage
import { PixelTileBackground } from '@/components/blocks/background-01'


<PixelTileBackground className="h-screen" />


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


// The dusk preset, with softer shadows and a stronger blur
<PixelTileBackground
  className="min-h-[560px]"
  palette="dusk"
  shadows={0.4}
  blur={0.8}
/>

Install

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

Source

Props

Pixel tile glow props
PropTypeDefaultDescription
palette'blue' | 'dusk'= 'blue'Preset colour scheme. 'blue' is our blue with a sky-blue core and mist corner; 'dusk' is violet with a lavender core and warm amber corner.
colorsPartial<{ base: string; primary: string; secondary: string; highlight: string }>= { base: '#0A0A0A', primary: '#2B7FFF', secondary: '#8EC5FF', highlight: '#DCEBFF' }Hex colours that override single tones of the palette: the base, the main glow, its lighter core and the soft glow in the top corner.
cellSizenumber= 64Tile size in CSS pixels. Tiles shrink a little on screens under 640px wide.
gapnumber= 2Space between tiles in CSS pixels.
radiusnumber= 8Corner radius of each tile in CSS pixels.
speednumber= 1How fast the glow drifts. 0 freezes it.
vignettenumber= 0.85How strongly the tiles fade to the base colour at the edges, from 0 to 1.
shadowsnumber= 0.6Strength of the soft inner shadow along each tile's edges, from 0 to 1.
blurnumber= 0.6How much the frosted tiles blur the glow behind them, from 0 to 1. Higher values give flatter, softer tiles.
interactiveboolean= trueBrightens the tiles around a mouse pointer. Ignored for touch and reduced motion.
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.