{ "version": 1, "updatedAt": "2026-06-09", "description": "Curated Unicorn Studio projects that LLM agents can suggest, embed, and customize with authored runtime variables.", "source": { "manifest": "src/data/llmExampleProjects.json", "generatedBy": "npm run examples:build" }, "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/", "runtimeGuide": "https://www.unicorn.studio/unicornstudio-llms.txt" }, "sdk": { "version": "2.2.4", "url": "https://cdn.jsdelivr.net/gh/hiunicornstudio/unicornstudio.js@v2.2.4/dist/unicornStudio.umd.js" }, "agentGuidance": [ "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": [ { "id": "fluted-gradient", "name": "Fluted Gradient", "remixUrl": "https://unicorn.studio/remix/fm3SGqj3RIArJn9tbgCK", "description": "A slow moving warped gradient with soft noise, fluted glass distortion, and subtle colorful highlights. Mouse movement adds subtle interactive distortion", "bestFor": [ "background", "hero" ], "projectId": "oD2QBKj4GohsZCiJ4IWx", "tags": [ "hero", "interactive", "light mode", "gradient", "abstract" ], "variables": [ { "name": "Grain Amount", "type": "number", "default": 0.1, "description": "Controls the amount of subtle grain over the gradient." }, { "name": "Blinds Frequency", "type": "number", "default": 0.59, "description": "Controls the scale of the reeded glass distortion." }, { "name": "Blinds Amount", "type": "number", "default": -0.43, "description": "Controls the amount of refraction in the reeded glass distortion." }, { "name": "Noise Fill Color A", "type": "color", "default": "#00149f", "description": "Primary gradient color. Treat this as the foreground." }, { "name": "Noise Fill Color B", "type": "color", "default": "#d6fffb", "description": "Secondary gradient color. Treat this as the background." }, { "name": "Noise Fill Amplitude", "type": "number", "default": 1, "description": "Controls the strength of the animated noise distortion." } ], "agentNotes": [ "Use this when a user asks for an abstract interactive background, soft gradient hero, or glassy visual accent." ], "defaultVariables": { "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 }, "urls": { "docs": "https://www.unicorn.studio/docs/example-projects/#fluted-gradient", "embed": "https://www.unicorn.studio/embed/oD2QBKj4GohsZCiJ4IWx", "runtimeGuide": "https://www.unicorn.studio/unicornstudio-llms.txt" }, "snippets": { "html": "\n\n", "dynamicScene": "const scene = await UnicornStudio.addScene({\n element: document.querySelector('#unicorn-example'),\n projectId: 'oD2QBKj4GohsZCiJ4IWx',\n initialVariables: {\n \"Grain Amount\": 0.1,\n \"Blinds Frequency\": 0.59,\n \"Blinds Amount\": -0.43,\n \"Noise Fill Color A\": \"#00149f\",\n \"Noise Fill Color B\": \"#d6fffb\",\n \"Noise Fill Amplitude\": 1\n }\n});" } }, { "id": "ascii-dodecahedron", "name": "ASCII Dodecahedron", "remixUrl": "https://unicorn.studio/remix/DPpkbfLR9zaNwghYqyyw", "description": "A 3D ASCII dodecahedron that rotates based on mouse movement. It also has a variable radial chromatic aberration effect.", "bestFor": [ "landing page hero", "card graphics", "key visual element" ], "projectId": "I4ZdGx5PML6mleE2316X", "tags": [ "hero", "interactive", "dark mode", "ascii", "3d", "abstract" ], "variables": [ { "name": "Chromab Spread", "type": "number", "default": 0.57, "description": "Controls the amount of radial chromatic aberration around the scene." }, { "name": "Shape Scale", "type": "number", "default": 0.51, "description": "Controls the scale of the 3D dodecahedron." }, { "name": "Shape Position", "type": "vec2", "default": { "x": 0.5, "y": 0.5 }, "description": "Controls the position of the 3D dodecahedron." }, { "name": "Glyph Dither Scale", "type": "number", "default": 0.74, "description": "Controls the size of the ASCII glyph grid." }, { "name": "Foreground color", "type": "color", "default": "#ffffff", "description": "Foreground duotone color for the ASCII glyphs." }, { "name": "Background color", "type": "color", "default": "#000000", "description": "Background duotone color behind the ASCII glyphs." }, { "name": "Chromab Position", "type": "vec2", "default": { "x": 0.5, "y": 0.5 }, "description": "Controls the center position of the chromatic aberration effect." } ], "agentNotes": [ "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." ], "defaultVariables": { "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 } }, "urls": { "docs": "https://www.unicorn.studio/docs/example-projects/#ascii-dodecahedron", "embed": "https://www.unicorn.studio/embed/I4ZdGx5PML6mleE2316X", "runtimeGuide": "https://www.unicorn.studio/unicornstudio-llms.txt" }, "snippets": { "html": "\n\n", "dynamicScene": "const scene = await UnicornStudio.addScene({\n element: document.querySelector('#unicorn-example'),\n projectId: 'I4ZdGx5PML6mleE2316X',\n initialVariables: {\n \"Chromab Spread\": 0.57,\n \"Shape Scale\": 0.51,\n \"Shape Position\": {\n \"x\": 0.5,\n \"y\": 0.5\n },\n \"Glyph Dither Scale\": 0.74,\n \"Foreground color\": \"#ffffff\",\n \"Background color\": \"#000000\",\n \"Chromab Position\": {\n \"x\": 0.5,\n \"y\": 0.5\n }\n }\n});" } }, { "id": "block-river", "name": "Block River", "remixUrl": "https://unicorn.studio/remix/fm3SGqj3RIArJn9tbgCK", "description": "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.", "bestFor": [ "landing page hero", "card graphics", "key visual element" ], "projectId": "u8EWBwLXNmEjHHeTtQwX", "tags": [ "hero", "interactive", "dark mode", "pattern", "abstract" ], "variables": [ { "name": "Main Color", "type": "color", "default": "#4d4d4d", "description": "Primary color used by the blocks and outline." }, { "name": "Mondrian Strength", "type": "number", "default": 1, "description": "Controls the strength of the blocky pixel distortion." }, { "name": "Background Color", "type": "color", "default": "#000000", "description": "Background color behind the moving blocks." }, { "name": "Blocks Size", "type": "number", "default": 0.11, "description": "Sets the base size of the blocks before depth scaling." }, { "name": "Blocks Spread", "type": "number", "default": 0.25, "description": "Spreads the blocks farther from the center line or vanishing point." }, { "name": "Grain Amount", "type": "number", "default": 0.38, "description": "Controls the amount of grain texture over the final scene." } ], "agentNotes": [ "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." ], "defaultVariables": { "Main Color": "#4d4d4d", "Mondrian Strength": 1, "Background Color": "#000000", "Blocks Size": 0.11, "Blocks Spread": 0.25, "Grain Amount": 0.38 }, "urls": { "docs": "https://www.unicorn.studio/docs/example-projects/#block-river", "embed": "https://www.unicorn.studio/embed/u8EWBwLXNmEjHHeTtQwX", "runtimeGuide": "https://www.unicorn.studio/unicornstudio-llms.txt" }, "snippets": { "html": "\n\n", "dynamicScene": "const scene = await UnicornStudio.addScene({\n element: document.querySelector('#unicorn-example'),\n projectId: 'u8EWBwLXNmEjHHeTtQwX',\n initialVariables: {\n \"Main Color\": \"#4d4d4d\",\n \"Mondrian Strength\": 1,\n \"Background Color\": \"#000000\",\n \"Blocks Size\": 0.11,\n \"Blocks Spread\": 0.25,\n \"Grain Amount\": 0.38\n }\n});" } } ] }