100 Text Animations (Kawai Design)

Overview

100 Text Animations is an open interactive showcase crafted by Japanese designer Kawai Takuya (KAWAI DESIGN). It collects 100 distinct kinetic typography and text animation patterns—ranging from subtle split-letter reveals and wave glitches to bold 3D flips and typewriter effects—built with zero-dependency CSS and lightweight JavaScript.

Key Features

• 🔤 100 Production-Ready Kinetic Patterns: Comprehensive variety covering fade-ups, letter scattering, 3D rotations, neon glows, wavy distortion, and typewriter sequences.
• ⚡ Interactive Real-Time Preview: Type custom text into the live header input to immediately preview how all 100 animation effects look with your own copy.
• 📋 Zero-Dependency 1-Click Copy: Click any animation card to instantly copy the exact HTML, CSS @keyframes, and JS snippet ready to drop into your project.
• ⭐ Favorites & Curation Filter: Pick and bookmark favourite animations during exploration to quickly compare candidate motion effects.

Quick Start & Code Snippet

<!-- Example: Staggered Letter Wave Reveal -->
<h1 class="text-wave">
  <span>H</span><span>e</span><span>l</span><span>l</span><span>o</span>
</h1>

.text-wave span {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  animation: textWave 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.text-wave span:nth-child(1) { animation-delay: 0.1s; }
.text-wave span:nth-child(2) { animation-delay: 0.2s; }
.text-wave span:nth-child(3) { animation-delay: 0.3s; }

@keyframes textWave {
  to { opacity: 1; transform: translateY(0); }
}

Why Choose 100 Text Animations?

• Hero Titles & Landing Headers: Perfect for adding polish and visual hierarchy to marketing banners, portfolio intros, and campaign headlines.
• Lightweight & Framework-Agnostic: Pure CSS @keyframes logic means zero extra npm runtime overhead, compatible with React, Vue, Astro, Svelte, or plain HTML.