61:I[267044,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/3gx96u50v9idb.js","/creators-assets/_next/static/immutable/chunks/125_ce2ese0y_.js","/creators-assets/_next/static/immutable/chunks/2ii8lkleumgkk.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/069_m7850i8jf.js","/creators-assets/_next/static/immutable/chunks/03586ab1rea-b.js","/creators-assets/_next/static/immutable/chunks/19qq0hy3mz_vv.js","/creators-assets/_next/static/immutable/chunks/2oixy7hansmjm.js","/creators-assets/_next/static/immutable/chunks/2rczsbgoa3afm.js","/creators-assets/_next/static/immutable/chunks/2a63j-5qkrdf4.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/0-lv0573a1cyl.js","/creators-assets/_next/static/immutable/chunks/3kkqflhmmpg9p.js","/creators-assets/_next/static/immutable/chunks/0ib-rcz4b0eq3.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/24gcuxpvxd8dy.js","/creators-assets/_next/static/immutable/chunks/0xd4yj8g3g-ci.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/3vd9_7_mqx0kl.js","/creators-assets/_next/static/immutable/chunks/3l37d07td4kzk.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3nw4q_evu8ge1.js","/creators-assets/_next/static/immutable/chunks/3o5qsyzxffd89.js","/creators-assets/_next/static/immutable/chunks/0sdd6rzuigoor.js","/creators-assets/_next/static/immutable/chunks/04onqby6uwgz7.js","/creators-assets/_next/static/immutable/chunks/16d5vpfsnfybw.js","/creators-assets/_next/static/immutable/chunks/3f4d4x4z1mrzh.js","/creators-assets/_next/static/immutable/chunks/0yulab_mho2q7.js","/creators-assets/_next/static/immutable/chunks/3_6nvj55e699g.js","/creators-assets/_next/static/immutable/chunks/2r15b2hek61lg.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/0pc9t50m5x90i.js","/creators-assets/_next/static/immutable/chunks/3fyhezch4qqad.js","/creators-assets/_next/static/immutable/chunks/3eh5q_6ksmw0l.js","/creators-assets/_next/static/immutable/chunks/2rdaqkxiyeq_6.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/0v2aom8xv86j9.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/0s-n7u5-dwtml.js"],"S"] 62:T752,

Button 001 — Letters that flip on hover

A pill-shaped button for Framer where every character animates independently. Hover it, and each letter rotates out in 3D while a second layer of letters flips in to take its place — timed to ripple outward from the center, so it reads as one fluid motion instead of a uniform swap.

This is a code component, not an image trick — drop it into any Framer project and it just works.

What you get

One component, ready to paste into Framer
Full property controls — no code editing required to customize
Works as a button or a link (toggle by adding a URL)

Customize without touching code

Label text and full font controls (family, weight, size, spacing, line height)
Text and background color
Padding (X / Y) and corner radius — from sharp edges to a full pill
Stagger — control how much delay ripples between letters
Duration — control how fast or slow each letter flips
Optional link field — automatically renders as an anchor tag when filled, a button when empty

Built properly, not just prettily

Keyboard accessible — focus triggers the same animation as hover
aria-label included automatically so screen readers read the real label, not split characters
Detects Framer's static export mode so it won't animate (or break) in thumbnails and static builds
Lightweight — Framer Motion only, no extra dependencies

Good for Hero CTAs, nav buttons, portfolio sites, agency landing pages — anywhere a default hover state feels like an afterthought.

63:Ta30,

About this Component

Typewriter Text is a storytelling component designed to capture attention one letter at a time.

Built for creators who care about rhythm, tone, and atmosphere, this component delivers a cinematic typing effect with a glowing cursor and customizable styling — perfect for bold intros, poetic statements, or immersive UI moments.

It combines refined motion with a minimalist footprint: every animation is powered by native React hooks, and every visual element can be tweaked directly in Framer — no code, no fuss.

Whether you're setting the tone for a futuristic portfolio, writing a product teaser, or revealing a headline with style, Typewriter Text gives you full creative control.

Core features:

Customizable typing speed for precise pacing
Neon-style text glow with editable color
Blinking cursor with adjustable speed and color
Multiline support and responsive font scaling
Full font control: size, weight, letter spacing, alignment
Custom background and text colors
Performance-aware (skips animation in static previews)
Framer-native controls — no external libraries required

Ideal use cases:

Hero sections with personality
Landing page headlines
Product storytelling blocks
UI microinteractions and loading screens
Creative studios, portfolios, and digital products

Built with performance in mind. Designed for expressive interfaces.

Updates are included for life. Questions or custom needs? karlbier@proton.me

60:["$","$L61",null,{"value":{"fallback":{"$inf$activity-creator-c8a0e4a5-4de7-4f11-9ee7-e39631cc6a8b-all:/unified/creator/c8a0e4a5-4de7-4f11-9ee7-e39631cc6a8b/activity/":[{"data":[{"id":"019ef4e8-e947-724b-acbf-e786296f94a0","type":"component.created","target":{"type":"component","id":"LcLva5DGvlUpVKwsSGB8","preview":"Letter Flip Button","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/c8a0e4a5-4de7-4f11-9ee7-e39631cc6a8b/4sam7pi1","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"c8a0e4a5-4de7-4f11-9ee7-e39631cc6a8b","name":"Karl Bier","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1075573/avatar-ULUzTNHCY3SYcyjJe7eoxhxV35qEnY.jpg","slug":"karl-bier","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-06-23T14:36:05.319Z","latestAt":"2026-06-23T14:36:05.319Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:c8a0e4a5-4de7-4f11-9ee7-e39631cc6a8b:/unified/posts/?creator=c8a0e4a5-4de7-4f11-9ee7-e39631cc6a8b&with=reposts":[{"data":[{"id":"019ef4e8-e909-739e-aacf-85a5fa0f1192","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"c8a0e4a5-4de7-4f11-9ee7-e39631cc6a8b","name":"Karl Bier","slug":"karl-bier","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1075573/avatar-ULUzTNHCY3SYcyjJe7eoxhxV35qEnY.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"LcLva5DGvlUpVKwsSGB8","resolved":true,"title":"Letter Flip Button","body":"$62","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Button 001 — Letters that flip on hover","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"A pill-shaped button for Framer where every character animates independently. Hover it, and each letter rotates out in 3D while a second layer of letters flips in to take its place — timed to ripple outward from the center, so it reads as one fluid motion instead of a uniform swap."}]},{"type":"paragraph","content":[{"type":"text","text":"This is a code component, not an image trick — drop it into any Framer project and it just works."}]},{"type":"paragraph","content":[{"type":"text","text":"What you get","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"One component, ready to paste into Framer"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Full property controls — no code editing required to customize"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Works as a button or a link (toggle by adding a URL)"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Customize without touching code","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Label text and full font controls (family, weight, size, spacing, line height)"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Text and background color"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Padding (X / Y) and corner radius — from sharp edges to a full pill"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Stagger — control how much delay ripples between letters"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Duration — control how fast or slow each letter flips"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Optional link field — automatically renders as an anchor tag when filled, a button when empty"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Built properly, not just prettily","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Keyboard accessible — focus triggers the same animation as hover"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"aria-label","marks":[{"type":"code"}]},{"type":"text","text":" included automatically so screen readers read the real label, not split characters"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Detects Framer's static export mode so it won't animate (or break) in thumbnails and static builds"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Lightweight — Framer Motion only, no extra dependencies"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Good for","marks":[{"type":"bold"}]},{"type":"text","text":" Hero CTAs, nav buttons, portfolio sites, agency landing pages — anywhere a default hover state feels like an afterthought."}]}]},"introduction":"Letters that flip on hover.","slug":"letter-flip-button","author":{"framerUserId":"c8a0e4a5-4de7-4f11-9ee7-e39631cc6a8b","name":"Karl Bier","slug":"karl-bier","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1075573/avatar-ULUzTNHCY3SYcyjJe7eoxhxV35qEnY.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/c8a0e4a5-4de7-4f11-9ee7-e39631cc6a8b/4sam7pi1","metadata":{"tint":{"h":90,"s":23,"l":36},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-06-23T14:36:05.231Z","updatedAt":"2026-06-23T14:36:05.231Z","publishedAt":"2026-06-23T14:36:05.228Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://letter-flip-button-preview.framer.website/","price":"4","paymentUrl":"https://coolpals.gumroad.com/l/kdxgv","workshop":false,"categories":[{"id":"cd81cc33-d6cf-4630-8e59-b5b3100166ba","name":"Buttons","slug":"buttons"}],"lastSaveId":"00LevRMlT4vHm2Zynk1I","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":2,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-06-23T14:36:05.257Z","updatedAt":"2026-06-23T14:36:05.257Z"},{"id":"0198816c-70f5-7da7-a47b-8df780c09d56","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"c8a0e4a5-4de7-4f11-9ee7-e39631cc6a8b","name":"Karl Bier","slug":"karl-bier","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1075573/avatar-ULUzTNHCY3SYcyjJe7eoxhxV35qEnY.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"8q8xC27NcKDJzNZ8QQdh","resolved":true,"title":"Typewriter Text","body":"$63","bodyJson":null,"introduction":"","slug":"typewriter-text","author":{"framerUserId":"c8a0e4a5-4de7-4f11-9ee7-e39631cc6a8b","name":"Karl Bier","slug":"karl-bier","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1075573/avatar-ULUzTNHCY3SYcyjJe7eoxhxV35qEnY.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/8q8xC27NcKDJzNZ8QQdh/typewriter-text-RdLkyc1hwMgckDo1LAg77mTdl7FXfB","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-08-04T10:16:31.053Z","updatedAt":"2025-08-08T14:20:17.317Z","publishedAt":"2025-08-06T22:07:04.437Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://powerful-luxury-979147.framer.app/","price":"4","paymentUrl":"https://coolpals.gumroad.com/l/xumqj","workshop":false,"categories":[{"id":"7fe42fdd-1b16-4f5a-93b8-009488614de8","name":"Text","slug":"text"}],"lastSaveId":"XhSw0an7LrTg2ZeUAoeV","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":2,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2025-08-06T22:07:04.437Z","updatedAt":"2025-08-06T22:07:04.437Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L64"}]