The A2UI Atomic Catalog, A to Z. Each atom is a typed A2UI component an AI agent sends as declarative JSON;
the client renders it, so no model-written HTML reaches the page. Every entry links to its fields, an example payload
and a live preview. Agents can search the same catalog through the MCP server (find_atoms).
By surface: MCP Apps (563) · Android (563) · Apps Script Web (550) · Web (507) · Google Meet Stage (310) · PDF (106) · Google Slides (79) · PowerPoint (PPTX) (79) · Email (45) · Apps Script Side Panel (39) · Google Chat (26) · Claude Code (11) · google-chat-chromium-render (5)
abbr_tooltipinline abbreviation with hover tooltip full formaccordion_itemsingle collapsible section with toggle by clicking its header, using only CSS.achievement_badgeunlockable achievement badge with locked/unlocked state and optional dateaction_itemsaction items table — action, owner, due date, statusaction_required_cardprominent card prompting a required user action or approvalactual_vs_estimateone quantity as actual + estimate, both labelled, neither omittableadsb_feedOpenSky Network ADS-B live flight positions for a bounding boxagenda_blocktime-slotted agenda — slots with time, title, speaker, location, typeagent_sketchpadcomposite multi-shape SVG canvas, newest shape draws itself inai_build_traceGemini token usage trace cardairspace_command_deckToulouse TMA radar canvas with animated flights, HUD overlay, and live METAR tickeralert_bannerfull-width status alert stripambient_gradientanimated aurora/ambient gradient backgroundanchor_listin-page anchor navigation links document or to external URLs.animated_beamCSS stroke-dashoffset animated SVG beam between two labelled nodesanimated_bordercard with rotating gradient borderanimated_border_cardcard with CSS rotating gradient animated borderanimated_counterCSS-only animated counter that counts up to target valuesannotated_codecode block with numbered callout bubbles on specific linesannotation_highlightannotated body text — click highlighted terms to reveal inline explanationsapi_param_tablereference table detailing API parameters, data types, and default valuesapi_referenceAPI endpoint method parameters and response docsarc_diagramarc_diagram: links between nodes as arcs over a linearticle_herodisplay prominent introductory headline and banner mediaarticle_series_navnavigate interconnected parts inside multi-part blog seriesatom_anatomyrendered atom + raw schema side-by-side anatomy viewaudio_linkstyled link to an audio fileaudio_playerinline audio player with controlsaurora_backgroundanimated aurora borealis gradient blob background, CSS-onlyauthor_bio_cardprofile block displaying content creator biographical detailsavatar_groupstacked user avatar group with overflow count or community.back_buttonback navigation — url, nav_slug, or history.back(); ghost/outline/text stylebadgeinline badge pillbadge_grouprow of coloured label badgesbadge_showcaseachievement badge wall — earned badges glow, locked badges grey; status from progress_storebefore_afterside-by-side code or content before and after comparison approachbefore_after_stackold-vs-new stack comparison animationbenchmark_comparisonside-by-side performance benchmark comparison barsbento_gridasymmetric bento-box feature tile grid — MagicUI/shadcn patternbig_revealspring-animation big number or word revealblock_robota ready-made 10-brick toy robot that builds itself and turns on the film clockblock_rocketa ready-made 9-brick toy rocket that builds itself and turns on the film clockblockquotestyled pull-quote with attributionblockquote_with_avatartestimonial quote with avatar and attributionblur_fade_inCSS blur-to-focus fade-in container revealbodyprose paragraph blockbox_plotbox_plot: compare groups of numbers by median and spreadbreadcrumbnavigation breadcrumb trail structure.brevet_timelinedated vertical revision timelinebrick_build_3dself-assembling 3D brick model, toy bricks or real LDraw parts, with build checks, build steps and a parts listbullet_listunordered list with optional bold label per itemcalendar_todaytoday's calendar events from the user's default calendarcalendar_upcominglist of upcoming calendar eventscalibration_plotpredicted-vs-observed probability calibration chart with confidence intervalscall_mood_boardvisual summary board of call sentiments moods and active themescalloutcoloured tip info warning or danger highlight boxcandlestick_chartcandlestick_chart: open-high-low-close price bars over timecanvas_plexusanimated particle plexus with proximity lines and mouse repulsioncapability_checklistfeature capability tick list per tier capability using checkmarkscard_stackCSS-fanned stack of 2–4 cards with rotation and opacity tierscarouselhorizontally scrollable card carouselcase_study_cardstructured case study — situation, data points, questions, optional model answer revealcaution_blockhighlight dangerous pitfalls or critical destructive actionscertification_cardcompletion certificate — locked until requires id complete in progress_store; earner from GAS sessionchanged_mindstruck-through old belief, new belief lands beneath; optional what-changed-it linechangelog_entrytimeline entry documenting product modifications per releasechartjs_barstatic accessible bar chart (group, stack, relative, overlay; vertical or horizontal; log axis)chartjs_lineinteractive Chart.js line chart for trend datachartjs_piemulti-slice pie or donut SVG chart with legendchat_sequenceanimated chat conversation threadchecklist_interactiveinteractive task tracking checklist for article milestoneschip_groupchip/tag row — label, color, url, active state; wrap or scroll layoutchoicebox_groupcard-style option selector with icon, title, description per cardchord_diagramchord_diagram: flows between a few entities as ribbons on a ringchoropleth_mapchoropleth map: world, US states or Europe shaded by value in classescircle_packcircle_pack: grouping and rough size as packed circlescli_commandcopyable single-line terminal command execution stringclipartone verified vector clipart image by idclosingarticle closing paragraph with hashtagscodesyntax-highlighted fenced code blockcode_blocksyntax-highlighted code blockcode_diffserver-side unified diff view with green additions and red removalscode_snippet_pairtwo code blocks side by side without diff highlighting diff highlighting.cohort_progress_boardinstructor cohort table — per-learner module completion + scores; live on GAScohort_retentiontriangular cohort retention grid with continuous color-scale renderingcollapsible_panelexpandable content panel with header toggle visible and hidden states by clicking a control, using only CSS.color_sectioncolored background wrapper — tint/solid/dark, renders child atom blockscolor_swatch_gridgrid of named color swatches with hex valuescolumnsmulti-column layout — 2–6 cols, each column holds atom blockscomboboxsearchable filterable dropdown — shadcn/Headless UI patterncommand_palettekeyboard-driven command palette with shortcut hintscommand_stepcopyable command with completion checkboxcomparison_gridmulti-item attribute comparison gridcomparison_morphdraggable before/after comparison slidercompletion_gatecontent lock — hides until requires module id is complete in progress_storeconcept_ladderlayered-depth concept explainer — hook, mental-model card, depth rungs, worked exampleconcept_rungone depth level (kind chip, title, body, code, takeaway) — normally used inside concept_ladderconfetti_burstconfetti celebration burst effectconfetti_triggerclick-to-trigger confetti buttonconfidence_barlabelled probability bar with colour-coded confidence fillcontent_tabstabbed panels holding nested atom blockscontour_plotcontour_plot: filled contour bands of a value grid or of the density of pointscontrast_auditWCAG contrast ratios for colour pairs with AA/AAA badges and a nearest-passing fixcontributor_listlist of contributors with avatar and roleconversation_snippetuser prompt and AI response as chat bubblesconversion_funnelpipeline conversion funnel with step tapering and leak markerscopy_code_buttonbutton to copy specified text or code to clipboardcopy_promptcopyable monospace prompt/code blockcopy_to_clipboardcopy-to-clipboard button with inline code and feedbackcount_up_statanimated count-up number stat with cubic ease, auto-plays on loadcountdown_ringcircular countdown timer ringcountdown_timerFlip-clock countdown timer display (static tiles, data-driven ticking)counter_grouprow of animated stat counterscourse_progress_cardcourse-level progress card with per-module bars and aggregate completion ringcss_dropdown_menupure-CSS dropdown navigation menucss_modalpure-CSS modal dialog triggered by checkboxcss_slide_panelCSS-only slide-in panel drawercta_buttoncall-to-action buttoncta_sectionfull-width CTA banner with headline and buttons — Tailwind UI patterncursor_glowambient glowing orb that lerp-follows the cursor with screen blendcursor_trailchain of fading dots following the cursor with worm physicscustom_checkbox_groupstyled checkbox group inputcustomer_logo_gridgrid of customer or partner logosdark_dividerdark-theme horizontal dividerdark_feature_griddark-theme feature grid with iconsdark_herodark hero banner with gradient and CTAdata_gridenterprise data grid with typed columns, row selection, anddata_sourcegeneric HTTP feed — server-side initial fetch, client-side refresh via surface transportdata_table_sortablesortable data table with column headersdeadline_tickercountdown timer to a target date (alias)decision_treeinteractive collapsible decision treedeprecation_noticewarning banner for deprecated features or unsupported APIsdepth_stackstacked cards with depth parallaxdiagramD2 or SVG architecture diagramdifficulty_badgelabel technical complexity level of blog contentdisplay_quotetypographic pull quote with decorative mark and attributiondividerhorizontal visual section breakdoc_ai_summaryAI-powered Google Doc summary via Vertex AI Geminidocument_linkstyled link to a downloadable documentdomain_pickerdefault-pill plus free-text override for a config questiondonut_statCSS ring chart with centre value and percentage its proportion or progress.dot_grid_backgroundCSS repeating dot or grid pattern panel backgrounddrive_file_cardsingle Drive file card — static on all surfaces; live name/type lookup via file_id on GASdrive_file_listlive list of Drive folder filesdrive_folder_contentsDrive folder grid — live on GAS via folder_id, items[] or api connector on web/meetdrive_imageGoogle Drive image embed by file IDdrive_recent_filesswipeable Drive files carousel — live on GAS, items[] or api connector on web/meetdrive_storage_usageDrive storage quota progress bar — live on GAS, or pass used_gb/total_gb for staticdrop_capparagraph with a dropped, raised, boxed or ornamental initial lettereffect_overlayCSS confetti/trophy/pulse celebration overlay triggered by nameembed_codepenembed interactive CodePen workspace development environmentsembed_gistembed version-controlled GitHub Gist source code snippetsembed_google_slidesembed interactive Google Slides presentation slide decksembed_stackblitzembed dynamic StackBlitz live IDE code sandboxesembed_tweetembed live public Twitter status updates and mediaempty_statezero-data empty state with icon and call to actionencrypted_revealCSS steps() scramble-to-reveal text animationentity_listnamed resource rows with avatar, status badge, and metaenv_var_listlist configuration environment variables with descriptions and default valuesexpandable_listnested expandable tree list with collapsible childrenexpandable_texttruncated text with read more expand toggle more content.experimental_bannerhighlight experimental or unstable feature notice calloutexpert_endorsementexpert quote with credentials and photofaq_accordioncollapsible FAQ question and answer list the question is clicked.feature_gridicon + title + description feature grid — Tailwind UI patternfeature_matrixfeatures versus plans comparison matrixfeed_statuslive/sim status pill for a named data feedfeedback_promptthumbs or star rating feedback collection widgetfigma_embedembed collaborative live Figma design file prototype previewsfile_treepresent hierarchical directory structures and files for software project navigationfill_in_blankcloze-test sentence with inline inputs and correct/wrong highlight on submitfilterable_listlist with status chips that filter its rows — items with title, detail, status; All plus one chip per status, with countsfirestore_readFirestore document read — publishes deserialized doc to named data connector; visual atoms subscribe by nameflashcard_deckflip-card deck of question answer pairsflip_cardcard that flips on hover to reveal back contentfloating_badgebobbing emoji or icon badgefloating_orbsdecorative blurred colour orbs backgroundfloating_particlessoft glowing bokeh particles drifting upward on canvas, optional centred copyflow_connectoranimated beam connector between two or more nodesflow_fieldluminous noise-field streams converging on a glowing focus, hero backgroundfocus_lensspotlight focus lens on blurred backgroundfollow_buttondirect profile subscription button for social platformsfollow_ctacall to action driving social media community expansionfollow_up_chipsclickable follow-up suggestion chipsfootnotenumbered footnote reference at the bottom of a section or page.footnote_groupnumbered footnote list at section or article endformlabelled form with fields and submit buttonform_checkbox_groupcheckbox group for multi-option selectionform_date_pickerdate or date-range picker inputform_inputsingle labelled input fieldform_radio_groupradio button group for single-option selectionform_selectlabelled dropdown select with optionsform_slidernumeric range slider inputform_switch_groupgroup of labelled toggle switchesform_textareamulti-line text input areaframed_screenshotdevice-framed screenshot with optional captionfurther_readingcurated references for extending topic researchgalleryscrollable image gallery gridgauge_slaradial SLA gauge with glowing pointer and large metric valuegdm_rocket_panelisometric rocket launch canvas animation, fixed half-viewport overlaygemini_promptinline Gemini prompt input widgetgeo_contour_wavesanimated atmospheric contour wave fieldgeo_europe_airspaceinteractive European airspace map with airports and flightsgeo_iso_fleettabbed isometric fleet demo — A321neo takeoff + Ariane 6 launch + H160 hover with tab switchergeo_iso_heli_hoverisometric 3D canvas of H160 helicopter hover — rotor animation, downwash, HUDgeo_iso_rocket_launchisometric 3D canvas of Ariane 6 rocket launch from Kourou — animated liftoff and ascent; mission HUDgeo_iso_takeoffisometric 3D canvas of A321neo takeoff from LFBO — animated roll, rotation, gear-up, climb; HUD with airline/runwaygeo_mapgeo map: points sized and grouped by value, plus great-circle lines, on bundled outlinesgeo_mercator_radardark-theme interactive Mercator map with node pins and linksgithub_activity_gridSVG GitHub-style contribution grid and activity trackergithub_repo_cardlive GitHub repo card with stars forks and languageglass_cardfrosted-glass card with blur backdrop — dark-theme highlight boxglitch_textRGB-split glitch-effect headlineglobe_3dinteractive spinning 3-D globe (wire or earth)glossary_inlineinline hover tooltips for complex technical term definitionsglossary_termdefinition term with explanationglow_buttonCSS box-shadow state-signalling button with disabled/ready/fired glowglowing_statneon-glow stat number on dark cardgmail_inboxswipeable Gmail inbox carousel — live on GAS, items[] or api connector on web/meetgmail_summarylist of recent Gmail messages matching querygmail_unread_countunread count badges for Gmail labelsgoogle_iconsingle Material Symbol icongradient_border_cardanimated gradient border cardgradient_headinggradient-fill standalone headinggradient_herolight gradient hero — badge, large title, subtitle, CTA buttongradient_mesh_livesoft colour blobs drifting on a noise field, pointer-reactive, hero backgroundgradient_textAnimated gradient-fill heading text via CSS background-cliphalftone_waveanimated halftone dot grid riding a wave, works on light backgroundsheadingH2 section titleheatmapgrid heatmap coloured by intensity value are represented as colors in a matrix.heatmap_calendarcalendar month heatmap with date-value density colouringhighlight_boxhighlight box — gradient/solid/outline style, icon, title, texthighlight_sweepanimated highlight sweep texthighlighted_texthighlighted text passage with optional hover margin annotation notehint_revealshow/hide hint disclosure using HTML details/summary — no JShistogramhistogram: counts of numbers per binhistogram2dhistogram2d: x,y points counted into a 2-D bin grid, drawn as a heatmaphover_cardrich card revealed when hovering a triggerhttp_request_blockdocument REST API endpoints with HTTP methods, headers, and payloadshubdeck navigation shell with subjects and slidesicon_badgeMaterial icon in coloured circular badgeicon_checklistchecklist items with Material iconsicon_feature_gridfeature grid with Material iconsicon_listicon-circle list — emoji/icon per item, label + text, color per itemicon_rowhorizontal icon and label stripicon_stat_rowicon + big number + label stat strip — more visual than metric_rowimagesingle image with optional captionimage_hotspotsimage with clickable annotated hotspot overlaysimage_pairtwo images side by side with captionsimage_with_captionimage with styled caption belowincident_log7-day incident strip plus recent incident rowsinfo_cardsimple info card with title and bodyinline_alertinline icon-plus-text alert embedded in content flowinline_codemonospace inline code spaninline_feedback_messageinline success error or warning message for validation feedback or hints.introseries link or transparency note at article topinventory_tableinventory table with SKU, stock levels, and low-stock row highlightisometric_meshrotating 3D isometric mesh with height-colour mapping and drag-rotatejira_ticketJira issue card with type icon, status lozenge, priority, and assigneejson_tree_viewerexpandable visual explorer for nested JSON datajump_navanchor pill buttons scrolling to page sectionskey_takeawayshighlighted summary of main conclusions and critical takeawayskey_valuelabel and value pairs in a compact gridkeyboard_shortcutdisplay visual keyboard key combinations for application shortcuts and hotkeyskinetic_headlineword-by-word kinetic headline animationknowledge_checkinline comprehension pulse — single question, instant feedback, no score pressurelayer_stacklabelled layer bands — field/note per layer, optional side-by-side columns, absent layers render hollowleaderboard_cardranked score leaderboard — live on GAS from Sheet, static on web; medal top 3learning_objectiveschecklist of educational goals and competencies gained post-readinglearning_path_selectorcourse entry path chooser — role/level cards, writes selection to progress_store, optional navigationlens_gridselectable card grid for a small, explained set of optionslesson_navprev/next lesson navigation with module context and optional completion checkboxlight_typeagent-supplied words made of flowing light, streams masked to the glyphslink_buttontext hyperlink buttonlinkedin_post_imageLinkedIn post image preview — conviction_card, stat_card, or carousel_slide modeliquid_buttonliquid morphing hover buttonlive_aggregatorReal-time comparative bars for votes, counts, or percentageslive_clocklive ticking clock widgetlive_demo_embedembed interactive live demo sandbox iframelive_editembedded live atom JSON editor with previewlive_metricanimated counting number (alias for animated_counter)live_votelive audience voting with real-time bar chart resultsliving_typeagent-supplied headline whose letters breathe and lean toward the pointerllm_comparison_tableside-by-side multi-model output comparison tableloading_dotsthree-dot pulsing loaderloading_skeletonanimated placeholder skeleton while content loadslog_outputscrollable monospace server or compiler log output blocklottie_animationrender lightweight high-performance vector Lottie animationslozengeAtlassian-semantic status pill with defined appearance variantsmagnetic_buttonmagnetic cursor-following buttonmagnetic_elementcontent that drifts toward cursor and springs back with overshootmaps_embedGoogle Maps location embed iframemarkdown_blockinline markdown string (bold, italic, code, links) rendered to HTMLmarqueeinfinite horizontal scrolling ticker stripmarquee_stripinfinite CSS-animated horizontal marquee of text or logo itemsmasonry_elevationcoursed block/brick wall elevation with bond-pattern stagger and render-style optionsmatch_exerciseclick-to-pair matching exercise with green lock and red mismatch flashmath_blocknative MathML equation typeset with the math font familymecurrent user identity chipmedia_mention_cardpress or media mention with logo and quotemedia_stream_cardAuto-detecting YouTube/Loom/Slides/Vimeo embed with skeletonmesh_gradientdark card with radial mesh gradient backgroundmessage_lanespackets streaming from an agent node into a surface node that unfolds cards on arrivalmetar_feedlive METAR weather feed — parsed wind, temp, QNH for an ICAO stationmeteor_showerCSS-animated diagonal falling meteor streaks on a dark panelmetric_comparison_cardmetric card comparing current vs previous periodmetric_deltabig number metric with directional change indicator or percentagemetric_rowhorizontal metric strip — value, label, prefix/suffix, trend up/downmini_sparkline_setcompact grid of multiple labeled sparklinesmodalmodal dialog overlay with title and contentmodel_cardAI model spec card with context window, pricing, and capability badgesmodule_mapcourse curriculum grid — module cards with live locked/available/complete status from progress_storemotion_archarchitecture diagram that draws itself, with payloads moving along its edgesmotion_brickstoy-brick sculpture or brick lettering that builds, flies in and turns on the film clockmotion_browsersearch box, filter chips and a grid of cards with live atom previews that types and rises inmotion_checklistcard whose items tick off in turn as progress advancesmotion_codecode window that types itself in as progress advancesmotion_counterbig counting number with an optional captionmotion_envelopeenvelope that opens to reveal (or seals in) a letter of atoms, with address and stampmotion_finishfilm grain, vignette, light leaks and glass sheen over the framemotion_groupstaggered entrance for a list of blocks, with tokenised easingmotion_hudviewfinder HUD with corner brackets, counting timecode and progress barmotion_layerscene container for a motion_timeline: children placed in percent of the layer, animated as onemotion_leadercallout line with a start dot, arrowhead and label that draws itselfmotion_lower_thirdname and role lower third that draws and slides inmotion_map3da tilted 3D city map where legs draw station to station (out and back, straight or curved), chips travel, stations end done, warn or error and a clock counts…motion_markthe A2UI Catalog logo mark that draws itself and sends an electron round its orbitmotion_maskreveals child atoms through a growing blob, circle, diagonal wipe, rounded rectangle, bars, diamond, halftone, conic sweep or slatsmotion_orbittiles that fly out onto an ellipse and orbit a centre as progress advancesmotion_pillrounded call-to-action chip with an accent word that stays on screen across scenesmotion_rayssunburst or speed-line background that fans in and turnsmotion_shaderseekable WebGL liquid or aurora background with a CSS gradient fallbackmotion_shapebar, rule, disc, sweeping ring or soft glow that draws with progressmotion_sketchstrokes that draw themselves in turn, like an agent sketchingmotion_textkinetic type that reveals by line, word or character as progress advancesmotion_timelinetimeline-driven stage that choreographs child atoms with tokenised easing, a camera, captions and a scrubbermotion_tokensreference card of the named easing curves, duration tokens and entrance effectsmotion_transitiona key-joined morph from one atom to another on the film's p dialmotion_videomuted video whose frame follows the film clockmulti_doc_ai_briefmulti-doc briefing pack — one Gemini summary card per Google Docmulti_select_inputchip-style multi-value select input — shadcn patternmulti_surfacethree-engine multi-surface demo atomnav_barnamed-page nav bar — generates ?nav= URLs at runtime from _A2UI_NAV; active page auto-highlightednav_linksingle CTA link to a named page — appends from= automatically for back-button supportnavigation_menumulti-level horizontal nav with submenu panels — Radix patternneon_glowpulsing neon-glow text on dark cardneon_textneon-glow coloured textnewsletter_ctaemail subscription form for recurring reader updatesnext_step_striphorizontal numbered next-steps stripnoise_carddark card with film-grain noise texturenotification_badgeunread count badge overlaid on icon elementnotification_stackpersistent notification inbox list with unread indicatorsnumber_flipslot-machine digit reveal counternumber_odometerSlot-machine digit-column flip to target numbernumbered_listdecorative numbered list — large background numbers, circular badges, or bordered stage cardsonboarding_stepperguided onboarding steps — completes to progress_store, restores on revisitorbit_diagramanimated orbit diagram with satellite nodesorbit_markthe a2ui orbit-mark logo with flow-field streams captured into its orbitsorbit_ringstilted orbit rings, each a tier of labelled satellites around a centre nodeorder_status_carde-commerce order card with status badge and line item listotp_inputN-box one-time password digit input — shadcn OTP patternpage_headerapp-style page header — title, subtitle, icon, accent, tag badgepaginationpage number controlspalettepage-level accent colour and spacing theme variablesparagraphprose paragraph (GAS alias for body)parallax_card3D CSS perspective tilt card with mousemove parallax depthparallax_sectionpointer-parallax depth layers of soft colour orbs on canvas, optional centred copyparallel_coordsparallel_coords: compare many numeric measures per rowparticle_burstclick anywhere to burst coloured gravity particles from click pointparticle_typeagent-supplied words assemble from particles; pointer scatters thempattern_backgrounddot-grid pattern background (alias)pdf_previewembedded PDF preview panel PDF.person_cardperson card — name, role, photo, bio, tags, email, linkedinphoto_gridclickable image grid — data-row-json tiles, reuses data_table's onRowClick contract; badge + active show per-tile statephoto_stepperfull-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…pipelineleft-to-right step flow diagramplaybookmulti-slide fullscreen presentation playbookpolar_chartpolar_chart: points and lines by angle and radius, or a radarpoll_blockpoll with question options and vote count barspost_metadata_bararticle metadata bar with author date read timeprerequisite_checklisthighlight prerequisite knowledge and system requirements beforepreview_frameiframe whose src is wired to another node's value, so picking updates it with no repaintpricing_tier_cardsingle pricing plan card with features listpricing_tier_groupside-by-side pricing plan comparison different subscription plans.print_buttonbutton to print or save page as PDFproduct_spec_tableproduct specifications in a clean tableproduct_thumbnailproduct card with image, price, status badge, and tagsprogress_barlabelled horizontal progress bar with percentageprogress_checkpointmilestone progress indicator across multi-step tutorialprogress_circleCSS stroke-dashoffset animated SVG progress arc with centre percentageprogress_revealscroll-triggered animated progress barprogress_ringanimated circular progress gaugeprogress_storeinvisible LMS state connector — Sheet on GAS, localStorage on web; exposes window._A2UI_STOREprompt_templateLLM prompt with highlighted {variable} slots and copy buttonprompt_to_schemathree-panel prompt → schema → output flowpros_cons_listtwo-column pros and cons comparisonpull_statlarge display number pulled from prose for emphasis descriptive label.pulse_dotpulsing status indicator dotpunch_card7x24 grid of glowing activity bubbles representing hourly commitsquiet_linkchromeless secondary text action, for use beside one primary buttonquiverquiver: arrows showing direction and size at pointsquiz_questionMCQ or true/false question with CSS-only correct/wrong feedbackquiz_result_summaryend-of-quiz result — score %, pass/fail, question dots, writes to progress_storequiz_setmulti-question interactive quizquotepull quote or blockquote with attributionraise_handraise-hand button with live participant countrating_comparisonmultiple items rated across dimensions scores.rating_starsstar rating displayrating_summary_barstar rating histogram with percentage bars per star levelreaction_groupemoji reaction counters collecting reader sentiment feedbackreaction_showeremoji reaction buttons with raining particlesreadability_cardFlesch score, reading time and sentence stats computed from prose, longest sentence highlightedreading_progress_bartrack and display article reading progress completion statusreceiptclaim plus numbered, sourced evidence lines printed as a till receipt; newest line prints inreflection_promptreflection textarea — saves to progress_store; restores on revisitrelated_posts_gridgrid of recommended alternative post reading cardsrelease_notesgrouped product release documentation by change categoryrenderer_statsstat grid for renderer capability metricsrepo_linksstyled GitHub repo link listresources_listdownloadable project assets and attached resource linksrevealentrance animation wrapper for child blocksreveal_lineclip-path sweep-in reveal line, auto-plays on loadreveal_on_scrollIntersectionObserver scroll-triggered fade+slide revealreview_callouthighlighted customer review excerpt by a star rating.ripple_buttonCTA button with ripple click effectrisk_flagrisk list — critical/high/medium/low with title, description, mitigationroadmap_cardquarter-based product roadmap with status-tagged milestonesrubric_cardassessment rubric table — criteria rows × performance level columnssankey_flowcurved multi-column gradient flow diagram for financial or pipeline streamsscatter_matrixscatter_matrix: every measure plotted against every otherscatter_trendcoordinate scatter plot with regression trend linescenario_branchbranching scenario — situation + choices + consequence reveal with good/neutral/bad outcomescene_stageanimated looping SVG scene of a place (53 ready presets) from verified clipartschema_qrself-contained QR code, optionally with a live URL inputschema_revealself-reveal: shows this page's own JSON schemascore_summaryend-of-exercise score card with correct/total, percentage, grade, and CTAscramble_revealcharacter-scramble text reveal on scrollscript_run_buttonbutton to trigger server-side Apps Script functionscroll_progressfixed scroll-progress bar at page topscroll_to_topquickly return viewport to top of page documentscroll_triggerscroll-triggered animated revealsearch_result_cardsingle search result card with title snippet URLsection_breaksection divider — optional centered label, solid/dashed/dots stylesection_labeluppercase section marker with glowing accent pillsegmented_controlmutually exclusive option selector strip as a single control.sentiment_summarymeeting sentiment analyzer with index arc and timeline chartsequence_diagrammulti-actor sequence diagram — arrows, notes, alt/opt/loop framesseries_overview_cardnavigation index for multi-part article series partsservice_status_boardverdict-first service status grid with triple-encoded stateshare_quoteprominent blockquote optimised for social media sharingsheet_formform submitting rows to a Google Sheet tabsheet_form_submitinline form that appends a row to a Google Sheet on submitsheet_previewlive read-only Google Sheet range previewsheet_statsaggregate stats from a sheet range displayed as stat badgesshimmer_buttonbutton with CSS background-position shimmer sweep animationshimmer_textheadline text with shimmer gloss sweepshortcut_legendkeyboard shortcut cheat-sheet grid with key combos and labelsside_by_side_spectwo items compared spec by spec and values side-by-side.sidebar_noteoff-axis container for peripheral notes or caveatssignal_tunnelradial light streaks converging on (or radiating from) a vanishing point, hero backgroundskeletonshimmer loading placeholder shapesskeleton_stage_cardDark shimmer skeleton loader in card/list/media/chat variantsskill_barslabeled horizontal progress bars list — percent fill, per-bar colorskill_radarSVG radar/spider chart of skill competency levels — optional before/after growth overlaysocial_feed_embedembedded social media post or feed or Instagram post.social_proof_bannersocial proof strip with stats and logossocial_share_barsocial media buttons for sharing article to external networkssonar_pulseCSS concentric ring pulse animation for attention signallingsortable_listdrag-to-reorder list emitting {id, order} on dropsource_citationnumbered RAG source card with title excerpt and URLspaced_repetition_cardflip flashcard with confidence rating 1-5 — writes SRS interval to progress_storespacervertical whitespace gapsparklineinline SVG trend line chart general trends.speed_counterlive page-load stopwatchspinnerloading spinner indicatorsplit_panetwo-panel split — distinct bg per side, each side renders atom blockssplit_revealsplit-panel reveal animationsplit_stattwo-column stat + text keynote layout with neon glowspotlight_cardcard with cursor-following spotlightspotlight_cursordark overlay with cursor-following circular cutout — torch effectspring_nodesmass-spring graph, settled static layout by default; interactive true adds drag-to-pin physicssprint_boardkanban sprint board with named columns and compact issue cardsstack_layerone layer band (badge, name, field/note or per-column cells) — normally used inside layer_stackstacked_areastacked area chart of series layers over an ordered axis (zero baseline, optional 100% / streamgraph offsets)stagger_liststagger-animated list of itemsstanceclaim set in type whose weight, size and tracking encode the stated confidencestar_rating_displayread-only star rating with score and countstar_rating_inputinteractive star rating inputstat_cardsingle KPI value with label delta and accent colour indicatorstat_pulsethree hero stat tiles plus a small emphasized trend bar chartstatus_dashboardgrid of service status indicators with color statesstatus_pillcoloured status pill badgestatus_timelinestatus-dot vertical timelinestep_progresshorizontal step progress — numbered circles, connecting lines, current step highlightedstep_reveal_sequencetabbed step-by-step sequencestepperCSS animated vertical step sequence with checkmark draw and active pulsestepsnumbered step-by-step instruction sequencestripe_backgroundanimated diagonal stripe background cardstudy_timerPomodoro focus/break timer with SVG ring — session only, no persistencesubheadingH3 subsection titlesummary_boxcondensed introductory panel with article overviewsunburstsunburst: share of a total in nested ringssurface_mapA2UI surface diagram (schema → surfaces)surface_unlockedachievement-style surface unlocked notificationsvg_path_drawSVG stroke-dashoffset self-drawing path animationtab_barhorizontal tab navigation bartab_grouppill tabs that show/hide sibling layout elementstabbed_codeorganize multiple programming language snippets inside an interactive tab containertabledata table with header row on mobiletable_of_contentsnavigate article sections using structured heading directory linkstabstabbed content panelstag_blockhorizontal wrap of neutral content chip labelstag_chipinline tag chiptag_cloudweighted tag cloud — variable size by weight, wrap layouttake_away_cardbold screenshot-ready insight cardtask_listglassmorphic structured checklist with priority and assignee badgestasks_todaytask checklist — live via Tasks API on GAS, items[] array on other surfacesterminal_blockdisplay terminal commands and code output in a simulated console windowterminal_bootanimated terminal boot sequenceternary_plotternary_plot: three-part mixes as points on a triangletestimonial_cardcustomer testimonial with photo name and quotetext_blockplain text blocktext_calloutlightweight tinted inline tip or note block no icontext_highlightprose sentence with **marked** words highlighted in accent colourtext_reveal_maskclip-path text reveal mask animationtheme_togglefloating light dark theme switchtilt_card3D perspective tilt card with glare highlight driven by cursor positiontime_estimateestimated reading duration badge for article contenttimelinechronological event timelinetoast_notificationCSS slide-in/out fixed-position notification toasttoggle_switchCSS toggle switch inputtoken_budget_metercontext window token usage meter with capacity warning colourstool_call_cardstructured agent tool call card with status, inputs, result, and latencytool_tilelarge icon+title tile, whole tile clickable, for an app/tool selector gridtooltiphover tooltip on a trigger element over a specified trigger element, using only CSS.tooltip_glossaryglossary with hover tooltipstree_viewrecursive hierarchical tree with expand/collapse per nodetreemaptreemap: part-to-whole by category or nested pathtrend_indicatorcompact inline value with mini trend bar the direction of atwo_tone_cardsplit card — colored header with icon/title, white body renders atom blockstype_scalecomputed modular type scale as a specimen sheet with CSS custom propertiestypewriterCSS character-by-character typewriter reveal with optional cursortypewriter_textCSS typewriter animation that reveals text character by charactertyping_indicatorThree-dot bouncing chat typing indicator bubbleuptime_timeline30-day uptime timeline with per-day status blocksurl_anatomyannotated URL anatomy diagramuser_greetingpersonalised greeting with active user emailuser_profile_carduser avatar, display name, email and domain — live on GAS, static fields elsewherevariant_selectorCSS radio card group for variant or option pickingversion_badgesoftware release or dependency version number tagversus_blockhead-to-head two-option versus card "VS" separator.video_cardvideo with title description and metadata to the video source.video_checkpointYouTube video with pausing quiz checkpoints — learner must answer to continuevideo_pairtwo videos side by sidevideo_thumbnailclickable video thumbnail with play button and a link to the video source.voronoivoronoi: nearest-site regions of a set of points (catchments, service areas)vote_button_groupMulti-option vote buttons in pill, neon, or default stylewaterfallwaterfall: how changes add up to a totalwave_divideranimated wave section separatorwave_terrainlive flyover of noise-shaped ridgelines scrolling toward the viewer, hero backgroundweather_nowhero temperature with drawn weather glyph and 4 supporting statsweather_outlookmulti-day range-bar forecast on one shared temperature axisweighted_wordsheadline where the agent sets each word's emphasis 1-5; heavy words land biggerword_cloudinteractive word cloud with optional live Sheet feedword_flipCSS steps() vertical word carousel in an overflow-hidden inline containerword_revealauto-play word-by-word fade-up reveal animationword_scrambleCSS steps() left-to-right character scramble-to-revealworkspace_logosingle Google Workspace product logoworkspace_logo_gridlabelled grid of Workspace logosworkspace_logo_striphorizontal strip of Workspace logosxp_baranimated XP/points progress bar with level label and level-up flashyoutuberesponsive 16:9 YouTube embedzoomable_imageimage with click-to-zoom lightbox