A WebGL shader background: a domain-warped liquid gradient (kind liquid), soft aurora bands (kind aurora) or folded satin with a moving sheen (kind silk) in three colours. Seekable: shader time follows the film, read from the second dial (--s) every frame, so a step track drives it and seeking shows exactly that frame (span = shader seconds per unit of --s); standalone it runs on its own clock, or holds still with still true or under reduced motion. The shader and its driver are fixed in the renderer and the config is numbers only, so nothing in the payload becomes code. Its own CSS gradient of the same colours is the fallback when WebGL is missing, the shader fails, the page prints or the host strips scripts. p fades it in. Preview: a spike to judge whether WebGL earns a place.
| Surface | Note |
|---|---|
| Prints the CSS gradient fallback; no shader | |
| google-chat | Inline CSS functions and custom properties are not supported |
| mcp-apps | Hosts that strip scripts show the CSS gradient fallback |
| android | Hosts that strip scripts show the CSS gradient fallback |
| Field | Type | Required |
|---|---|---|
| kind | "liquid" | "aurora" | "silk" | "dots" | "vortex" (optional, default "liquid"). dots: a halftone wave, a grid of dots whose size swells and fades in waves (color1 the ground, color2 and color3 the dots). vortex: dots arranged in a spiral tunnel that recedes to the centre and turns with time. silk: satin folds lit from their own surface, color1 the shadowed cloth, color2 the lit cloth, color3 the sheen. | optional |
| color1 | "#rrggbb". Deep colour. Default #0b0712. | optional |
| color2 | "#rrggbb". Default #ff3d81. | optional |
| color3 | "#rrggbb". Default #ffb347. | optional |
| scale | number. Pattern scale, 0.5-12. Default 2. | optional |
| span | number. Shader seconds per unit of --s, 0-600. Default 20. | optional |
| speed | number. Standalone speed, 0-5. Default 1. | optional |
| still | bool. Standalone, hold a still frame. Default false. | optional |
| ratio | "16:9" | "4:3" | "1:1" | "3:4" | "9:16" (optional, default "16:9") | optional |
| fill | bool. Fill the placed box height instead of using ratio. Default false. | optional |
| radius | integer. Corner px, 0-60. Default 0. | optional |
| label | string (optional, max 60). Accessible name. | optional |
{
"type": "motion_shader"
}{
"identifier": "urn:air:a2uicatalog.ai:atom:motion_shader",
"displayName": "Motion Shader",
"type": "application/vnd.a2ui.atom+json",
"url": "https://a2uicatalog.ai/atoms/motion_shader",
"capabilities": [
"web",
"google-meet-stage",
"google-apps-script-web",
"mcp-apps",
"android"
],
"description": "A WebGL shader background: a domain-warped liquid gradient (kind liquid), soft aurora bands (kind aurora) or folded satin with a moving sheen (kind silk) in three colours. Seekable: shader time follows the film, read from the second dial (--s) every frame, so a step track drives it and seeking shows exactly that frame (span = shader seconds per unit of --s); standalone it runs on its own clock, or holds still with still true or under reduced motion. The shader and its driver are fixed in the renderer and the config is numbers only, so nothing in the payload becomes code. Its own CSS gradient of the same colours is the fallback when WebGL is missing, the shader fails, the page prints or the host strips scripts. p fades it in. Preview: a spike to judge whether WebGL earns a place.",
"representativeQueries": [
"show a seekable WebGL liquid or aurora background with a CSS gradient fallback",
"a webgl shader background: a domain-warped liquid gradient (kind liquid), soft aurora bands (kind au",
"render a motion shader"
]
}The renderer is an open-source Google Apps Script web app. Deploy your own instance in 4 commands — you own the URL, no dependency on the demo endpoint.
git clone https://github.com/a2uicatalog/a2ui
cd a2ui/apps-script-surface/gas-wired-renderer
clasp push && clasp deploy