50 components available

Shiny Text

Name: Shiny Text
Uploaded: 2024-11-01T00:00:00.000Z
Description: An animated text component with a shimmering light sweep effect.

November 2024

An animated text component with a shimmering light sweep effect.

Components for Modern Web Apps

Playground

<ShinyText 
  text="Components for Modern Web Apps" 
  duration={2}
  delay={1}
/>

Source Code

MUI

Tailwind

shiny-text.tsx

1import { Box } from '@mui/system';
2import { motion } from 'framer-motion';
3
4export interface ShinyTextProps {
5  text: string;
6  duration?: number;
7  delay?: number;
8}
9
10const ShinyText = ({ text, duration = 2, delay = 0 }: ShinyTextProps) => {
11  const width = text.length * 2;
12
13  return (
14    <Box
15      component={motion.p}
16      initial={{ backgroundPosition: '100% center' }}
17      animate={{ backgroundPosition: '0% center' }}
18      transition={{
19        repeat: Infinity,
20        duration,
21        repeatDelay: delay,
22        ease: 'linear',
23      }}
24      sx={{
25        position: 'relative',
26        display: 'inline-block',
27        backgroundSize: '250% 100%',
28        backgroundRepeat: 'no-repeat',
29        backgroundClip: 'text',
30        WebkitBackgroundClip: 'text',
31        color: 'transparent',
32        backgroundImage: `
33          linear-gradient(
34            90deg,
35            transparent calc(50% - ${width}px),
36            #ffffff 50%,
37            transparent calc(50% + ${width}px)
38          ),
39          linear-gradient(#b5b5b5a4,#b5b5b5a4)
40        `,
41      }}
42    >
43      {text}
44    </Box>
45  );
46};
47
48export default ShinyText;