Bass Drop

A trailer build breathes in with a tracked line, goes silent, then drops into the big gradient logo.

Installation

$ pnpm dlx shadcn@latest add @remocn/bass-drop

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { BassDrop } from "@/components/remocn/bass-drop";
 
const BassDropScene = () => (
  <BassDrop
    build="THIS FALL"
    title="REMOCN"
    line="LAUNCH FILMS"
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="BassDrop"
    component={BassDropScene}
    durationInFrames={150}
    fps={30}
    width={1280}
    height={720}
  />
);

A widely tracked build line breathes in under rising tension, the frame cuts to silence, then the logo (or your own title word) slams in on the hit with a flash and a line cuts in beneath. Pass build, and optionally title and line. Ships light and dark.

Props6

Prop	Type	Default
build	string"THIS FALL" Tracked line that breathes in during the build-up.
title	string— Word that lands on the hit; the Remocn logo when omitted.
line	string— Line that cuts in under the title; defaults to build, empty hides it.
accent	string"#3B5BFD" Accent colour for the mark and highlights; any CSS colour.
speed	number1 Playback multiplier for the whole timeline; 1 is normal speed.
theme	"dark" \| "light""dark" Dark or light palette and ground.

buildstring
Tracked line that breathes in during the build-up.
Default"THIS FALL"
titlestring
Word that lands on the hit; the Remocn logo when omitted.
linestring
Line that cuts in under the title; defaults to build, empty hides it.
accentstring
Accent colour for the mark and highlights; any CSS colour.
Default"#3B5BFD"
speednumber
Playback multiplier for the whole timeline; 1 is normal speed.
Default1
theme"dark" | "light"
Dark or light palette and ground.
Default"dark"