Typing Indicator

A motion atom that renders N bouncing dots driven directly by useCurrentFrame

A motion atom that reads useCurrentFrame directly and produces N dots bouncing with staggered sine offsets. No state prop — the animation runs continuously as long as the component is mounted on the timeline. Drop it into any bubble or container to signal that a message is being composed.

Installation

$ pnpm dlx shadcn@latest add @remocn/typing-indicator

Usage

Place TypingIndicator inside a MessageBubble (or any container) to show the typing state before a reply bubble enters:

tsx

import { MessageBubble } from "@/components/remocn/message-bubble";
import { TypingIndicator } from "@/components/remocn/typing-indicator";
 
export const Scene = () => (
  <div style={{ position: "relative", width: "100%", height: "100%" }}>
    <MessageBubble variant="incoming" state="visible">
      <TypingIndicator />
    </MessageBubble>
  </div>
);

The helper typingDotOffset(frame, index, opts) is exported for cases where you want to drive individual dot positions from your own layout.

Props8

Prop	Type	Default
dotCount	number3 Number of bouncing dots to render.
color	string"currentColor" Fill color of the dots. Inherits the parent text color by default.
size	number8 Diameter of each dot in pixels.
gap	number5 Horizontal gap between dots in pixels.
amplitude	number5 Vertical bounce amplitude in pixels.
speed	number1 Multiplier on the overall animation speed. Values above 1 speed up; below 1 slow down.
cyclesPerSecond	number1.1 Number of full bounce cycles per second.
className	string— Optional className applied to the dots container element.

dotCountnumber
Number of bouncing dots to render.
Default3
colorstring
Fill color of the dots. Inherits the parent text color by default.
Default"currentColor"
sizenumber
Diameter of each dot in pixels.
Default8
gapnumber
Horizontal gap between dots in pixels.
Default5
amplitudenumber
Vertical bounce amplitude in pixels.
Default5
speednumber
Multiplier on the overall animation speed. Values above 1 speed up; below 1 slow down.
Default1
cyclesPerSecondnumber
Number of full bounce cycles per second.
Default1.1
classNamestring
Optional className applied to the dots container element.