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
Dotted Text
Text created entirely from dots arranged in a grid. Each letter is built with dots that can change colors and move around.
Install dependencies
npm i framer-motion Dotted Text
Create a file dotted-text.tsx in your components folder and paste this code
'use client';
import { motion } from 'framer-motion';
// Define the dot matrix for each character
const charMatrix: Record<string, number[][]> = {
A: [
[0, 1, 1, 0],
[1, 0, 0, 1],
[1, 1, 1, 1],
[1, 0, 0, 1],
[1, 0, 0, 1]
],
B: [
[1, 1, 1, 0],
[1, 0, 0, 1],
[1, 1, 1, 0],
[1, 0, 0, 1],
[1, 1, 1, 0]
],
C: [
[0, 1, 1, 0],
[1, 0, 0, 1],
[1, 0, 0, 0],
[1, 0, 0, 1],
[0, 1, 1, 0]
],
D: [
[1, 1, 1, 0],
[1, 0, 0, 1],
[1, 0, 0, 1],
[1, 0, 0, 1],
[1, 1, 1, 0]
],
E: [
[1, 1, 1, 1],
[1, 0, 0, 0],
[1, 1, 1, 0],
[1, 0, 0, 0],
[1, 1, 1, 1]
],
F: [
[1, 1, 1, 1],
[1, 0, 0, 0],
[1, 1, 1, 0],
[1, 0, 0, 0],
[1, 0, 0, 0]
],
G: [
[0, 1, 1, 0],
[1, 0, 0, 1],
[1, 0, 0, 0],
[1, 0, 1, 1],
[0, 1, 1, 1]
],
H: [
[1, 0, 0, 1],
[1, 0, 0, 1],
[1, 1, 1, 1],
[1, 0, 0, 1],
[1, 0, 0, 1]
],
I: [
[1, 1, 1],
[0, 1, 0],
[0, 1, 0],
[0, 1, 0],
[1, 1, 1]
],
J: [
[0, 0, 1, 1],
[0, 0, 0, 1],
[0, 0, 0, 1],
[1, 0, 0, 1],
[0, 1, 1, 0]
],
K: [
[1, 0, 0, 1],
[1, 0, 1, 0],
[1, 1, 0, 0],
[1, 0, 1, 0],
[1, 0, 0, 1]
],
L: [
[1, 0, 0, 0],
[1, 0, 0, 0],
[1, 0, 0, 0],
[1, 0, 0, 0],
[1, 1, 1, 1]
],
M: [
[1, 0, 0, 0, 1],
[1, 1, 0, 1, 1],
[1, 0, 1, 0, 1],
[1, 0, 0, 0, 1],
[1, 0, 0, 0, 1]
],
N: [
[1, 0, 0, 1],
[1, 1, 0, 1],
[1, 0, 1, 1],
[1, 0, 0, 1],
[1, 0, 0, 1]
],
O: [
[0, 1, 1, 0],
[1, 0, 0, 1],
[1, 0, 0, 1],
[1, 0, 0, 1],
[0, 1, 1, 0]
],
P: [
[1, 1, 1, 0],
[1, 0, 0, 1],
[1, 1, 1, 0],
[1, 0, 0, 0],
[1, 0, 0, 0]
],
Q: [
[0, 1, 1, 0],
[1, 0, 0, 1],
[1, 0, 0, 1],
[1, 0, 1, 1],
[0, 1, 1, 1]
],
R: [
[1, 1, 1, 0],
[1, 0, 0, 1],
[1, 1, 1, 0],
[1, 0, 1, 0],
[1, 0, 0, 1]
],
S: [
[0, 1, 1, 1],
[1, 0, 0, 0],
[0, 1, 1, 0],
[0, 0, 0, 1],
[1, 1, 1, 0]
],
T: [
[1, 1, 1, 1, 1],
[0, 0, 1, 0, 0],
[0, 0, 1, 0, 0],
[0, 0, 1, 0, 0],
[0, 0, 1, 0, 0]
],
U: [
[1, 0, 0, 1],
[1, 0, 0, 1],
[1, 0, 0, 1],
[1, 0, 0, 1],
[0, 1, 1, 0]
],
V: [
[1, 0, 0, 1],
[1, 0, 0, 1],
[1, 0, 0, 1],
[0, 1, 1, 0],
[0, 0, 1, 0]
],
W: [
[1, 0, 0, 0, 1],
[1, 0, 0, 0, 1],
[1, 0, 1, 0, 1],
[1, 1, 0, 1, 1],
[1, 0, 0, 0, 1]
],
X: [
[1, 0, 0, 1],
[0, 1, 1, 0],
[0, 0, 0, 0],
[0, 1, 1, 0],
[1, 0, 0, 1]
],
Y: [
[1, 0, 0, 1],
[0, 1, 1, 0],
[0, 0, 1, 0],
[0, 0, 1, 0],
[0, 0, 1, 0]
],
Z: [
[1, 1, 1, 1],
[0, 0, 0, 1],
[0, 0, 1, 0],
[0, 1, 0, 0],
[1, 1, 1, 1]
],
'0': [
[0, 1, 1, 0],
[1, 0, 0, 1],
[1, 0, 0, 1],
[1, 0, 0, 1],
[0, 1, 1, 0]
],
'1': [
[0, 1, 0],
[1, 1, 0],
[0, 1, 0],
[0, 1, 0],
[1, 1, 1]
],
'2': [
[0, 1, 1, 0],
[1, 0, 0, 1],
[0, 0, 1, 0],
[0, 1, 0, 0],
[1, 1, 1, 1]
],
'3': [
[1, 1, 1, 0],
[0, 0, 0, 1],
[0, 1, 1, 0],
[0, 0, 0, 1],
[1, 1, 1, 0]
],
'4': [
[0, 0, 1, 1],
[0, 1, 0, 1],
[1, 0, 0, 1],
[1, 1, 1, 1],
[0, 0, 0, 1]
],
'5': [
[1, 1, 1, 1],
[1, 0, 0, 0],
[1, 1, 1, 0],
[0, 0, 0, 1],
[1, 1, 1, 0]
],
'6': [
[0, 1, 1, 0],
[1, 0, 0, 0],
[1, 1, 1, 0],
[1, 0, 0, 1],
[0, 1, 1, 0]
],
'7': [
[1, 1, 1, 1],
[0, 0, 0, 1],
[0, 0, 1, 0],
[0, 1, 0, 0],
[0, 1, 0, 0]
],
'8': [
[0, 1, 1, 0],
[1, 0, 0, 1],
[0, 1, 1, 0],
[1, 0, 0, 1],
[0, 1, 1, 0]
],
'9': [
[0, 1, 1, 0],
[1, 0, 0, 1],
[0, 1, 1, 1],
[0, 0, 0, 1],
[0, 1, 1, 0]
],
'.': [[0], [0], [0], [0], [1]],
',': [[0], [0], [0], [1], [1]],
'!': [[1], [1], [1], [0], [1]],
'?': [
[0, 1, 1, 0],
[1, 0, 0, 1],
[0, 0, 1, 0],
[0, 0, 0, 0],
[0, 0, 1, 0]
],
'+': [
[0, 0, 0],
[0, 1, 0],
[1, 1, 1],
[0, 1, 0],
[0, 0, 0]
],
'-': [
[0, 0, 0],
[0, 0, 0],
[1, 1, 1],
[0, 0, 0],
[0, 0, 0]
],
'*': [
[1, 0, 1],
[0, 1, 0],
[1, 0, 1],
[0, 0, 0],
[0, 0, 0]
],
'/': [
[0, 0, 0, 1],
[0, 0, 1, 0],
[0, 1, 0, 0],
[1, 0, 0, 0],
[0, 0, 0, 0]
],
'=': [
[0, 0, 0],
[1, 1, 1],
[0, 0, 0],
[1, 1, 1],
[0, 0, 0]
],
' ': [
[0, 0],
[0, 0],
[0, 0],
[0, 0],
[0, 0]
]
};
// Default matrix for unknown characters
const defaultMatrix = [
[1, 1],
[1, 1],
[1, 1],
[1, 1],
[1, 1]
];
interface DottedTextProps {
text: string;
color?: string;
backgroundColor?: string;
size?: number;
spacing?: number;
animationDelay?: number;
animationColors?: string[];
animationDuration?: number;
shadowIntensity?: number;
}
const DottedText: React.FC<DottedTextProps> = ({
text,
size = 10,
spacing = 2,
animationDelay = 0.3,
animationColors = [
'#1A0B33', // Deeper purple (twilight)
'#5D2E8C', // Purple
'#F25C54', // Coral/orange
'#F7B267', // Golden orange
'#FFD166', // Amber/gold
'#FFEDDF', // Soft light
'#F7B267', // Golden orange
'#F25C54', // Coral/orange
'#5D2E8C', // Purple
'#1A0B33' // Deeper purple (twilight)
],
animationDuration = 4,
shadowIntensity = 15
}) => {
const renderDot = (
filled: boolean,
x: number,
y: number,
animationIndex: number,
repeatDelay: number
) => {
const dotSize = `${size}px`;
if (!filled) {
return (
<div
key={`${x}-${y}`}
style={{
width: dotSize,
height: dotSize,
margin: `${spacing}px`,
display: 'inline-block'
}}
/>
);
}
return (
<motion.div
key={`${x}-${y}`}
style={{
width: dotSize,
height: dotSize,
borderRadius: '50%',
border: '1px solid #FFFFFF47',
margin: `${spacing}px`,
display: 'inline-block',
backgroundColor: animationColors[0]
}}
initial={{
backgroundColor: animationColors[0],
boxShadow: 'none'
}}
animate={{
backgroundColor: animationColors,
boxShadow: [
'none',
'none',
`0 0 ${shadowIntensity / 2.1}px 0 ${animationColors[2]}`,
`0 0 ${shadowIntensity / 2}px 0 ${animationColors[3]}`,
`0 0 ${shadowIntensity}px 0 ${animationColors[4]}`,
`0 0 ${shadowIntensity}px 0 ${animationColors[5]}`,
`0 0 ${shadowIntensity / 2}px 0 ${animationColors[6]}`,
`0 0 ${shadowIntensity / 2.1}px 0 ${animationColors[7]}`,
'none',
'none'
]
}}
transition={{
duration: animationDuration,
delay: animationIndex * animationDelay,
repeat: Infinity,
repeatType: 'reverse',
repeatDelay: repeatDelay,
ease: 'easeInOut'
}}
/>
);
};
const renderCharacter = (char: string, charIndex: number, totalChars: number) => {
const upperChar = char.toUpperCase();
const matrix = charMatrix[upperChar] || defaultMatrix;
return (
<div
key={charIndex}
style={{
display: 'inline-block',
marginRight: `${spacing * 3}px`,
verticalAlign: 'top'
}}
>
{matrix.map((row, rowIndex) => (
<div key={rowIndex} style={{ display: 'flex' }}>
{row.map((dot, dotColIndex) =>
renderDot(
dot === 1,
charIndex * (matrix[0].length + 2) + dotColIndex,
rowIndex,
charIndex * 4 + dotColIndex,
totalChars * 0.8
)
)}
</div>
))}
</div>
);
};
return (
<div className="flex flex-wrap gap-2 relative">
{text.split('').map((char, index) => renderCharacter(char, index, text.length))}
</div>
);
};
export default DottedText;Usage
<DottedText text="LIONEL MESSI" />