Typewriter

Types, pauses and deletes a sequence of phrases while reserving space for the longest one.

AnimationsText@gaudi/design-system/animations/TypewriterView in Storybook Source

Installation

pnpm add github:ahmadassaf/design-system

Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.

import { Typewriter } from '@gaudi/design-system/animations/Typewriter';

Usage

import { Typewriter } from '@gaudi/design-system/animations/Typewriter';
<Typewriter texts={["Create", "Explore"]} />

Examples

Playground

Storybook

One sentence

Storybook

API

8 props

Accessibility

All phrases are exposed once as stable text, without a live region. Reduced motion shows the complete current phrase. Pausing freezes the current typed fragment. Provide a pause control for repeating sequences.

Notes

Visual idea inspired by Text Type from React Bits (MIT + Commons Clause). Independently implemented for Gaudi; no React Bits code or assets are included.

CipherRevealScrambled characters resolve progressively into readable text on view, hover or focus.GlyphInspectorInspect animated letter outlines with a gliding frame, floating square particles, measurement guides and a live readout. Hover to take control; drag and release a letter to return it to its slot.PhraseCycleA sequence of phrases rotates vertically in a stable space, without moving the surrounding line.WarpTextText gently undulates at rest and bends beneath a moving pointer lens. Hover magnifies a local area, adds a soft ripple and optional RGB refraction, then eases back on exit.WordSpotlightA moving set of corner marks brings one word into focus while the surrounding words soften.