Features prompt
With a planA 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.
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.
Loam Liquid Features 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.
Loam is a features section that feels alive without being noisy. Large organic blobs in lime, mint and green breathe slowly behind the content, morphing between hand-matched shapes with SMIL path animation and drifting a few percent in CSS. Each one is lit like wet liquid: a radial gradient, soft diffuse shading and a specular highlight from one shared SVG filter, with a few satellite droplets beside it and a small tomato drop for accent. Four cards in a staggered grid each hold an icon cut from a gradient with an SVG clip path, plus a small cluster of orbiting glossy beads drawn through a blur and alpha-threshold filter, the classic gooey metaball trick. Hover or focus a card and the beads slide together and fuse into a single drop while the gradient flows through the icon. It is all CSS and SVG filters apart from one tiny effect that starts the morph, honours reduced motion, and works in light and dark themes with a deep green, lime and cream palette plus one tomato (dark: coral) accent. The headline sits beside a pill call to action and a whole, never cropped, puddle of liquid. It suits consumer apps, wellness, food, education and any brand whose features should feel friendly, tactile and a little bit delightful rather than corporate.
Pairs well with the Sprout, Bloom and Mosaic Looks in the Dapols website studio. See website examples.
Put the circles in a group with a filter that first blurs them (feGaussianBlur) and then pushes the alpha channel hard with feColorMatrix (multiply by 20, subtract 9). Circles that come close blur into each other and the threshold turns the overlap into one smooth shape. To make it glossy, blur that shape again as a height map and add feDiffuseLighting and feSpecularLighting on it, as the liquid and bead filters here do. Moving the circles with CSS transforms merges them.
Browsers can only interpolate a path d attribute when every keyframe has the same commands in the same order. Each blob here is a move command plus eight cubic curves and a close, so the morph is smooth. A frame with a different count makes the shape jump.
Yes. The art is hidden from screen readers, the real headings and links carry the content, focus triggers the same effect as hover, and with reduced motion enabled the blobs stay still and nothing transitions. Contrast of all text is 6:1 or better; the specular highlight sits on the blob's upper left, away from the text.
FeaturesWith a plan
A 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.
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.
