ShimmerText

Animated text highlight that sweeps a configurable gradient across the content. Ideal for loading states, premium callouts, and attention-grabbing text accents.

Source

View source code

LLM docs

LLM documentation

Package

@platform-blocks/react-ui-library

Examples

⁽³⁾

Properties

⁽¹⁸⁾

Playground

Basic shimmer

Wrap text in ShimmerText to add the default looping highlight with no additional configuration.

Loading demo…

import
 
{
 
Block
,
 
ShimmerText
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<Block
 
align
=
"flex-start"
>
      
<ShimmerText
 
size
=
"xl"
 
weight
=
"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
 
'@platform-blocks/react-ui-library'
;
 
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"
        
weight
=
"bold"
        
size
=
"lg"
      
>
        
Interactive
 shimmer headline
      
</ShimmerText
>
 
      
<Block
 
w
=
"100%"
>
        
<Text
 
variant
=
"small"
 
weight
=
"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
>
  
)
;
}

Customization options

Combine custom color stops, timing tweaks, and direction to align the shimmer with your brand voice.

Loading demo…

import
 
{
 
Block
,
 
ShimmerText
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<Block
 
align
=
"flex-start"
>
      
<ShimmerText
 
shimmerColor
=
"#facc15"
 
spread
=
{
3
}
 
weight
=
"bold"
 
size
=
"xl"
>
        
Golden
 spotlight offer
      
</ShimmerText
>
      
<ShimmerText
        
color
=
"#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-ui-library

100+ accessible, themeable components that work seamlessly across iOS, Android, and Web.

A Platform Blocks product.

Quick Links

Components Charts Hooks

Docs

Getting Started Localization llms.txt

Resources

FAQ Changelog Accessibility Sitemap