Upgrade Your UI with Subtle Animated React Components
Our UI library gives you elegant, production-ready components built for speed, flexibility, and creativity. Design smarter, ship faster, and focus on what truly matters your product.
Search Components & Docs
Search all components and documentation in Quartz UI from a single, unified command. You can open the search dialog with ctrl+k
Build with Modern Stack
Just Copy Paste Our CLI or Code
We provide you with the CLI and code to easily install and use our components.
You can install any of our components using our CLI. We use shadcn registry for CLI installation.
1npx shadcn@latest add http://quartzui.shazab.site/r/text-shimmer.jsonOr you can manually copy and paste the whole component.
1'use client';
2
3import { cn } from '@/lib/utils';
4import { motion } from 'motion/react';
5import { useMemo } from 'react';
6
7interface TextShimmerProps {
8 duration?: number;
9 children: string;
10 className?: string;
11 spread?: number;
12 baseColor?: string;
13 shimmerColor?: string;
14}
15
16const TextShimmer = ({
17 duration = 3,
18 children,
19 className,
20 spread = 2,
21 baseColor = '#FFF',
22 shimmerColor = '#000',
23}: TextShimmerProps) => {
24 const dynamicSpread = useMemo(() => {
25 return children.length * spread;
26 }, [children, spread]);
27
28 return (
29 <motion.p
30 initial={{ backgroundPosition: '100% center' }}
31 animate={{ backgroundPosition: '0% center' }}
32 transition={{
33 repeat: Infinity,
34 duration,
35 ease: 'linear',
36 }}
37 style={
38 {
39 '--spread': `${dynamicSpread}px`,
40 '--base-color': baseColor,
41 '--base-gradient-color': shimmerColor,
42 backgroundImage: `var(--bg), linear-gradient(var(--base-color), var(--base-color))`,
43 } as React.CSSProperties
44 }
45 className={cn(
46 'relative inline-block bg-size-[250%_100%,auto] bg-clip-text',
47 'text-transparent',
48 '[background-repeat:no-repeat,padding-box] [--bg:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--base-gradient-color),#0000_calc(50%+var(--spread)))]',
49 className
50 )}
51 >
52 {children}
53 </motion.p>
54 );
55};
56
57export default TextShimmer;Both ways are fairly simple and can be done within seconds. If you face any problem, you can reach out to me here Twitter (now 𝕏).
Ready to get started?
Explore the documentation and start using our simple, modern UI components for your next project.