Hero ditheredPro

An editorial hero: a large dithered plate on one side, tight type and a hairline row of figures on the other, set off center like a magazine opener.

Markdown

On this page

ProAn editorial hero with a large dithered plate, tight type and a hairline row of figures. Hover the plate for the original.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/hero-dithered

Usage

tsx

import { HeroDithered } from "@/components/ui/chatcn/pro/hero-dithered"

<HeroDithered title="A voice model that waits for you to finish." src={plate.src} alt={plate.alt} stats={stats} />

The plate is dithered in the kit's ink and paper, so it reads as part of the page in both themes; Atkinson by default, which keeps faces and edges. Hover, focus or press and hold shows the original photo. Pick a photo with strong light and dark areas, at least 2x the plate's display size: soft, low contrast pictures dither into noise. media replaces the plate with your own, for example a dithered video.

Every section is full width with a 16 px gutter on phones and 32 px from 768 px, content capped at 1200 px. Layout follows the section's own width through a container query, not the viewport, so a section in a narrow column lays out like a phone.

Examples

Start side, ordered dither and error

A landscape plate on the start side in Bayer 8, and the frame when the picture cannot load.

ProA landscape plate on the start side in Bayer 8, and the frame when the picture cannot load.

Props

Prop	Type	Notes
`title`	`ReactNode`	Required. One idea; it balances over two or three lines
`description`	`ReactNode`	The paragraph under or beside the headline
`actions`	`ReactNode`	Buttons or links under the paragraph
`src`, `alt`	`string`	The plate. `alt` is required with `src`
`caption`	`ReactNode`	A small figure caption
`algorithm`	`DitherAlgorithm`	Default `atkinson`
`pixelSize`	`number`	CSS px per dither cell. Default 2
`aspectRatio`	`number \| "4:5"`	Default `1:1`
`reveal`	`boolean`	Hover or press shows the original. Default true
`stats`	`{ value, label }[]`	Two to four figures in a hairline row
`imageSide`	`"start" \| "end"`	Default `end`
`media`	`ReactNode`	Replaces the plate

Keyboard

Key	Action
`Tab`	Focuses the plate, which shows the original photo while focused

Accessibility

The section is labelled by its headline. Heroes use an h1, other sections an h2; render one hero per page.
The figures are a description list: each value is announced with its label.
The dither is decoration; the photo with your alt is in the page, and shows plainly under forced colors.

Motion

Nothing moves on its own. The original photo crossfades in on hover, focus or press and hold.