# Parted statement

A shadcn/ui editorial section for brand stories that need impact: a scroll-driven statement parts around a growing image, then a second line rises.

> 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:** Brand stories and manifesto sections; Agency, studio and fashion websites; Launch pages that need a cinematic moment
- **Category:** Marketing, Portfolio · **Type:** Editorial · **Style:** Motion, Dark mode
- **See it:** [Live preview](https://www.craftui.space/docs/templates/statement-section) · [Screenshot](https://www.craftui.space/llms.md/preview/statement-section.6f94da29.jpg)

![Parted statement](https://www.craftui.space/llms.md/preview/statement-section.6f94da29.jpg)

## Install

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

This is a paid item (SEC-0007): 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 StatementSection from "@/components/blocks/statement-section";

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

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

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `text` | `string` | `"We make things for the quiet hours, the first light and the long road home, th…` | The statement. Plain text; it's set word by word. |
| `emphasis` | `string` | `"the quiet hours,"` | A phrase in `text` set in the italic accent face. |
| `reveal` | `string` | `"Made slowly, built to last."` | The second statement, which rises out of the photo at the end. |
| `image` | `StatementImage` | `built-in demo value` | The photo in the circle that grows to fill the screen. |
| `eyebrow` | `ReactNode` | `"(02) — Field notes"` | Small text in the top corner. |
| `length` | `number` | `3` | How long the stage stays pinned, in screen heights. |
| `scroller` | `RefObject<HTMLElement \| null>` | — | The element that scrolls, when it isn't the page (a custom scroll container, a smooth-scroll wrapper). The stage is then as tall as it. |
| `headingLevel` | `1 \| 2` | `2` | 1 when this is the page's main heading; 2 when the page has its own h1. |

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

### `StatementImage`

| Field | Type | Description |
| --- | --- | --- |
| `src` (required) | `string` | Image URL. A large landscape photo: it ends up filling the screen. |
| `alt` (required) | `string` | Describes the photo for screen readers. |
| `focus` | `string` | The photo's subject, as a CSS position ("21% 40%"): the small circle frames it at the start, then eases out to the whole photo. |

## Files

The install adds:

- `components/blocks/statement-section.tsx`
- `components/blocks/statement-section-flow.ts`

No npm dependencies beyond React and Tailwind CSS.