Wraps content that drifts toward the cursor when it enters the activation radius, then springs back with a cubic-bezier overshoot when the cursor leaves.
| Field | Type | |
|---|---|---|
| label | string. Text label for the default pill style. | optional |
| content | string. Raw HTML to use instead of the default pill. | optional |
| accent | string. Pill background colour. Default | optional |
| radius | integer. Activation distance px. Default 120. | optional |
| strength | number. Pull factor 0–1. Default 0.4. | optional |
{
"type": "magnetic_element"
}{
"identifier": "urn:air:a2uicatalog.ai:atom:magnetic_element",
"displayName": "Magnetic Element",
"type": "application/vnd.a2ui.atom+json",
"url": "https://a2uicatalog.ai/atoms/magnetic_element",
"capabilities": [
"apps-script-web",
"web",
"meet-stage"
],
"description": "Wraps content that drifts toward the cursor when it enters the activation radius, then springs back with a cubic-bezier overshoot when the cursor leaves.",
"representativeQueries": [
"show a content that drifts toward cursor and springs back with overshoot",
"wraps content that drifts toward the cursor when it enters the activation radius, then springs back",
"render a magnetic element"
]
}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