# Showreel wheel hero

A shadcn/ui portfolio hero for studios and creators who lead with their work: projects on a draggable film wheel, live captions and a client row.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available for the docs, pricing and about pages: append `.md` to the URL or send an `Accept: text/markdown` header (the home page answers the header too). An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).

## At a glance

- **Good for:** Agency, studio and freelancer portfolios; Photographers', filmmakers' and creators' showreels; Brand sites that lead with their work
- **Category:** Portfolio · **Type:** Hero · **Style:** Motion, Dark mode
- **See it:** [Live preview](https://www.craftui.space/docs/templates/hero-section-02) · [Video](https://pub-52b0d9cec7c64f638ba3f33a29718fa6.r2.dev/Videos_product_cards/hero-showreel-wheel-hero.a070f3e9.mp4)

## Install

```bash
pnpm dlx shadcn@latest add https://www.craftui.space/r/hero-section-02.json
```

This is a paid item (SEC-0006): the install needs a craftUI plan or a purchase of it. Signed in, the docs page gives your personal install command. Plans: https://www.craftui.space/pricing

## Usage

```tsx
import ShowreelHero from "@/components/blocks/hero-section-02";

export default function Page() {
  return <ShowreelHero />;
}
```

With no props it renders with demo content; pass your own through the props below.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `eyebrow` | `ReactNode` | — | Small label above the title. |
| `title` | `ReactNode` | `"Product launch videos"` | The hero's main line. |
| `titleMuted` | `ReactNode` | `"that show what you built."` | A second line, in the muted colour. |
| `description` | `ReactNode` | `"We script, film and edit launch videos for software products, from the main fi…` | A sentence or two under the title. |
| `primaryAction` | `ShowreelAction \| null` | `built-in demo value` | The main button. Pass null to hide it. |
| `secondaryAction` | `ShowreelAction \| null` | `built-in demo value` | The second, quieter button. Pass null to hide it. |
| `logosLabel` | `string` | `"Trusted by"` | Label before the scrolling row of client logos. |
| `logos` | `ShowreelLogo[]` | `built-in demo content` | Scroll by in a loop under the actions. Pass [] to hide the row. |
| `reels` | `ShowreelReel[]` | `built-in demo content` | Your work: one frame on the wheel each, with its description. |
| `categories` | `ShowreelCategory[]` | `built-in demo content` | Names for the reels' `category` ids, shown above each description. |
| `initialIndex` | `number` | `0` | Which reel faces the viewer at first. |
| `autoplay` | `boolean` | `true` | Advances while the section is on screen and nobody's using it. |
| `autoplayInterval` | `number` | `5000` | Milliseconds between autoplay steps. |
| `headingLevel` | `1 \| 2` | `1` | 1 when this is the page's hero; 2 when the page has its own h1. |

It also accepts every `<section>` attribute (`className`, `id`, `aria-*` and so on).

### `ShowreelAction`

| Field | Type | Description |
| --- | --- | --- |
| `href` (required) | `string` | Where the button goes: a page, an anchor ("#contact") or a mailto: link. |
| `label` (required) | `string` | The button's text, e.g. "Book a call". |

### `ShowreelLogo`

| Field | Type | Description |
| --- | --- | --- |
| `name` (required) | `string` | The client's name, shown in the scrolling client row and read by screen readers. |
| `logo` | `ReactNode` | The client's mark, shown before the name at 20px. |

### `ShowreelReel`

| Field | Type | Description |
| --- | --- | --- |
| `src` (required) | `string` | Image URL, ideally 16:9 (a video still). It's cropped to the frame. |
| `alt` (required) | `string` | Describes the image for screen readers. |
| `description` (required) | `string` | What the piece is, in a line or two. Also names the frame. |
| `category` | `string` | Matches a `ShowreelCategory.id`, whose label shows above it. |
| `href` | `string` | Makes the description a link (a case study, the film itself). |
| `views` | `ShowreelViews[]` | Where it was watched, and how much. Two or three read best. |

### `ShowreelCategory`

| Field | Type | Description |
| --- | --- | --- |
| `id` (required) | `string` | Unique id that reels point at with their `category`. |
| `label` (required) | `string` | The category's name, shown above each of its reels' captions, e.g. "Brand film". |

### `ShowreelViews`

| Field | Type | Description |
| --- | --- | --- |
| `platform` (required) | `string` | Read by screen readers ("YouTube views"); the icon stands in for it. |
| `value` (required) | `string` | The count as shown, e.g. "1.2M". |
| `icon` | `ReactNode` | The platform's mark, shown before the count. |

## Files

The install adds:

- `components/blocks/hero-section-02.tsx`
- `components/blocks/hero-section-02-wheel.tsx`
- `components/blocks/hero-section-02-logos.tsx`
- `components/blocks/hero-section-02-shared.ts`

npm dependencies (installed for you): `lucide-react`, `motion`.