Text Styles

.text-1 { animation: typewriter 2s steps(10) infinite; }\n@keyframes typewriter { 0% { width: 0; } 50% { width: 100%; } 100% { width: 0; } }\n.text-1 { overflow: hidden; white-space: nowrap; display: inline-block; }

.text-2:hover { animation: glitch 0.3s infinite; }\n@keyframes glitch { 0% { transform: translate(2px, -2px); } 50% { transform: translate(-2px, 2px); } }

.text-3 { background: linear-gradient(45deg, #ef4444, #3b82f6); -webkit-background-clip: text; background-clip: text; color: transparent; }

.text-4:hover { transform: scale(1.2); text-shadow: 0 0 10px #facc15; }

.text-5:hover { transform: rotateX(180deg); }\n.text-5 { transition: transform 0.3s; display: inline-block; }

.text-6 { text-shadow: 0 0 10px #facc15; }\n.text-6:hover { text-shadow: 0 0 20px #facc15; }

.text-7:hover { background: #facc15; color: #000; padding: 2px 4px; border-radius: 4px; }

.text-8:hover { position: relative; }\n.text-8:hover:after { content: ''; position: absolute; bottom: -5px; left: 0; width: 100%; height: 5px; background: #3b82f6; animation: drip 0.5s; }\n@keyframes drip { 0% { height: 0; } 100% { height: 5px; } }

.text-9:hover { animation: jelly 0.5s; }\n@keyframes jelly { 25% { transform: scale(1.2, 0.8); } 75% { transform: scale(0.8, 1.2); } }\n.text-9 { display: inline-block; }

.text-10:hover { transform: translate(5px, -5px); }\n.text-10 { transition: transform 0.3s; display: inline-block; }

.text-11:hover { letter-spacing: 4px; }\n.text-11 { transition: letter-spacing 0.3s; }

.text-12:hover { transform: translate(3px, -3px); text-shadow: 2px 2px 5px #3b82f6; }\n.text-12 { transition: transform 0.3s, text-shadow 0.3s; display: inline-block; }

.text-13 { color: transparent; -webkit-text-stroke: 1px #ef4444; }\n.text-13:hover { -webkit-text-stroke: 1px #facc15; }

.text-14 { color: transparent; -webkit-text-stroke: 1px #3b82f6; background: repeating-linear-gradient(45deg, transparent, transparent 5px, #3b82f6 5px, #3b82f6 10px); -webkit-background-clip: text; background-clip: text; }

.text-15 { position: relative; }\n.text-15:hover { transform: translateZ(10px); }\n.text-15 { transition: transform 0.3s; display: inline-block; perspective: 100px; }

.text-16:hover { animation: quake 0.3s infinite; }\n@keyframes quake { 25% { transform: translateX(-2px); } 75% { transform: translateX(2px); } }\n.text-16 { display: inline-block; }

.text-17 { animation: rainbow 2s infinite; }\n@keyframes rainbow { 0% { color: #ef4444; } 50% { color: #3b82f6; } 100% { color: #facc15; } }

.text-18 { position: relative; }\n.text-18:after { content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.5), transparent); animation: shimmer 2s infinite; }\n@keyframes shimmer { 0% { left: -100%; } 100% { left: 100%; } }

.text-19:after { content: '|'; animation: cursor 0.7s infinite; }\n@keyframes cursor { 50% { opacity: 0; } }\n.text-19 { display: inline-block; }

.text-20 { position: relative; }\n.text-20:after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background: #facc15; transition: width 0.3s; }\n.text-20:hover:after { width: 100%; }

.text-21:hover { animation: voice-wave 0.5s infinite; }\n@keyframes voice-wave { 0% { transform: translateY(0); } 25% { transform: translateY(-2px); } 75% { transform: translateY(2px); } }\n.text-21 { display: inline-block; }

.text-22:hover { transform: skewX(15deg); }\n.text-22 { transition: transform 0.3s; display: inline-block; }

.text-23:hover { filter: contrast(1.5); }\n.text-23 { transition: filter 0.3s; }

.text-24 { background: radial-gradient(circle at 30%, #fff 20%, #000 20%); -webkit-background-clip: text; background-clip: text; color: transparent; }

.text-25 { position: relative; }\n.text-25:after { content: ''; position: absolute; bottom: -5px; left: 0; width: 100%; height: 5px; background: linear-gradient(45deg, #3b82f6, #ef4444); clip-path: polygon(0 0, 5% 100%, 10% 0, 15% 100%, 20% 0, 100% 0); }

.text-26 { font-family: 'Courier New', monospace; letter-spacing: 2px; }\n.text-26:hover { letter-spacing: 4px; }

.text-27:hover { animation: bounce 0.5s; }\n@keyframes bounce { 50% { transform: translateY(-5px); } }\n.text-27 { display: inline-block; }

.text-28 { color: #000; text-shadow: 0 0 5px #ef4444, 0 0 10px #000; }\n.text-28:hover { text-shadow: 0 0 10px #ef4444, 0 0 15px #000; }

.text-29 { position: relative; }\n.text-29:after { content: ''; position: absolute; bottom: -10px; left: 0; width: 100%; height: 10px; background: #ef4444; clip-path: polygon(0 0, 100% 0, 100% 100%, 80% 80%, 60% 100%, 40% 80%, 20% 100%, 0 80%); animation: drip-paint 1s infinite; }\n@keyframes drip-paint { 50% { transform: translateY(5px); } }

.text-30:hover { animation: elastic 0.5s; }\n@keyframes elastic { 50% { transform: scale(1.3); } }\n.text-30 { display: inline-block; }

.text-31 { animation: flicker 0.5s infinite; }\n@keyframes flicker { 50% { opacity: 0.5; } }

.text-32 { color: transparent; -webkit-text-stroke: 1px; -webkit-text-stroke-color: linear-gradient(45deg, #ef4444, #3b82f6); }

.text-33:hover { background: #facc15; -webkit-background-clip: text; background-clip: text; color: transparent; }\n.text-33 { transition: background 0.3s; }

.text-34 { font-style: italic; }\n.text-34:hover { animation: wave 0.5s infinite; }\n@keyframes wave { 50% { transform: translateY(-2px); } }\n.text-34 { display: inline-block; }

.text-35:hover { animation: jello 0.5s; }\n@keyframes jello { 25% { transform: skewX(-10deg); } 75% { transform: skewX(10deg); } }\n.text-35 { display: inline-block; }

.text-36.scrolled { transform: translateX(10px); color: #facc15; }\n.text-36 { transition: transform 0.3s, color 0.3s; display: inline-block; }\n/* Use JS to add 'scrolled' class */

.text-37 { text-shadow: 0 0 15px #8b5cf6; }\n.text-37:hover { text-shadow: 0 0 25px #8b5cf6; }

.text-38:hover { font-stretch: 150%; }\n.text-38 { transition: font-stretch 0.3s; display: inline-block; }

.text-39 { text-shadow: 0 0 10px #ef4444; }\n.text-39:hover { animation: neon-glow 1s infinite; }\n@keyframes neon-glow { 50% { text-shadow: 0 0 20px #ef4444; } }

.text-40 { position: relative; }\n.text-40:after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background: #3b82f6; transition: width 0.3s; }\n.text-40:hover:after { width: 100%; }

.text-41 { animation: pulse 1s infinite; }\n@keyframes pulse { 50% { transform: scale(1.1); } }\n.text-41 { display: inline-block; }

.text-42:hover { opacity: 0.5; }\n.text-42 { transition: opacity 0.2s; }

.text-43:hover { position: relative; }\n.text-43:hover:after { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; background: rgba(250, 204, 21, 0.3); border-radius: 50%; transform: translate(-50%, -50%); animation: ripple 0.5s; }\n@keyframes ripple { to { width: 100px; height: 100px; opacity: 0; } }

.text-44 { text-shadow: 0 0 5px rgba(0, 0, 0, 0.3); }\n.text-44:hover { animation: shadow-pulse 1s infinite; }\n@keyframes shadow-pulse { 50% { text-shadow: 0 0 10px rgba(0, 0, 0, 0.5); } }

.text-45:hover { transform: rotate(5deg); }\n.text-45 { transition: transform 0.3s; display: inline-block; }

.text-46 { text-shadow: 0 0 10px #8b5cf6; }\n.text-46:hover { text-shadow: 0 0 20px #8b5cf6; }

.text-47:hover { background: linear-gradient(to right, #facc15, transparent); -webkit-background-clip: text; background-clip: text; color: transparent; }\n.text-47 { transition: background 0.3s; }

.text-48:hover { animation: xylophone 0.5s; }\n@keyframes xylophone { 0% { color: #ef4444; } 50% { color: #3b82f6; } 100% { color: #facc15; } }\n.text-48 { display: inline-block; }

.text-49 { background: linear-gradient(45deg, #ef4444, #facc15); -webkit-background-clip: text; background-clip: text; color: transparent; }\n.text-49:hover { background: linear-gradient(45deg, #facc15, #ef4444); -webkit-background-clip: text; background-clip: text; }

.text-50:hover { transform: scale(1.2); }\n.text-50 { transition: transform 0.3s; display: inline-block; }