DocsComponents
Star us
Docs

Bold Copy

A text effect with bold text as background

requires interactionhover

Installation

Update tailwind.config.js

theme: {
    extend: {
     colors: {
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
     }
    },
  },

Run the following command

It will create a new file called bold-copy.tsx inside the components/animata/text directory.

mkdir -p components/animata/text && touch components/animata/text/bold-copy.tsx

Paste the code

Open the newly created file and paste the following code:

import { Tourney } from "next/font/google";
 
import { cn } from "@/lib/utils";
 
const tourney = Tourney({
  subsets: ["latin"],
});
 
export default function BoldCopy({
  text = "animata",
  className,
  textClassName,
  backgroundTextClassName,
}: {
  text: string;
  className?: string;
  textClassName?: string;
  backgroundTextClassName?: string;
}) {
  if (!text?.length) {
    return null;
  }
 
  return (
    <div
      className={cn(
        "group relative flex items-center justify-center bg-background px-2 py-2 md:px-6 md:py-4",
        tourney.className,
        className,
      )}
    >
      <div
        className={cn(
          "text-4xl font-bold uppercase text-foreground/15 transition-all group-hover:opacity-50 md:text-8xl",
          backgroundTextClassName,
        )}
      >
        {text}
      </div>
      <div
        className={cn(
          "text-md absolute font-bold uppercase text-foreground transition-all group-hover:text-4xl md:text-3xl group-hover:md:text-8xl",
          textClassName,
        )}
      >
        {text}
      </div>
    </div>
  );
}

Credits

Built by hari

Edit this page on GitHub
Animated Gradient TextCounter