Text Ripple

Mouse-tracked ripple effect applied to headline text.

0px

Live Playground · Edit and see changes instantly

Or edit with AI support by

Open in

import {TextRipple} from "@/components/phucbm/text-ripple";

export default function Example() {
    return (
        <TextRipple className="h-screen"/>
    );
}

Installation

pnpm dlx shadcn@latest add @phucbm/text-ripple

Props

Name	Type	Default
`line1`	`string` Top line text (split into characters).	`"technical.architect"`
`line2`	`string` Bottom line text (split into characters).	`"creative.developer"`
`className`	`string` Optional extra classes applied to the wrapper

3.5rem

1rem