Circle Menu
Dialog Form
Dominoes List Scroll
Dominoes Scroll Indicator
Eagle Vision
Electric AI Input
File Input
Flip Scroll
Glowing Scroll Indicator
Horizontal Scroll
Icon Wheel
Image Pile
Interactive CTA
Interactive Folder
Interest Picker
Jelly Loader
Leave Rating
Mask Cursor Effect
Magnet Tabs
Masonry Grid
OTP Input
Photo Gallery
Pixelated Carousel
Rolling Ball Scroll Indicator
Rubik Cube
Sidebar
Sine Wave
Skeumorphic Music Card
Social Media Card
Stacked Input Form
Stack Scroll
Trading Card
Gooey Words
Text that smoothly changes between different words with a liquid-like effect. Each word flows into the next one.
Install dependencies
npm i framer-motionComponent
Create a file gooey-words.tsx in your components folder and paste this code
'use client';
import { animate, AnimatePresence, motion } from 'framer-motion';
import React, { memo, RefObject, useEffect, useRef, useState } from 'react';
const alphabetPaths = {
A: 'M15,90 L50,10 L85,90 M25,60 H75',
B: 'M20,10 V90 H60 Q85,90 85,70 Q85,60 70,50 Q85,40 85,30 Q85,10 60,10 H20',
C: 'M85,25 Q65,10 40,10 Q15,10 15,50 Q15,90 40,90 Q65,90 85,75',
D: 'M20,10 V90 H60 Q90,90 90,50 Q90,10 60,10 H20',
E: 'M80,10 H20 V90 H80 M20,50 H65',
F: 'M20,10 V90 M20,10 H80 M20,50 H65',
G: 'M85,25 Q65,10 40,10 Q15,10 15,50 Q15,90 40,90 Q65,90 85,75 V55 H55',
H: 'M20,10 V90 M80,10 V90 M20,50 H80',
I: 'M30,10 H70 M50,10 V90 M30,90 H70',
J: 'M70,10 H30 M50,10 V75 Q50,90 30,85',
K: 'M20,10 V90 M80,10 L20,50 L80,90',
L: 'M20,10 V90 H80',
M: 'M15,90 V15 L50,50 L85,15 V90',
N: 'M20,90 V15 L80,90 V15',
O: 'M50,10 Q80,10 85,50 Q80,90 50,90 Q20,90 15,50 Q20,10 50,10',
P: 'M20,90 V10 H65 Q85,10 85,35 Q85,60 65,60 H20',
Q: 'M50,10 Q80,10 85,50 Q80,90 50,90 Q20,90 15,50 Q20,10 50,10 M60,70 L85,90',
R: 'M20,90 V10 H65 Q85,10 85,35 Q85,60 65,60 H20 M50,60 L85,90',
S: 'M80,25 Q60,10 35,10 Q15,15 15,35 Q15,50 50,55 Q85,60 85,75 Q85,90 50,90 Q25,90 15,75',
T: 'M15,10 H85 M50,10 V90',
U: 'M15,10 V65 Q15,90 50,90 Q85,90 85,65 V10',
V: 'M15,10 L50,90 L85,10',
W: 'M10,10 L30,90 L50,40 L70,90 L90,10',
X: 'M15,10 L85,90 M15,90 L85,10',
Y: 'M15,10 L50,50 L85,10 M50,50 V90',
Z: 'M15,10 H85 L15,90 H85'
};
const Letter = memo(
({
letterIndex,
wordPathsRef,
index,
path,
circles,
circlesRef,
circlesPositionsRef,
radius
}: {
letterIndex: number;
index: number;
path: string;
radius: number;
wordPathsRef: RefObject<Record<number, SVGPathElement[]>>;
circles: number;
circlesRef: RefObject<Record<number, SVGCircleElement[][]>>;
circlesPositionsRef: RefObject<{ x: number; y: number }[][]>;
}) => {
return (
<div className="mx-1">
<svg width="50" height="70" viewBox="0 0 100 100" style={{ filter: 'url(#gooey)' }}>
<path
ref={(el) => {
if (el) {
if (!wordPathsRef.current[index]) {
wordPathsRef.current[index] = [];
}
wordPathsRef.current[index][letterIndex] = el;
}
}}
d={path}
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
/>
<g>
{Array.from({ length: circles }).map((_, circleIndex) => (
<circle
ref={(el) => {
if (el) {
if (!circlesRef.current[index]) {
circlesRef.current[index] = [];
}
if (!circlesRef.current[index][letterIndex]) {
circlesRef.current[index][letterIndex] = [];
}
if (!circlesPositionsRef.current[letterIndex]) {
circlesPositionsRef.current[letterIndex] = [];
}
if (!circlesPositionsRef.current[letterIndex][circleIndex]) {
circlesPositionsRef.current[letterIndex][circleIndex] = {
x: 50,
y: 50
};
}
circlesRef.current[index][letterIndex][circleIndex] = el;
}
}}
r={radius}
key={`circle-${letterIndex}-${circleIndex}-${index}`}
cx={circlesPositionsRef.current?.[letterIndex]?.[circleIndex].x || 50}
cy={circlesPositionsRef.current?.[letterIndex]?.[circleIndex].y || 50}
fill="white"
/>
))}
</g>
</svg>
</div>
);
}
);
const GooeyWords = ({ words, speed = 2 }: { words: string[]; speed?: number }) => {
const [index, setIndex] = useState(0);
const wordPathsRef = useRef<Record<number, SVGPathElement[]>>({});
const circlesRef = useRef<Record<number, SVGCircleElement[][]>>({});
const circlesPositionsRef = useRef<{ x: number; y: number }[][]>([]);
const circles = 25;
const radius = 5;
useEffect(() => {
const interval = setInterval(() => {
setIndex((i) => (i + 1) % words.length);
}, speed * 1000);
return () => clearInterval(interval);
}, [words.length, speed, index]);
useEffect(() => {
if (!wordPathsRef.current[index] || wordPathsRef.current[index].length === 0) {
return;
}
const currentPaths = wordPathsRef.current[index];
const currentCirclesGroups = circlesRef.current[index] || [];
currentPaths.forEach((path, letterIndex) => {
if (!path) return;
const length = path.getTotalLength();
if (!length) return;
const step = length / circles;
const circlesToAnimate = currentCirclesGroups[letterIndex] || [];
circlesToAnimate.forEach((circle, circleIndex) => {
if (!circle) return;
const { x, y } = path.getPointAtLength(step * circleIndex) || { x: 0, y: 0 };
circlesPositionsRef.current[letterIndex][circleIndex] = { x, y };
animate(
circle,
{ cx: x, cy: y },
{
duration: 0.8,
delay: 0.02 * circleIndex + letterIndex * 0.04,
ease: 'easeOut'
}
);
});
});
}, [index, circles]);
return (
<div className="relative">
<svg className="absolute w-0 h-0">
<defs>
<filter id="gooey">
<feGaussianBlur in="SourceGraphic" stdDeviation="2" result="blur" />
<feColorMatrix
in="blur"
type="matrix"
values="
1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
0 0 0 12 -2"
result="gooey"
/>
</filter>
</defs>
</svg>
<AnimatePresence mode="popLayout">
<motion.div
className="flex items-center justify-center p-8 rounded-lg"
style={{
minHeight: '100px'
}}
>
{words[index].split('').map((letter, letterIndex) => {
const path = alphabetPaths[letter.toUpperCase() as keyof typeof alphabetPaths];
if (!path) {
return <div key={`${letter}-${letterIndex}-${index}`} className="w-8" />;
}
return (
<Letter
key={`${letter}-${letterIndex}-${index}`}
letterIndex={letterIndex}
index={index}
path={path}
radius={radius}
wordPathsRef={wordPathsRef}
circles={circles}
circlesRef={circlesRef}
circlesPositionsRef={circlesPositionsRef}
/>
);
})}
</motion.div>
</AnimatePresence>
</div>
);
};
export default GooeyWords;Usage
<GooeyWords words={words} />