mcpField
U
unicorn-studio

unicorn-studio

github.com/mengtoDesign & UI7.1k1.5k installsUpdated 3d ago
Repository

About unicorn-studio

unicorn-studio is a skill for designers and site builders working with WebGL scenes. It covers scene editing, SDK embeds, exports, and interactions that layer effects with text, images, or video.

Key features

  1. 01Edit scenes with layers and effects
  2. 02Embed WebGL scenes using the SDK
  3. 03Export JSON or code
  4. 04Configure appear, scroll, and hover events
  5. 05Tune rendering with performance parameters

Use cases

  1. 01Embed WebGL visuals in a website
  2. 02Add scroll or pointer interactions to scenes
  3. 03Adjust scenes for lower-performance devices

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/mengto/skills --skill unicorn-studio

After installing, type/unicorn-studioin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

REFERENCES.md
demo/
index.html
PROMPT.md

Details

From the project README

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

Comments

Markdown supported