Blur Shimmer Text

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

Full-Stack Developer

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

Installation

bunx --bun shadcn@latest add https://ashutoshtiwari.me/r/blur-shimmer-text.json

Usage

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

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

API Reference

Prop	Type	Default	Description
`texts`	string[]	required	List of phrases to cycle through with blur transition.
`interval`	number	2	Duration in seconds each phrase remains visible.
`blur`	number	6	Peak optical blur radius in pixels during transitions.
`transition`	Transition	{ duration: 0.5 }	Motion transition settings for the blur sweep animation.
`className`	string	""	Additional CSS classes applied to the container.