Intro Presets Scene Create Export Pricing Showcase Guides MCP Docs Changelog

Embed anywhere.

Refract exports a single iframe. It works on any platform that supports custom HTML. No plugins, no SDKs.

1

Build your effect in Refract

Choose a preset, customize it, add interactions, then click Build. Your effect is now live with an embed URL.

2

Copy the embed code

Click the Embed button in the export panel. Copy the iframe snippet.

HTML 
<iframe
  src="https://refract.build/embed/YOUR_PROJECT_ID"
  style="width:100%;height:100%;border:none;position:absolute;inset:0;"
  allow="autoplay"
  loading="lazy"
></iframe>
3

Add an Embed element in Webflow

In the Webflow Designer, drag an Embed component (under Components → More) into your section. Paste the iframe code. Set the parent div to position: relative and give it a height (e.g., 100vh for a full-screen hero).

Tip: Set the embed’s parent to overflow: hidden and border-radius if you want rounded corners on the effect.

4

Publish

That’s it. The effect renders inside the iframe with zero dependencies on your Webflow site. No custom code settings, no external scripts, no build steps.

1

Build your effect in Refract

Choose a preset, customize it, add interactions, then click Build.

2

Copy the embed URL

Copy just the embed URL from the export panel:

URL 
https://refract.build/embed/YOUR_PROJECT_ID
3

Add an Embed component in Framer

In the Framer canvas, insert an Embed component (search “Embed” in the components panel). Paste your URL. Resize the frame to fill your section.

Tip: For a full-bleed hero, set the Embed to 100% width and 100vh height, then position it absolutely behind your content.

4

Publish

Publish your Framer site. The Refract effect loads inside a standard iframe. No plugin required.

1

Build your effect in Refract

Choose a preset, customize it, add interactions, then click Build.

2

Add the iframe to your component

Drop the iframe into any React component. No package install needed.

JSX 
// app/page.tsx or any component

export default function Hero() {
  return (
    <section style={{ position: 'relative', height: '100vh' }}>
      <iframe
        src="https://refract.build/embed/YOUR_PROJECT_ID"
        style={{
          position: 'absolute',
          inset: 0,
          width: '100%',
          height: '100%',
          border: 'none',
        }}
        allow="autoplay"
        loading="lazy"
      />
      {/* Your content goes here, on top */}
    </section>
  );
}
3

Or use the SDK for programmatic control

For dynamic scenes (swap shaders based on state, control uniforms), install the SDK:

Terminal 
npm install @refract/sdk
JSX 
import { RefractScene } from '@refract/sdk';

// Load and render a scene
const scene = await RefractScene.fromURL(
  'https://refract.build/api/scene/YOUR_PROJECT_ID.json',
  { container: '#shader-bg', autoplay: true }
);

// Control it programmatically
scene.setUniform(0, 'u_color', [1.0, 0.2, 0.5]);

No framework lock-in. The iframe approach works with zero dependencies. The SDK is optional. Use it only when you need runtime control over the scene.

1

Build your effect in Refract

Choose a preset, customize it, add interactions, then click Build.

2

Paste the iframe

Add the iframe anywhere in your HTML. No build tools, no npm, no JavaScript files.

HTML 
<div style="position:relative;width:100%;height:100vh;">
  <iframe
    src="https://refract.build/embed/YOUR_PROJECT_ID"
    style="position:absolute;inset:0;width:100%;height:100%;border:none;"
    allow="autoplay"
    loading="lazy"
  ></iframe>
</div>

Works everywhere. WordPress, Squarespace, Cargo, Hugo, Jekyll, static HTML. Anything that lets you add custom HTML.

Ready to build?

Open Refract