Components
Shimmer
Animated text highlight for loading and refreshing states.
Generating response…Generating response…Generating response…
You might be looking for:
- Skeleton
Pulse bars that stand in for fetching values.
- Page Loading
Full-viewport wait — mark only, no content bars.
Playground
<Shimmer className="text-muted-foreground font-[family-name:var(--font-sans)] text-figure-md">Generating response…</Shimmer>Usage
import { Shimmer } from "@sophic/portal-ui/components/ui/shimmer";<Shimmer className="text-sm text-muted-foreground">Generating response…</Shimmer>
<Shimmer once duration={1100}>Response generated.</Shimmer>Use props for common modifiers (once, reverse, duration, spread, angle).
Unset spread keeps the default band width. Pass color tweaks via className
when needed.
Props
Shimmer also accepts every native <span> attribute.
Prop
Type
Default
Changelog
- 15 July 2026 —
variant="brand"sweep (khaki core, green fringes). Full notes