unicorn-studio
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-projecthas width/height.
- Ensure the element with
- 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.
- Use
- 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
More from mengto/skills
unsplash-asset-images
Use when you need to pick high-quality Unsplash images for product/design assets (avatars, headshots, portraits, large website backgrounds, and abstract wallpapers) and output real Unsplash URLs plus practical instructions for producing the right resolutions and aspect ratios (1:1, 4:5, 3:4, 16:9, 9:16).
65landing-page
Use when designing or rewriting a high-converting landing page (single-offer page) for SaaS/apps/services. Covers structure, layout patterns, conversion strategies, copywriting, SEO/AEO, and common pitfalls.
31gsap
Use when you need to add or debug professional web animations with GSAP (timelines, ScrollTrigger, stagger, transforms) in HTML/CSS/JS/React. Includes patterns for smooth motion, performance, and common pitfalls.
28globe-gl
Use when implementing globe.gl (Globe.GL) for 3D globe data visualization with WebGL/ThreeJS, including setup, data layers (points, arcs, polygons, labels), and integration patterns in plain HTML or React.
27progressive-blur
Create a layered CSS progressive blur (top or bottom) using multiple backdrop-filter masks for depth and softness. Use when asked for “progressive blur”, “gradient blur overlay”, or stepped blur masks that fade from an edge of the viewport.
27pricing-page
Use when designing or rewriting a high-converting SaaS pricing page (structure, plan design, copywriting, SEO/AEO, FAQs, layout patterns, experiments). Includes checklists, templates, and common pitfalls.
25