About Component
BentoSection is an interactive bento grid gallery for Framer. Tiles are arranged in a true bento layout with custom column and row spans, and each one flips in 3D on click to reveal extended text on the back. The grid auto-adjusts its column count as the container resizes, so the layout always stays clean on any screen size. Fully responsive, keyboard accessible and built for portfolios, agencies and product pages.
Features
3D flip-card reveal — click any tile to show its back face
True bento grid — custom column & row spans per tile
Auto-responsive grid — switches from 12 to 6 to 1 columns by width
Native Framer font picker for title & body text
Custom two-color gradient for the flipped back face
Smooth hover image zoom on every tile
Keyboard accessible — visible focus ring, Tab + Enter/Space support
Mobile-friendly — flip toggle always visible on narrow screens
Add up to 20 tiles with the built-in array control
Lazy-loaded images for fast page performance
Adjustable border radius, gap, row height and accent color Full property controls: fonts, colors, sizes, radius, gap and more Works out of the box — no setup needed
Use Cases
Portfolio & personal branding websites
Creative agency & studio pages
Travel, park & outdoor brand websites
Product showcase & feature grid sections
Photography & visual storytelling sites
SaaS marketing & feature highlight pages
Real estate & interior design portfolios
Restaurant & menu showcase pages
Event & conference websites Editorial & magazine-style layouts
Keywords
bento grid, bento grid framer, flip card gallery, flip card component, hover reveal card, interactive grid, image grid hover, card flip animation, responsive bento grid, framer grid component, gallery flip card, bento layout, grid gallery hover, click reveal card, framer bento section, image tile grid, animated grid gallery, portfolio grid, feature grid component, hover flip gallery, bento grid component, flip tile gallery, grid ui
About Component
BentoSection is an interactive bento grid gallery for Framer. Tiles are arranged in a true bento layout with custom column and row spans, and each one flips in 3D on click to reveal extended text on the back. The grid auto-adjusts its column count as the container resizes, so the layout always stays clean on any screen size. Fully responsive, keyboard accessible and built for portfolios, agencies and product pages.
Features
3D flip-card reveal — click any tile to show its back face
True bento grid — custom column & row spans per tile
Auto-responsive grid — switches from 12 to 6 to 1 columns by width
Native Framer font picker for title & body text
Custom two-color gradient for the flipped back face
Smooth hover image zoom on every tile
Keyboard accessible — visible focus ring, Tab + Enter/Space support
Mobile-friendly — flip toggle always visible on narrow screens
Add up to 20 tiles with the built-in array control
Lazy-loaded images for fast page performance
Adjustable border radius, gap, row height and accent color Full property controls: fonts, colors, sizes, radius, gap and more Works out of the box — no setup needed
Use Cases
Portfolio & personal branding websites
Creative agency & studio pages
Travel, park & outdoor brand websites
Product showcase & feature grid sections
Photography & visual storytelling sites
SaaS marketing & feature highlight pages
Real estate & interior design portfolios
Restaurant & menu showcase pages
Event & conference websites Editorial & magazine-style layouts
Keywords
bento grid, bento grid framer, flip card gallery, flip card component, hover reveal card, interactive grid, image grid hover, card flip animation, responsive bento grid, framer grid component, gallery flip card, bento layout, grid gallery hover, click reveal card, framer bento section, image tile grid, animated grid gallery, portfolio grid, feature grid component, hover flip gallery, bento grid component, flip tile gallery, grid ui
