Voronoi Bento Layouts
Feature grids where cells are Voronoi cells - irregular organic polygons seeded from points - instead of the usual orthogonal bento rectangles. Same chunking discipline, different skeleton.
What It Is
A bento grid is rectangular cells on a shared grid, sized to chunk features into scannable modules. A Voronoi bento replaces the rectangular partition with a Voronoi tessellation: scatter N seed points across the canvas, compute the region nearest to each seed, and treat those organic cells as containers.
The result reads as a mosaic. The gaps between cells become thick curved gutters that feel sculptural rather than gridlike. Content inside each cell still follows normal type/spacing rules - it's only the container shape that's non-orthogonal.
Reference
Alex Prokhorov shipped two Framer prototypes on 2026-04-22 that crystallize the pattern. Source: X/@alexprokhorov, 2026-04-22.
The reviewed local artifact is the light variant: Slack/Visa/Uber logo wall on the left, analytics and sendout-table modules on the right, a text-entry card, keyboard shortcuts, and a dotted globe all clipped by thick rounded Voronoi gutters. That proves the trick is not decorative background geometry; normal product modules can remain rectangular inside the cells while the outer partition carries the premium shape language. Source: local artifact wiki/assets/x-bookmarks/2046591171351249114/image-01.jpg, reviewed 2026-07-03
Dark variant - cells read as tiles floating over a matte background; gaps are near-black with soft edges:
Light variant - gaps widen slightly, cells get subtle paper shadows; keyboard and globe motifs inside cells survive the non-rectangular crop:
Notice: the analytics chart, the table of sendouts, the globe, the logo wall, and the keyboard shortcuts all live inside rectangular sub-frames, but the outer container clips on curved Voronoi edges. That's the trick - content rectangles inside organic containers.
Why It Works
- Breaks the grid monotony without sacrificing scannability. The reader still parses module-by-module, but the composition looks hand-cut instead of Figma-auto-laid.
- Visual hierarchy through area, not alignment. Seed density controls which features dominate - cluster seeds tightly where you want many small cells, space them out for one big hero cell.
- Reads as premium / editorial. Organic partitions signal craftsmanship. The pattern belongs to the Editorial Technical and Premium SaaS archetypes in Aesthetic Systems.
- Motion hook. The seed points can animate - cells morph as seeds drift - giving a subtle idle loop that rectangular bentos can't match.
How to Build It
- Generate the tessellation with d3-delaunay (
Delaunay.from(points).voronoi([xmin, ymin, xmax, ymax])). ~15 seed points produces a comfortable 15-cell layout. Seed placement is the whole design - do it by hand, not randomly. - Inset each cell so gaps appear. Offset polygon edges inward by a fixed amount (use polygon-offset or a manual stroke expansion). Round the corners with a corner-radius pass.
- Clip content. Each cell becomes a
clip-path: polygon(...)or SVG<clipPath>. Place normal rectangular React components inside; the clip hides the overflow on curved edges. - Render gutters. Either paint the negative space directly (fill the canvas dark, place cells on top) or outline cells with a thick stroke that matches the bg.
- For Framer / CSS-only: bake the polygon coordinates at design time and paste into
clip-path. No runtime compute needed if the layout is static. - For animated versions: animate seed positions, recompute Voronoi per frame (it's cheap for ~20 seeds), tween the clip paths. GSAP or Motion handle the tweening; keep it slow and subtle.
When to Use It
- Landing-page feature grid where a standard bento would feel generic (fintech, AI, creative tools).
- "Everything we do" overview sections with 6-12 features that don't have a natural hero.
- Pricing, testimonial walls, or logo walls where you want the arrangement to carry some of the visual weight.
When Not to Use It
- Dense product UI. Voronoi edges break alignment between adjacent cells, so data tables, dashboards, or settings panels look broken inside.
- Dev docs, admin surfaces, or anywhere users scan in strict top-to-bottom order. The eye has no fixed grid to anchor to.
- Small mobile viewports. Below ~600px, the tessellation collapses to one-column and loses the point.
Variants Worth Exploring
- Hex-biased Voronoi: constrain seed points to a hex grid, then relax slightly. Gets honeycomb structure with organic variance.
- Weighted (power) Voronoi: give each seed a weight so cell area is controllable. Lets you guarantee a hero cell.
- Voronoi + gradient mesh: fill each cell with a radial gradient centered on its seed. Adjacent cells naturally harmonize.
- Delaunay triangulation instead: the dual of Voronoi. Sharper, more architectural, less organic.
Timeline
- 2026-07-03 | Deep-reviewed the local X artifact and added the video thumbnail as the durable visual reference: the light Framer demo preserves standard product modules inside irregular Voronoi cells. Source: local artifact review, 2026-07-03
- 2026-04-22 | Kevin shared two Alex Prokhorov Framer prototypes (dark and light variants of the same Voronoi bento) and flagged the pattern as one he loves. Created this page. Source: User, 2026-04-22; X/@alexprokhorov, 2026-04-22