Typewriter Loader 🔊

A typewriter loader with sound. It types your hero headline (any text layer), then lands it right where your text sits, in the same font, size and colour. The loader becomes the headline.

How it plays: a first idea is typed, reconsidered and deleted. Then your headline is typed, the bell rings, and the page appears.

Two ways to reveal the page:

• Fade: the typed text glides onto your headline, then the loader fades away. It matches your headline on Desktop, Tablet and Phone automatically.

• Slide Up: the loader slides away with the text on it. Type anything, in any font and colour, so the loader and your headline can say different things.

Settings

• Draft: the word typed and deleted first. Leave it empty to skip.

• Placement: type in the centre, top left, bottom left, or right on the headline.

• Typing Size: type smaller or larger than the headline, then scale to fit as it lands.

• Sound: key clicks and an end bell, built in, or upload your own. Visitors tap anywhere to turn sound on or off.

• Speed, Background and Caret colour.

• Once per Visit, or every time.

Built for everyone

• Skip button, Escape to skip, and full keyboard support.

• Announced to screen readers, and skipped when reduced motion is on.

• Leaves your page untouched: no scrolling, no style changes.

Setup

1. Drop Typewriter Loader onto your page.

2. Select your headline and set its Scroll Section ID, then enter the same ID in the loader.

3. Open Preview.

Leave Name empty and it types your headline's own text, or fill it in to type something different.