Shimmer Text

Docs

Shimmer Text

A text component with a subtle animated shimmer effect.

#GoDreamEndless possibilities powered by AI

Made with 🧡 by Breeze

Installation

Install the following dependencies:

npm install framer-motion clsx tailwind-merge

Add the `utils.ts` file to the `@/lib` folder

utils.ts

import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

Create a `shimmer-text.tsx` file and copy the below code.

shimmer-text.tsx

"use client";
 
import React from "react";
import { motion, HTMLMotionProps } from "framer-motion";
import { cn } from "@/lib/utils";
 
interface ShimmerTextProps extends HTMLMotionProps<"span"> {
  children: React.ReactNode;
}
 
export function ShimmerText({
  children,
  className,
  ...props
}: ShimmerTextProps) {
  return (
    <motion.span
      initial={{ "--x": "100%" } as any}
      animate={{ "--x": "-100%" } as any}
      transition={{
        repeat: Infinity,
        repeatType: "loop",
        type: "spring",
        stiffness: 20,
        damping: 25,
        mass: 1,
      }}
      className={cn("relative inline-block linear-mask py-[0.25em]", className)}
      {...props}
    >
      {children}
 
      {/* <span className="absolute inset-0 linear-overlay pointer-events-none" /> */}
    </motion.span>
  );
}

In `globals.css` copy the below code.

.linear-mask {
  mask-image: linear-gradient(
    -75deg,
    white calc(var(--x) + 20%),
    transparent calc(var(--x) + 30%),
    white calc(var(--x) + 100%)
  );
  -webkit-mask-image: linear-gradient(
    -75deg,
    white calc(var(--x) + 20%),
    transparent calc(var(--x) + 30%),
    white calc(var(--x) + 100%)
  );
}

Update the import paths to match your project setup.

Usage

import { ShimmerText } from "@/components/breezeblocks/shimmer-text";

<ShimmerText className="text-4xl font-bold text-black">Some Text</ShimmerText>

Props

Prop	Type	Description	Default
children	`React.ReactNode`	The textual content	-
className	`string`	Additional custom classes	-

GO PRO

On This Page

Shimmer Text

Installation

Install the following dependencies:

Add the utils.ts file to the @/lib folder

Create a shimmer-text.tsx file and copy the below code.

In globals.css copy the below code.

Update the import paths to match your project setup.

Usage

Props

Add the `utils.ts` file to the `@/lib` folder

Create a `shimmer-text.tsx` file and copy the below code.

In `globals.css` copy the below code.