Typography / effect

Shiny Text

A soft metallic highlight glides across live text.

Example

Preparing preview…

Take it with you.

SOURCE ACCESS

Enter the shared password to copy the complete source, download every file, and install components in your app.

Access lasts 24 hours. Your preview settings stay with you.

The included Demo.tsx and shared/demo.css recreate the complete preview. Import the main component to compose your own design.
No continuous work while idle, offscreen, or paused. Reduced motion renders a settled view.
Five contexts include a local shortlist button, headline and inline layouts, plus two original organic radial highlights. Organic duration/highlightColor map exactly from speed/shineColor; linear-only controls are omitted there.
All context actions survive Pause/Replay. Text remains selectable and readable under reduced motion; OrganicShimmer retains a normal foreground independently of its decorative layer.

React 19CSS

React Bits · MIT with Commons Clause. Used with explicit project permission; see bundled notice.

Prop	Type	Default	Description
`text` (required)	string	`— (required)`	Text
`speed`	number seconds/cycle	`2`	Cycle duration
`color`	string	`#b5b5b5`	Text color
`shineColor`	string	`#ffffff`	Highlight
`spread`	number	`120`	Gradient angle
`yoyo`	boolean	`false`	Reverse each pass
`pauseOnHover`	boolean	`false`	Pause on hover
`direction`	left\|right	`left`	Direction
`delay`	number seconds	`0`	Rest between passes
`disabled`	boolean	`false`	Stop the shimmer while keeping text readable.
`paused`	boolean	`false`	Suspend decoration without changing caller state, retained text, local input or results.
`replayToken`	number	`0`	Restart decoration while retaining caller state and local work in the new contexts. Legacy Thought/Lattice Demo explicitly restarts its synthetic interaction.
`className`	string		Additional classes for the outer element.
`highlightColor`	string	`#ffffff`	OrganicShimmer: radial light color, mapped from the Highlight control.
`duration`	number seconds	`3`	OrganicShimmer: curved radial cycle, mapped from Cycle duration;0 suspends continuous frames.
`style`	CSSProperties	`undefined`	OrganicShimmer: optional wrapper styles; readable foreground is always retained.