Toolbar Unfurl

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

Installation

$ pnpm dlx 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.

Props6

Prop	Type	Default
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.

theme"dark" | "light"
Color scheme. Ships light and dark.
Default"dark"
accentstring
Color of the selection disc.
Default"#3B5BFD"
linesstring[]
Captions shown for each tool, up to four.
finalLinestring
Closing line shown after the toolbar retracts.
Default"Every tool, one tap away."
groundGshPresetId
Shader preset id for the animated background.
groundParamsPartial<GradientParams>
Partial shader parameters that override the ground preset.