Shimmer

A monochrome moving highlight over progress text, with reduced-motion and forced-color fallbacks.

Preview

Reading the launch brief…

In action

Indicate activity

Reading the launch brief…

When to use

Use it for

  • Use short progress text while the application is working. Duration is in seconds; spread is a bounded percentage.
  • Set active=false to keep the same text without animation.

Avoid

  • Using animation as the only indication of progress.

Install

React package

npm install @noorddev/vlak-react

Load the stylesheet once at your app root, then import the components you use.

import "@noorddev/vlak-react/css";
import { Shimmer } from "@noorddev/vlak-react";

Per-component imports are available at @noorddev/vlak-react/components/shimmer.

Copy the source

npx @noorddev/vlak-cli add shimmer

Adds the component to components/vlak/. Follow the StyleX setup to compile the source in your application.

shadcn registry

npx shadcn add https://vlak.dev/r/shimmer.json

Installs the same source through the shadcn CLI.

React

import { Shimmer } from "@noorddev/vlak-react";

export function ReadingStatus({ streaming }: { streaming: boolean }) {
  return <Shimmer active={streaming}>Reading the brief</Shimmer>;
}

See the integration example to compose these components with your application's model and data.

Props

Shimmer

Animated text for supplied progress. Screen readers receive the text once, without token announcements.

PropTypeDefaultDescription
childrenrequiredstring
activebooleantrue
durationnumber2
spreadnumber15

Also accepts HTMLAttributes<HTMLSpanElement>.

The ref reaches HTMLSpanElement.

Accessibility

  • Reduced motion and forced colors keep the text static and readable.
  • Text remains available to assistive technology; use an application status region for meaningful progress changes.

Markup

The same styles are available as CSS. Native HTML provides the static presentation; React or application code supplies state updates and actions.

npm install @noorddev/vlak
import "@noorddev/vlak/css";
<span class="rs-shimmer rs-shimmer-active">Reading the brief</span>

Classes

.rs-shimmer.rs-shimmer-active

Use elsewhere

Markdown referenceRegistry JSONSourceAI integration guide
ChatConversationResponseResponse markdownMessage composerResponse actionsResponse branchResponse editorConversation exportAttachmentsSuggestionsModel selectorContext usageCheckpointReasoningThought stepsPlanTaskWork queueTool callConfirmationInline citationSourcesWidgetGenerated imageOpen in chatWidget patternsHighlighted codeAgentFile treeArtifactSnippetCommitEnvironment variablesPackage infoSchema displayTest resultsStack traceTerminalSandboxWeb previewJsx previewAudio playerMic selectorSpeech inputTranscriptionVoice selectorPersonaWorkflow canvas