Text Effects & Typography
50+ animated text effects, interactive typography, and custom fonts
Font Tips for Beginners
Pairing Rule
Pair a bold display font with a simple sans-serif for body text. Contrast is key!
Hierarchy
Use 2-3 fonts max. Assign roles: headlines, body, accents. Don't mix too many styles.
Readability
Body text should be 16px+ for web. Line height 1.5-1.8 improves reading comfort.
Context Matters
Gaming fonts for games, serif for elegance, sans-serif for modern/tech. Match the vibe!
Test Sizes
A font that looks great at 48px might be unreadable at 14px. Always test at target sizes.
Pro Tip: When in doubt, use system fonts like Roboto, Open Sans, or Inter for body text. They're optimized for screen reading.
Font Pairing System
AI Pairing Parameters
Custom Fonts & Styles
Just tell AI what font ya want and where you want it!💡 Font 101: Click any genre accordion to expand and hover over fonts for usage tips, best practices, and target audience insights. Fonts are organized by use case to help you choose the perfect typeface for your project.
Usage Percentages: The percentage shown on each font card indicates how frequently that font is used in its category context (e.g., 75% means it's highly popular for that specific use case).
Animated Typography
Letter Stagger
AI PROMPT:
"Create letter stagger animation where each letter appears with a delay"
{text.split("").map((char, i) => (
<motion.span
key={i}
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: i * 0.1 }}
>
{char}
</motion.span>
))}Typewriter Effect
AI PROMPT:
"Create a typewriter animation that types text letter by letter"
const [text, setText] = useState("");
const fullText = "Typing Effect...";
useEffect(() => {
let i = 0;
const timer = setInterval(() => {
if (i < fullText.length) {
setText(fullText.slice(0, i + 1));
i++;
}
}, 100);
return () => clearInterval(timer);
}, []);Carousel Headlines
AI PROMPT:
"Create a carousel headline that cycles through words with fade animation"
const words = ["Amazing", "Beautiful", "Creative"];
const [index, setIndex] = useState(0);
useEffect(() => {
const timer = setInterval(() =>
setIndex((i) => (i + 1) % words.length), 2000);
return () => clearInterval(timer);
}, []);Slide Word Transition
AI PROMPT:
"Create sliding word transitions from right to left"
<motion.div
key={word}
initial={{ x: 100 }}
animate={{ x: 0 }}
exit={{ x: -100 }}
>
{word}
</motion.div>Curved Text Arc
AI PROMPT:
"Create text that follows a curved arc path"
const angle = (i / chars.length) * Math.PI - Math.PI / 2;
const x = Math.cos(angle) * radius;
const y = Math.sin(angle) * radius;
transform: `translate(${x}px, ${y}px) rotate(${angle + Math.PI/2}rad)`Explosion Fragmented
AI PROMPT:
"Create an explosion effect where letters fragment and scatter"
animate={{
x: (Math.random() - 0.5) * 200,
y: (Math.random() - 0.5) * 200,
opacity: 0,
rotate: Math.random() * 360
}}Scramble Animation
AI PROMPT:
"Create a scramble effect that randomizes letters before revealing the final text"
setText(target.split("").map((char, i) => {
if (i < iterations) return target[i];
return chars[Math.floor(Math.random() * chars.length)];
}).join(""));Number Countdown
AI PROMPT:
"Create an animated countdown with scale effect on each number change"
<motion.div
key={count}
initial={{ scale: 1.5, opacity: 0 }}
animate={{ scale: 1, opacity: 1 }}
>
{count}
</motion.div>Text Extraction
AI PROMPT:
"Create a bouncing extraction animation for each letter"
<motion.span
initial={{ y: 0 }}
animate={{ y: [-10, 0, -10] }}
transition={{ delay: i * 0.1, repeat: Infinity }}
>
{char}
</motion.span>Word Staggered Reveal
AI PROMPT:
"Create a word-by-word reveal animation with stagger delay"
{words.map((word, i) => (
<motion.span
key={i}
initial={{ opacity: 0, x: -20 }}
animate={{ opacity: 1, x: 0 }}
transition={{ delay: i * 0.2 }}
>
{word}
</motion.span>
))}Neon Glow Text
AI PROMPT:
"Create neon glow effect with multiple text shadows"
style={{
textShadow: "0 0 10px #00ffff, 0 0 20px #00ffff, 0 0 30px #00ffff"
}}Glitch Text
AI PROMPT:
"Create a glitching text effect with random position shifts"
@keyframes glitch {
0%, 100% { transform: translate(0); }
20% { transform: translate(-2px, 2px); }
40% { transform: translate(2px, -2px); }
}
.glitch-text { animation: glitch 0.3s infinite; }Wave Text
AI PROMPT:
"Create a wave effect where letters bounce up and down sequentially"
<motion.span
animate={{ y: [0, -10, 0] }}
transition={{
delay: i * 0.1,
repeat: Infinity,
duration: 0.6
}}
>
{char}
</motion.span>Fade In Up
AI PROMPT:
"Create a fade in animation with upward movement"
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
>
Fade In Up
</motion.div>3D Rotate Text
AI PROMPT:
"Create a 3D rotation effect on text"
<motion.div
animate={{ rotateY: 360 }}
transition={{
repeat: Infinity,
duration: 3,
ease: "linear"
}}
style={{ transformStyle: "preserve-3d" }}
>
3D ROTATE
</motion.div>Rainbow Gradient
AI PROMPT:
"Create a rainbow gradient text effect"
style={{
background: "linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet)",
WebkitBackgroundClip: "text",
WebkitTextFillColor: "transparent"
}}Bounce Text
AI PROMPT:
"Create a bouncing text animation"
<motion.div
animate={{ y: [0, -20, 0] }}
transition={{
repeat: Infinity,
duration: 0.8
}}
>
BOUNCE
</motion.div>Flicker Neon
AI PROMPT:
"Create a flickering neon text effect"
@keyframes flicker {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
.flicker-text { animation: flicker 0.15s infinite; }3D Shadow Text
AI PROMPT:
"Create a 3D shadow text effect with layered shadows"
style={{
textShadow: "1px 1px 0 #000, 2px 2px 0 #000, 3px 3px 0 #000"
}}Pulse Scale
AI PROMPT:
"Create a pulsing scale animation"
<motion.div
animate={{ scale: [1, 1.2, 1] }}
transition={{
repeat: Infinity,
duration: 1
}}
>
PULSE
</motion.div>Split Reveal
AI PROMPT:
"Create a split reveal animation where letters come from alternating sides"
initial={{ x: i % 2 === 0 ? -50 : 50, opacity: 0 }}
animate={{ x: 0, opacity: 1 }}
transition={{ delay: i * 0.1 }}Blur In
AI PROMPT:
"Create a blur-in animation where text goes from blurred to sharp"
<motion.div
initial={{ filter: "blur(10px)", opacity: 0 }}
animate={{ filter: "blur(0px)", opacity: 1 }}
transition={{ duration: 1 }}
>
BLUR IN
</motion.div>Interactive Text Effects
Shimmer Shine
AI: Create a shimmering shine effect that moves across text
Floating Text
AI: Create a gentle floating animation
Typing Indicator
AI: Create animated typing indicator dots
Fire Text
AI: Create a fire effect with red-orange-yellow gradient
Zigzag Wave
AI: Create alternating up-down zigzag animation
Spinning Letters
AI: Create spinning letters with stagger delay
Flip Card Effect
AI: Create a 3D flip card animation for text
Skew Animation
AI: Create skewing animation that tilts text left and right
Swipe Reveal
AI: Create a swipe reveal animation with a moving gradient overlay
Elastic Bounce
AI: Create elastic bounce effect with scale keyframes
Chromatic Aberration
AI: Create chromatic aberration effect with RGB color split
Type & Delete
AI: Create typewriter that types then deletes text in a loop
Split & Flip
AI: Create letter-by-letter vertical flip animation
3D Perspective
AI: Create 3D perspective tilt animation
Rainbow Shift
AI: Create rainbow color shift using hue-rotate filter
Letter Scatter
AI: Create letter scatter animation with random positions
Squeeze & Stretch
AI: Create squeeze and stretch animation with scale
Neon Pulse
AI: Create pulsing neon glow effect with shadow animation
Ripple Wave
AI: Create ripple effect with sequential scale animation
Wobble Jello
AI: Create wobble jello effect with rotation keyframes
