Embed Unicorn Studio WebGL scenes with configurable performance attributes.
npx skills add https://github.com/MengTo/Skills --skill unicorn-studio-mengto
Please help me install this Agent Skill. Skill: unicorn-studio Source: https://github.com/MengTo/Skills/tree/main/agent-skills/web-design/unicorn-studio Command: npx skills add https://github.com/MengTo/Skills --skill unicorn-studio-mengto
This Skill helps you reliably embed Unicorn Studio interactive WebGL scenes into a website while keeping performance predictable and avoiding common sizing and deployment issues.
data-us-project container attributes to render scenes.data-us-scale, data-us-dpi, data-us-fps, and data-us-lazyload to reduce strain on low-end devices.Use the unicorn-studio skill to generate an embed snippet for your chosen container element and set performance attributes appropriate for whether the scene is above-the-fold.
High-intent search queries and answers about installing and using this skill.
To embed WebGL scenes, initialize the Unicorn Studio SDK and set the `data-us-project` attribute on your target container element to render the interactive visual. Configure optional scale, DPI, FPS, and lazyloading attributes to manage performance across devices.
Optimize WebGL embed performance by applying `data-us-scale`, `data-us-dpi`, `data-us-fps`, and `data-us-lazyload` attributes to your scene container. These settings reduce rendering strain by controlling resolution limits, frame rates, and load timing for lower-end hardware.
You can add interactivity to WebGL scenes without custom JavaScript by using authoring-side events like appear, scroll, hover, and mousemove. These events create interactive visual feedback directly through the embed configuration and UI layering.
Embedding multiple WebGL scenes has browser WebGL context limits and builder preview limitations. Plan your page layout carefully to avoid exceeding maximum active context counts, which can cause scenes to fail rendering or display blank containers.
Configure above-the-fold WebGL scenes by setting the `data-us-project` attribute and disabling `data-us-lazyload` to ensure immediate rendering. Adjust `data-us-fps` and `data-us-scale` to balance immediate visual impact with stable page performance.
adamhjkOverlay HTML elements onto PixiJS scenes with synchronized CSS transforms.
ittooittConvert textual descriptions into flowcharts, mind maps, and hierarchical diagrams.
dzyamikOrganize Phaser 4 game objects with Groups, Containers, and Layers.
afoveaConfigure Three.js scenes, cameras, and 3D coordinate systems for WebGL rendering.