Typography typographyanimationtypewriter

Typewriter Effect

Pure CSS typewriter animation for sequential text reveal.

Hello, World!

Usage

Copy the full block below to use this component with its imports.

astro 
---
import { TypewriterEffect } from 'astro-component-kit';
---

<TypewriterText text="Sample text" speed="3s">Content</TypewriterText>
--- import { TypewriterEffect } from 'astro-component-kit'; --- <TypewriterText text="Sample text" speed="3s">Content</TypewriterText>

Manual Installation

If you are not using the npm package, create a new file src/components/lib/TypewriterEffect.astro and paste the following code:

astro 
---
interface Props { text: string; speed?: string; }
const { text, speed = '3s' } = Astro.props;
---
<div class="tw-wrap">
  <span class="tw-text" style={`--len: ${text.length}; --speed: ${speed}`}>
    {text}
  </span>
</div>
<style>
  .tw-wrap { display: inline-block; }
  .tw-text { display: block; overflow: hidden; white-space: nowrap; border-right: 3px solid #6366f1; color: #fff; font-family: monospace; font-size: 1.5rem; font-weight: 700; width: 0; animation: typing var(--speed) steps(var(--len)) forwards, blink 0.75s step-end infinite; }
  @keyframes typing { from { width: 0 } to { width: 100% } }
  @keyframes blink { from, to { border-color: transparent } 50% { border-color: #6366f1 } }
</style>
--- interface Props { text: string; speed?: string; } const { text, speed = '3s' } = Astro.props; --- <div class="tw-wrap"> <span class="tw-text" style={`--len: ${text.length}; --speed: ${speed}`}> {text} </span> </div> <style> .tw-wrap { display: inline-block; } .tw-text { display: block; overflow: hidden; white-space: nowrap; border-right: 3px solid #6366f1; color: #fff; font-family: monospace; font-size: 1.5rem; font-weight: 700; width: 0; animation: typing var(--speed) steps(var(--len)) forwards, blink 0.75s step-end infinite; } @keyframes typing { from { width: 0 } to { width: 100% } } @keyframes blink { from, to { border-color: transparent } 50% { border-color: #6366f1 } } </style>

Quick Info

Category
Typography
Filename
TypewriterEffect.astro
Dependencies
None — pure Astro + CSS
Tags
typographyanimationtypewriter