Build a bento grid dashboard for a fictional home battery brand, Sorrel Home Energy, on a near-black page (#0b0e11). Small amber (#ffb547) label, then the heading "Your roof made 31 kWh today." with "Here is where it went." in grey (#8d9aa5). Use 4 columns, 150px rows and 12px gaps; tiles are #12171c with a 20px radius. Battery spans 2 by 2 with an SVG ring filling to 82% in mint (#5fe3b5) and "Lasts until 7.40 am at tonight's pace". Solar today spans 2 with 31.4 kWh and 24 amber hourly bars that grow in with a 28ms stagger. Then Sold 9.2 kWh in sky blue (#6cb8ff), House used 18.6 kWh in coral (#ff7a66), a wide Storm mode tile whose switch fills the ring to 97%, Car 64% and Cheap rate 7.5p. One pointer position lights the whole grid: every tile draws its 1px border from a 240px radial gradient in its own colour through a masked pseudo element, plus a faint 300px inner glow, so the light crosses from tile to tile. The tile under the light tilts up to 6 degrees, a canvas lets glowing sparks drift up in its colour and clicks send a ripple. After 2.5s idle the light wanders slowly by itself. Phones get 2 columns that fit 390 by 504 and follow the finger. Reduced motion parks the light, no sparks.
Written by Informeek Studio to recreate this design. Prompts are not deterministic: running it again gives a similar result, not an identical one.
Use it in three steps
- Copy the prompt with the button above.
- Paste it into your tool, such as v0, Lovable, Bolt or Claude.
- Make it yours by swapping the tiles for your own product numbers and giving each one its own colour.
About this bento grid
A bento grid works when the tile sizes tell you what matters. Here the battery gets the biggest box, solar gets a wide one with an hourly chart, and the smaller numbers sit in single tiles around them. Everything is real dashboard content, so the layout reads as a product rather than a mood board.
The effect is one light shared by the whole grid. Each tile paints its own one pixel border from a radial gradient centred on the pointer, so as you move, the edge of the next tile starts to glow before you reach it. The tile underneath tilts a few degrees and lets small sparks rise in its own colour. When you stop, the light drifts around on its own, which keeps the grid alive on phones too.
Why the prompt works
- It sizes every tile, so the hierarchy survives the build.
- It explains the masked border trick, a radial gradient seen only through a one pixel ring.
- It gives each tile a colour, which the border, glow and sparks all reuse.
- It plans a two column phone layout that fits a small screen without scrolling.
Where to use it
Product dashboards, feature overviews, smart home and fintech apps. Keep the tile count between five and eight and let one tile clearly lead.
The prompt is shared under CC BY 4.0. Reuse it freely, including commercially, with a credit linking back to this page.
