Hero perspective grid
BlockA centred hero over a tilted 3D plane of tiles that light up under the pointer.
- Heroes
- 2 components
- 1 file
Loading the example…
pnpm dlx @dowel-ui/cli add hero-perspective-gridimport { HeroPerspectiveGridBlock } from "@/components/blocks/hero-perspective-grid"; export default function Page() { return <HeroPerspectiveGridBlock />;}<HeroPerspectiveGridBlock>
| Prop | Type | Default |
|---|---|---|
description | string | "Accessible, composable building blocks for polished, animated interfaces — ready in minutes." |
headingLevelThe headline's level, so the block fits any page outline. | 1 | 2 | 3 | 4 | 5 | 6 | 2 |
highlightWords appended to the headline in the primary colour. | string | "confidence" |
hoverColorsTile hover colour: one CSS colour, or up to four cycled across the plane. Defaults to the theme's primary colour. | string | string[] | "var(--color-primary)" |
primaryActionThe main call to action. | HeroPerspectiveGridAction | null | { label: "Learn more", href: "#" } |
secondaryActionThe quieter call to action. | HeroPerspectiveGridAction | null | { label: "Get started", href: "#" } |
titleThe headline. | string | "Build your next project with" |
Plus every attribute of <section> except title.
One section landmark named by its headline, whose level is a prop. The tile plane is aria-hidden decoration with no focusable parts. Calls to action are real links. Under reduced motion the entrance and the tile fade settle instantly and the plane lies flat instead of tilting in perspective.