A text effect with bold text as background
tailwind.config.js
theme: { extend: { colors: { background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", } }, },
It will create a new file called bold-copy.tsx inside the components/animata/text directory.
bold-copy.tsx
components/animata/text
mkdir -p components/animata/text && touch components/animata/text/bold-copy.tsx
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> ); }
Built by hari