# Curtains hero section

A shadcn/ui hero for architecture studios: a photo sliced into interactive curtain panels parting around the pointer over bold editorial typography.

> 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:** Architecture and design studio home pages; Creative agency and portfolio landing pages; Editorial launch pages leading with photos; Luxury architecture and spatial design sites
- **Category:** Portfolio, Marketing · **Type:** Hero · **Style:** Motion, Minimal, Dark mode
- **See it:** [Live preview](https://www.craftui.space/docs/templates/hero-section-04) · [Screenshot](https://www.craftui.space/llms.md/preview/hero-section-04.d1f328b4.jpg) · [Video](https://pub-52b0d9cec7c64f638ba3f33a29718fa6.r2.dev/Videos_product_cards/hero-curtains-hero-section.fca551a0.mp4)

![Curtains hero section](https://www.craftui.space/llms.md/preview/hero-section-04.d1f328b4.jpg)

## Install

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

This is a paid item (SEC-GHZNJT): 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 HeroSection04 from "@/components/blocks/hero-section-04";

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

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

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `brand` | `string` | `"AVEN Studio"` | Brand name displayed on the left side of the navbar. |
| `navLinks` | `HeroSection04NavLink[]` | `built-in demo content` | Primary navigation links displayed in the navbar. |
| `cta` | `HeroSection04Action` | `built-in demo value` | Call-to-action button displayed in the floating header tab. |
| `title` | `ReactNode` | `( <> Cultivating <br /> Quiet Spaces. </> )` | Main headline text or JSX. |
| `description` | `string` | `"AVEN Studio grows interiors, landscapes and objects where greenery, light and …` | Subtitle or descriptive paragraph text. |
| `imageSrc` | `string` | `"/images/hero-curtains.jpg"` | High-resolution image URL for the interleaved curtain slice hero. |
| `imageAlt` | `string` | `"Luminescent green tendrils flowing through darkness"` | Image alternative text for accessibility and screen readers. |
| `imageNumber` | `number` | — | Optional index to select an image from IMAGE_MAP (e.g. 1 or 2). |
| `imagePosition` | `"top" \| "center" \| "bottom"` | `"center"` | Vertical focal point alignment of the photograph. |
| `columns` | `number` | `32` | Number of vertical curtain slices on desktop. Defaults to 32 (adapts to 12 on mobile, 20 on tablet). |
| `introDuration` | `number` | — | Duration in ms for each curtain column to open during initial animation (default: 1200). |
| `introPause` | `number` | — | Hold pause in ms before the initial curtain opening begins (default: 350). |
| `introStagger` | `number` | — | Maximum stagger delay in ms across columns from center outward (default: 350). |
| `onImageClick` | `() => void` | — | Optional callback fired when the image curtain is clicked. |
| `headingLevel` | `1 \| 2` | `1` | 1 when this is the page's primary h1, 2 when inside documentation or secondary preview. |
| `className` | `string` | — | Optional container class name. |

### `HeroSection04NavLink`

| Field | Type | Description |
| --- | --- | --- |
| `label` (required) | `string` | Text label displayed for the link. |
| `href` (required) | `string` | Destination URL or anchor. |

### `HeroSection04Action`

| Field | Type | Description |
| --- | --- | --- |
| `label` (required) | `string` | Button text label. |
| `href` (required) | `string` | Destination URL or anchor. |

## Files

The install adds:

- `components/blocks/hero-section-04.tsx`

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