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

Vestaboard Display is a high-fidelity split-flap animation component for Framer that recreates the iconic mechanical display board experience. Each character flips with realistic motion, producing a nostalgic, tactile effect perfect for modern websites, dashboards, and hero sections.

Designed for both visual impact and performance, this component brings mechanical text animation, dynamic messaging, and interactive storytelling into your Framer projects.

🎯 Core Features

- Split-Flap Animation

Each cell animates with a realistic two-part flip using 3D transforms, shadows, and timing delays, closely mimicking real-world Vestaboard displays.

- Message Cycling

Automatically rotates through multiple messages with configurable timing, creating dynamic, continuously updating content.

- Scramble Effect

Before settling, each character cycles through random values, replicating the authentic “mechanical search” behavior of split-flap boards.

- Color Tile Support

Insert colored tiles using simple syntax:{R} {O} {Y} {G} {B} {V} {W}Perfect for highlighting, branding, or visual storytelling.

- Cascade Animation

Characters animate in a wave pattern across rows and columns, creating a premium, cinematic transition effect.

🎨 Customization Options

Messages (multiple text inputs)
Animation speed and duration
Cycle interval (or disable auto-play)
Light / dark theme
Corner radius
Color tiles and accent effects

🧠 Smart Layout System

Auto text wrapping for 22-column grid
Intelligent word breaking
Centered layout (horizontal + vertical)
Responsive typography using fluid scaling

🎯 Best Use Cases

Hero sections with dynamic messaging
SaaS dashboards and analytics UI
Web3 / AI landing pages
Creative portfolios and agency websites
Announcement boards and feature highlights

5a:[["$","$L5d",null,{"post":{"id":"019e5532-0a32-7a05-a953-bec6b1b1dfbd","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"8cdcb682-4417-430f-a5c2-f2a5c2971895","name":"Suman Debnath","slug":"uxwithsuman","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/164761/avatar-dIlArwvnqig0HZ6zEdLn1VBuJqKncN.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"Sr9L1rF83lOLgXrf7bjw","resolved":true,"title":"Vestaboard Display","body":"$5e","bodyJson":null,"introduction":"Split flap text animation for Framer","slug":"vestaboard-display","author":{"framerUserId":"8cdcb682-4417-430f-a5c2-f2a5c2971895","name":"Suman Debnath","slug":"uxwithsuman","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/164761/avatar-dIlArwvnqig0HZ6zEdLn1VBuJqKncN.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/Sr9L1rF83lOLgXrf7bjw/vestaboard-display-upW6ycIdNR8pr3PSpe67tcXfQVek2C","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-05-04T16:49:41.032Z","updatedAt":"2026-05-23T14:16:19.483Z","publishedAt":"2026-05-23T14:16:43.314Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://vestaboarddisplay.framer.website/","price":"10","paymentUrl":"https://uxwithsuman.lemonsqueezy.com/checkout/buy/88c9567e-ed14-45a7-a8eb-5e2dba3304bb","workshop":true,"categories":[{"id":"7fe42fdd-1b16-4f5a-93b8-009488614de8","name":"Text","slug":"text"}],"lastSaveId":"q21XHYtgG0MBnFEZ51j0","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-05-23T14:16:43.314Z","updatedAt":"2026-05-23T14:16:43.314Z","reported":false}}],"$L5f"]

Suggested for you