Pixel tile glow

Dark hero beside a glowing pixel tile shader.

Usage

import { HeroPixelTile } from '@/components/blocks/hero-section-12'


<HeroPixelTile />


<HeroPixelTile
  brand="Quanta"
  eyebrow="New: usage-based billing"
  headline={['Pricing that scales', 'with every customer.']}
  description="Meter usage, run experiments and invoice in any currency from one billing engine."
  signIn={null}
  colors={{ base: '#0B0716', primary: '#7C5AF0', secondary: '#C09AFF', highlight: '#F7F6FF' }}
  cellSize={56}
/>

Install

pnpm dlx shadcn@latest add @pastaui-pro/hero-section-12

npx shadcn@latest add @pastaui-pro/hero-section-12

yarn dlx shadcn@latest add @pastaui-pro/hero-section-12

bunx --bun shadcn@latest add @pastaui-pro/hero-section-12

Source

Props

Pixel tile glow props
Prop	Type	Default	Description
brand / brandHref	string	= Tessera / #	Brand name and link next to the tile logo mark.
navLinks	{ label: string; href: string }[]	= Platform, Tokens, Docs, Customers, Pricing	Links beside the brand. Below md they move into a two-column sheet of link tiles.
signIn	{ label: string; href: string } \| null	= Sign in	Quiet text link before the CTA and in the mobile sheet. null hides it.
cta	{ label: string; href: string }	= Get started	White button on the right of the nav. Also shown in the mobile sheet.
eyebrow	string \| null	= 'Tessera 3.0 is here'	Chip with a glowing blue square above the headline. null hides it.
headline	string[]	= ['Build the system,', 'not the screens.']	One entry per headline line.
description	string	= Tokens, components and docs that stay in lockstep…	Supporting copy under the headline.
primaryAction / secondaryAction	{ label: string; href: string }	= Start for free / Book a demo	White and frosted buttons under the description.
colors	Partial<{ base: string; primary: string; secondary: string; highlight: string }>	= { base: '#04070F', primary: '#2B7FFF', secondary: '#8EC5FF', highlight: '#DCEBFF' }	Glow palette passed to the Pixel tile glow background: near-black base, blue glow, light blue centre and a near-white bloom in the top corner.
cellSize	number	= 64	Tile size in CSS pixels. Tiles shrink a little on small screens.
speed	number	= 1	How fast the glow drifts. 0 freezes it.
interactive	boolean	= true	Brightens the tiles around a mouse pointer.
className	string	= —	Additional classes for the section.
style	CSSProperties	= —	Override the --pp-* theme and type variables inline.