447 atoms available on this surface
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
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 returns, example
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 explanation list below
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 dual-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 typically leading to different sections or pages.
in-page anchor navigation links document or to external URLs.
collapsible FAQ question and answer list the question is clicked.
definition term with explanation more details.
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 hover card revealed on mouse over specified trigger element, using only CSS.
expandable content panel with header toggle visible and hidden states by clicking a control, using only CSS.
pure-CSS modal dialog triggered by checkbox controlled purely by CSS without JavaScript.
inline audio player with controls
styled link to an audio file
embedded PDF preview panel PDF.
styled link to a downloadable document a document icon.
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 browser, phone).
image with styled caption below
full-width status alert strip optional action.
CSS slide-in/out fixed-position notification toast
animated placeholder skeleton while content loads indicating active data fetching.
zero-data empty state with icon and call to action image, message, and an optional call to action.
loading spinner indicator operation is in progress.
coloured status pill badge an item.
inline success error or warning message for validation feedback or hints.
star rating display stars, or displaying a static rating.
CSS stroke-dashoffset animated SVG progress arc with centre percentage
prominent card prompting a required user action user attention,
features versus plans comparison matrix
single pricing plan card with features list an optional call to action.
side-by-side pricing plan comparison different subscription plans.
two-column pros and cons comparison a single subject.
two items compared spec by spec and values side-by-side.
product specifications in a clean table a single product.
multi-item attribute comparison grid often using icons or checkmarks to indicate presence.
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 hover.
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 activation.
customer testimonial with photo name and quote an optional avatar.
read-only star rating with score and count total review count.
stacked user avatar group with overflow count or community.
list of contributors with avatar and role community, with their
grid of customer or partner logos
social proof strip with stats and logos achievement.
press or media mention with logo and quote
expert quote with credentials and photo name, and credentials.
highlighted customer review excerpt by a star rating.
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
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
grid of named color swatches with hex values
side-by-side performance benchmark comparison bars
interactive Chart.js bar chart with datasets
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
stacked area chart with overlapping glowing translucent gradients
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
GFM markdown string rendered to HTML inline
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 or circular badges
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
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
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
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
live list of Drive folder files
live read-only Google Sheet range preview
list of recent Gmail messages matching query
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
AI-powered Google Doc summary via Vertex AI Gemini
multi-doc briefing pack — one Gemini summary card per Google Doc
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
interactive mass-spring physics graph with drag-to-pin nodes
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
OpenSky Network ADS-B live flight positions for a bounding box
live METAR weather feed — parsed wind, temp, QNH for an ICAO station
Firestore document read — publishes deserialized doc to named data connector; visual atoms subscribe by name
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
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 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
floating particles background (canvas placeholder)
parallax scroll section (canvas placeholder)
fixed scroll-progress bar at page top
live ticking clock widget
interactive collapsible decision tree
tabbed step-by-step sequence
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
QR code for current or given URL
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
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
Wraps child blocks with entrance animations triggered on load. animation choices: fade_up, fade_in, slide_left, slide_right, scale_in, stagger.
CSS shimmer loading placeholder. type choices: text, card, avatar_row, image, list, table.
Infinite horizontal scrolling ticker. Items can be text strings, logos (image_url), or icon+label chips.
Pulsing status or attention indicator dot. Inline or block display.
Three-dot pulsing loader. Use during async content load or as a status indicator.
JS confetti celebration effect. trigger load fires immediately, trigger button shows a clickable button.
CTA button with a CSS ripple click effect. Optionally links to a URL.
Animated SVG wave as a decorative section separator.
An emoji or icon that bobs up and down continuously. Great for CTAs and achievement moments.
Headline text with an animated shimmer/gloss sweep across a gradient. Use for hero taglines.
Slot-machine style digit reveal. Each digit flips in from above on load.
A content card where a radial gradient spotlight follows the cursor. Child blocks or content field.
Card or section with a rotating conic gradient border. Child blocks or content inside.
Circular SVG countdown that depletes as seconds tick down.
A single Material Symbol icon from Google Fonts CDN. Browse 2500+ icon names at fonts.google.com/icons.
Material Symbol icon inside a coloured circular badge. Good for stat rows and feature lists.
Horizontal strip of Material Symbol icon + label pairs. Good for feature/capability lists.
Feature grid using Material Symbol icons — better than emoji for Workspace UI contexts.
Checklist where each item has a Material Symbol icon (not just a check mark). Good for capability or requirements lists.