Components→Typewriter

Typewriter

Spring-physics typewriter with per-character animation. Characters land with spring overshoot instead of just appearing. Supports loop mode to cycle through phrases with natural typing/deleting rhythm.

Animation

Installation

Copy and paste

Copy the component source code and paste it into your project.

import { Typewriter } from "driftkit";

Props

Name	Type	Required	Description
`text`	`string`	Yes	The text to type out character by character.
`speed`	`number`	No	Milliseconds between each character. Has natural jitter (±30%) built in.
`delay`	`number`	No	Initial delay in milliseconds before typing starts.
`cursor`	`boolean`	No	Show blinking cursor at the end of typed text.
`persistCursor`	`boolean`	No	Keep cursor visible after typing completes.
`onComplete`	`() => void`	No	Callback fired when typing animation finishes.
`loop`	`string[]`	No	Array of phrases to cycle through. Enables type → pause → delete → type loop.
`loopPause`	`number`	No	Pause duration in ms between phrases when looping.

🎮

Playground

Tune spring physics for this component

Live Preview

Typewriter Component

Spring Physics

StiffnessiHow quickly the animation reaches its target. Higher values create snappier animations.300

DampingiHow much the animation resists motion. Lower values create more bounce and overshoot.30

MassiHow heavy the element feels during animation. Higher values make animations slower with more momentum.1

Generated Code

const springConfig = {
  "type": "spring",
  "stiffness": 300,
  "damping": 30,
  "mass": 1
};

// Basic hover animation
<motion.div
  whileHover={{ scale: 1.05 }}
  whileTap={{ scale: 0.95 }}
  transition={springConfig}
>
  <Typewriter />
</motion.div>

// Advanced with custom animations
<motion.div
  animate={{ 
    scale: [1, 1.02, 1],
    y: [0, -4, 0]
  }}
  transition={{
    ...springConfig,
    repeat: Infinity,
    repeatDelay: 2
  }}
>
  <Typewriter />
</motion.div>

Stiffness: Controls animation speed. Higher values create snappier animations.

Damping: Controls resistance to motion. Lower values create more bounce and overshoot.

Mass: Controls the perceived weight. Higher values make animations slower with more momentum.

Source Code

View the source code on GitHub to see the full implementation.

View on GitHub