Refracted Glass (Unicorn Studio)
Documentation
Webflow
Code
Setup: External Scripts
External Scripts in Webflow
Make sure to always put the External Scripts before the Javascript step of the resource.
In this video you learn where to put these in your Webflow project? Or how to include a paid GSAP Club plugin in your project?
HTML
<script src="https://cdn.jsdelivr.net/gh/hiunicornstudio/unicornstudio.js@v1.4.34/dist/unicornStudio.umd.js"></script>Step 1: Copy structure to Webflow
Copy structure to Webflow
In the video below we described how you can copy + paste the structure of this resource to your Webflow project.
Copy to Webflow
Webflow structure is not required for this resource.
Step 1: Add 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.json"
data-us-scale="1"
data-us-dpi="1"
data-us-lazyload="false"
></div>
</div>HTML structure is not required for this resource.
Step 2: Add 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%;
}Step 2: Add custom Javascript
Custom Javascript in Webflow
In this video, Ilja gives you some guidance about using JavaScript in Webflow:
Step 2: Add Javascript
Step 3: Add Javascript
Javascript
function initUnicornStudio(){
UnicornStudio.init()
.then((scenes) => {
// Unicorn scene is ready, you could run other code here
})
.catch((err) => {
console.error(err);
});
}
document.addEventListener('DOMContentLoaded', function() {
initUnicornStudio();
});Step 3: Add custom CSS
Step 2: Add custom CSS
Custom CSS in Webflow
Curious about where to put custom CSS in Webflow? Ilja explains it in the below video:
CSS
Implementation
Remix link / Source file
This resource was made with Unicorn Studio, a visual WebGL editor. To get direct access to the source file, follow this link here.
HTML Setup
For a basic implementation, simply add [data-us-project-src] on a div, the attribute value should point directly to the JSON file you can export from Unicorn (see next step too). It's also possible instead to use [data-us-project] where the attribute value is your 'project embed ID', but we recommend exporting the JSON file and using that as a direct source.
Project Source
Use [data-us-project-src] to link directly to the Unicorn Studio .json source file, defining which WebGL composition to load into the element. We recommend hosting your files on bunny.net, it's super fast and extremely cheap. If you're a Webflow user you have the following possibility too:
- Rename your code JSON to
[your-file-name].json.txt - Upload it to the assets library in Webflow directly
- Use the menu to copy link and paste it as the value for
data-us-project-src
Changing the image
Follow step 1 to get the remix link, and tweak the project in your own Unicorn Studio account. Then, click 'export' in the top right, and get the JSON file. Then, check the previous step.
More documentation
We recommend checking out the official documentation from Unicorn Studio directly to learn more about the tool itself, and all its best practices!
Resource details
Last updated
November 12, 2025
Category
Gallery & Images
Need help?
Join Slack
Original source
Creator Credits
We always strive to credit creators as accurately as possible. While similar concepts might appear online, we aim to provide proper and respectful attribution.