Demo

Dactylo walks through text one character at a time. JavaScript finds the text; CSS reveals it.

Install it with npm install dactylo, then importdactylo/auto or call dactylo() yourself.

Default

The default auto entrypoint applies the effect to headings, paragraphs, lists, links, buttons, tables, and other ordinary text-bearing elements.

Lists

• Every line keeps its natural markup.
• Whitespace is preserved where the browser would preserve it.
• Reduced motion preferences disable the animation.

Controls

This paragraph is controlled by the buttons. It can be reset and animated again with different character delays.

Manual Target

import { dactylo } from 'dactylo'

dactylo(document.querySelector('main'), { delay: 24 })