Text Disperse

Text 423

About

A playful hover effect that scatters each letter in unique directions with smooth motion. Great for adding personality and interactivity to headings or standout text.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Text Disperse to your project and fits it to your theme.

Code

How Text Disperse is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

'use client';
import React from 'react';
import { cn } from '@/lib/utils';
import { TextDisperse } from "@/components/ui/text-disperse";

export default function DefaultDemo() {
	return (
		<div className="relative flex min-h-screen w-full items-center justify-center">
			<div
				aria-hidden="true"
				className={cn(
					'pointer-events-none absolute -top-10 left-1/2 size-full -translate-x-1/2 rounded-full',
					'bg-[radial-gradient(ellipse_at_center,--theme(--color-foreground/.1),transparent_50%)]',
					'blur-[30px]',
				)}
			/>
			<div className="w-[50vw]">
				<TextDisperse className="text-[6vw]">
					+923123456789
				</TextDisperse>
			</div>
		</div>
	);
}