Loading…

Hero spotlight

Block

A dark hero lit by a spotlight beam that opens as it scrolls into view.

Heroes
1 components
1 file

Build stunning interfaces

Beautifully animated, accessible components built with React and Tailwind CSS. Open source and ready for production.

Get started Documentation

Installation

The block is written to your blocks directory, and everything it is built from is installed alongside it.

$pnpm dlx @dowel-ui/cli add hero-spotlight

Usage

A starting point, not a black box: render it, then edit the layout, the copy and the fields — they are yours.

app/page.tsxTSX

import { HeroSpotlightBlock } from "@/components/blocks/hero-spotlight"; export default function Page() {  return <HeroSpotlightBlock />;}

Built from

Every piece is a component you already have documentation for, and can change independently.

Button

API

<HeroSpotlightBlock>

Prop	Type	Default
`description`	`string`	`"Beautifully animated, accessible components built with React and Tailwind CSS. Open source and ready for production."`
`headingLevel` The headline's level, so the block fits any page outline.	`1 \| 2 \| 3 \| 4 \| 5 \| 6`	`2`
`primaryAction` The main call to action. `null` hides it.	`HeroSpotlightAction \| null`	`{ label: "Get started", href: "#" }`
`secondaryAction` The quieter call to action. `null` hides it.	`HeroSpotlightAction \| null`	`{ label: "Documentation", href: "#" }`
`title` The headline.	`string`	`"Build stunning interfaces"`

Plus every attribute of <section> except title.

Accessibility

One section landmark named by its headline, whose level is a prop. It is dark in every theme through the theme's own dark tokens, so contrast holds. The beam and dust are aria-hidden decoration; the dust twinkles three times and rests rather than looping forever. The entrance plays once, on first scroll into view, and settles instantly under reduced motion.