How do I install the Unicorn Studio skill?

Run npx skillmds@latest add nota-america/unicorn-studio in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Unicorn Studio safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Unicorn Studio?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Unicorn Studio free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Unicorn Studio?

nota-america (@nota-america) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Unicorn Studio by nota-america — Agent Skill

Name: Unicorn Studio
Author: nota-america

File contents

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

---name: unicorn-studiodescription: Use when embedding and customizing Unicorn Studio interactive animations on the web (embed, responsive sizing, performance, layering with UI, fallbacks).---# 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```html<div style="width: 100%; height: 420px" data-us-project="YOUR_PROJECT_ID"></div>```### 2) Performance-first embed```html<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

Frequently asked questions

Unicorn Studio