Text with a soft highlight band sweeping across it on a loop, built with a pure CSS background-clip gradient animation and configurable base and shimmer colors.
Preview
Generating your preview...
Customize
4 props2.5
Installation
Copies the component source and its CSS Module into your project.
npx motionfoundry add shimmer-textWrites components/ui/shimmer-text.tsx and components/styles/shimmer-text.module.css.
Usage
Updates live as you change the controls — only props that differ from the defaults are included.
example.tsx
1import { ShimmerText } from "@motionfoundry/ui";2 3export function Example() {4 return (5 <ShimmerText />6 );7}Props
Accessibility
Renders plain inline text, so screen readers read it normally; the gradient is purely visual. Under prefers-reduced-motion the sweep animation is removed and the text renders in the solid base color.
Toggle prefers-reduced-motion in your OS or browser devtools (Rendering → Emulate CSS media feature) to verify the reduced-motion state.
Source
components/ui/shimmer-text.tsx
1"use client";2 3import * as React from "react";4import styles from "../styles/shimmer-text.module.css";5 6export interface ShimmerTextProps {7 /** Text the highlight sweeps across */8 text?: string;9 /** Duration of one sweep in seconds */10 duration?: number;11 /** Resting text color */12 baseColor?: string;13 /** Color of the moving highlight */14 shimmerColor?: string;15 /** Optional className */16 className?: string;17}18 19export function ShimmerText({20 text = "Generating your preview...",21 duration = 2.5,22 baseColor = "#71717a",23 shimmerColor = "#f4f4f6",24 className = "",25}: ShimmerTextProps) {26 const styleVars = {27 "--mf-sh-duration": `${duration}s`,28 "--mf-sh-base": baseColor,29 "--mf-sh-shine": shimmerColor,30 } as React.CSSProperties;31 32 return (33 <span style={styleVars} className={`${styles.root} ${className}`.trim()}>34 {text}35 </span>36 );37}