ShinyText

ShinyText is a client component that renders Text as a Motion div with a text-clipped gradient whose background position animates on a loop. Use it to draw attention to short labels such as announcements or loading states. It depends on motion/react.

Import#

import { ShinyText } from "@reactberry/system/blocks";

Usage#

import { ShinyText } from "@reactberry/system/blocks";
import { Box } from "@reactberry/system/elements";

export default function Eyebrow() {
  return (
    <Box p="m">
      <ShinyText fontSize="small" fontWeight={600} textTransform="uppercase">
        New in version 2
      </ShinyText>
    </Box>
  );
}

Examples#

Sweep speed#

speed is the duration of one sweep in seconds, so lower values are faster.

Respecting reduced motion#

The component has no reduced-motion handling. Pass useReducedMotion() from @reactberry/system to disabled to stop the animation for people who prefer less motion.

API#

ShinyText#

All remaining props are spread onto the Text element (typed as [key: string]: any). The element renders with display="inline-block".

Notes#

• The animation moves backgroundPosition from 200% 0 to -200% 0 with linear easing, repeats indefinitely and starts after a 3 second delay.
• The highlight is a 120 degree white gradient clipped to the text with background-clip: text. It is painted behind the text fill, so it is only visible where the text colour is not fully opaque.
• Passing style replaces the gradient and clipping styles.