Features prompt
With a planA premium six-tile bento features section in warm pastels, deep ink and tomato. Each tile carries an illustrated mini interface that bleeds off its edge: a progress card, a fan of version cards, switches, tags, a bar chart and a heat strip.
A picture of the design. The live, interactive preview, the full prompt and the code unlock with a Dapols plan. See the plans.
Want this on your own site? Pick it for your plan.
Everything on this page except these four tabs is free to read. The tabs unlock with a paid Dapols plan.
Pastel Bento Features Grid is included with every Dapols plan
Free visitors get the free prompts. Any Dapols plan, the one-time setup or the monthly subscription, unlocks every prompt.
Unlocking this prompt gives you:
Already have a paid plan?
Not on a plan yet?
The preview, description and FAQ on this page are free. A plan unlocks this prompt and every other one in the library.
See the plansWant to try one now? Browse the free prompts.
A bento grid breaks the habit of three identical feature cards in a row. This section lays six dimensional tiles on a twelve-column grid in two staggered rows, so the eye has a place to start and somewhere to go, and the whole thing fits a single desktop screen. Each tile has soft light, a white sheen, a hairline edge and an illustrated mini interface that bleeds off the bottom, the way real product screenshots do: a progress card with a gradient ring and task list, a fan of version cards over a glowing ink tile, a panel of real switches, a cloud of tags, a gradient bar chart with a tooltip and a glowing heat strip on a tomato tile. Grain and a warm page glow add depth in both themes. Nothing needs a library, only plain CSS and a little inline SVG, and almost nothing loops: the ink tile glow breathes and the eyebrow dot pings, while everything else waits for hover or focus. It suits product tours, app landing pages, studios and any site that wants to show several strengths at once. On phones the tiles stack in one column, on tablets they pair up, and reduced-motion visitors see the finished state.
Pairs well with the Bloom, Mosaic and Tempo Looks in the Dapols website studio. See website examples.
No. All six illustrations are plain CSS and a little inline SVG, and the hover effects are CSS transitions. The only React state in the component code is three controlled checkboxes in the switch tile, and the plain HTML version needs no script at all.
On screens narrower than 768 pixels the six tiles stack in a single column. From 768 to 1023 pixels they sit in two equal columns. From 1024 pixels the full twelve-column layout appears, in two staggered rows of different widths that fit one desktop screen.
Yes. Change the six tile gradients and the tomato accent in the design tokens, and the prompt will rebuild the grid around them. To drop dark mode, ask the tool to keep only the light page colors and remove the dark variants.
FeaturesWith a plan
A playful, premium features section: glossy liquid SVG blobs with lit gradients and specular highlights behind four cards, gooey beads that merge on hover or focus, and glossy icons that reveal a flowing gradient through a clip mask.
TestimonialsWith a plan
A layered testimonial wall of three tilted card rows drifting in opposite directions, with faded edges, glass cards, star rows, avatar rings, bold feature cards and a pause switch. Pure CSS, a warm amber and terracotta palette, and a calm static grid for visitors who prefer reduced motion.
3D and Three.jsWith a plan
A cinematic full-viewport hero over 52,000 GPU particles that breathe between a ribbon and a sphere, with depth of field, bokeh, additive glow, a hot core thread, film grain and a lens reticle. Three.js, dark and light.
Need a whole site, not one section? Pick the designs you like, choose your colors and fonts, and Dapols builds the website for you as part of your plan. Answer a few questions about your business to get started.
