Morphing infinity

MorphingInfinity pairs a morphing line icon with a small set of animated status words. It is a good fit for AI replies, drafting flows, planning states, and any interface where the wait state should feel deliberate instead of generic.

import { MorphingInfinity } from "@/components/loading-ui/morphing-infinity";

export function MorphingInfinityDemo() {

Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add @loading-ui/morphing-infinity
Copy

Usage

Copyimport { MorphingInfinity } from "@/components/loading-ui/morphing-infinity";

Copy<MorphingInfinity />

Customization

The component follows the source animation closely: the circle-to-infinity icon morph, shimmer colors, rotating words, and timing are fixed. Use className to place it inside your surface or adjust padding around the status.

Compact

Tighten padding when the indicator appears inside dense assistant panels, toolbars, or inline status rows.

import { MorphingInfinity } from "@/components/loading-ui/morphing-infinity";

export function MorphingInfinityCompact() {

Examples

These examples place the morphing infinity in assistant-oriented surfaces where an animated status needs to remain visible without becoming a full-page loader.

Alert

Alerts can pair the animated status with one concise line about the work in progress.

import {
  Alert,
  AlertDescription,

Card

Cards keep the state attached to a specific assistant workspace or processing panel.

import {
  Card,
  CardContent,

Tabs

Tabs work well when generated content and supporting material resolve at different moments.

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { MorphingInfinity } from "@/components/loading-ui/morphing-infinity";