Unicorn Studio — No-code WebGL Scenes (Embed/SDK) Skill

When to use

• Designers want custom WebGL visuals without hand-coding shaders/three.js
• You need “designed” effects layered with text/images/video, with built-in interactivity
• Site builders: Framer, Webflow, Wix, Figma Sites, etc.

What it is

• A scene editor (layers + effects + events) that exports:
  • Embed via Unicorn Studio SDK (small JS library)
  • Or JSON/code export for faster/self-hosted loading (plan-dependent)

Key embed patterns

• Load SDK (can be in

  <head>

  or footer depending on above-the-fold):
  • UMD from jsDelivr (versioned)
  • Call

    UnicornStudio.init()

    once DOM is ready
• Add attributes to a container element:

  • data-us-project="PROJECT_ID"

  • Optional performance/behavior params:

    • data-us-scale

      (render scale)

    • data-us-dpi

      (resolution multiplier)

    • data-us-fps

      (cap FPS)

    • data-us-lazyload="true"

    • data-us-production="true"

  • Optional JSON source:

    • data-us-project-src="https://.../scene.json.txt"

Events (authoring-side)

• Appear (entrance), Scroll (progress/velocity), Hover, Mousemove
• Use events for “feels interactive” without writing JS.

Common pitfalls

• Container has no defined dimensions → scene won’t display
  • Ensure the element with

    data-us-project

    has width/height.
• Too many scenes on one page → WebGL context limits + memory
  • Prefer <10 scenes/page; WebGL context max ~16.
• Performance on low-end devices
  • Use

    data-us-scale

    /

    data-us-dpi

    /

    data-us-fps

    ; reduce dynamic layers/effects.
• Site builder preview limitations
  • Many builders won’t render in edit mode; must preview/publish to see it.

Quick recipes

1) Basic embed container

<div style="width: 100%; height: 420px" data-us-project="YOUR_PROJECT_ID"></div>

2) Performance-first embed

<div
  style="width: 100%; height: 420px"
  data-us-project="YOUR_PROJECT_ID"
  data-us-lazyload="true"
  data-us-production="true"
  data-us-scale="0.75"
  data-us-dpi="1.25"
  data-us-fps="45"
></div>

What to ask the user

• Target platform: Webflow / Framer / coded site?
• Is the scene above-the-fold? (affects script placement and lazyload)
• Mobile support requirement + acceptable quality/FPS
• Number of scenes on the page and whether JSON export is available