typewriter reveal clip-path entrance text-animation reveal headline text character by character animated text entrance for hero sections staggered text reveal with delay offsets need typewriter effect without JavaScript text should appear progressively on page load want clip-path based text reveal with fallback
Typewriter Reveal
Fetch snippet JSON:
curl https://webspire.de/snippets/text/typewriter.json
Typewriter
Command reveal
npm install @webspire/cli
Good for terminal moments, onboarding commands and short revealed statements.
Background
Customize
Quick Start
<h1 class="animate-typewriter">Hello World</h1>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion, @supports fallback
- Size
- 548 bytes · 27 lines
- Custom Properties
-
--typewriter-duration--typewriter-delay - Classes
-
.animate-typewriter
typewriter reveal clip-path entrance text-animation
Apply .animate-typewriter to any text element. The text is revealed from left to right via clip-path.
Customize via CSS custom properties:
--typewriter-duration— reveal speed (default:1.2s)--typewriter-delay— start delay (default:0s)
Stagger multiple lines by setting different delays:
<h1 class="animate-typewriter" style="--typewriter-delay: 0s">First line</h1>
<p class="animate-typewriter" style="--typewriter-delay: 0.8s">Second line</p>Includes @supports fallback for browsers without clip-path.