ShimmerText
Animated text highlight that sweeps a configurable gradient across the content. Ideal for loading states, premium callouts, and attention-grabbing text accents.
Source
LLM docs
Package
Examples
4
Properties
72
Playground
Basics
Wrap text in
ShimmerText to add the default looping highlight with no additional configuration.Loading demo…
import { Block, ShimmerText } from '@plocks/ui';
export function Demo() {
return (
<Block align="flex-start">
<ShimmerText size="xl" fw="bold">
Weekly highlights go live
</ShimmerText>
<ShimmerText>
New arrivals shimmer into view every Friday at noon.
</ShimmerText>
</Block>
);
}Interactive controls
Expose
spread, repeat, and once controls to let readers tune the shimmer loop at runtime.Loading demo…
import { useState } from 'react';
import { Block, Row, ShimmerText, Slider, Switch, Text } from '@plocks/ui';
const MIN_SPREAD = 1;
const MAX_SPREAD = 4;
const SPREAD_STEP = 0.1;
export function Demo() {
const [spread, setSpread] = useState(2);
const [repeat, setRepeat] = useState(true);
const [once, setOnce] = useState(false);
const handleRepeatChange = (value: boolean) => {
setRepeat(value);
if (value) {
setOnce(false);
}
};
const handleOnceChange = (value: boolean) => {
setOnce(value);
if (value) {
setRepeat(false);
}
};
return (
<Block align="flex-start" fullWidth>
<ShimmerText
spread={spread}
repeat={repeat}
once={once}
repeatDelay={0.6}
duration={1.6}
shimmerColor="#38bdf8"
fw="bold"
size="lg"
>
Interactive shimmer headline
</ShimmerText>
<Block w="100%">
<Text variant="small" fw="medium">
Spread: {spread.toFixed(1)}
</Text>
<Slider
value={spread}
onChange={setSpread}
min={MIN_SPREAD}
max={MAX_SPREAD}
step={SPREAD_STEP}
/>
</Block>
<Block w="100%">
<Row align="center" justify="space-between">
<Text variant="small">Repeat animation</Text>
<Switch checked={repeat} onChange={handleRepeatChange} />
</Row>
<Row align="center" justify="space-between">
<Text variant="small">Run once</Text>
<Switch checked={once} onChange={handleOnceChange} />
</Row>
</Block>
</Block>
);
}Variants
Compare semantic text variants while the shimmer animation stays the same.
Loading demo…
import { Column, ShimmerText, Text } from '@plocks/ui';
const variants = ['h3', 'p', 'small'] as const;
export function Demo() {
return (
<Column gap="md">
{variants.map(variant => (
<Column key={variant} gap="xs">
<Text size="xs" c="secondary">{variant}</Text>
<ShimmerText variant={variant}>New arrivals this week</ShimmerText>
</Column>
))}
</Column>
);
}Customization options
Combine custom color stops, timing tweaks, and direction to align the shimmer with your brand voice.
Loading demo…
import { Block, ShimmerText } from '@plocks/ui';
export function Demo() {
return (
<Block align="flex-start">
<ShimmerText shimmerColor="#facc15" spread={3} fw="bold" size="xl">
Golden spotlight offer
</ShimmerText>
<ShimmerText
c="#475569"
shimmerColor="#38bdf8"
spread={1.2}
duration={1.2}
repeatDelay={0.2}
>
Fast pulse notification
</ShimmerText>
<ShimmerText direction="rtl" repeatDelay={0.8}>
Shimmer sweeps from right to left
</ShimmerText>
<ShimmerText once repeat={false} delay={0.5}>
Single pass announcement
</ShimmerText>
</Block>
);
}React Native design for iOS, Android, and Web.
Quick Links
Resources