All effects

Press into it with the pointer.

Soft Surface

A soft material that gives under the pointer. Add a heading, a button or a product rail.

Buy Soft Surface· $29

If the demo runs in your browser, the effect will too.

Or get every effect in the library for $99
Made with
WebGL 2
Size
14.5 KB gzipped, no dependencies
Works in
HTML, Visual builder, Claude skill
Without support
There is no fallback: without WebGL 2 the section stays empty. Give it a background colour and that shows through.

Installing it

  1. Download

    After paying you get a ZIP. Unzip it; the folder is the whole effect.

  2. Tune it, if you like

    Open builder.html in your browser, adjust it by eye, and keep the settings it gives you.

  3. Put it in your project

    Drop the folder into your project and tell your AI assistant “Install this Unbland effect in my project.” No assistant? Paste the HTML version into Elementor’s HTML widget, or add one script tag to your page.

What you can change

surface.color
The material's colour. Everything else is lit from it.
surface.press · surface.radius
How deep the pointer sinks in, and how wide.
heading · subheading · button
Optional copy and a call to action on top of the surface.
products
An optional rail of product cards drifting across it.

Every option is listed in the package, in plain words.

Requirements and testing

WebGL 2 — every current desktop and mobile browser.

Tested in Chrome and Safari on macOS and in Safari on an iPhone 13 Pro. Firefox, Edge and Android are expected to work but were not tested live.

Questions

Can I try settings before installing?

Yes. The package includes a builder you open in your browser; switch on what you need and copy the result.

How do I know it will work on my site?

The demo on this page is the effect itself, running in your browser. If it runs here, it will run on your site in the same browser.

Can I use it on a client's website?

Yes. A single purchase covers up to three projects, and a client's site counts as one of them. The client keeps theirs for good.

Something isn't working after I bought it. What now?

Write to us first at hello@unbland.dev — say which browser and device, with a link or a screenshot. Most problems are solved in one reply. If the effect itself can't be made to work for you, you get your money back.

What do I get after paying?

A download link straight away, with a ZIP containing the effect, its instructions for AI assistants, and a plain-language readme.

More effects