Unicorn Studio

Name: Unicorn Studio
Author: nota-america

ASecurity

Use when embedding and customizing Unicorn Studio interactive animations on the web (embed, responsive sizing, performance, layering with UI, fallbacks).

63 stars

0 votes

0 copies

1 views

Added 9/2/2026

ai-agentsperformance

Security Analysis

A100/100

Scanned 9/2/2026

Install to Claude Code

$npx -y skills add nota-america/forgecat-agent-profiles --skill unicorn-studio --agent claude-code

Installs into .claude/skills of the current project.

Are you the author of Unicorn Studio?

Add the live security badge to your README — it updates automatically with every re-scan.

[![Security: A — Skills Directory](https://www.skillsdirectory.com/api/skills/nota-america-unicorn-studio-4d2cbe25/badge)](https://www.skillsdirectory.com/skills/nota-america-unicorn-studio-4d2cbe25)

More formats (shields.io, HTML) on the badges page.

Download Zip

Files

SKILL.md

---
name: unicorn-studio
description: 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

Attribution

nota-america

View source

Unicorn Studio

Security Analysis

Attribution

Comments (0)