5e:I[333483,["/creators-assets/_next/static/immutable/chunks/16d0e6blr3zvd.js","/creators-assets/_next/static/immutable/chunks/3fk0f7q4960ol.js","/creators-assets/_next/static/immutable/chunks/00fdmr6kfsdrw.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/30hhj9fl_j_en.js","/creators-assets/_next/static/immutable/chunks/1zwfgkv6hl7ih.js","/creators-assets/_next/static/immutable/chunks/33adfll0sgxzj.js","/creators-assets/_next/static/immutable/chunks/1xwqa9rrktdcw.js","/creators-assets/_next/static/immutable/chunks/1p5p3hxx00owh.js","/creators-assets/_next/static/immutable/chunks/19-jcjdymr-fa.js","/creators-assets/_next/static/immutable/chunks/11rwwufuwaox5.js","/creators-assets/_next/static/immutable/chunks/39xjxvqtwa0x7.js","/creators-assets/_next/static/immutable/chunks/2b15v_9ruhnys.js","/creators-assets/_next/static/immutable/chunks/27vyv0cqm_295.js","/creators-assets/_next/static/immutable/chunks/1_2vu9p6mra4j.js","/creators-assets/_next/static/immutable/chunks/17w9c6wazundy.js","/creators-assets/_next/static/immutable/chunks/26nhnsanh2piz.js","/creators-assets/_next/static/immutable/chunks/2riq6xk2ap_dl.js","/creators-assets/_next/static/immutable/chunks/1q3yt3z40r1ue.js","/creators-assets/_next/static/immutable/chunks/3_2gh-txmrtwa.js","/creators-assets/_next/static/immutable/chunks/3xhwx36tyhh8-.js","/creators-assets/_next/static/immutable/chunks/0w757zrv0hi6k.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/3edl5e308nytq.js","/creators-assets/_next/static/immutable/chunks/44oc0x6k7mw-i.js","/creators-assets/_next/static/immutable/chunks/05i2jce8amocn.js","/creators-assets/_next/static/immutable/chunks/2njnkxjf39nsf.js","/creators-assets/_next/static/immutable/chunks/3zq_69yv5l6lg.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/2qrxli96_t9cq.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/2jy6qwxbn3dqw.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/3o3dwck1w1ue6.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3sa-o_ztvtkwe.js","/creators-assets/_next/static/immutable/chunks/2051y-i4b0nnm.js"],"PostDetailCard"] 5f:T11ce,

Highlight Typewriter for Framer

Add a typewriter text animation to any Framer hero section in seconds.

Highlight Typewriter cycles through words or phrases with a realistic typing and deleting animation inside a styled highlight box. The box expands only to the right, meaning surrounding text never shifts, jumps, or re-centers.

Perfect for animated headlines like:

We build [Products] → [Experiences] → [Brands]

Fully customizable, designer-friendly, and built specifically for Framer layouts.No code required.

What This Component Does

Highlight Typewriter creates a dynamic animated headline that types and deletes words inside a colored highlight container.

Unlike typical typewriter effects that break layout alignment, this component locks the left edge of the highlight box in place. As characters appear, the box grows only to the right.

This ensures clean headline animations every time without visual instability.

Benefits

No layout shift
No text jumping
No centering jitter
Smooth hero animations

It's the Framer typewriter headline component designers keep rebuilding from scratch — now solved properly.

Perfect For

Hero Headlines

Create animated messaging like:

We build [Products] [Experiences] [Brands]

SaaS Landing Pages

Cycle through product features or use cases in a single headline.

Portfolio Sites

Rotate between roles, specialties, or skills.

Agency Websites

Highlight services dynamically in one clean line.

Product Marketing Pages

Add motion to above-the-fold messaging without breaking layout alignment.

Key Features

Smooth Typewriter Animation

Words type in and delete naturally with configurable typing speeds.

Layout-Safe Highlight Box

The highlight container grows only to the right, preventing layout shift and keeping surrounding text perfectly aligned.

Prefix & Suffix Text Support

Add static text before or after the animation.

Example:

We build [Products]

Prefix and suffix text remain perfectly locked in place.

Designer-Friendly Controls

Every visual detail can be customized directly from the Framer property panel.

Built for Framer Layout System

Fully responsive and designed to work seamlessly inside Framer stacks, grids, and hero sections.

Customization Options

You have full control over the animation and styling.

Text Content

Add up to 30 rotating words or phrases.

Playback Controls

Auto play on load
Loop continuously
Stop on the final word

Animation Timing

Typing speed (milliseconds per character)
Delete speed (milliseconds per character)
Hold duration before deletion

Font Controls

Separate font styling for:

Typed highlight text
Prefix text
Suffix text

Including family, size, weight, letter spacing, and line height.

Highlight Box Styling

Customize the appearance of the highlight container:

Highlight background color
Text color
Corner radius
Padding
Minimum width (prevents box collapse)

Prefix & Suffix Text

Add static text before or after the highlight box with independent color styling.

Why Designers Use This

Most typewriter effects cause layout instability, forcing text to jump or re-center as words change length.

Highlight Typewriter solves this with a right-expanding highlight box, allowing you to build animated hero headlines without breaking layout alignment.

It’s a simple drop-in component that adds motion and polish to any Framer landing page.

Support & Returns

If the component is not functioning as described, you're covered by a 30-day return policy — no questions asked.

For support, questions, or feedback please contact:

bryanbrunotdesign@gmail.com

We'll help you get everything working as quickly as possible.

5b:[["$","$L5e",null,{"post":{"id":"019d2a87-116e-71ff-a373-9f9cc71a4d40","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"7bb1ca77-9fe0-4458-8f15-f3f680fe779f","name":"Bryan Brunot","slug":"bryan-brunot","avatar":null,"followed":false,"followsYou":false},"media":[],"resources":[{"id":"XbCK7ufIPoFSTAMQvhpx","resolved":true,"title":"Highlight Typewriter","body":"$5f","bodyJson":null,"introduction":"A clean highlighted typewriter effect ","slug":"highlight-typewriter","author":{"framerUserId":"7bb1ca77-9fe0-4458-8f15-f3f680fe779f","name":"Bryan Brunot","slug":"bryan-brunot","avatar":null,"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/XbCK7ufIPoFSTAMQvhpx/highlight-typewriter-6bOv9ss7joB5abDC9PqK7F7mEIFx0Z","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-03-13T16:53:07.658Z","updatedAt":"2026-03-26T09:38:10.237Z","publishedAt":"2026-03-26T14:23:08.142Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://highlight-typewriter.framer.website/highlighter-typewriter","price":"5","paymentUrl":"https://contra.com/payment-link/oabJiwCW-highlight-typewriter-for-framer","workshop":false,"categories":[{"id":"7fe42fdd-1b16-4f5a-93b8-009488614de8","name":"Typography","slug":"typography"}],"lastSaveId":"m9fIv6M2EHvbA15XLWWR"}}],"contests":[],"categories":[],"tags":[],"likes":{"count":12,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-03-26T14:23:08.142Z","updatedAt":"2026-03-26T14:23:08.142Z","reported":false}}],"$L60"]

Suggested for you