androidx.a2ui library renders A2UI natively in Jetpack Compose. Add the atomic-catalog library and an Android app can show every atom listed here: Basic Catalog components draw in Compose, and the rest draw with this catalog's own renderer inside the app. Apps without the library still get something useful: the catalog's emitter reads which catalogs an app supports and sends a plain Basic Catalog version instead of a surface the app can't draw.
val catalog = A2uiAtomicCatalog.catalog(context)
androidx.a2ui 1.0.0-alpha01.
547 catalog atoms also render on this surface
series link or transparency note at article top
In Series label, I covered the background. This article picks up from there.
prose paragraph block
This is a body paragraph. It supports bold, italic, and inline code via lightweight markdown.
H2 section title
H3 subsection title
pull quote or blockquote with attribution
The vocabulary IS the discovery layer.
syntax-highlighted fenced code block
{
"type": "stat_card",
"value": "1B+",
"label": "daily executions"
}left-to-right step flow diagram
schema.yaml ──► generate.py ──► public/ ──► Cloudflare Edge
unordered list with optional bold label per item
horizontal visual section break
responsive 16:9 YouTube embed
single image with optional caption
two images side by side with captions
D2 or SVG architecture diagram
live GitHub repo card with stars forks and language
styled GitHub repo link list
article closing paragraph with hashtags
A concise description of the content.
coloured tip info warning or danger highlight box
numbered step-by-step instruction sequence
data table with header row on mobile
tabbed content panels
Content one.Content two.label and value pairs in a compact grid
side-by-side code or content before and after comparison approach
const html = buildPage(data);const html = render([{"type":"body","text":"Hello"}]);API endpoint method parameters and response docs
scrollable image gallery grid
two videos side by side
horizontally scrollable card carousel
chronological event timeline
A2UI v1
First atoms defined.
467 atoms
Full schema published.
ARD catalog
Live on a2uicatalog.ai.
code block with numbered callout bubbles on specific lines
{ "type": "stat_card", // [1] "value": "1B+", // [2] "label": "daily executions"}drag-to-reorder list emitting {id, order} on drop
clickable image grid — data-row-json tiles, reuses data_table's onRowClick contract; badge + active show per-tile state
3

full-viewport one-at-a-time photo lightbox — opens from a compact trigger card, carousel-style CSS paging, per-slide vote button reusing photo_grid''s click contract, live badge/voter updates patched in place by candidate id so voting never resets position or swaps photos
Nothing to show yet.
iframe whose src is wired to another node's value, so picking updates it with no repaint
one quantity as actual + estimate, both labelled, neither omittable
single KPI value with label delta and accent colour indicator
labelled horizontal progress bar with percentage
row of coloured label badges
inline SVG trend line chart general trends.
grid heatmap coloured by intensity value are represented as colors in a matrix.
7x24 grid of glowing activity bubbles representing hourly commits
curved multi-column gradient flow diagram for financial or pipeline streams
triangular cohort retention grid with continuous color-scale rendering
| Cohort | Week 1 | Week 2 | Week 3 | Week 4 |
|---|---|---|---|---|
| Jan 2025 | 100.0% | 72.0% | 58.0% | 45.0% |
| Feb 2025 | 80.0% | 65.0% | 50.0% | 38.0% |
CSS ring chart with centre value and percentage its proportion or progress.
big number metric with directional change indicator or percentage
glassmorphic structured checklist with priority and assignee badges
meeting sentiment analyzer with index arc and timeline chart
compact inline value with mini trend bar the direction of a
navigation breadcrumb trail structure.
page number controls
CSS animated vertical step sequence with checkmark draw and active pulse
horizontal tab navigation bar
in-page anchor navigation links document or to external URLs.
collapsible FAQ question and answer list the question is clicked.
definition term with explanation
numbered footnote reference at the bottom of a section or page.
testimonial quote with avatar and attribution
"The vocabulary IS the discovery layer."
AAuthor Name
large display number pulled from prose for emphasis descriptive label.
single collapsible section with toggle by clicking its header, using only CSS.
hover tooltip on a trigger element over a specified trigger element, using only CSS.
rich card revealed when hovering a trigger
expandable content panel with header toggle visible and hidden states by clicking a control, using only CSS.
pure-CSS modal dialog triggered by checkbox
inline audio player with controls
styled link to an audio file
embedded PDF preview panel PDF.
styled link to a downloadable document
clickable video thumbnail with play button and a link to the video source.
video with title description and metadata to the video source.
server-side unified diff view with green additions and red removals
two code blocks side by side without diff highlighting diff highlighting.
device-framed screenshot with optional caption
A descriptive caption
image with styled caption below
full-width status alert strip
CSS slide-in/out fixed-position notification toast
animated placeholder skeleton while content loads
zero-data empty state with icon and call to action
loading spinner indicator
coloured status pill badge
inline success error or warning message for validation feedback or hints.
star rating display
CSS stroke-dashoffset animated SVG progress arc with centre percentage
prominent card prompting a required user action or approval
features versus plans comparison matrix
single pricing plan card with features list
side-by-side pricing plan comparison different subscription plans.
two-column pros and cons comparison
two items compared spec by spec and values side-by-side.
product specifications in a clean table
multi-item attribute comparison grid
| Feature | Product A | Product B |
|---|---|---|
| Core feature | ||
| Advanced analytics | ||
| API access |
head-to-head two-option versus card "VS" separator.
multiple items rated across dimensions scores.
feature capability tick list per tier capability using checkmarks
CSS toggle switch input
truncated text with read more expand toggle more content.
card that flips on hover to reveal back content
Front content
Back content
image with clickable annotated hotspot overlays
pure-CSS dropdown navigation menu
interactive star rating input
mutually exclusive option selector strip as a single control.
image with click-to-zoom lightbox
styled checkbox group input
CSS-only slide-in panel drawer
customer testimonial with photo name and quote
“The catalog cut our build time in half.”
read-only star rating with score and count
stacked user avatar group with overflow count or community.


list of contributors with avatar and role
grid of customer or partner logos
social proof strip with stats and logos
press or media mention with logo and quote
expert quote with credentials and photo
"The vocabulary IS the discovery layer."
highlighted customer review excerpt by a star rating.
"Review text"
embedded social media post or feed or Instagram post.
display terminal commands and code output in a simulated console window
present hierarchical directory structures and files for software project navigation
organize multiple programming language snippets inside an interactive tab container
document REST API endpoints with HTTP methods, headers, and payloads
list configuration environment variables with descriptions and default values
highlight prerequisite knowledge and system requirements before
display visual keyboard key combinations for application shortcuts and hotkeys
reference table detailing API parameters, data types, and default values
software release or dependency version number tag
warning banner for deprecated features or unsupported APIs
highlight experimental or unstable feature notice callout
copyable single-line terminal command execution string
$ npm install a2uibutton to copy specified text or code to clipboard
scrollable monospace server or compiler log output block
expandable visual explorer for nested JSON data
highlighted summary of main conclusions and critical takeaways
condensed introductory panel with article overview
A concise description of the content.
checklist of educational goals and competencies gained post-reading
timeline entry documenting product modifications per release
grouped product release documentation by change category
curated references for extending topic research
downloadable project assets and attached resource links
off-axis container for peripheral notes or caveats
label technical complexity level of blog content
highlight dangerous pitfalls or critical destructive actions
interactive task tracking checklist for article milestones
inline hover tooltips for complex technical term definitions
estimated reading duration badge for article content
milestone progress indicator across multi-step tutorial
social media buttons for sharing article to external networks
email subscription form for recurring reader updates
profile block displaying content creator biographical details
Short author biography goes here.
grid of recommended alternative post reading cards
navigation index for multi-part article series parts
emoji reaction counters collecting reader sentiment feedback
LinkedIn post image preview — conviction_card, stat_card, or carousel_slide mode
Preview — export as image for LinkedIn
headline where the agent sets each word's emphasis 1-5; heavy words land bigger
claim set in type whose weight, size and tracking encode the stated confidence
claim plus numbered, sourced evidence lines printed as a till receipt; newest line prints in
struck-through old belief, new belief lands beneath; optional what-changed-it line
computed modular type scale as a specimen sheet with CSS custom properties
:root {
--step-6: 3.815rem; /* 61.04px */
--step-5: 3.052rem; /* 48.83px */
--step-4: 2.441rem; /* 39.06px */
--step-3: 1.953rem; /* 31.25px */
--step-2: 1.563rem; /* 25.00px */
--step-1: 1.250rem; /* 20.00px */
--step-0: 1.000rem; /* 16.00px */
--step-n1: 0.800rem; /* 12.80px */
--step-n2: 0.640rem; /* 10.24px */
}Flesch score, reading time and sentence stats computed from prose, longest sentence highlighted
paragraph with a dropped, raised, boxed or ornamental initial letter
A concise description of the content.
WCAG contrast ratios for colour pairs with AA/AAA badges and a nearest-passing fix
prominent blockquote optimised for social media sharing
"A concise description of the content."
🐦 Tweet this
call to action driving social media community expansion
direct profile subscription button for social platforms
track and display article reading progress completion status
navigate article sections using structured heading directory links
display prominent introductory headline and banner media
quickly return viewport to top of page document
navigate interconnected parts inside multi-part blog series
embed interactive CodePen workspace development environments
embed dynamic StackBlitz live IDE code sandboxes
embed version-controlled GitHub Gist source code snippets
embed live public Twitter status updates and media
embed interactive Google Slides presentation slide decks
render lightweight high-performance vector Lottie animations
embed collaborative live Figma design file prototype previews
grid of named color swatches with hex values
embed interactive live demo sandbox iframe
side-by-side performance benchmark comparison bars
static accessible bar chart (group, stack, relative, overlay; vertical or horizontal; log axis)
interactive Chart.js line chart for trend data
sortable data table with column headers
| Name | Value | Status |
|---|---|---|
| Example | 42 | Active |
| Another | 17 | Pending |
metric card comparing current vs previous period
compact grid of multiple labeled sparklines
grid of service status indicators with color states
30-day uptime timeline with per-day status blocks
keyboard-driven command palette with shortcut hints
single search result card with title snippet URL
article metadata bar with author date read time
numbered footnote list at section or article end
unread count badge overlaid on icon element
nested expandable tree list with collapsible children
poll with question options and vote count bars
inline abbreviation with hover tooltip full form
copy-to-clipboard button with inline code and feedback
pipeline conversion funnel with step tapering and leak markers
radial SLA gauge with glowing pointer and large metric value
coursed block/brick wall elevation with bond-pattern stagger and render-style options
stacked area chart of series layers over an ordered axis (zero baseline, optional 100% / streamgraph offsets)
coordinate scatter plot with regression trend line
visual summary board of call sentiments moods and active themes
SVG GitHub-style contribution grid and activity tracker
labelled form with fields and submit button
single labelled input field
labelled dropdown select with options
radio button group for single-option selection
checkbox group for multi-option selection
group of labelled toggle switches
numeric range slider input
date or date-range picker input
modal dialog overlay with title and content
This will redeploy a2uicatalog-full to production.
clickable follow-up suggestion chips
card-style option selector with icon, title, description per card
thumbs or star rating feedback collection widget
named resource rows with avatar, status badge, and meta
LLM prompt with highlighted {variable} slots and copy button
AI model spec card with context window, pricing, and capability badges
user prompt and AI response as chat bubbles
keyboard shortcut cheat-sheet grid with key combos and labels
star rating histogram with percentage bars per star level
quarter-based product roadmap with status-tagged milestones
persistent notification inbox list with unread indicators
inline icon-plus-text alert embedded in content flow
horizontal wrap of neutral content chip labels
CSS radio card group for variant or option picking
inline markdown string (bold, italic, code, links) rendered to HTML
multi-slice pie or donut SVG chart with legend
lightweight tinted inline tip or note block no icon
numbered RAG source card with title excerpt and URL
side-by-side multi-model output comparison table
labelled probability bar with colour-coded confidence fill
context window token usage meter with capacity warning colours
product card with image, price, status badge, and tags
e-commerce order card with status badge and line item list
inventory table with SKU, stock levels, and low-stock row highlight
Jira issue card with type icon, status lozenge, priority, and assignee
kanban sprint board with named columns and compact issue cards
Atlassian-semantic status pill with defined appearance variants
enterprise data grid with typed columns, row selection, and
recursive hierarchical tree with expand/collapse per node
calendar month heatmap with date-value density colouring
searchable filterable dropdown — shadcn/Headless UI pattern
icon + title + description feature grid — Tailwind UI pattern
multi-level horizontal nav with submenu panels — Radix pattern
chip-style multi-value select input — shadcn pattern
N-box one-time password digit input — shadcn OTP pattern
labeled horizontal progress bars list — percent fill, per-bar color
icon + big number + label stat strip — more visual than metric_row
colored background wrapper — tint/solid/dark, renders child atom blocks
weighted tag cloud — variable size by weight, wrap layout
horizontal step progress — numbered circles, connecting lines, current step highlighted
two-panel split — distinct bg per side, each side renders atom blocks
light gradient hero — badge, large title, subtitle, CTA button
icon-circle list — emoji/icon per item, label + text, color per item
highlight box — gradient/solid/outline style, icon, title, text
split card — colored header with icon/title, white body renders atom blocks
horizontal metric strip — value, label, prefix/suffix, trend up/down
decorative numbered list — large background numbers, circular badges, or bordered stage cards
app-style page header — title, subtitle, icon, accent, tag badge
back navigation — url, nav_slug, or history.back(); ghost/outline/text style
section divider — optional centered label, solid/dashed/dots style
chip/tag row — label, color, url, active state; wrap or scroll layout
list with status chips that filter its rows — items with title, detail, status; All plus one chip per status, with counts
multi-column layout — 2–6 cols, each column holds atom blocks
Public — every stable atom, no auth required.
Full — stable and preview atoms, gated behind Cloudflare Access.
person card — name, role, photo, bio, tags, email, linkedin
time-slotted agenda — slots with time, title, speaker, location, type
risk list — critical/high/medium/low with title, description, mitigation
action items table — action, owner, due date, status
asymmetric bento-box feature tile grid — MagicUI/shadcn pattern
full-width CTA banner with headline and buttons — Tailwind UI pattern
CSS-only animated counter that counts up to target values
Auto-detecting YouTube/Loom/Slides/Vimeo embed with skeleton
Real-time comparative bars for votes, counts, or percentages
Multi-option vote buttons in pill, neon, or default style
CSS confetti/trophy/pulse celebration overlay triggered by name
Dark shimmer skeleton loader in card/list/media/chat variants
infinite CSS-animated horizontal marquee of text or logo items
CSS typewriter animation that reveals text character by character
card with CSS rotating gradient animated border
animated aurora borealis gradient blob background, CSS-only
luminous noise-field streams converging on a glowing focus, hero background
agent-supplied words assemble from particles; pointer scatters them
agent-supplied words made of flowing light, streams masked to the glyphs
agent-supplied headline whose letters breathe and lean toward the pointer
the a2ui orbit-mark logo with flow-field streams captured into its orbits
animated halftone dot grid riding a wave, works on light backgrounds
packets streaming from an agent node into a surface node that unfolds cards on arrival
radial light streaks converging on (or radiating from) a vanishing point, hero background
soft colour blobs drifting on a noise field, pointer-reactive, hero background
live flyover of noise-shaped ridgelines scrolling toward the viewer, hero background
tilted orbit rings, each a tier of labelled satellites around a centre node
timeline-driven stage that choreographs child atoms with tokenised easing, a camera, captions and a scrubber
staggered entrance for a list of blocks, with tokenised easing
Example content.
reference card of the named easing curves, duration tokens and entrance effects
scene container for a motion_timeline: children placed in percent of the layer, animated as one
Example content.
kinetic type that reveals by line, word or character as progress advances
bar, rule, disc, sweeping ring or soft glow that draws with progress
big counting number with an optional caption
rounded call-to-action chip with an accent word that stays on screen across scenes
card whose items tick off in turn as progress advances
tiles that fly out onto an ellipse and orbit a centre as progress advances
code window that types itself in as progress advances
the A2UI Catalog logo mark that draws itself and sends an electron round its orbit
search box, filter chips and a grid of cards with live atom previews that types and rises in
strokes that draw themselves in turn, like an agent sketching
callout line with a start dot, arrowhead and label that draws itself
reveals child atoms through a growing blob, circle, diagonal wipe, rounded rectangle, bars, diamond, halftone, conic sweep or slats
Example content.
envelope that opens to reveal (or seals in) a letter of atoms, with address and stamp
sunburst or speed-line background that fans in and turns
viewfinder HUD with corner brackets, counting timecode and progress bar
name and role lower third that draws and slides in
film grain, vignette, light leaks and glass sheen over the frame
architecture diagram that draws itself, with payloads moving along its edges
muted video whose frame follows the film clock
seekable WebGL liquid or aurora background with a CSS gradient fallback
CSS repeating dot or grid pattern panel background
button with CSS background-position shimmer sweep animation
CSS-fanned stack of 2–4 cards with rotation and opacity tiers
CSS-animated diagonal falling meteor streaks on a dark panel
CSS blur-to-focus fade-in container reveal
CSS box-shadow state-signalling button with disabled/ready/fired glow
CSS stroke-dashoffset animated SVG beam between two labelled nodes
CSS steps() scramble-to-reveal text animation
CSS steps() vertical word carousel in an overflow-hidden inline container
CSS concentric ring pulse animation for attention signalling
CSS character-by-character typewriter reveal with optional cursor
Slot-machine digit-column flip to target number
Three-dot bouncing chat typing indicator bubble
Flip-clock countdown timer display (static tiles, data-driven ticking)
Animated gradient-fill heading text via CSS background-clip
IntersectionObserver scroll-triggered fade+slide reveal
CSS steps() left-to-right character scramble-to-reveal
SVG stroke-dashoffset self-drawing path animation
composite multi-shape SVG canvas, newest shape draws itself in
3D CSS perspective tilt card with mousemove parallax depth
MCQ or true/false question with CSS-only correct/wrong feedback
Which option do you prefer?
Select an option to reveal the answer.
cloze-test sentence with inline inputs and correct/wrong highlight on submit
Hello, {{name}}!
click-to-pair matching exercise with green lock and red mismatch flash
Match each term to its definition.
show/hide hint disclosure using HTML details/summary — no JS
unlockable achievement badge with locked/unlocked state and optional date
end-of-exercise score card with correct/total, percentage, grade, and CTA
animated XP/points progress bar with level label and level-up flash
prev/next lesson navigation with module context and optional completion checkbox
course-level progress card with per-module bars and aggregate completion ring
highlighted text passage with optional hover margin annotation note
live list of Drive folder files
live read-only Google Sheet range preview
list of recent Gmail messages matching query
inbox is:unread, max 5 results. Live data requires server-side auth.list of upcoming calendar events
personalised greeting with active user email
button to trigger server-side Apps Script function
today's calendar events from the user's default calendar
aggregate stats from a sheet range displayed as stat badges
unread count badges for Gmail labels
user avatar, display name, email and domain — live on GAS, static fields elsewhere
Drive storage quota progress bar — live on GAS, or pass used_gb/total_gb for static
inline form that appends a row to a Google Sheet on submit
task checklist — live via Tasks API on GAS, items[] array on other surfaces
ambient glowing orb that lerp-follows the cursor with screen blend
chain of fading dots following the cursor with worm physics
click anywhere to burst coloured gravity particles from click point
dark overlay with cursor-following circular cutout — torch effect
content that drifts toward cursor and springs back with overshoot
3D perspective tilt card with glare highlight driven by cursor position
gradient-fill standalone heading
typographic pull quote with decorative mark and attribution
two-column stat + text keynote layout with neon glow
auto-play word-by-word fade-up reveal animation
uppercase section marker with glowing accent pill
animated count-up number stat with cubic ease, auto-plays on load
prose sentence with **marked** words highlighted in accent colour
A concise description of the content.
clip-path sweep-in reveal line, auto-plays on load
animated particle plexus with proximity lines and mouse repulsion
mass-spring graph, settled static layout by default; interactive true adds drag-to-pin physics
rotating 3D isometric mesh with height-colour mapping and drag-rotate
isometric 3D canvas of A321neo takeoff from LFBO — animated roll, rotation, gear-up, climb; HUD with airline/runway
isometric 3D canvas of Ariane 6 rocket launch from Kourou — animated liftoff and ascent; mission HUD
isometric 3D canvas of H160 helicopter hover — rotor animation, downwash, HUD
tabbed isometric fleet demo — A321neo takeoff + Ariane 6 launch + H160 hover with tab switcher
Toulouse TMA radar canvas with animated flights, HUD overlay, and live METAR ticker
generic HTTP feed — server-side initial fetch, client-side refresh via surface transport
live METAR weather feed — parsed wind, temp, QNH for an ICAO station
prose paragraph (GAS alias for body)
A concise description of the content.
plain text block
styled pull-quote with attribution
A concise description of the content.
vertical whitespace gap
inline tag chip
inline badge pill
monospace inline code span
A concise description of the content.syntax-highlighted code block
A concise description of the content.text hyperlink button
call-to-action button
single CTA link to a named page — appends from= automatically for back-button support
simple info card with title and body
Gemini token usage trace card
inline Gemini prompt input widget
dark hero banner with gradient and CTA
neon-glow stat number on dark card
frosted-glass card with blur backdrop — dark-theme highlight box
animated gradient border card
decorative blurred colour orbs background
neon-glow coloured text
dark-theme feature grid with icons
dark-theme horizontal divider
animated aurora/ambient gradient background
stacked cards with depth parallax
character-scramble text reveal on scroll
scroll-triggered animated reveal
animated beam connector between two or more nodes
animated counting number (alias for animated_counter)
countdown timer to a target date (alias)
dot-grid pattern background (alias)
RGB-split glitch-effect headline
pulsing neon-glow text on dark card
magnetic cursor-following button
click-to-trigger confetti button
soft glowing bokeh particles drifting upward on canvas, optional centred copy
pointer-parallax depth layers of soft colour orbs on canvas, optional centred copy
fixed scroll-progress bar at page top
live ticking clock widget
interactive collapsible decision tree
tabbed step-by-step sequence
multi-actor sequence diagram — arrows, notes, alt/opt/loop frames
animated chat conversation thread
glossary with hover tooltips
spotlight focus lens on blurred background
animated terminal boot sequence
stagger-animated list of items
liquid morphing hover button
animated highlight sweep text
scroll-triggered animated progress bar
spring-animation big number or word reveal
word-by-word kinetic headline animation
clip-path text reveal mask animation
split-panel reveal animation
dark card with radial mesh gradient background
animated diagonal stripe background card
status-dot vertical timeline
row of animated stat counters
animated orbit diagram with satellite nodes
dark card with film-grain noise texture
draggable before/after comparison slider
interactive word cloud with optional live Sheet feed
multi-question interactive quiz
interactive spinning 3-D globe (wire or earth)
dark-theme interactive Mercator map with node pins and links
animated atmospheric contour wave field
three-engine multi-surface demo atom
interactive European airspace map with airports and flights
live/sim status pill for a named data feed
multi-slide fullscreen presentation playbook
achievement-style surface unlocked notification
self-reveal: shows this page's own JSON schema
annotated URL anatomy diagram
self-contained QR code, optionally with a live URL input
bold screenshot-ready insight card
horizontal numbered next-steps strip
copyable monospace prompt/code block
rendered atom + raw schema side-by-side anatomy view
stat grid for renderer capability metrics
three-panel prompt → schema → output flow
old-vs-new stack comparison animation
live audience voting with real-time bar chart results
emoji reaction buttons with raining particles
raise-hand button with live participant count
A2UI surface diagram (schema → surfaces)
live page-load stopwatch
embedded live atom JSON editor with preview
swipeable Gmail inbox carousel — live on GAS, items[] or api connector on web/meet
swipeable Drive files carousel — live on GAS, items[] or api connector on web/meet
Drive folder grid — live on GAS via folder_id, items[] or api connector on web/meet
single Drive file card — static on all surfaces; live name/type lookup via file_id on GAS
invisible LMS state connector — Sheet on GAS, localStorage on web; exposes window._A2UI_STORE
course curriculum grid — module cards with live locked/available/complete status from progress_store
inline comprehension pulse — single question, instant feedback, no score pressure
end-of-quiz result — score %, pass/fail, question dots, writes to progress_store
branching scenario — situation + choices + consequence reveal with good/neutral/bad outcome
content lock — hides until requires module id is complete in progress_store
completion certificate — locked until requires id complete in progress_store; earner from GAS session
SVG radar/spider chart of skill competency levels — optional before/after growth overlay
achievement badge wall — earned badges glow, locked badges grey; status from progress_store
course entry path chooser — role/level cards, writes selection to progress_store, optional navigation
YouTube video with pausing quiz checkpoints — learner must answer to continue
instructor cohort table — per-learner module completion + scores; live on GAS
| Student |
|---|
| alice@example.com |
| bob@example.com |
reflection textarea — saves to progress_store; restores on revisit
annotated body text — click highlighted terms to reveal inline explanations
guided onboarding steps — completes to progress_store, restores on revisit
structured case study — situation, data points, questions, optional model answer reveal
Pomodoro focus/break timer with SVG ring — session only, no persistence
assessment rubric table — criteria rows × performance level columns
| Criterion | Beginning | Developing | Proficient | Exemplary |
|---|---|---|---|---|
| — | — | — | — | |
| — | — | — | — |
flip flashcard with confidence rating 1-5 — writes SRS interval to progress_store
ranked score leaderboard — live on GAS from Sheet, static on web; medal top 3
No scores yet
named-page nav bar — generates ?nav= URLs at runtime from _A2UI_NAV; active page auto-highlighted
page-level accent colour and spacing theme variables
button to print or save page as PDF
Google Drive image embed by file ID
Google Maps location embed iframe
form submitting rows to a Google Sheet tab
entrance animation wrapper for child blocks
shimmer loading placeholder shapes
infinite horizontal scrolling ticker strip
pulsing status indicator dot
three-dot pulsing loader
animated circular progress gauge
confetti celebration burst effect
CTA button with ripple click effect
animated wave section separator
bobbing emoji or icon badge
headline text with shimmer gloss sweep
slot-machine digit reveal counter
card with cursor-following spotlight
/authorize was built to print back a rejected redirect URI on purpose — the failure itself became the spec.
card with rotating gradient border
A rotating conic-gradient border — pure CSS, no JS, three colour stops.
circular countdown timer ring
single Material Symbol icon
Material icon in coloured circular badge
horizontal icon and label strip
single Google Workspace product logo
horizontal strip of Workspace logos
labelled grid of Workspace logos
feature grid with Material icons
checklist items with Material icons
deck navigation shell with subjects and slides
anchor pill buttons scrolling to page sections
copyable command with completion checkbox
multi-line text input area
flip-card deck of question answer pairs
dated vertical revision timeline
current user identity chip
floating light dark theme switch
large icon+title tile, whole tile clickable, for an app/tool selector grid
selectable card grid for a small, explained set of options
default-pill plus free-text override for a config question
pill tabs that show/hide sibling layout elements
chromeless secondary text action, for use beside one primary button
isometric rocket launch canvas animation, fixed half-viewport overlay
tabbed panels holding nested atom blocks
One court, three rounds — every player partners with every other exactly once.
| Round | Court 1 |
|---|---|
| Round 1 | P1 & P4 vs P2 & P3 |
Two courts, seven rounds — a full partner rotation.
native MathML equation typeset with the math font family
layered-depth concept explainer — hook, mental-model card, depth rungs, worked example
one depth level (kind chip, title, body, code, takeaway) — normally used inside concept_ladder
labelled layer bands — field/note per layer, optional side-by-side columns, absent layers render hollow
one layer band (badge, name, field/note or per-column cells) — normally used inside layer_stack
structured agent tool call card with status, inputs, result, and latency
animated looping SVG scene of a place (53 ready presets) from verified clipart
one verified vector clipart image by id
histogram: counts of numbers per bin
box_plot: compare groups of numbers by median and spread
waterfall: how changes add up to a total
sunburst: share of a total in nested rings
chord_diagram: flows between a few entities as ribbons on a ring
circle_pack: grouping and rough size as packed circles
arc_diagram: links between nodes as arcs over a line
contour_plot: filled contour bands of a value grid or of the density of points
voronoi: nearest-site regions of a set of points (catchments, service areas)