5c: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"] 5d:T87b,

Testimonial Bento arranges customer quotes into an asymmetric bento grid and reveals them one card at a time as visitors scroll. Three card styles and per-card placement let you compose a wall that looks arranged, not generated.

Key Features

Three card styles: Light with a blueprint grid, Dark, and Accent Sequential scroll reveal in reading order, with editable stagger, duration, offset, blur, trigger point, and once-or-always replay
Three layouts from one component: 3-column bento, horizontal row groups, single stack Per-card column and size weight, so your composition survives every breakpoint
Container-based responsiveness, with both breakpoints editable
Three-level avatar fallback: upload, URL, built-in artwork, then an initials placeholder Retina avatars at 128/192/256px, roughly 8KB each instead of 90KB Optional baseline rule with editable width, thickness, offset, color, and end caps 49 controls plus 8 per testimonial, including 5 fonts and 14 colors
Respects reduced motion, and shows the finished layout on the canvas 7 pre-loaded testimonials, works on Framer Canvas and published sites

Where to Use

Landing page social proof, SaaS trust sections, agency client walls, case-study roundups, course and community testimonials.

Best For

Teams with a handful of strong quotes rather than dozens, designers who want an editorial arrangement instead of an even grid, and Framer users who need full visual control without code.

Why This Component

Unlike a uniform testimonial grid or an auto-scrolling marquee, Testimonial Bento treats placement as a design decision. You choose which column each quote sits in and how much room it claims, and that composition survives every breakpoint: on tablet the columns lie down as rows instead of being reshuffled into arbitrary halves. The reveal follows reading order, so the wall assembles itself in front of the visitor.

Built for Framer. Drop it onto your canvas, customize it, and publish.

59:[["$","$L5c",null,{"post":{"id":"01a08168-bab5-76ad-8e19-02b95060b79c","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"092b6e6a-5b7e-4e19-9a5a-4352c205c584","name":"ONYRI Strategy","slug":"onyri-strategy","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1412066/avatar-kHGXusqZB1syGd3pNBioephGEmuqkO.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"rsPB2Y9s1a9dgtBDlXV3","resolved":true,"title":"Testimonial Grid Pro","body":"$5d","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Testimonial Bento arranges customer quotes into an asymmetric bento grid and reveals them one card at a time as visitors scroll. Three card styles and per-card placement let you compose a wall that looks arranged, not generated."}]},{"type":"customHeading","content":[{"type":"text","text":"Key Features","marks":[{"type":"bold"}]}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Three card styles: Light with a blueprint grid, Dark, and Accent Sequential scroll reveal in reading order, with editable stagger, duration, offset, blur, trigger point, and once-or-always replay"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Three layouts from one component: 3-column bento, horizontal row groups, single stack Per-card column and size weight, so your composition survives every breakpoint "}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Container-based responsiveness, with both breakpoints editable "}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Three-level avatar fallback: upload, URL, built-in artwork, then an initials placeholder Retina avatars at 128/192/256px, roughly 8KB each instead of 90KB Optional baseline rule with editable width, thickness, offset, color, and end caps 49 controls plus 8 per testimonial, including 5 fonts and 14 colors "}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Respects reduced motion, and shows the finished layout on the canvas 7 pre-loaded testimonials, works on Framer Canvas and published sites"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Where to Use","marks":[{"type":"bold"}]}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Landing page social proof, SaaS trust sections, agency client walls, case-study roundups, course and community testimonials."}]},{"type":"customHeading","content":[{"type":"text","text":"Best For","marks":[{"type":"bold"}]}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Teams with a handful of strong quotes rather than dozens, designers who want an editorial arrangement instead of an even grid, and Framer users who need full visual control without code."}]},{"type":"customHeading","content":[{"type":"text","text":"Why This Component","marks":[{"type":"bold"}]}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Unlike a uniform testimonial grid or an auto-scrolling marquee, Testimonial Bento treats placement as a design decision. You choose which column each quote sits in and how much room it claims, and that composition survives every breakpoint: on tablet the columns lie down as rows instead of being reshuffled into arbitrary halves. The reveal follows reading order, so the wall assembles itself in front of the visitor."}]},{"type":"paragraph","content":[{"type":"text","text":"Built for Framer. Drop it onto your canvas, customize it, and publish."}]}]},"introduction":"Testimonials that reveal on scrol","slug":"testimonial-grid-pro","author":{"framerUserId":"092b6e6a-5b7e-4e19-9a5a-4352c205c584","name":"ONYRI Strategy","slug":"onyri-strategy","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1412066/avatar-kHGXusqZB1syGd3pNBioephGEmuqkO.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/092b6e6a-5b7e-4e19-9a5a-4352c205c584/01a0804e-06f4-74ec-948e-5b7ad2771404.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-08T14:25:18.969Z","updatedAt":"2026-09-09T09:38:35.117Z","publishedAt":"2026-09-08T14:25:18.966Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://hy.chujiqiqi.com/m/Macos-xzl7JE.js@hZPDCufvhjM2iKjciKIg","previewUrl":"https://testimonial-pento-pro.framer.website/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"5c50a4d9-4405-49ca-8956-4909a204480d","name":"Sections","slug":"sections"}],"lastSaveId":"hZPDCufvhjM2iKjciKIg","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":1,"liked":false},"comments":{"count":2},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-08T14:25:19.541Z","updatedAt":"2026-09-08T14:25:19.541Z","reported":false}}],"$L5e"]

Suggested for you