ShineFx

Updated: October 14, 2025

ShineFx creates a smooth, animated shine effect that sweeps across text. The effect uses a gradient that moves horizontally, creating a shimmering appearance ideal for drawing attention to important text.

Basic

Thinking...

<ShineFx variant="heading-default-xl">
  Shine bright like a diamond
</ShineFx>

Speed

Adjust the animation speed with the speed (milliseconds) prop. Higher values create slower animations, while lower values make the shine effect faster.

Speed

Fast shine - default (1s)Medium shine (5s)Slow shine (10s)

<ShineFx speed={1000}>
  Fast shine - default (1s)
</ShineFx>

<ShineFx speed={3000}>
  Medium shine (3s)
</ShineFx>

<ShineFx speed={5000}>
  Slow shine (5s)
</ShineFx>

Inverse

Use the inverse prop to invert the shine effect.

Inverse

Inverse shine

<ShineFx inverse>
  Inverse shine
</ShineFx>

Base opacity

Control the base text visibility with the baseOpacity prop (0-1). Higher values improve readability and accessibility, while lower values create a more subtle effect.

Opacity

Subtle (0.1)Default (0.3)More visible (0.6)High visibility (0.9)

<ShineFx baseOpacity={0.1}>
  Subtle (0.1)
</ShineFx>

<ShineFx baseOpacity={0.3}>
  Default (0.3)
</ShineFx>

<ShineFx baseOpacity={0.6}>
  More visible (0.6)
</ShineFx>

<ShineFx baseOpacity={0.9}>
  High visibility (0.9)
</ShineFx>

Disabled

Disable the animation with the disabled prop to show static text without the shine effect.

Disabled

AnimatedDisabled

<ShineFx>
  Animated
</ShineFx>

<ShineFx disabled>
  Disabled
</ShineFx>

Variants

ShineFx works with all Text component variants and styling props.

Variants

Display variantHeading with colorBody with color

<ShineFx variant="display-default-xs">
  Display variant
</ShineFx>

<ShineFx variant="heading-default-l" onBackground="brand-medium">
  Heading with color
</ShineFx>

<ShineFx variant="body-default-m" onBackground="danger-weak">
  Body with color
</ShineFx>

Performance

ShineFx automatically detects low-end devices and the prefers-reduced-motion system setting. When either is detected, the shine animation is disabled (equivalent to disabled={true}). You can override this with the reducedMotion prop. See useReducedMotion for details.

API reference

Prop	Type	Default
speed How long one pass takes, in milliseconds. This was seconds before 2.0.	number	1000
disabled Stop the shine.	boolean	false
inverse Run it the other way.	boolean	false
baseOpacity Opacity of the content the shine passes over.	number	0.3
reducedMotion "auto" follows the reader's system setting, which is the right default for anything ambient.	booleanauto	auto
children	React.ReactNode	—
…and every FlexProps prop	inherited	—
…and every TextProps prop	inherited	—

EffectsCountdownFx

EffectsTypeFx

Edit this page on GitHub

Built with curiosity by Lorant One and the Design Engineers Club