Refracted Glass (Unicorn Studio)

A WebGL composition built in Unicorn Studio that renders a dreamy refracted glass distortion effect around a portrait. Loaded from an exported JSON source file via the UnicornStudio.js runtime.

unicorn studiowebglglassrefractionvisualinteractive

Setup — External Scripts

Unicorn Studio Runtime (add before </body>)

html

<script src="https://cdn.jsdelivr.net/gh/hiunicornstudio/unicornstudio.js@v2.0.0/dist/unicornStudio.umd.js"></script>

Code

HTML

html

<div class="refract__wrapper">
  <div
    class="refract__item"
    data-us-alttext="Dreamy portrait of a woman in motion"
    data-us-project-src="https://osmo.b-cdn.net/resource-media/osmo-unicorn-refracted-glass-v2.json"
    data-us-scale="1"
    data-us-dpi="1"
    data-us-lazyload="false"
    data-us-production="true"
  ></div>
</div>

CSS

css

.refract__wrapper {
  aspect-ratio: 1 / 1.25;
  border-radius: .75em;
  width: 100%;
  max-width: 32em;
  position: relative;
  overflow: hidden;
}

.refract__item {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
}

JavaScript

javascript

function initUnicornStudio() {
  UnicornStudio.init()
    .then((scenes) => {
      // Unicorn scene is ready, you could run other code here
    })
    .catch((err) => {
      console.error(err);
    });
}

// Initialize Unicorn Studio
document.addEventListener('DOMContentLoaded', function() {
  initUnicornStudio();
});

Attributes

Name	Type	Default	Description
[data-us-project-src]	string (URL)	—	Path to the exported Unicorn Studio .json source file. This defines the WebGL composition to load. Recommended over data-us-project (embed ID) for reliability and speed.
[data-us-project]	string	—	Alternative to data-us-project-src. Set this to your Unicorn Studio project embed ID instead of a JSON file URL.
[data-us-alttext]	string	—	Accessible alt text for the WebGL scene, used for screen readers.
[data-us-scale]	number	1	Scale multiplier for the rendered composition.
[data-us-dpi]	number	1	Device pixel ratio override. Set to 1 for performance or 2 for sharper rendering on high-DPI screens.
[data-us-lazyload]	"true" \| "false"	"false"	When true, the scene loads only when it enters the viewport. Set to false to load immediately on page load.
[data-us-production]	"true" \| "false"	"true"	Enables production mode. Set to true to disable editor overlays and enable optimizations.

Notes

•Requires the UnicornStudio.js UMD runtime loaded via CDN before the script runs.
•The .json source file must be publicly accessible — host it on a CDN like bunny.net or via Webflow assets.
•Setting data-us-dpi="1" improves performance on high-DPI displays at the cost of some sharpness. Use "2" for crisp rendering when performance allows.
•UnicornStudio.init() returns a Promise — you can chain .then() to run code after all scenes on the page are ready.

Guide

Remix link / Source file

This resource was made with Unicorn Studio, a visual WebGL editor. To get direct access to the source file and remix it in your own account, visit the Unicorn Studio remix link provided with this component.

HTML Setup

For a basic implementation, add [data-us-project-src] on a div with the attribute value pointing directly to the exported JSON file. Alternatively, use [data-us-project] with your project embed ID, but the JSON file approach is recommended for reliability.

Project Source

Use [data-us-project-src] to link directly to the Unicorn Studio .json source file. We recommend hosting your files on bunny.net for fast and cheap delivery. Webflow users can also upload the file directly:

1. Rename your exported JSON to [your-file-name].json.txt
2. Upload it to the Webflow Assets library
3. Copy the link from the menu
4. Paste it as the value for data-us-project-src

Changing the image

Use the remix link to open the project in your own Unicorn Studio account and swap out the image. Then click "Export" in the top right to download the updated JSON file. Host it and update the data-us-project-src attribute value.