Hover Alt Reveal: a Hero Where the Pointer Paints a Second Version of the Picture
Build a hero page where the pointer drags a liquid trail that shows another version of the same picture, such as a porcelain cat turning to black glass or a white sneaker covered in graffiti, and the trail fades back. SandBase generates the picture and its edit, the Skill lines them up by their outlines, and WebGL draws the trail with a noisy edge, a coloured rim and a slight bend. The hero is followed by a full landing page: chapter titles, an intro, a product console drawn in HTML, feature cards, specs, stats, a quote, a call to action and a footer, with a moving glow and a floating section pill.
Bring a subject and what its second version changes (or your own picture), your brand, copy, links and language. The Skill returns a full landing page (index.html), a section to paste into an existing site, both aligned pictures and colours taken from them.
How it works
With your go-ahead (about $0.16), SandBase generates the picture, then edits it with a prompt that keeps framing, pose, outline and lighting.
The builder lines the edit up with the original by its outlines, compresses both pictures and takes the page colours from them.
On the page the pointer paints a small mask; WebGL cuts it into a liquid edge, bends the second picture along it, tints the rim, and the mask fades.
Frequently asked questions
Does the page call a model?
No. The finished page is static files: HTML, one script, fonts and two JPEG pictures. Models are only used to make a new pair.
What does a new pair cost?
About $0.16 through SandBase (picture $0.075, edit $0.0825), or about $0.08 when you bring your own first picture.
What if the edit moves the subject?
The builder shifts the edit by up to 10 px at 320 px wide to line up the outlines and warns about larger shifts; regenerate the edit then.
Why do the links do nothing here?
The example runs in a sandboxed frame with its links disabled. In your own page they go wherever you set them in site.json.
Does it work without WebGL?
Yes, with a softer edge: the second picture is drawn through the mask with Canvas 2D.
Why is there no online generation?
Building a new scene needs a model key inside the sandbox, which the backend doesn’t support yet. Run the Skill with your own agent for now.