Handoff Beam

AI chats 3

About

An animated light beam that lines the bottom edge of a chat input or composer, morphing between idle, listening, thinking and speaking states to show AI assistant activity.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Handoff Beam to your project and fits it to your theme.

Code

How Handoff Beam is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import {
  HandoffBeam,
  createSimulatedVoice,
} from "@/components/ui/handoff-beam";
import { ArrowUp, Mic } from "lucide-react";
import { cn } from "@/lib/utils";

const voiceListen = createSimulatedVoice(11);

function Composer() {
  return (
    <div className="flex h-16 w-full items-center gap-2 rounded-[32px] border border-[color:var(--bjork-border,#232323)] bg-[color:var(--bjork-surface,#121212)] py-2 pr-2 pl-5 has-[input:focus-visible]:ring-2 has-[input:focus-visible]:ring-inset has-[input:focus-visible]:ring-[color:var(--bjork-accent,#ec5c13)]">
      <input
        aria-label="Message"
        placeholder="Ask anything"
        className="min-w-0 flex-1 bg-transparent text-[15px] text-[color:var(--bjork-text,#ededed)] outline-none placeholder:text-[color:var(--bjork-text-soft,rgba(237,237,237,0.5))]"
      />
      <button
        type="button"
        aria-label="Use microphone"
        className={cn(
          "grid size-10 shrink-0 place-items-center rounded-full border border-[color:var(--bjork-border,#232323)] bg-[color:var(--bjork-surface-active,#202020)] text-[color:var(--bjork-text-medium,rgba(237,237,237,0.72))] transition active:scale-[0.97]",
        )}
      >
        <Mic size={18} aria-hidden="true" />
      </button>
      <button
        type="button"
        aria-label="Send"
        className="grid size-10 shrink-0 place-items-center rounded-full bg-[color:var(--bjork-surface-active,#202020)] text-[color:var(--bjork-text-medium,rgba(237,237,237,0.72))] transition active:scale-[0.97]"
      >
        <ArrowUp size={18} aria-hidden="true" />
      </button>
    </div>
  );
}

export default function HandoffBeamDemo() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-[#111111] p-10">
      <div className="w-[min(560px,calc(100vw-56px))]">
        <HandoffBeam
          phase="listening"
          level={voiceListen}
          palette="ember"
          className="w-full shadow-[0_14px_20px_-6px_rgba(0,0,0,0.45)]"
        >
          <Composer />
        </HandoffBeam>
      </div>
    </div>
  );
}