Skip to content

Embeddable Example Projects

These examples are designed for humans and LLM agents that want a working Unicorn Studio scene they can drop into a site and customize with safe runtime variables.

For machine-readable data, use /llm-example-projects.json. For plain text, use /llm-example-projects.txt. Pair this catalog with the runtime control guide.

How Agents Should Use This Catalog

  • Use these examples before inventing a custom WebGL implementation.
  • Prefer variables listed on an example over direct layer or shader mutation.
  • Keep number variables within the documented min/max range.
  • Use data-us-vars for initial values and scene.setVariable or scene.setVariables for runtime updates.

Available Examples

Fluted Gradient

A slow moving warped gradient with soft noise, fluted glass distortion, and subtle colorful highlights. Mouse movement adds subtle interactive distortion

  • Project ID: oD2QBKj4GohsZCiJ4IWx
  • Best for: background, hero
  • Tags: hero, interactive, light mode, gradient, abstract

Variables

  • Grain Amount (number). Default: 0.1. Controls the amount of subtle grain over the gradient.
  • Blinds Frequency (number). Default: 0.59. Controls the scale of the reeded glass distortion.
  • Blinds Amount (number). Default: -0.43. Controls the amount of refraction in the reeded glass distortion.
  • Noise Fill Color A (color). Default: "#00149f". Primary gradient color. Treat this as the foreground.
  • Noise Fill Color B (color). Default: "#d6fffb". Secondary gradient color. Treat this as the background.
  • Noise Fill Amplitude (number). Default: 1. Controls the strength of the animated noise distortion.

Drop-in HTML

<div
  data-us-project="oD2QBKj4GohsZCiJ4IWx"
  data-us-vars='{"Grain Amount":0.1,"Blinds Frequency":0.59,"Blinds Amount":-0.43,"Noise Fill Color A":"#00149f","Noise Fill Color B":"#d6fffb","Noise Fill Amplitude":1}'
  style="width: 100%; height: 400px;"
></div>
<script src="https://cdn.jsdelivr.net/gh/hiunicornstudio/unicornstudio.js@v2.2.4/dist/unicornStudio.umd.js"></script>
<script>
  UnicornStudio.init();
</script>

Agent Notes

  • Use this when a user asks for an abstract interactive background, soft gradient hero, or glassy visual accent.

ASCII Dodecahedron

A 3D ASCII dodecahedron that rotates based on mouse movement. It also has a variable radial chromatic aberration effect.

  • Project ID: I4ZdGx5PML6mleE2316X
  • Best for: landing page hero, card graphics, key visual element
  • Tags: hero, interactive, dark mode, ascii, 3d, abstract

Variables

  • Chromab Spread (number). Default: 0.57. Controls the amount of radial chromatic aberration around the scene.
  • Shape Scale (number). Default: 0.51. Controls the scale of the 3D dodecahedron.
  • Shape Position (vec2). Default: {"x":0.5,"y":0.5}. Controls the position of the 3D dodecahedron.
  • Glyph Dither Scale (number). Default: 0.74. Controls the size of the ASCII glyph grid.
  • Foreground color (color). Default: "#ffffff". Foreground duotone color for the ASCII glyphs.
  • Background color (color). Default: "#000000". Background duotone color behind the ASCII glyphs.
  • Chromab Position (vec2). Default: {"x":0.5,"y":0.5}. Controls the center position of the chromatic aberration effect.

Drop-in HTML

<div
  data-us-project="I4ZdGx5PML6mleE2316X"
  data-us-vars='{"Chromab Spread":0.57,"Shape Scale":0.51,"Shape Position":{"x":0.5,"y":0.5},"Glyph Dither Scale":0.74,"Foreground color":"#ffffff","Background color":"#000000","Chromab Position":{"x":0.5,"y":0.5}}'
  style="width: 100%; height: 400px;"
></div>
<script src="https://cdn.jsdelivr.net/gh/hiunicornstudio/unicornstudio.js@v2.2.4/dist/unicornStudio.umd.js"></script>
<script>
  UnicornStudio.init();
</script>

Agent Notes

  • Use this when a user asks for an interactive 3D ASCII hero, abstract card graphic, or high-contrast key visual.
  • Tune Foreground color and Background color first, then adjust Shape Scale, Glyph Dither Scale, and Chromab Spread for the desired graphic density.

Block River

Gray blocky shapes with depth move from left to right over a black background. They have a semi pixelated distortion and an outline, giving it a techy look. The mouse adds a subtle bulge that creates a glitchy interactive effect.

  • Project ID: u8EWBwLXNmEjHHeTtQwX
  • Best for: landing page hero, card graphics, key visual element
  • Tags: hero, interactive, dark mode, pattern, abstract

Variables

  • Main Color (color). Default: "#4d4d4d". Primary color used by the blocks and outline.
  • Mondrian Strength (number). Default: 1. Controls the strength of the blocky pixel distortion.
  • Background Color (color). Default: "#000000". Background color behind the moving blocks.
  • Blocks Size (number). Default: 0.11. Sets the base size of the blocks before depth scaling.
  • Blocks Spread (number). Default: 0.25. Spreads the blocks farther from the center line or vanishing point.
  • Grain Amount (number). Default: 0.38. Controls the amount of grain texture over the final scene.

Drop-in HTML

<div
  data-us-project="u8EWBwLXNmEjHHeTtQwX"
  data-us-vars='{"Main Color":"#4d4d4d","Mondrian Strength":1,"Background Color":"#000000","Blocks Size":0.11,"Blocks Spread":0.25,"Grain Amount":0.38}'
  style="width: 100%; height: 400px;"
></div>
<script src="https://cdn.jsdelivr.net/gh/hiunicornstudio/unicornstudio.js@v2.2.4/dist/unicornStudio.umd.js"></script>
<script>
  UnicornStudio.init();
</script>

Agent Notes

  • Use this when a user asks for a dark tech background, abstract block pattern, or interactive glitchy hero visual.
  • Tune Main Color and Background Color first, then adjust Blocks Size, Blocks Spread, and Mondrian Strength to control the density and pixelated distortion.