Refract — A Studio Built on Liquid Glass
Every panel bends what is behind it, and a draggable lens warps the giant headline as you move it.
A web studio site drawn entirely in code where every glass panel refracts what is behind it through SVG distortion maps: a draggable liquid lens bends the giant headline, and a playground of sliders and swatches re-renders refraction, frost and the light behind the glass across the page. It is one self-contained HTML file — inline CSS and JavaScript, no framework and no build step — with every visual drawn in code. Under the hood: Vanilla JS, per-element SVG displacement-map lenses in backdrop-filter (true liquid-glass refraction), moving CSS gradient light field, draggable magnifying glass lens, live refraction playground. What a visitor can do: drag the liquid lens across the giant headline to bend the letters, slide refraction and frost to re-render every glass surface, switch the light behind the glass between four palettes, hover work cards to float their glass orbs. Best for: Web & interaction design studios, Design engineers & creative developers, UI kit and design-system sellers, Product launch microsites.
Paste the prompt intoClaude CodeCursorAntigravityWindsurfLovableBoltv0
What's in the source
5 files — one self-contained page that opens in a browser, with the prompt that made it.
refract-agency/ ├─ PROMPT.md ├─ index.html └─ … 3 more
How to run this
Nothing to install and nothing to configure. Works in any modern browser on Windows, macOS and Linux.
- Built with
- Single HTML file
- Requires
- A modern browser
- 1. Unzip the download.
- 2. Double-click index.html. It opens in your browser and runs. To serve it instead (some browsers want a server), run
npx serve .in the folder and openhttp://localhost:3000.
Note — Opens by double-clicking index.html: the CSS and JavaScript are inline and the hero art sits next to it in assets/. Its typefaces load from Google Fonts, with system fallbacks if they cannot. Upload the folder to any static host and it is live.
Questions about Refract
Who is Refract for?
Refract is for agencies and studios, and for the designers, developers and agencies who build their sites. It's a foundation rather than a site for one business: ask your AI to make it about yours and it rewrites the copy, colours and images around the same build.
What is Refract built with?
Refract is built with HTML/CSS/JS. The source is a single HTML file: open it in a browser and it runs, with no build step. The prompt is written for coding agents such as Claude Code, Cursor and Antigravity.
Can I use Refract for a client project?
Yes. Every purchase includes a commercial licence: use it in your own projects and in work you deliver to clients, including paid client work, change and rebrand it, and publish the result with no credit needed. What you can't do is resell, share or republish the prompt or the source files themselves.
Should I buy the prompt or the source?
The prompt is the written brief that built the design: paste it into a coding agent such as Claude Code, Cursor or Antigravity and it builds the site on your computer, which you then refine. The source is the finished project itself, ready to run exactly as the preview shows. The source always includes the prompt.
Will the prompt give me exactly the preview?
Not exactly, and that's expected. A prompt is a starting point: AI output varies between tools and between runs, so plan to refine spacing, timing and copy. The source pack is the preview itself, finished and running.
Can I get a refund?
Single designs are final once delivered, unless something is wrong on our side: a broken or empty download, a pack that isn't what its page describes, or a double charge. Then email support@brandmotion.in with your receipt and we fix it or refund it. The full terms are on the refunds page.
More like this
Browse the store →
PremiumBasalt Studio — A Brand & Motion Studio
A screen-wide wordmark parts to reveal an obsidian sculpture, and every project row floats its own graded preview beside the cursor.
PremiumBrightside — A Friendly Growth Agency
Stickers on the team photo you can grab and throw, and a growth chart that redraws for every client.
PremiumCairn — A Digital Product Studio
A glass card on a dusky coast above a glowing planet rim, and a process that stacks a cairn one stone at a time.
