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:T1230,

Make every word feel like a scene.

Cinematic Text is a premium Framer component that transforms static headlines into a living, breathing piece of visual storytelling. Inspired by the moody atmosphere of noir film titles and vintage cathode-ray displays, it animates every character individually — emerging from haze, snapping into clarity, and flickering with the restless energy of a broken neon sign.

No code required. Every effect is fully controllable from Framer's property panel.

What it does

Each character reveals itself with a cinematic blur-to-focus transition, staggered organically so no two letters move in sync. Once on screen, characters pulse with a subtle flicker, drift with film-gate jitter, and carry a multi-layered glow that makes text feel lit from within. On entry, a chromatic aberration effect splits each character into red and cyan channels before snapping into register — the same visual language used in high-end motion graphics and title sequences.

Key Features

Character-level animation — every letter is independently animated with randomised timing so the reveal feels organic, never mechanical.

Atmospheric glow — multi-layer text-shadow builds a deep, luminous halo around your text. Glow colour, intensity, and shadow depth are all adjustable.

Film flicker — a procedurally generated opacity pattern mimics the irregular pulse of a neon tube or ageing projector bulb. Intensity and speed are separate controls.

Chromatic aberration — an RGB channel split effect plays out on reveal before resolving to clean type. Dial it up for a cyberpunk edge or keep it subtle for a cinematic polish.

Burn-in spring — an optional spring overshoot on the scale transition gives each character a punchy, physical snap as it lands.

Film jitter — a looping micro-movement on each character simulates the mechanical instability of a film gate, adding texture to static moments.

Scanline overlay — a fine horizontal line pattern adds CRT depth to the entire component without affecting legibility.

Three trigger modes — animate on load, on scroll into view, or on hover for interactive reveals.

Native Framer font picker — select any local or Google font directly from Framer's font panel, with full control over weight and style.

Blend mode support — compositing options including Screen, Overlay, Color Dodge, and more for layering over image or video backgrounds.

Ideal for

Hero headlines and landing page titles
Portfolio and agency websites
Event, film, or product launch pages
Dark-mode interfaces and immersive experiences
Any project where the typography needs to do as much work as the visuals

Customisable Properties

Everything is controlled directly from Framer's property panel with no code required.

Content and typography — write multi-line text directly in the panel, pick any font through Framer's native font picker with full control over weight and style, and fine-tune letter spacing and line height to match your layout.

Colour and alignment — set the text colour independently from the glow, choose left, centre, or right alignment, and select a blend mode — including Screen, Overlay, and Color Dodge — for layering over image or video backgrounds.

Glow and depth — control the colour and intensity of the multi-layer light halo, and adjust shadow depth to build as much or as little dimensionality as the design calls for. Toggle the scanline overlay on or off for a CRT texture.

Reveal and timing — set how fast characters appear with the Reveal Speed slider, add a Phase Delay to hold the animation until the right moment, and toggle the Burn-In Spring for a physical snap as each character lands.

Ongoing animation — tune the Flicker intensity and speed independently so the pulse feels erratic or steady. Set Film Jitter strength to add a subtle mechanical tremor between zero and a full restless shake. Adjust Chromatic Split to control how strongly the RGB channel separation plays out on entry.

Trigger mode — choose Auto to animate on load, Scroll to fire when the component enters the viewport, or Hover for an interactive reveal on cursor contact.

5a:[["$","$L5d",null,{"post":{"id":"019c9ee2-405d-7fb1-a28f-076bd98ed0dc","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"71ba0696-4ed2-449a-8bb9-e5e0400e8aee","name":"Sajjadul Kibria","slug":"neil-sajjad","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/153627/avatar-GinR1Jn5jLsUjgTO1yklcKjIJfQNiY.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"V6B3LAjxZCW7yfG6FjCp","resolved":true,"title":"Cinematic Text","body":"$5e","bodyJson":null,"introduction":"Animated Flicker & Reveal Text","slug":"cinematic-text","author":{"framerUserId":"71ba0696-4ed2-449a-8bb9-e5e0400e8aee","name":"Sajjadul Kibria","slug":"neil-sajjad","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/153627/avatar-GinR1Jn5jLsUjgTO1yklcKjIJfQNiY.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/II5rITqYRqGioTGR0Ka4/cinematic-text-TNd8B3VptMVS8UMkQ5IqSILHukjaxG","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-02-20T05:58:55.877Z","updatedAt":"2026-02-27T11:35:15.803Z","publishedAt":"2026-02-27T11:35:53.693Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://re.chujiqiqi.com/m/Cinematic-Text-O5IyfR.js@kq7Th4KeRMP2M6IkV5Mx","previewUrl":"https://cinematictext.framer.website/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"7fe42fdd-1b16-4f5a-93b8-009488614de8","name":"Text","slug":"text"}],"lastSaveId":"kq7Th4KeRMP2M6IkV5Mx","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":"2026-02-27T11:35:53.693Z","updatedAt":"2026-02-27T11:35:53.693Z","reported":false}}],"$L5f"]

Suggested for you