Web

series link or transparency note at article top

prose paragraph block

H2 section title

H3 subsection title

pull quote or blockquote with attribution

syntax-highlighted fenced code block

left-to-right step flow diagram

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

coloured tip info warning or danger highlight box

numbered step-by-step instruction sequence

data table with header row on mobile

tabbed content panels

label and value pairs in a compact grid

side-by-side code or content before and after comparison approach

API endpoint method parameters and response docs

scrollable image gallery grid

two videos side by side

horizontally scrollable card carousel

chronological event timeline

code block with numbered callout bubbles on specific lines

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

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

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

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

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

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

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

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

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

highlighted customer review excerpt by a star rating.

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

button 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

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

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

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

Flesch score, reading time and sentence stats computed from prose, longest sentence highlighted

paragraph with a dropped, raised, boxed or ornamental initial letter

WCAG contrast ratios for colour pairs with AA/AAA badges and a nearest-passing fix

prominent blockquote optimised for social media sharing

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

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)

predicted-vs-observed probability calibration chart with confidence intervals

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

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

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

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

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

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

toy-brick sculpture or brick lettering that builds, flies in and turns on the film clock

a ready-made 10-brick toy robot that builds itself and turns on the film clock

a ready-made 9-brick toy rocket that builds itself and turns on the film clock

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

cloze-test sentence with inline inputs and correct/wrong highlight on submit

click-to-pair matching exercise with green lock and red mismatch flash

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

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

clip-path sweep-in reveal line, auto-plays on load

animated particle plexus with proximity lines and mouse repulsion

self-assembling 3D brick model, toy bricks or real LDraw parts, with build checks, build steps and a parts list

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

prose paragraph (GAS alias for body)

plain text block

styled pull-quote with attribution

vertical whitespace gap

inline tag chip

inline badge pill

monospace inline code span

syntax-highlighted code block

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

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

dark-theme feature grid with icons

dark-theme horizontal divider

stacked cards with depth parallax

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

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

glossary with hover tooltips

spotlight focus lens on blurred background

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

animated orbit diagram with satellite nodes

dark card with film-grain noise texture

draggable before/after comparison slider

interactive spinning 3-D globe (wire or earth)

achievement-style surface unlocked notification

annotated URL anatomy diagram

self-contained QR code, optionally with a live URL input

bold screenshot-ready insight card

horizontal numbered next-steps strip

rendered atom + raw schema side-by-side anatomy view

stat grid for renderer capability metrics

three-panel prompt → schema → output flow

A2UI surface diagram (schema → surfaces)

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

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

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

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

card with rotating gradient border

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

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

tabbed panels holding nested atom blocks

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

treemap: part-to-whole by category or nested path

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