Dither sky

Night hero with drifting clouds in a dithered shader.

Usage

import { HeroDitherSky } from '@/components/blocks/hero-section-10'


<HeroDitherSky />


<HeroDitherSky
  brand="Glasshouse"
  eyebrow="Now in beta"
  headline={['Write slowly,', 'think clearly']}
  primaryAction={{ label: 'Try it free', href: '/signup' }}
  secondaryAction={{ label: 'Read the story', href: '/about' }}
/>

Install

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

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

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

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

Source

Props

Dither sky props
Prop	Type	Default	Description
brand / brandHref	string	= Nimbus / #	Brand name and link next to the pixel-moon mark.
navLinks	{ label: string; href: string }[]	= Features, Journal, Pricing, Changelog	Links in the centre of the nav. Collapses to a burger below md.
cta	{ label: string; href: string }	= Open Nimbus	White pill on the right of the nav.
eyebrow	string	= undefined	Optional small line above the headline, with a twinkling pixel star. Hidden when unset.
headline	string[]	= ['Think above', 'the noise']	One entry per headline line.
description	string	= A calm place to write, plan and focus…	Supporting copy under the headline.
primaryAction	{ label: string; href: string }	= Start writing free	White pill with an arrow.
secondaryAction	{ label: string; href: string }	= Take the tour	Outlined pill next to the primary action.
colors	{ dark?: string; light?: string; highlight?: string; accent?: string }	= { dark: '#0B1224', light: '#9AA3BD', highlight: '#EDEFF5', accent: '#2B7FFF' }	Dither palette: dark sky cells, mid-tone cloud cells near the copy, bright cloud cells in open sky and a blue tint mixed into the dark cells in the cloud shadows.
pixelSize	number	= 3	Size of one dither dot in CSS pixels, scaled by the device pixel ratio.
contrast	number	= 1.8	Tone contrast applied before dithering. Higher gives more solid clouds.
brightness	number	= 0	Tone offset applied before dithering, from -1 to 1.
speed	number	= 1	Multiplier for how fast the clouds drift. 0 freezes them.
className	string	= —	Additional classes for the section.
style	CSSProperties	= —	Override the --pp-* theme and type variables inline.