Shimmer

Overview

Shimmer renders animated text for temporary chat states such as thinking, searching, or streaming.

import { Shimmer } from "@tilt-legal/cubitt-components/chat-elements";

<Shimmer>Reviewing sources and preparing a response...</Shimmer>

<Shimmer as="h3" className="font-medium text-lg">
  Checking citations
</Shimmer>

Animated text shimmer for transient chat states.

Prop	Type	Default	Description
`children`	`string`	-	Text to render with the shimmer effect. Required.
`as`	`keyof JSX.IntrinsicElements`	`"p"`	Intrinsic element used for the text node.
`duration`	`number`	`2`	Duration in seconds for one shimmer animation cycle.
`spread`	`number`	`2`	Multiplier used to size the moving shimmer highlight.
`className`	`string`	-	Additional CSS classes for the rendered text component.

When users prefer reduced motion, Shimmer renders static text-fg-2 text and disables the infinite shimmer animation.