# Unicorn Studio Embeddable Example Projects

Generated from src/data/llmExampleProjects.json. Do not edit this file directly.

Curated Unicorn Studio projects that LLM agents can suggest, embed, and customize with authored runtime variables.

Use this catalog when suggesting a Unicorn Studio embed that can be dropped into a website and customized with authored runtime variables.

## Endpoints

- JSON: https://www.unicorn.studio/llm-example-projects.json
- Text: https://www.unicorn.studio/llm-example-projects.txt
- Docs: https://www.unicorn.studio/docs/example-projects/
- Runtime guide: https://www.unicorn.studio/unicornstudio-llms.txt

## Agent Rules

- 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.

## Examples

### Fluted Gradient

- ID: fluted-gradient
- Project ID: oD2QBKj4GohsZCiJ4IWx
- Embed URL: https://www.unicorn.studio/embed/oD2QBKj4GohsZCiJ4IWx
- Docs: https://www.unicorn.studio/docs/example-projects/#fluted-gradient
- Best for: background, hero
- Tags: hero, interactive, light mode, gradient, abstract

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

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:

```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>
```

### ASCII Dodecahedron

- ID: ascii-dodecahedron
- Project ID: I4ZdGx5PML6mleE2316X
- Embed URL: https://www.unicorn.studio/embed/I4ZdGx5PML6mleE2316X
- Docs: https://www.unicorn.studio/docs/example-projects/#ascii-dodecahedron
- Best for: landing page hero, card graphics, key visual element
- Tags: hero, interactive, dark mode, ascii, 3d, abstract

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

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:

```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>
```

### Block River

- ID: block-river
- Project ID: u8EWBwLXNmEjHHeTtQwX
- Embed URL: https://www.unicorn.studio/embed/u8EWBwLXNmEjHHeTtQwX
- Docs: https://www.unicorn.studio/docs/example-projects/#block-river
- Best for: landing page hero, card graphics, key visual element
- Tags: hero, interactive, dark mode, pattern, abstract

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.

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:

```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>
```