Blur Shimmer Text

A text component that loops phrases with a horizontal blur shimmer.

Full-Stack Developer

import { BlurShimmerText } from "@/components/blur-shimmer-text";
 
export default function BlurShimmerTextDemo() {
  return (
    <BlurShimmerText
      texts={["Full-Stack Developer", "Design Engineer", "Open to Work"]}
      className="text-center text-2xl font-medium"
    />
  );
}

Installation

bunx --bun shadcn@latest add "https://www.kushaj.in/r/blur-shimmer-text.json"

Usage

import { BlurShimmerText } from "@/components/blur-shimmer-text";

<BlurShimmerText texts={["Text 1", "Text 2"]} />

API Reference

Prop	Type	Default	Description
`texts`	`string[]`	-	Phrases for the blur-shimmer-text loop.
`as`	`motion.p \| motion.span \| motion.code \| motion.h1 \| motion.h2 \| motion.h3`	`motion.p`	Element for the active phrase.
`className`	`string`	-	Classes for the blur-shimmer-text root.
`interval`	`number`	`2`	Seconds before switching phrases.
`blur`	`number`	`6`	Shimmer blur in pixels.
`transition`	`Transition`	`{ duration: 0.5 }`	Per-character motion transition.
`variants`	`Variants`	-	Custom variants; overrides `blur`.