"use client"; import gsap from "gsap"; import Observer from "gsap/Observer"; import {useRef} from "react"; import {useGSAP} from "@gsap/react"; import {getNormalizedMousePosition} from "normalized-mouse-position"; import {applyRippleEffect} from "@phucbm/ripple-effect"; gsap.registerPlugin(Observer); export type TextRippleProps = { /** Top line text (split into characters). @default "technical.architect" */ line1: string; /** Bottom line text (split into characters). @default "creative.developer" */ line2: string; /** Optional extra classes applied to the wrapper */ className?: string; }; export function TextRipple({line1 = "technical.architect", line2 = "creative.developer", className}: TextRippleProps) { const scope = useRef(null); useGSAP( () => { const root = scope.current; if (!root) return; const line1 = root.querySelectorAll(".hero-heading.is-top"); const line2 = root.querySelectorAll(".hero-heading.is-bottom"); const n = Math.max(line1.length, line2.length); if (!n) return; const getAreaIndex = (x: number, num: number) => Math.min(Math.floor(Math.max(0, Math.min(1, x)) * num), num - 1); const observer = Observer.create({ target: window, type: "pointer", onMove: ({x = 0, y = 0}) => { const pos = getNormalizedMousePosition({x, y, origin: "0% 50%"}); const center = getAreaIndex(pos.x, n); const anim = (val: number, i: number) => { const s = 1 + val * 2.5 * Math.abs(pos.y); gsap.to([line1[i], line2[i]].filter(Boolean), {scaleY: s, duration: 0.2, overwrite: "auto"}); }; applyRippleEffect({ length: n, centerIndex: center, rippleRadius: 6, callback: anim, }); }, }); return () => observer.kill(); }, {scope} ); return (

{line1.split("").map((ch, i) => (

{ch}

))}

{line2.split("").map((ch, i) => (

{ch}

))}

); }

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

Text Ripple

Installation

Examples

Props