Encrypted Reveal

Text that appears to scramble through random alphanumeric characters before locking into the final readable string. Implemented entirely in CSS using a steps() @keyframes animation cycling through server-side pre-generated scrambled frames — no JavaScript required.

Surfaces

webgoogle-meet-stagegoogle-apps-script-webmcp-apps

Degraded on

Surface	Note
pdf	Renders as a static panel showing the final text only
google-chat	CSS animation not supported; renders as plain text immediately

Live preview

Fields

Field	Type
text	string. The final text to reveal.	required
size	string. Font size e.g. "32px". Default "28px".	optional
weight	string. Font weight. Default "700".	optional
color	string. Text colour. Default "#f1f5f9".	optional
scramble_color	string. Colour of scramble characters. Default "#38bdf8".	optional
speed	"slow" \| "normal" \| "fast" (optional, default "normal")	optional
delay	string. CSS delay before reveal starts. Default "0s".	optional
frames	integer. Number of scramble frames before lock. Default 8.	optional
background	string. Container background. Default transparent.	optional

Example payload

{
  "type": "encrypted_reveal",
  "text": "A concise description of the content."
}

ARD catalog entry

{
  "identifier": "urn:air:a2uicatalog.ai:atom:encrypted_reveal",
  "displayName": "Encrypted Reveal",
  "type": "application/vnd.a2ui.atom+json",
  "url": "https://a2uicatalog.ai/atoms/encrypted_reveal",
  "capabilities": [
    "web",
    "google-meet-stage",
    "google-apps-script-web",
    "mcp-apps"
  ],
  "description": "Text that appears to scramble through random alphanumeric characters before locking into the final readable string. Implemented entirely in CSS using a steps() @keyframes animation cycling through server-side pre-generated scrambled frames \u2014 no JavaScript required.",
  "representativeQueries": [
    "show a CSS steps() scramble-to-reveal text animation",
    "text that appears to scramble through random alphanumeric characters before locking into the final r",
    "render a encrypted reveal"
  ]
}

← Full ARD catalog

Deploy your own Google Apps Script renderer

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

Full deploy guide →