A card with CSS perspective and a mousemove JavaScript handler that rotates the card along both axes in response to cursor position, creating a 3D parallax tilt effect. Text layers use translateZ to create depth separation. Requires a minimal inline script.
| Surface | Note |
|---|---|
| meet-stage | Renders as a flat dark card; mouse events may not propagate through Meet iframe |
| Renders as a flat static card | |
| googlechat | Renders as a plain text card |
| apps-script-web | mousemove events may behave differently when page is embedded in a Workspace sidebar |
| Field | Type | |
|---|---|---|
| title | string. Card heading. | optional |
| body | string. Card body text. | optional |
| badge | string. Small pill badge above the title. | optional |
| accent | string. Badge background colour. Default "#4f46e5". | optional |
| background | string. Card background. Default "#0f172a". | optional |
| depth | integer. Maximum tilt angle in degrees. Default 15. | optional |
{
"type": "parallax_card"
}{
"identifier": "urn:air:a2uicatalog.ai:atom:parallax_card",
"displayName": "Parallax Card",
"type": "application/vnd.a2ui.atom+json",
"url": "https://a2uicatalog.ai/atoms/parallax_card",
"capabilities": [
"web",
"gas-sidebar"
],
"description": "A card with CSS perspective and a mousemove JavaScript handler that rotates the card along both axes in response to cursor position, creating a 3D parallax tilt effect. Text layers use translateZ to create depth separation. Requires a minimal inline script.",
"representativeQueries": [
"show a 3D CSS perspective tilt card with mousemove parallax depth",
"a card with css perspective and a mousemove javascript handler that rotates the card along both axes",
"render a parallax card"
]
}The renderer is open source. 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 apps-script-surface/gas-schema-renderer
clasp push && clasp deploy