5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:T9b3,

Kinetic Text turns headlines into living type. It fragments your text into letters or words, animates them independently, and then reforms the phrase with premium, staggered motion. Use it for hero lines, section headers, or short statements that need to land with energy—without writing a line of code.

✨ Features & Capabilities

Animation Modes – Explode & Reform, Wave, Scramble & Resolve.
Triggers – Start on scroll into view, hover, or page load.
Granularity – Animate by letters or words (toggle).
Timing & Physics – Controls for speed, delay/stagger, easing, and repetition (once/loop).
Scatter Control – Set max translation/rotation distance for the explode/scramble effects.
Color Transitions – Optional from→to color for animated emphasis.
Typography Controls – Font, weight, size, line-height, tracking, case, alignment, and max width.
Layout-Safe – Preserves spacing and reflows cleanly; no layout jump.
Accessibility – Screen readers read the full phrase; decorative spans are aria-hidden.
Reduced Motion – Honors prefers-reduced-motion (falls back to subtle fade).
Performance – GPU transforms only; lightweight and responsive.

🧩 Property Controls

Text (headline / short phrase)
Animate By: Letters | Words
Animation Type: Explode, Wave, Scramble
Trigger: Scroll | Hover | Load
Speed (ms), Stagger (ms), Easing
Scatter Distance (px/deg)
Color From / To (optional)
Repeat: Once | Loop
Typography: Font, Weight, Size, Line Height, Tracking, Align, Case, Max Width

💡 Use Cases

Hero headlines • Section intros • Launch callouts • Portfolio titles • Data/story transitions

5a:[["$","$L5d",null,{"post":{"id":"019ac546-bcad-70d5-8fdc-a4640ee8d3ce","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"e17f143a-8a7c-4fd8-836b-e24c989cff72","name":"John Valentine","slug":"john-valentine","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/727098/avatar-3kI4iypYpxiJBvaamPEvzpMeE85nm6.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"vKHJ7qIlUBG2VKCPbt24","resolved":true,"title":"Kinetic Text","body":"$5e","bodyJson":null,"introduction":"","slug":"kinetic-text","author":{"framerUserId":"e17f143a-8a7c-4fd8-836b-e24c989cff72","name":"John Valentine","slug":"john-valentine","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/727098/avatar-3kI4iypYpxiJBvaamPEvzpMeE85nm6.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/vKHJ7qIlUBG2VKCPbt24/kinetic-text-qeTOg3pwuGXMNtC9GlGwgabYW1dMc8","metadata":{"tint":{"h":210,"s":68,"l":36},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-10-04T09:51:56.076Z","updatedAt":"2025-11-26T10:08:49.922Z","publishedAt":"2025-11-27T12:25:38.733Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://sub.chujiqiqi.com/m/KineticTypography-2DHw.js@8QAH9FDj4AnEFLLPfIXr","previewUrl":"https://kinectictext.framer.website","price":null,"paymentUrl":null,"workshop":true,"categories":[{"id":"7fe42fdd-1b16-4f5a-93b8-009488614de8","name":"Text","slug":"text"}],"lastSaveId":"8QAH9FDj4AnEFLLPfIXr","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-11-27T12:25:38.733Z","updatedAt":"2025-11-27T12:25:38.733Z","reported":false}}],"$L5f"]

Suggested for you