Tool Menu Slide In

A horizontal pill of tool icons whips up from below the canvas, then each icon pops in with a staggered spring

Installation

$ pnpm dlx shadcn@latest add @remocn/tool-menu-slide-in

Usage

// src/Root.tsx
import { Composition } from "remotion";
import { ToolMenuSlideIn } from "@/components/remocn/tool-menu-slide-in";

const ToolMenuScene = () => (
  <ToolMenuSlideIn
    panelStartFrame={18}
    iconStagger={4}
    iconCount={5}
    accent="#a78bfa"
  />
);

export const RemotionRoot = () => (
  <Composition
    id="ToolMenuSlideIn"
    component={ToolMenuScene}
    durationInFrames={180}
    fps={30}
    width={1280}
    height={720}
  />
);

With Backdrop

Renders transparent — supply the background via Backdrop:

import { Backdrop } from "@/components/remocn/backdrop";
import { ToolMenuSlideIn } from "@/components/remocn/tool-menu-slide-in";

<Backdrop fill={{ type: "color", value: "#070708" }}>
  <ToolMenuSlideIn panelStartFrame={18} iconStagger={4} iconCount={5} accent="#a78bfa" />
</Backdrop>

Props

Prop	Type	Default	Description
`panelStartFrame`	`number`	`18`	Frame at which the panel begins sliding up
`iconStagger`	`number`	`4`	Frames of delay between each icon's pop-in spring
`iconCount`	`number`	`5`	Number of fake tool icons to render (clamped 1-8)
`accent`	`string`	`"#a78bfa"`	Accent color used for the active icon glow and border
`panelColor`	`string`	`"rgba(18, 18, 22, 0.72)"`	Frosted-glass fill of the menu pill
`iconBg`	`string`	`"rgba(255,255,255,0.06)"`	Background of inactive tool icons
`speed`	`number`	`1`	Playback speed multiplier
`className`	`string`	—	Optional className passed to the root container