Full description
Turn customer quotes into the most alive section on your page. Bento Testimonials arranges reviews in an Apple-style asymmetric grid — mix large hero quotes with compact one-liners — and adds a spotlight that tracks the cursor across the wall. Move the mouse and the light follows; the card you land on lifts.
Pick the mood from a single dropdown:
Glow — a soft light drifts with the cursor. The lightest, most universal look.
Clarity Lens — the wall gently frosts and dims, and only the pool under the cursor stays sharp and bright. Reading becomes an act of pointing.
Reveal — everything outside the cursor dims into shadow, leaving a clean spotlit pool. A "flashlight in a dark room" feel.
Card Spotlight — a glow tracks inside whichever card you hover, fading in on that card only. Restrained, premium, very SaaS.
Every tile is fully editable from the Framer panel — column and row span, background, corner radius, padding, alignment, plus the quote, name, role, star rating, and an avatar (with an automatic initials fallback when no image is set). Quote text scales up automatically on bigger tiles, so the hierarchy always reads right.
It's responsive out of the box (separate column counts for desktop, tablet, and mobile with your own breakpoints), looks great on dark or light backgrounds, and respects reduced-motion preferences. Drop it in and it already looks finished — no setup required.
Key features
Four cursor-tracked effects in one dropdown: Glow, Clarity Lens, Reveal, Card Spotlight
Asymmetric bento layout with per-tile column and row spans
Cards lift on hover; adjustable lift, scale, and shadow
Quote size scales automatically with tile area for instant hierarchy
Star ratings, avatars, and a clean initials fallback when no image is provided
Responsive: independent desktop / tablet / mobile column counts and custom breakpoints
Full per-tile styling — background, radius, padding, text alignment
Themeable colors: text, muted text, accent, border, and light color
Looks polished with zero configuration; sensible defaults on every control
Respects prefers-reduced-motion
No external dependencies; smooth and lightweight
What's included
One Framer code component (BentoTestimonialWall) with all property controls
Seven pre-filled sample testimonials in a ready-made bento arrangement
Dark theme by default; every color is editable for light themes
How to use
Add the component to your page and resize the frame to taste.
Open Testimonials in the properties panel and edit the cards — set each tile's column/row span to build your bento layout, then fill in the quote, name, role, rating, and avatar.
Choose an Effect and tune Effect Size, Strength, and colors. Hit Preview to see the cursor light in action.
Tip: keep Card Spotlight's Strength around 0.5–0.7 and a smaller Effect Size so the glow stays tight and doesn't wash over text.
Best for
Landing pages, SaaS marketing sites, product pages, agency portfolios, app pages, and any "what people are saying" / social-proof section that needs to feel modern and interactive.
Compatibility & notes
Works on any background; designed for dark, fully editable for light.
Fully responsive with configurable breakpoints.
Reduced-motion friendly — hover motion is suppressed when the visitor prefers reduced motion.
The Clarity Lens effect uses a frosted blur; on very large walls a slightly smaller Effect Size keeps it smoothest.
Refund Policy
No refunds once the component has been added to a project — the code is yours to keep and modify. If the component doesn't work as described or has a bug that blocks your use case, reach out through support and I'll fix it or refund within 7 days of purchase.
Questions & Support
Found a bug or have a feature request? Email jaffersathick306@gmail.com with your project setup and what you're seeing. I respond within 48 hours on weekdays.
Jaffer Sathick
