a simple typewriter for browser
npm install untyper
type, pause, delete, move, add, image, and then run them with go().``bash`
npm install untyper
`ts
import { UnTyper } from 'untyper'
const target = document.querySelector('#text')
const typer = new UnTyper(target, {
speed: 90,
startDelay: 300,
cursorAnimation: {
kind: 'combined',
duration: 900,
},
})
await typer
.type('Hi there!')
.pause(400)
.delete(6)
.type('untyper!')
.go()
`
| Option | Type | Default | Description |
| --- | --- | --- | --- |
| speed | number | 120 | Base delay between characters (ms). |startDelay
| | number | 0 | Delay before the queue starts (ms). |animationspancontent
| | string | | | Cursor character. |animate.cancel
| | boolean | false | Hide cursor after the queue completes. |cursorAnimation
| | CursorAnimationOptions | — | Cursor animation customization. |
- text: stringoptions.delay
- : optional delay (ms) after typing this text
Returns this.
- ms: number
Returns this.
- charCount: number (must be greater than 0)options.delay
- : optional delay (ms) after deleting
Returns this.
- movementArg: number | nullnull
- Provide a negative number to move left by that many characters.
- Use with options.to = 'start' | 'end' to jump to the start or end.
Returns this.
to animate inserted elements.-
html: string
- options.delay: optional delay (ms) after adding
- options.animation: optional ElementAnimation to apply to added elementsReturns
this.$3
Inserts an img element with optional attributes. You can also pass options.animation to animate the image after insertion.-
src: string
- options.alt: string
- options.className: string
- options.width: number
- options.height: number
- options.attrs: Record for additional attributes
- options.delay: optional delay (ms) after inserting
- options.animation: optional ElementAnimation to apply to the imageReturns
this.$3
Runs the queued actions.Returns
Promise.Animation support
You can apply custom animations to inserted DOM elements using options.animation on add or image.`ts
await typer
.add('Spotlight', {
animation: {
keyframes: [
{ opacity: 0, transform: 'translateY(4px)' },
{ opacity: 1, transform: 'translateY(0)' },
],
options: { duration: 300, easing: 'ease-out' },
},
})
.image('/logo.png', {
alt: 'Brand logo',
animation: {
keyframes: [
{ transform: 'scale(0.9)', opacity: 0 },
{ transform: 'scale(1)', opacity: 1 },
],
options: { duration: 250 },
},
})
.go()
``