# Toolbar Unfurl
URL: https://remocn.dev/docs/ui-blocks/toolbar-unfurl

A round tap button unfurls into a four-tool strip while captions name each tool, ending on a final line.

- Install: `npx shadcn@latest add @remocn/toolbar-unfurl`
- Vibe: tech
- Natural length: 125f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/toolbar-unfurl
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { ToolbarUnfurl } from "@/components/remocn/toolbar-unfurl";

const ToolbarUnfurlScene = () => (
  <ToolbarUnfurl
    accent="#3B5BFD"
    lines={["Leave a note.", "Sketch the shot.", "Type on the frame.", "Select any layer."]}
    finalLine="Every tool, one tap away."
  />
);

export const RemotionRoot = () => (
  <Composition
    id="ToolbarUnfurl"
    component={ToolbarUnfurlScene}
    durationInFrames={150}
    fps={30}
    width={1280}
    height={720}
  />
);
```

A cursor taps a round accent button that unfurls into a four-tool strip, hopping from tool to tool while a caption names each one. The strip then retracts and the `finalLine` lands. Pass your own `lines` (up to four captions, one per tool) and `finalLine`; it ships light and dark through `theme`.

The ground is a live gradients.sh shader (`GshGround`), installed with the component as `@remocn/gsh`. Pick another look with the `ground` preset prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `theme` | `"dark" \| "light"` | `"dark"` | Color scheme. Ships light and dark. |
| `accent` | `string` | `"#3B5BFD"` | Color of the selection disc. |
| `lines` | `string[]` | — | Captions shown for each tool, up to four. |
| `finalLine` | `string` | `"Every tool, one tap away."` | Closing line shown after the toolbar retracts. |
| `ground` | `GshPresetId` | — | Shader preset id for the animated background. |
| `groundParams` | `Partial<GradientParams>` | — | Partial shader parameters that override the ground preset. |

## Use when
- A feature beat introducing a set of editor tools, one caption per tool, such as select, text, draw and comment.
- A product demo needs a toolbar that grows out of a single button and hops from tool to tool.
- The closing line of a feature scene should land after a short guided tour of controls.

## Don't use when
- You are presenting more than four features or want them as cards in a grid — use `bento-build`.
- Only one control flips state and you want the whole stage to react — use `toggle-on`.
- The beat is a typed prompt rather than a tool strip — use `caret-dolly`.