Agent Thinking

Installation

Download the React source package, install its dependencies, and import the component with its shared styles.

'use client';
import {SourceAgentPreview} from '@helios-ui/react';
import '@helios-ui/react/styles.css';

export default function Example(){return <SourceAgentPreview id="agent-thinking"/>;}

Dot wave

Nine dots form a 3×3 grid. A diagonal highlight passes from the upper left to the lower right, leaving a short fading trail before repeating. This is the default animation.

'use client';
import {SourceAgentPreview} from '@helios-ui/react';
import '@helios-ui/react/styles.css';

export default function Example(){return <SourceAgentPreview id="agent-thinking" example="wave"/>;}

Dot spin

A bright point circles the same dot grid clockwise. Its trailing dots suggest continuous rotation while retaining the grid’s compact shape.

'use client';
import {SourceAgentPreview} from '@helios-ui/react';
import '@helios-ui/react/styles.css';

export default function Example(){return <SourceAgentPreview id="agent-thinking" example="spin"/>;}

Stars

Five four-point stars brighten and fade at different times. Their subtle default tone gives this treatment a softer appearance than either dot grid.

'use client';
import {SourceAgentPreview} from '@helios-ui/react';
import '@helios-ui/react/styles.css';

export default function Example(){return <SourceAgentPreview id="agent-thinking" example="stars"/>;}

Infinity

A moving highlight follows a figure-eight path over a quiet background track. The loop has no visual beginning or end, making it suitable for longer agent tasks.

'use client';
import {SourceAgentPreview} from '@helios-ui/react';
import '@helios-ui/react/styles.css';

export default function Example(){return <SourceAgentPreview id="agent-thinking" example="infinity"/>;}

Label, tone, and timer

The variants share one set of controls. Set the status text with label, show elapsed seconds with showTimer, and enable the moving text highlight with shimmer. Use tone to change the default color. Reduced-motion preferences replace the moving treatments with a still state.

'use client';
import {SourceAgentPreview} from '@helios-ui/react';
import '@helios-ui/react/styles.css';

export default function Example(){return <SourceAgentPreview id="agent-thinking" example="label"/>;}