Signal Resolve

Noisy scope traces are swept clean into a single line that locks into the logo with a caption.

Installation

$ pnpm dlx shadcn@latest add @remocn/signal-resolve

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { SignalResolve } from "@/components/remocn/signal-resolve";
 
const SignalResolveScene = () => (
  <SignalResolve
    name="emocn"
    caption="Less noise. More signal."
    traces={5}
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="SignalResolve"
    component={SignalResolveScene}
    durationInFrames={250}
    fps={30}
    width={1280}
    height={720}
  />
);

Several noisy scope traces run across the frame, a sweep cleans them into a flat line, the line draws into the R mark, and the name slides out of it as the caption fades in. Pass name, caption and traces. Ships light and dark.

Props6

Prop	Type	Default
name	string"emocn" Letters that slide out of the R; R plus name is the logo.
caption	string"Less noise. More signal." Closing sentence; the last sentence is set in an italic serif.
traces	number5 Number of noisy traces before they resolve.
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.

namestring
Letters that slide out of the R; R plus name is the logo.
Default"emocn"
captionstring
Closing sentence; the last sentence is set in an italic serif.
Default"Less noise. More signal."
tracesnumber
Number of noisy traces before they resolve.
Default5
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"