Type Writer for your hero section.

Poper's type writer widget runs an explicit action timeline rather than a single rotating string. You write a fixed prefix and a fixed suffix, then build an ordered list of actions for the words in between. A 'type' action holds one phrase and the color it types in. A 'wait' action holds a pause duration in milliseconds. A 'delete' action removes characters before the next phrase types in. Because the prefix and suffix never animate, the headline stays readable the whole time, and only the variable words draw the eye. This model also makes the effect predictable: you can see exactly what types, in what order, with which pauses, instead of guessing how a library will tween between strings.

A typewriter effect that types every character at a perfectly even cadence reads as mechanical. Poper exposes base typing speed plus a speed variance value, so each keystroke lands a little faster or slower than the last, the way real typing does. Delete speed is separate from typing speed because deletion usually feels better when it is quicker. Pause on punctuation adds a short rest after commas and periods. Loop, loop delay, and start delay control whether the sequence repeats, how long it waits between loops, and how long it waits before the first character appears. Spend a minute on these values: the difference between a default cadence and a tuned one is the difference between a headline that feels designed and one that feels like a plugin.

The caret is a small detail that carries a lot of the typewriter feel. Poper lets you choose a shape cursor (a thin line, a solid block, or an underline) or an icon cursor for something more playful. You control the cursor color, size, horizontal and vertical offset, spacing from the text, and its animation, including a steady blink. You can also set the cursor to blink only while idle. Match the cursor color to your brand accent and size it relative to the font so it reads as part of the headline rather than a stray artifact. On a dark hero, a slightly brighter caret color helps it stay visible without glowing.

The Appearance tab covers everything visual: font family (with a custom font option), font size, weight, line height, letter spacing, and text alignment. Text can be a single solid color or a gradient between two colors, with an optional glow. You can also set a background color, padding, border radius, border, and shadow if you want the typewriter to sit inside a contained card rather than free-floating in the hero. The layout direction setting arranges the prefix, the animated word, and the suffix either in a row or stacked in a column, which is useful when the animated phrase is long enough to need its own line on mobile.

Placement is most of the win. A typewriter effect belongs in the hero, where a visitor first lands and where a cycling headline can broaden the appeal of a single page to several audiences at once ('built for marketers, built for founders, built for agencies'). It works well directly above a primary call to action, and on coming-soon or waitlist pages where there is little other content to compete with. Avoid using it in body copy or in long-form content: motion that helps in a hero becomes a distraction when a visitor is trying to read. Keep the phrase list short so the full cycle completes while the visitor is still looking at the hero.