Neural Pulse

A neural network fires a prompt through its nodes and resolves into the logo.

Installation

$ pnpm dlx shadcn@latest add @remocn/neural-pulse

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { NeuralPulse } from "@/components/remocn/neural-pulse";
 
const NeuralPulseScene = () => (
  <NeuralPulse
    input="Make a launch film"
    output="remocn"
    accent="#3B5BFD"
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="NeuralPulse"
    component={NeuralPulseScene}
    durationInFrames={230}
    fps={30}
    width={1280}
    height={720}
  />
);

The prompt splits into tokens that fly into a network, nodes fire layer by layer, and the pulse resolves into a single output that traces the R mark and reveals the name. Pass input (up to five words) and output, and logo to replace the R. Ships light and dark.

Props6

Prop	Type	Default
input	string"Make a launch film" Prompt split on spaces into tokens, up to five.
output	string"remocn" What the network resolves to; Remocn renders the real logo.
logo	React.ReactNode— Mark that replaces the R next to the output.
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.

inputstring
Prompt split on spaces into tokens, up to five.
Default"Make a launch film"
outputstring
What the network resolves to; Remocn renders the real logo.
Default"remocn"
logoReact.ReactNode
Mark that replaces the R next to the output.
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"