Android

Android, through Google's A2UI renderer. Google's androidx.a2ui library renders A2UI natively in Jetpack Compose. Add the atomic-catalog library and an Android app can show every atom listed here: Basic Catalog components draw in Compose, and the rest draw with this catalog's own renderer inside the app. Apps without the library still get something useful: the catalog's emitter reads which catalogs an app supports and sends a plain Basic Catalog version instead of a surface the app can't draw.

val catalog = A2uiAtomicCatalog.catalog(context)

Build it from source for now; a published package is coming. Source and README · tested on a Pixel 7 Pro with androidx.a2ui 1.0.0-alpha01.

547 catalog atoms also render on this surface

Intro

series link or transparency note at article top

Live preview

In Series label, I covered the background. This article picks up from there.

Body

prose paragraph block

Live preview

This is a body paragraph. It supports bold, italic, and inline code via lightweight markdown.

Heading

H2 section title

Live preview

Section Heading

Subheading

H3 subsection title

Live preview

Subheading text

Quote

pull quote or blockquote with attribution

Live preview

The vocabulary IS the discovery layer.

— A2UI
Code

syntax-highlighted fenced code block

Live preview
{
  "type": "stat_card",
  "value": "1B+",
  "label": "daily executions"
}
Pipeline

left-to-right step flow diagram

Live preview

schema.yaml ──► generate.py ──► public/ ──► Cloudflare Edge

Bullet List

unordered list with optional bold label per item

Live preview
  • First item in the list
  • Labelled item with supporting description
  • Third item
Divider

horizontal visual section break

Live preview

Youtube

responsive 16:9 YouTube embed

Live preview
Image

single image with optional caption

Live preview
Descriptive alt text for this image
Image Pair

two images side by side with captions

Diagram

D2 or SVG architecture diagram

Live preview
Github Repo Card

live GitHub repo card with stars forks and language

Live preview
Github Repo Card
A concise description of the content.
Repo Links

styled GitHub repo link list

Live preview
Closing

article closing paragraph with hashtags

Live preview

A concise description of the content.

Callout

coloured tip info warning or danger highlight box

Live preview
ℹ️
Steps

numbered step-by-step instruction sequence

Live preview
    Table

    data table with header row on mobile

    Live preview
    Example fields
    FieldTypeRequired
    valuestringyes
    labelstringyes
    trendstringno
    Tabs

    tabbed content panels

    Live preview
    Content one.
    Content two.
    Key Value

    label and value pairs in a compact grid

    Live preview
    Before After

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

    Live preview
    Before
    const html = buildPage(data);
    After
    const html = render([{"type":"body","text":"Hello"}]);
    Api Reference

    API endpoint method parameters and response docs

    Live preview
    Api Reference1

    A concise description of the content.

    Gallery

    scrollable image gallery grid

    Live preview
    Video Pair

    two videos side by side

    Live preview
    Carousel

    horizontally scrollable card carousel

    Live preview
    Slide one
    Slide one
    Slide two
    Slide two
    Timeline

    chronological event timeline

    Live preview
    1. 2024

      A2UI v1

      First atoms defined.

    2. 2025

      467 atoms

      Full schema published.

    3. 2026

      ARD catalog

      Live on a2uicatalog.ai.

    Annotated Code

    code block with numbered callout bubbles on specific lines

    Live preview
    {  "type": "stat_card",  // [1]  "value": "1B+",      // [2]  "label": "daily executions"}
      Sortable List

      drag-to-reorder list emitting {id, order} on drop

      Live preview
      Nothing to reorder.
      Photo Grid

      clickable image grid — data-row-json tiles, reuses data_table's onRowClick contract; badge + active show per-tile state

      Live preview
      Card primitive3
      Card
      Button primitive
      Button
      Open Graph brand card
      Brand card
      Photo Stepper

      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

      Live preview

      Nothing to show yet.

      Preview Frame

      iframe whose src is wired to another node's value, so picking updates it with no repaint

      Live preview
      Nothing selected yet.
      Actual Vs Estimate

      one quantity as actual + estimate, both labelled, neither omittable

      Live preview
      Actual Vs Estimate
      Actual
      1
      Estimated
      1
      Committed
      2
      Stat Card

      single KPI value with label delta and accent colour indicator

      Live preview
      Stat Card
      1,234
      Progress Bar

      labelled horizontal progress bar with percentage

      Live preview
      Progress Bar75%
      Badge Group

      row of coloured label badges

      Live preview
      Sparkline

      inline SVG trend line chart general trends.

      Live preview
      Heatmap

      grid heatmap coloured by intensity value are represented as colors in a matrix.

      Punch Card

      7x24 grid of glowing activity bubbles representing hourly commits

      Live preview
      Sankey Flow

      curved multi-column gradient flow diagram for financial or pipeline streams

      Live preview
      Where the budget goes
      Revenue → Operations: 60Revenue → R&D: 25Grants → R&D: 30Operations → Shipped: 40Operations → Cash: 20R&D → Shipped: 45R&D → Cash: 10Revenue: 85Grants: 30Operations: 60R&D: 55Shipped: 85Cash: 30Revenue85Grants30Operations60R&D55Shipped85Cash30
      SourceTargetValue
      RevenueOperations60
      RevenueR&D25
      GrantsR&D30
      OperationsShipped40
      OperationsCash20
      R&DShipped45
      R&DCash10
      Cohort Retention

      triangular cohort retention grid with continuous color-scale rendering

      Live preview
      CohortWeek 1Week 2Week 3Week 4
      Jan 2025100.0%72.0%58.0%45.0%
      Feb 202580.0%65.0%50.0%38.0%
      Donut Stat

      CSS ring chart with centre value and percentage its proportion or progress.

      Live preview
      75%
      Donut Stat
      Metric Delta

      big number metric with directional change indicator or percentage

      Live preview
      Metric Delta
      Current value
      ↑ Delta value
      Task List

      glassmorphic structured checklist with priority and assignee badges

      Live preview
      Sentiment Summary

      meeting sentiment analyzer with index arc and timeline chart

      Live preview
      1%
      Positive sentiment
      Positive1%
      Neutral0%
      Negative99%
      Trend Indicator

      compact inline value with mini trend bar the direction of a

      Live preview
      ↑ Trend Indicator
      Breadcrumb

      navigation breadcrumb trail structure.

      Live preview
      Pagination

      page number controls

      Live preview
      ←1→
      Stepper

      CSS animated vertical step sequence with checkmark draw and active pulse

      Live preview
      current: Step one
      First thing to do.
      upcoming: Step two
      Then this.
      Tab Bar

      horizontal tab navigation bar

      Live preview
      Anchor List

      in-page anchor navigation links document or to external URLs.

      Live preview
        Faq Accordion

        collapsible FAQ question and answer list the question is clicked.

        Live preview
        Item 1
        Item 2
        Glossary Term

        definition term with explanation

        Live preview
        API
        Application Programming Interface
        Footnote

        numbered footnote reference at the bottom of a section or page.

        Live preview
        [1]A concise description of the content.
        Blockquote With Avatar

        testimonial quote with avatar and attribution

        Live preview

        "The vocabulary IS the discovery layer."

        A
        Author Name
        Pull Stat

        large display number pulled from prose for emphasis descriptive label.

        Live preview
        1
        Pull Stat
        Accordion Item

        single collapsible section with toggle by clicking its header, using only CSS.

        Live preview
        Section Header
        A concise description of the content.
        Tooltip

        hover tooltip on a trigger element over a specified trigger element, using only CSS.

        Live preview
        Click to trigger
        Hover Card

        rich card revealed when hovering a trigger

        Live preview
        Hover me
        Collapsible Panel

        expandable content panel with header toggle visible and hidden states by clicking a control, using only CSS.

        Live preview
        ▶
        A concise description of the content.
        Css Modal

        pure-CSS modal dialog triggered by checkbox

        Live preview
        Audio Player

        inline audio player with controls

        Live preview
        🎵 Audio Player
        No audio source
        Audio Link

        styled link to an audio file

        Live preview
        Pdf Preview

        embedded PDF preview panel PDF.

        Document Link

        styled link to a downloadable document

        Video Thumbnail

        clickable video thumbnail with play button and a link to the video source.

        Live preview
        Video Card

        video with title description and metadata to the video source.

        Live preview
        Descriptive alt text for accessibility
        ▶
        Video Card
        A concise description of the content.
        Code Diff

        server-side unified diff view with green additions and red removals

        Live preview
        1- Old code
        1+ New code
        Code Snippet Pair

        two code blocks side by side without diff highlighting diff highlighting.

        Framed Screenshot

        device-framed screenshot with optional caption

        Live preview
        Descriptive alt text for accessibility

        A descriptive caption

        Image With Caption

        image with styled caption below

        Live preview
        Descriptive alt text for accessibility
        A descriptive caption
        Alert Banner

        full-width status alert strip

        Live preview
        ℹ️
        A concise description of the content.
        Toast Notification

        CSS slide-in/out fixed-position notification toast

        Live preview
        ℹ️
        Loading Skeleton

        animated placeholder skeleton while content loads

        Live preview
        [ loading_skeleton ]
        Empty State

        zero-data empty state with icon and call to action

        Live preview
        🔍
        Empty State
        A concise description of the content.
        Spinner

        loading spinner indicator

        Live preview
        Status Pill

        coloured status pill badge

        Live preview
        Status Pill
        Inline Feedback Message

        inline success error or warning message for validation feedback or hints.

        Live preview
        Rating Stars

        star rating display

        Live preview
        50
        Progress Circle

        CSS stroke-dashoffset animated SVG progress arc with centre percentage

        Live preview
        75%
        Action Required Card

        prominent card prompting a required user action or approval

        Live preview
        🟡
        Action Required Card
        A concise description of the content.
        Action label
        Feature Matrix

        features versus plans comparison matrix

        Pricing Tier Card

        single pricing plan card with features list

        Live preview
        Popular
        Plan name
        USD$29/mo/monthly
        • Core feature
        • Advanced analytics
        • API access
        Call to action label
        Pricing Tier Group

        side-by-side pricing plan comparison different subscription plans.

        Live preview
        Starter
        $$9/mo
          Pro
          $$29/mo
            Pros Cons List

            two-column pros and cons comparison

            Live preview
            Example subject matter
            Pros
            • ✓Scalable architecture
            • ✓Clean API design
            • ✓Excellent documentation
            Cons
            • ✗Steeper learning curve
            • ✗Limited third-party plugins
            Side By Side Spec

            two items compared spec by spec and values side-by-side.

            Live preview
            Item a name
            Weight
            Dimensions
            Item b name
            Weight
            Dimensions
            Product Spec Table

            product specifications in a clean table

            Live preview
            Product name
            Weight1.2 kg
            Dimensions20×15 cm
            Comparison Grid

            multi-item attribute comparison grid

            Live preview
            FeatureProduct AProduct B
            Core feature
            Advanced analytics
            API access
            Versus Block

            head-to-head two-option versus card "VS" separator.

            Live preview
            Entity a name
            Entity a name
            Entity a description
            VS
            Entity b name
            Entity b name
            Entity b description
            Compared on
            • Performance
            • Price
            Rating Comparison

            multiple items rated across dimensions scores.

            Live preview
            Item 1(0)
            Item 2(0)
            Capability Checklist

            feature capability tick list per tier capability using checkmarks

            Live preview
            • availableFirst item
            • availableSecond item
            Toggle Switch

            CSS toggle switch input

            Live preview
            Expandable Text

            truncated text with read more expand toggle more content.

            Live preview
            ▶ A concise description of the content.
            Click to expand and read the full details.
            Flip Card

            card that flips on hover to reveal back content

            Live preview
            Front

            Front content

            Back (flipped)

            Back content

            Image Hotspots

            image with clickable annotated hotspot overlays

            Live preview
            Css Dropdown Menu

            pure-CSS dropdown navigation menu

            Live preview
            Click to trigger
            Star Rating Input

            interactive star rating input

            Live preview
            Segmented Control

            mutually exclusive option selector strip as a single control.

            Live preview
            Zoomable Image

            image with click-to-zoom lightbox

            Live preview
            Descriptive alt text for accessibility
            Hover to zoom
            Custom Checkbox Group

            styled checkbox group input

            Live preview
            Group label
            Css Slide Panel

            CSS-only slide-in panel drawer

            Live preview
            Testimonial Card

            customer testimonial with photo name and quote

            Live preview
            ★★★★★
            “The catalog cut our build time in half.”
            A
            Ada L.
            Platform Lead
            Star Rating Display

            read-only star rating with score and count

            Live preview
            10.0(1 reviews)
            Avatar Group

            stacked user avatar group with overflow count or community.

            Live preview
            AliceBob
            +3
            Avatar Group
            Contributor List

            list of contributors with avatar and role

            Live preview
            Contributor List
            A
            Alice
            Developer
            B
            Bob
            Designer
            Customer Logo Grid

            grid of customer or partner logos

            Live preview
            Customer Logo Grid
            Company A
            Company B
            Social Proof Banner

            social proof strip with stats and logos

            Media Mention Card

            press or media mention with logo and quote

            Live preview
            Expert Endorsement

            expert quote with credentials and photo

            Live preview

            "The vocabulary IS the discovery layer."

            Expert name
            Expert name
            Expert title
            Expert organization
            Review Callout

            highlighted customer review excerpt by a star rating.

            Live preview
            Product name
            ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
            "Review text"
            — Author Name
            Social Feed Embed

            embedded social media post or feed or Instagram post.

            Live preview
            🐦@
            Terminal Block

            display terminal commands and code output in a simulated console window

            Live preview
            bash
            $ npm install a2ui
            ✓ Done in 1.2s
            File Tree

            present hierarchical directory structures and files for software project navigation

            Live preview
            Tabbed Code

            organize multiple programming language snippets inside an interactive tab container

            Live preview
            Http Request Block

            document REST API endpoints with HTTP methods, headers, and payloads

            Env Var List

            list configuration environment variables with descriptions and default values

            Live preview
            VariableDescriptionDefaultRequired
            Prerequisite Checklist

            highlight prerequisite knowledge and system requirements before

            Live preview
            📋 Prerequisite Checklist
            • ⬜First item
            • ⬜Second item
            Keyboard Shortcut

            display visual keyboard key combinations for application shortcuts and hotkeys

            Live preview
            CtrlShiftKsubmit
            Api Param Table

            reference table detailing API parameters, data types, and default values

            Live preview
            ParameterTypeRequiredDefaultDescription
            Version Badge

            software release or dependency version number tag

            Live preview
            v1 · Active
            Deprecation Notice

            warning banner for deprecated features or unsupported APIs

            Live preview
            ⛔ Deprecated
            Alternative: new_component
            Experimental Banner

            highlight experimental or unstable feature notice callout

            Live preview
            🧪
            Experimental: Your action was completed successfully.
            Cli Command

            copyable single-line terminal command execution string

            Live preview
            $ npm install a2ui
            Copy Code Button

            button to copy specified text or code to clipboard

            Live preview
            Log Output

            scrollable monospace server or compiler log output block

            Live preview
            2026-06-28 INFO: Process started
            2026-06-28 INFO: Completed.
            Json Tree Viewer

            expandable visual explorer for nested JSON data

            Live preview
            JSON
            {
              "key": "value",
              "count": 42
            }
            Key Takeaways

            highlighted summary of main conclusions and critical takeaways

            Live preview
            🔑 Key takeaways
            • First key point
            • Second key point
            • Third key point
            Summary Box

            condensed introductory panel with article overview

            Live preview
            ✨ Summary

            A concise description of the content.

            Learning Objectives

            checklist of educational goals and competencies gained post-reading

            Live preview
            🎯 Learning Objectives
            • ✓Understand the core concept
            • ✓Apply it in practice
            • ✓Evaluate the results
            Changelog Entry

            timeline entry documenting product modifications per release

            Live preview
            1.2.02026-06-28
            Added
            • New feature added
            Fixed
            • Bug fix applied
            Release Notes

            grouped product release documentation by change category

            Live preview
            Release Notes
            Further Reading

            curated references for extending topic research

            Live preview
            📚 Further reading
            GitHub
            Resources List

            downloadable project assets and attached resource links

            Live preview
            📎 Resources
            • Item 1
            • Item 2
            Sidebar Note

            off-axis container for peripheral notes or caveats

            Live preview
            Difficulty Badge

            label technical complexity level of blog content

            Live preview
            Intermediate
            Caution Block

            highlight dangerous pitfalls or critical destructive actions

            Live preview
            ⚠️ Caution
            Your action was completed successfully.
            Checklist Interactive

            interactive task tracking checklist for article milestones

            Live preview
            Glossary Inline

            inline hover tooltips for complex technical term definitions

            Live preview
            API
            Time Estimate

            estimated reading duration badge for article content

            Live preview
            ⏱ 1 min read
            Progress Checkpoint

            milestone progress indicator across multi-step tutorial

            Live preview
            1
            2
            3
            4
            5
            Step 2 of 5
            Social Share Bar

            social media buttons for sharing article to external networks

            Newsletter Cta

            email subscription form for recurring reader updates

            Live preview
            📬 Main headline text here
            Author Bio Card

            profile block displaying content creator biographical details

            Live preview
            Author Bio Card
            Author Bio Card

            Short author biography goes here.

            Related Posts Grid

            grid of recommended alternative post reading cards

            Live preview
            Related reading
            Series Overview Card

            navigation index for multi-part article series parts

            Live preview
            📖 Series name
            Reaction Group

            emoji reaction counters collecting reader sentiment feedback

            Live preview
            Linkedin Post Image

            LinkedIn post image preview — conviction_card, stat_card, or carousel_slide mode

            Live preview
            “The vocabulary IS the discovery layer.”
            Source: Example Report, 2026

            Preview — export as image for LinkedIn

            Weighted Words

            headline where the agent sets each word's emphasis 1-5; heavy words land bigger

            Live preview
            A2UI
            Stance

            claim set in type whose weight, size and tracking encode the stated confidence

            Live preview
            stance
            Claim
            confidence 50%
            Receipt

            claim plus numbered, sourced evidence lines printed as a till receipt; newest line prints in

            Live preview
            EVIDENCE RECEIPT
            1
            (no evidence yet)
            CONFIDENCE0 ITEMS
            Sources listed. No unsourced stats.
            Changed Mind

            struck-through old belief, new belief lands beneath; optional what-changed-it line

            Live preview
            I used to think
            // example code
            Now I think
            // example code
            Type Scale

            computed modular type scale as a specimen sheet with CSS custom properties

            Live preview
            type scale
            Major third 1.25
            base 16px · 9 steps
            +6
            The quick brown fox
            61.04px / 3.815rem
            +5
            The quick brown fox
            48.83px / 3.052rem
            +4
            The quick brown fox
            39.06px / 2.441rem
            +3
            The quick brown fox
            31.25px / 1.953rem
            +2
            The quick brown fox
            25.00px / 1.563rem
            +1
            The quick brown fox
            20.00px / 1.250rem
            0
            The quick brown fox
            16.00px / 1.000rem
            -1
            The quick brown fox
            12.80px / 0.800rem
            -2
            The quick brown fox
            10.24px / 0.640rem
            :root {
              --step-6: 3.815rem; /* 61.04px */
              --step-5: 3.052rem; /* 48.83px */
              --step-4: 2.441rem; /* 39.06px */
              --step-3: 1.953rem; /* 31.25px */
              --step-2: 1.563rem; /* 25.00px */
              --step-1: 1.250rem; /* 20.00px */
              --step-0: 1.000rem; /* 16.00px */
              --step-n1: 0.800rem; /* 12.80px */
              --step-n2: 0.640rem; /* 10.24px */
            }
            Readability Card

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

            Live preview
            readability
            59.7
            Flesch reading ease · fairly hard
            6
            words
            1
            sentences
            1 min
            to read
            6.00
            words / sentence
            1.67
            syllables / word
            6
            longest sentence
            A concise description of the content.
            Drop Cap

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

            Live preview

            A concise description of the content.

            Contrast Audit

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

            Live preview
            contrast audit · WCAG 2.1
            1 of 1 pass AA
            Aa Text
            example · #767676 on #ffffff
            AA passAA large passAAA fail
            4.54:1
            Share Quote

            prominent blockquote optimised for social media sharing

            Live preview

            "A concise description of the content."

            🐦 Tweet this
            Follow Cta

            call to action driving social media community expansion

            Live preview
            1
            Follow Button

            direct profile subscription button for social platforms

            Reading Progress Bar

            track and display article reading progress completion status

            Live preview
            Table Of Contents

            navigate article sections using structured heading directory links

            Live preview
            Article Hero

            display prominent introductory headline and banner media

            Live preview
            Article Hero
            Article Hero
            Scroll To Top

            quickly return viewport to top of page document

            Live preview
            Article Series Nav

            navigate interconnected parts inside multi-part blog series

            Live preview
            Embed Codepen

            embed interactive CodePen workspace development environments

            Live preview
            ✏️ CodePen · CodePen Embed
            Embed Stackblitz

            embed dynamic StackBlitz live IDE code sandboxes

            Live preview
            ⚡ StackBlitz · StackBlitz
            Embed Gist

            embed version-controlled GitHub Gist source code snippets

            Live preview
            🐙 GitHub Gist
            Embed Tweet

            embed live public Twitter status updates and media

            Live preview
            🐦@

            Embed Google Slides

            embed interactive Google Slides presentation slide decks

            Live preview
            📊 Google Slides
            Lottie Animation

            render lightweight high-performance vector Lottie animations

            Live preview
            Figma Embed

            embed collaborative live Figma design file prototype previews

            Live preview
            🎨 Figma · Figma Design
            No Figma URL
            Color Swatch Grid

            grid of named color swatches with hex values

            Live preview
            #2563eb
            #2563eb
            #047857
            #047857
            #f59e0b
            #f59e0b
            #dc2626
            #dc2626
            Live Demo Embed

            embed interactive live demo sandbox iframe

            Live preview
            https://example.comOpen in new tab →
            Benchmark Comparison

            side-by-side performance benchmark comparison bars

            Live preview
            Item 1Item 10Item 2Item 20
            Chartjs Bar

            static accessible bar chart (group, stack, relative, overlay; vertical or horizontal; log axis)

            Live preview
            No numbers to draw as bars.
            Chartjs Line

            interactive Chart.js line chart for trend data

            Live preview
            Dataset A
            80 67 54 41 28 Category ACategory BCategory CCategory D
            Data Table Sortable

            sortable data table with column headers

            Live preview
            NameValueStatus
            Example42Active
            Another17Pending
            Metric Comparison Card

            metric card comparing current vs previous period

            Live preview
            Metric Comparison Card
            Previous
            1
            ↑ +0.0%
            Current
            1
            Mini Sparkline Set

            compact grid of multiple labeled sparklines

            Live preview
            Series A40
            Series B35
            Status Dashboard

            grid of service status indicators with color states

            Live preview
            System Status
            Some systems are experiencing degraded performance
            API
            Operational
            DatabaseElevated query latency
            Degraded
            Uptime Timeline

            30-day uptime timeline with per-day status blocks

            Live preview
            1.00%
            Command Palette

            keyboard-driven command palette with shortcut hints

            Live preview
            Create
            New post⌘N
            New video
            Navigate
            Templates
            My projects⌘P
            Search Result Card

            single search result card with title snippet URL

            Live preview
            Search Result Card
            A concise description of the content.
            Post Metadata Bar

            article metadata bar with author date read time

            Live preview
            Footnote Group

            numbered footnote list at section or article end

            Live preview
            1. [1]Source: Example Report, 2026.
            Notification Badge

            unread count badge overlaid on icon element

            Live preview
            New
            Expandable List

            nested expandable tree list with collapsible children

            Live preview
            •
            •
            Poll Block

            poll with question options and vote count bars

            Live preview

            📊 Which option do you prefer?

            0 votes (0.0%)
            0 votes (0.0%)
            0 votes (0.0%)
            Abbr Tooltip

            inline abbreviation with hover tooltip full form

            Live preview
            A concise description of the content.
            Copy To Clipboard

            copy-to-clipboard button with inline code and feedback

            Live preview
            A concise description of the content.
            Conversion Funnel

            pipeline conversion funnel with step tapering and leak markers

            Live preview
            —
            —
            0% of prev
            Gauge Sla

            radial SLA gauge with glowing pointer and large metric value

            Live preview
            75
            Masonry Elevation

            coursed block/brick wall elevation with bond-pattern stagger and render-style options

            Live preview
            Stacked Area

            stacked area chart of series layers over an ordered axis (zero baseline, optional 100% / streamgraph offsets)

            Live preview
            Monthly active users by plan (thousands)
            0
            50
            100
            150
            200
            Jan
            Feb
            Mar
            Apr
            May
            Jun
            FreeProTeam
            The top edge is the total of all layers; each layer’s thickness is its own value, and the exact values are in the table.
            PointFreeProTeam
            Jan42186
            Feb48229
            Mar552712
            Apr613318
            May703824
            Jun784631
            Scatter Trend

            coordinate scatter plot with regression trend line

            Call Mood Board

            visual summary board of call sentiments moods and active themes

            Live preview
            ⬡ Room mood
            Focused 80%
            Energised 65%
            Github Activity Grid

            SVG GitHub-style contribution grid and activity tracker

            Form

            labelled form with fields and submit button

            Live preview
            Form Input

            single labelled input field

            Live preview
            Form Select

            labelled dropdown select with options

            Live preview
            Form Radio Group

            radio button group for single-option selection

            Live preview
            Form Checkbox Group

            checkbox group for multi-option selection

            Live preview
            Form Switch Group

            group of labelled toggle switches

            Live preview
            Form Slider

            numeric range slider input

            Live preview
            1
            15
            Form Date Picker

            date or date-range picker input

            Live preview
            Modal

            modal dialog overlay with title and content

            Live preview
            Deploy confirmation

            This will redeploy a2uicatalog-full to production.

            Files changed
            3
            Follow Up Chips

            clickable follow-up suggestion chips

            Live preview
            {'label': 'Item 1'}{'label': 'Item 2'}
            Choicebox Group

            card-style option selector with icon, title, description per card

            Live preview
            Feedback Prompt

            thumbs or star rating feedback collection widget

            Live preview
            Was this helpful?
            Entity List

            named resource rows with avatar, status badge, and meta

            Live preview
            I
            Item 1
            I
            Item 2
            Prompt Template

            LLM prompt with highlighted {variable} slots and copy button

            Live preview
            prompt template
            Hello, {{name}}!
            Model Card

            AI model spec card with context window, pricing, and capability badges

            Live preview
            Model Card
            VisionCode executionWeb search
            Conversation Snippet

            user prompt and AI response as chat bubbles

            Live preview
            You
            How does this work?
            Assistant
            Here's a clear explanation of how it works.
            Shortcut Legend

            keyboard shortcut cheat-sheet grid with key combos and labels

            Live preview
            Rating Summary Bar

            star rating histogram with percentage bars per star level

            Live preview
            75.0/ 5 · 5 ratings
            5★
            960%
            4★
            600%
            3★
            240%
            Roadmap Card

            quarter-based product roadmap with status-tagged milestones

            Live preview
            Notification Stack

            persistent notification inbox list with unread indicators

            Live preview
            Inline Alert

            inline icon-plus-text alert embedded in content flow

            Live preview
            ℹ️ Your action was completed successfully.
            Tag Block

            horizontal wrap of neutral content chip labels

            Live preview
            typescriptreacta2ui
            Variant Selector

            CSS radio card group for variant or option picking

            Live preview
            Markdown Block

            inline markdown string (bold, italic, code, links) rendered to HTML

            Live preview
            A concise description of the content.
            Chartjs Pie

            multi-slice pie or donut SVG chart with legend

            Live preview
            40%35%25%
            Category A40%
            Category B35%
            Category C25%
            Text Callout

            lightweight tinted inline tip or note block no icon

            Live preview
            Text Callout
            A concise description of the content.
            Source Citation

            numbered RAG source card with title excerpt and URL

            Live preview
            Sources
              Llm Comparison Table

              side-by-side multi-model output comparison table

              Live preview
              GPT-4Claude Sonnet
              Confidence Bar

              labelled probability bar with colour-coded confidence fill

              Live preview
              Confidence Bar75%
              Token Budget Meter

              context window token usage meter with capacity warning colours

              Live preview
              Context window1 / 5 (20%)
              Product Thumbnail

              product card with image, price, status badge, and tags

              Live preview
              Product Thumbnail
              $29/mo
              Order Status Card

              e-commerce order card with status badge and line item list

              Live preview
              Order Order numberActive
              1
              Placed
              2
              Processing
              3
              Shipped
              4
              Delivered
              Total
              Inventory Table

              inventory table with SKU, stock levels, and low-stock row highlight

              Live preview
              NameSKUStockPriceStatus
              —————
              —————
              Jira Ticket

              Jira issue card with type icon, status lozenge, priority, and assignee

              Live preview
              ✓example-idTo Do
              A concise description of the content.
              🟡 Medium
              Sprint Board

              kanban sprint board with named columns and compact issue cards

              Live preview
              To Do0
              In Progress0
              Done0
              Lozenge

              Atlassian-semantic status pill with defined appearance variants

              Live preview
              New
              Data Grid

              enterprise data grid with typed columns, row selection, and

              Live preview
              Deployments
              NameStatus
              weblive
              meetbeta
              Tree View

              recursive hierarchical tree with expand/collapse per node

              Live preview
              ▶ 📁src/
              📄index.ts
              📄package.json
              Heatmap Calendar

              calendar month heatmap with date-value density colouring

              Live preview
              Combobox

              searchable filterable dropdown — shadcn/Headless UI pattern

              Live preview
              Feature Grid

              icon + title + description feature grid — Tailwind UI pattern

              Live preview
              Navigation Menu

              multi-level horizontal nav with submenu panels — Radix pattern

              Live preview
              Multi Select Input

              chip-style multi-value select input — shadcn pattern

              Live preview
              Otp Input

              N-box one-time password digit input — shadcn OTP pattern

              Live preview
              Skill Bars

              labeled horizontal progress bars list — percent fill, per-bar color

              Live preview
              Python85%
              JavaScript70%
              TypeScript65%
              Icon Stat Row

              icon + big number + label stat strip — more visual than metric_row

              Live preview
              1.2M
              Views
              42K
              Clicks
              3.5%
              CTR
              Color Section

              colored background wrapper — tint/solid/dark, renders child atom blocks

              Live preview
              Tag Cloud

              weighted tag cloud — variable size by weight, wrap layout

              Live preview
              Step Progress

              horizontal step progress — numbered circles, connecting lines, current step highlighted

              Live preview
              ✓
              Step one
              2
              Step two
              Split Pane

              two-panel split — distinct bg per side, each side renders atom blocks

              Live preview

              Before — six hoops, one story, no distinction between abandoned and load-bearing.

              After — five hoops in the working path, one detour clearly marked separate.

              Gradient Hero

              light gradient hero — badge, large title, subtitle, CTA button

              Live preview
              Gradient Hero
              Icon List

              icon-circle list — emoji/icon per item, label + text, color per item

              Live preview
              Highlight Box

              highlight box — gradient/solid/outline style, icon, title, text

              Live preview
              Two Tone Card

              split card — colored header with icon/title, white body renders atom blocks

              Live preview
              Multi-Step Flow
              ComponentId/ChildList atom

              Each step is independently addressable by ComponentId — an agent can flip one step's status without resending the whole surface.

              Metric Row

              horizontal metric strip — value, label, prefix/suffix, trend up/down

              Live preview
              $1.2M↑
              Revenue
              42K↑
              Users
              Numbered List

              decorative numbered list — large background numbers, circular badges, or bordered stage cards

              Live preview
              Page Header

              app-style page header — title, subtitle, icon, accent, tag badge

              Live preview
              Page Header
              Back Button

              back navigation — url, nav_slug, or history.back(); ghost/outline/text style

              Live preview
              Section Break

              section divider — optional centered label, solid/dashed/dots style

              Live preview

              Chip Group

              chip/tag row — label, color, url, active state; wrap or scroll layout

              Live preview
              WebMeetChat
              Filterable List

              list with status chips that filter its rows — items with title, detail, status; All plus one chip per status, with counts

              Live preview
              Showing 2 of 2
              Nothing matches this filter.
              Columns

              multi-column layout — 2–6 cols, each column holds atom blocks

              Live preview

              Public — every stable atom, no auth required.

              Full — stable and preview atoms, gated behind Cloudflare Access.

              Person Card

              person card — name, role, photo, bio, tags, email, linkedin

              Live preview
              P
              Person Card
              Agenda Block

              time-slotted agenda — slots with time, title, speaker, location, type

              Live preview
              09:00
              Opening keynote
              10:00
              Workshop A
              Risk Flag

              risk list — critical/high/medium/low with title, description, mitigation

              Live preview
              Medium
              Medium
              Action Items

              action items table — action, owner, due date, status

              Live preview
              ActionOwnerDueStatus
              ——⭕ open
              ——⭕ open
              Bento Grid

              asymmetric bento-box feature tile grid — MagicUI/shadcn pattern

              Live preview
              Cta Section

              full-width CTA banner with headline and buttons — Tailwind UI pattern

              Animated Counter

              CSS-only animated counter that counts up to target values

              Live preview
              0
              Media Stream Card

              Auto-detecting YouTube/Loom/Slides/Vimeo embed with skeleton

              Live preview
              ▶Media
              Live Aggregator

              Real-time comparative bars for votes, counts, or percentages

              Live preview
              Live Feed
              Vote Button Group

              Multi-option vote buttons in pill, neon, or default style

              Live preview
              Effect Overlay

              CSS confetti/trophy/pulse celebration overlay triggered by name

              Live preview
              🎉
              Skeleton Stage Card

              Dark shimmer skeleton loader in card/list/media/chat variants

              Live preview
              Marquee Strip

              infinite CSS-animated horizontal marquee of text or logo items

              Live preview
              Item 1Item 2
              Typewriter Text

              CSS typewriter animation that reveals text character by character

              Live preview
              A concise description of the content.
              Animated Border Card

              card with CSS rotating gradient animated border

              Live preview
              A concise description of the content.
              Aurora Background

              animated aurora borealis gradient blob background, CSS-only

              Live preview
              Flow Field

              luminous noise-field streams converging on a glowing focus, hero background

              Live preview
              Particle Type

              agent-supplied words assemble from particles; pointer scatters them

              Live preview
              A2UI
              Light Type

              agent-supplied words made of flowing light, streams masked to the glyphs

              Live preview
              A2UI
              Living Type

              agent-supplied headline whose letters breathe and lean toward the pointer

              Live preview
              A2UI
              Orbit Mark

              the a2ui orbit-mark logo with flow-field streams captured into its orbits

              Live preview
              Halftone Wave

              animated halftone dot grid riding a wave, works on light backgrounds

              Live preview
              Message Lanes

              packets streaming from an agent node into a surface node that unfolds cards on arrival

              Live preview
              Signal Tunnel

              radial light streaks converging on (or radiating from) a vanishing point, hero background

              Live preview
              Gradient Mesh Live

              soft colour blobs drifting on a noise field, pointer-reactive, hero background

              Live preview
              Wave Terrain

              live flyover of noise-shaped ridgelines scrolling toward the viewer, hero background

              Live preview
              Orbit Rings

              tilted orbit rings, each a tier of labelled satellites around a centre node

              Live preview
              Motion Timeline

              timeline-driven stage that choreographs child atoms with tokenised easing, a camera, captions and a scrubber

              Live preview
              0:00
              Motion Group

              staggered entrance for a list of blocks, with tokenised easing

              Live preview

              Example content.

              Motion Tokens

              reference card of the named easing curves, duration tokens and entrance effects

              Live preview
              motion tokens
              expo-out
              cubic-bezier(0.16,1,0.3,1) · arrivals: fast launch, long soft landing
              quint-out
              cubic-bezier(0.22,1,0.36,1) · settling UI: a touch gentler than expo-out
              decelerate
              cubic-bezier(0,0,0.2,1) · elements entering from off-screen
              standard
              cubic-bezier(0.4,0,0.2,1) · on-screen moves: cursor glides, reflows
              emphasized
              cubic-bezier(0.2,0,0,1) · the one hero move on a scene
              quart-in-out
              cubic-bezier(0.76,0,0.24,1) · camera moves and wipes
              expo-in-out
              cubic-bezier(0.87,0,0.13,1) · big symmetric transitions
              accelerate
              cubic-bezier(0.4,0,1,1) · exits: leaving the stage
              overshoot
              cubic-bezier(0.34,1.56,0.64,1) · playful landings (use once, sparingly)
              anticipate
              cubic-bezier(0.68,-0.55,0.27,1.55) · wind-up before a move (use once)
              ease
              cubic-bezier(0.25,0.1,0.25,1) · CSS default
              ease-in
              cubic-bezier(0.42,0,1,1) · CSS ease-in
              ease-out
              cubic-bezier(0,0,0.58,1) · CSS ease-out
              ease-in-out
              cubic-bezier(0.42,0,0.58,1) · CSS ease-in-out
              linear
              cubic-bezier(0,0,1,1) · progress bars and loops only
              instant
              120ms
              quick
              240ms
              base
              400ms
              slow
              640ms
              cinematic
              1000ms
              enter effects: fade · rise · drop · slide-left · slide-right · scale · blur · wipe · pop
              Motion Layer

              scene container for a motion_timeline: children placed in percent of the layer, animated as one

              Live preview

              Example content.

              Motion Text

              kinetic type that reveals by line, word or character as progress advances

              Live preview
              Text
              Motion Shape

              bar, rule, disc, sweeping ring or soft glow that draws with progress

              Live preview
              Motion Counter

              big counting number with an optional caption

              Live preview
              100
              Motion Pill

              rounded call-to-action chip with an accent word that stays on screen across scenes

              Live preview
              Label
              Motion Checklist

              card whose items tick off in turn as progress advances

              Live preview
              Item
              Motion Orbit

              tiles that fly out onto an ellipse and orbit a centre as progress advances

              Live preview
              A
              Motion Code

              code window that types itself in as progress advances

              Live preview
              $ npm install a2ui added 42 packages ✓ Done in 1.2s
              Motion Mark

              the A2UI Catalog logo mark that draws itself and sends an electron round its orbit

              Live preview
              Motion Browser

              search box, filter chips and a grid of cards with live atom previews that types and rises in

              Live preview
              Card 1
              Card 2
              Motion Sketch

              strokes that draw themselves in turn, like an agent sketching

              Live preview
              Motion Leader

              callout line with a start dot, arrowhead and label that draws itself

              Live preview
              Motion Mask

              reveals child atoms through a growing blob, circle, diagonal wipe, rounded rectangle, bars, diamond, halftone, conic sweep or slats

              Live preview

              Example content.

              Motion Envelope

              envelope that opens to reveal (or seals in) a letter of atoms, with address and stamp

              Live preview

              Example content.

              Motion Rays

              sunburst or speed-line background that fans in and turns

              Live preview
              Motion Hud

              viewfinder HUD with corner brackets, counting timecode and progress bar

              Live preview
              Motion Lower Third

              name and role lower third that draws and slides in

              Live preview
              Motion Lower Third
              Motion Finish

              film grain, vignette, light leaks and glass sheen over the frame

              Live preview
              Motion Arch

              architecture diagram that draws itself, with payloads moving along its edges

              Live preview
              Motion Video

              muted video whose frame follows the film clock

              Live preview
              Motion Shader

              seekable WebGL liquid or aurora background with a CSS gradient fallback

              Live preview
              Dot Grid Background

              CSS repeating dot or grid pattern panel background

              Live preview
              Shimmer Button

              button with CSS background-position shimmer sweep animation

              Live preview
              Card Stack

              CSS-fanned stack of 2–4 cards with rotation and opacity tiers

              Live preview
              Card 1
              First card content.
              Meteor Shower

              CSS-animated diagonal falling meteor streaks on a dark panel

              Live preview
              Blur Fade In

              CSS blur-to-focus fade-in container reveal

              Live preview
              Fades in on load
              No JavaScript — pure CSS `@keyframes` combining `filter:blur()` and `opacity`.
              Glow Button

              CSS box-shadow state-signalling button with disabled/ready/fired glow

              Live preview
              Animated Beam

              CSS stroke-dashoffset animated SVG beam between two labelled nodes

              Live preview
              From lTo lab
              Encrypted Reveal

              CSS steps() scramble-to-reveal text animation

              Live preview
              Word Flip

              CSS steps() vertical word carousel in an overflow-hidden inline container

              Live preview
              AmazingFastReliableScalableAmazing
              Sonar Pulse

              CSS concentric ring pulse animation for attention signalling

              Live preview
              critical
              Typewriter

              CSS character-by-character typewriter reveal with optional cursor

              Live preview
              |
              Number Odometer

              Slot-machine digit-column flip to target number

              Live preview
              01234567891
              Typing Indicator

              Three-dot bouncing chat typing indicator bubble

              Live preview
              Agentis typing
              Countdown Timer

              Flip-clock countdown timer display (static tiles, data-driven ticking)

              Live preview
              0
              4
              min
              :
              5
              9
              sec
              Gradient Text

              Animated gradient-fill heading text via CSS background-clip

              Live preview
              A concise description of the content.
              Reveal On Scroll

              IntersectionObserver scroll-triggered fade+slide reveal

              Live preview
              Word Scramble

              CSS steps() left-to-right character scramble-to-reveal

              Live preview
              Unscramble:
              Svg Path Draw

              SVG stroke-dashoffset self-drawing path animation

              Live preview
              Agent Sketchpad

              composite multi-shape SVG canvas, newest shape draws itself in

              Live preview
              Parallax Card

              3D CSS perspective tilt card with mousemove parallax depth

              Live preview
              Quiz Question

              MCQ or true/false question with CSS-only correct/wrong feedback

              Live preview

              Which option do you prefer?

              Select an option to reveal the answer.

              Fill In Blank

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

              Live preview

              Hello, {{name}}!

              Match Exercise

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

              Live preview

              Match each term to its definition.

              API_KEY
              ENV
              production
              your-key
              Hint Reveal

              show/hide hint disclosure using HTML details/summary — no JS

              Live preview
              💡 Show hint
              1
              Achievement Badge

              unlockable achievement badge with locked/unlocked state and optional date

              Live preview
              🏆
              Achievement Badge
              Score Summary

              end-of-exercise score card with correct/total, percentage, grade, and CTA

              Live preview
              20%
              Failed
              1 / 5 correct
              Xp Bar

              animated XP/points progress bar with level label and level-up flash

              Live preview
              752 / 75 XP
              Lesson Nav

              prev/next lesson navigation with module context and optional completion checkbox

              Live preview
              Course Progress Card

              course-level progress card with per-module bars and aggregate completion ring

              Live preview
              Course title
              0%
              Highlighted Text

              highlighted text passage with optional hover margin annotation note

              Live preview
              A concise description of the content.
              Drive File List

              live list of Drive folder files

              Live preview
              🗂️ Drive file list — Folder ID: [] (max 10 results). Live data requires server-side auth.
              Sheet Preview

              live read-only Google Sheet range preview

              Live preview
              📊 Sheets preview — 1BxiMVs0XRA5nFMdKvBd… · Sheet name · A1:D10. Live data requires server-side auth.
              Gmail Summary

              list of recent Gmail messages matching query

              Live preview
              📧 Gmail summary — query: inbox is:unread, max 5 results. Live data requires server-side auth.
              Calendar Upcoming

              list of upcoming calendar events

              Live preview
              📅 Upcoming Events
              Live calendar events require Google Calendar auth (max 5).
              User Greeting

              personalised greeting with active user email

              Live preview
              Welcome back, there! 👋
              Script Run Button

              button to trigger server-side Apps Script function

              Live preview
              Calendar Today

              today's calendar events from the user's default calendar

              Live preview
              📅 Today's Calendar
              Live calendar events require Google Calendar auth (max 5).
              Sheet Stats

              aggregate stats from a sheet range displayed as stat badges

              Live preview
              📊 Sheet Stats — live stats require server-side auth.
              Gmail Unread Count

              unread count badges for Gmail labels

              User Profile Card

              user avatar, display name, email and domain — live on GAS, static fields elsewhere

              Live preview
              UP
              User Profile Card
              user@example.com
              Drive Storage Usage

              Drive storage quota progress bar — live on GAS, or pass used_gb/total_gb for static

              Live preview
              Drive Storage1.0 GB / 5.0 GB
              20% used
              Sheet Form Submit

              inline form that appends a row to a Google Sheet on submit

              Tasks Today

              task checklist — live via Tasks API on GAS, items[] array on other surfaces

              Live preview
              ✅ Today's Tasks
              ⬜
              ⬜
              Cursor Glow

              ambient glowing orb that lerp-follows the cursor with screen blend

              Live preview
              Cursor Trail

              chain of fading dots following the cursor with worm physics

              Live preview
              Particle Burst

              click anywhere to burst coloured gravity particles from click point

              Live preview
              Spotlight Cursor

              dark overlay with cursor-following circular cutout — torch effect

              Live preview
              Magnetic Element

              content that drifts toward cursor and springs back with overshoot

              Live preview
              magnetic element
              Tilt Card

              3D perspective tilt card with glare highlight driven by cursor position

              Live preview
              Hover to tilt
              Gradient Heading

              gradient-fill standalone heading

              Live preview
              A concise description of the content.
              Display Quote

              typographic pull quote with decorative mark and attribution

              Live preview
              “
              A concise description of the content.
              Split Stat

              two-column stat + text keynote layout with neon glow

              Live preview
              1
              Word Reveal

              auto-play word-by-word fade-up reveal animation

              Live preview
              Aconcisedescriptionofthecontent.
              Section Label

              uppercase section marker with glowing accent pill

              Live preview
              NEW
              Count Up Stat

              animated count-up number stat with cubic ease, auto-plays on load

              Live preview
              1
              Text Highlight

              prose sentence with **marked** words highlighted in accent colour

              Live preview

              A concise description of the content.

              Reveal Line

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

              Live preview
              A concise description of the content.
              Canvas Plexus

              animated particle plexus with proximity lines and mouse repulsion

              Live preview
              Spring Nodes

              mass-spring graph, settled static layout by default; interactive true adds drag-to-pin physics

              Live preview
              WebAPIDatabaseAuthCacheQueue
              • Web: linked to API, Auth
              • API: linked to Web, Database, Auth, Cache, Queue
              • Database: linked to API
              • Auth: linked to API, Web
              • Cache: linked to API
              • Queue: linked to API
              Isometric Mesh

              rotating 3D isometric mesh with height-colour mapping and drag-rotate

              Live preview
              Geo Iso Takeoff

              isometric 3D canvas of A321neo takeoff from LFBO — animated roll, rotation, gear-up, climb; HUD with airline/runway

              Live preview
              Takeoff
              Geo Iso Rocket Launch

              isometric 3D canvas of Ariane 6 rocket launch from Kourou — animated liftoff and ascent; mission HUD

              Live preview
              Geo Iso Heli Hover

              isometric 3D canvas of H160 helicopter hover — rotor animation, downwash, HUD

              Live preview
              Geo Iso Fleet

              tabbed isometric fleet demo — A321neo takeoff + Ariane 6 launch + H160 hover with tab switcher

              Live preview
              Fleet
              Airspace Command Deck

              Toulouse TMA radar canvas with animated flights, HUD overlay, and live METAR ticker

              Live preview
              LFBO TMA
              Toulouse Blagnac Approach Control
              Data Source

              generic HTTP feed — server-side initial fetch, client-side refresh via surface transport

              Live preview
              🗄️
              Data Source
              1
              Metar Feed

              live METAR weather feed — parsed wind, temp, QNH for an ICAO station

              Live preview
              ✈️ METAR — · Live weather data requires server-side fetch.
              Paragraph

              prose paragraph (GAS alias for body)

              Live preview

              A concise description of the content.

              Text Block

              plain text block

              Live preview
              A concise description of the content.
              Blockquote

              styled pull-quote with attribution

              Live preview
              A concise description of the content.
              Spacer

              vertical whitespace gap

              Live preview
              Tag Chip

              inline tag chip

              Live preview
              New
              Badge

              inline badge pill

              Live preview
              New
              Inline Code

              monospace inline code span

              Live preview
              A concise description of the content.
              Code Block

              syntax-highlighted code block

              Live preview
              A concise description of the content.
              Link Button

              text hyperlink button

              Live preview
              Cta Button

              call-to-action button

              Live preview
              Nav Link

              single CTA link to a named page — appends from= automatically for back-button support

              Live preview
              Info Card

              simple info card with title and body

              Live preview
              Info Card
              A concise description of the content.
              Ai Build Trace

              Gemini token usage trace card

              Live preview
              🤖 AI Build Trace
              Gemini Prompt

              inline Gemini prompt input widget

              Live preview
              ✨Gemini
              Dark Hero

              dark hero banner with gradient and CTA

              Live preview
              Dark Hero
              Glowing Stat

              neon-glow stat number on dark card

              Live preview
              1
              Glass Card

              frosted-glass card with blur backdrop — dark-theme highlight box

              Live preview
              Gradient Border Card

              animated gradient border card

              Live preview
              Floating Orbs

              decorative blurred colour orbs background

              Live preview
              Neon Text

              neon-glow coloured text

              Live preview
              A concise description of the content.
              Dark Feature Grid

              dark-theme feature grid with icons

              Dark Divider

              dark-theme horizontal divider

              Live preview
              Ambient Gradient

              animated aurora/ambient gradient background

              Live preview
              Depth Stack

              stacked cards with depth parallax

              Live preview
              Card 1
              First card content.
              Card 2
              Second card content.
              Scramble Reveal

              character-scramble text reveal on scroll

              Live preview
              Scroll Trigger

              scroll-triggered animated reveal

              Live preview
              A concise description of the content.
              Flow Connector

              animated beam connector between two or more nodes

              Live preview
              start-node→end-node
              Live Metric

              animated counting number (alias for animated_counter)

              Live preview
              0
              Deadline Ticker

              countdown timer to a target date (alias)

              Live preview
              Countdown
              Loading…
              Target date
              Pattern Background

              dot-grid pattern background (alias)

              Live preview
              Glitch Text

              RGB-split glitch-effect headline

              Live preview
              A concise description of the content.
              Neon Glow

              pulsing neon-glow text on dark card

              Live preview
              A concise description of the content.
              Magnetic Button

              magnetic cursor-following button

              Live preview
              Confetti Trigger

              click-to-trigger confetti button

              Floating Particles

              soft glowing bokeh particles drifting upward on canvas, optional centred copy

              Live preview
              Parallax Section

              pointer-parallax depth layers of soft colour orbs on canvas, optional centred copy

              Live preview
              Scroll Progress

              fixed scroll-progress bar at page top

              Live preview
              Live Clock

              live ticking clock widget

              Live preview
              --:--:--
              Decision Tree

              interactive collapsible decision tree

              Live preview
              ▸ src/
              ✓ index.ts
              ✓ package.json
              Step Reveal Sequence

              tabbed step-by-step sequence

              Live preview
              Step one
              First thing to do.
              Step two
              Then this.
              Sequence Diagram

              multi-actor sequence diagram — arrows, notes, alt/opt/loop frames

              Live preview
              Chat Sequence

              animated chat conversation thread

              Live preview
              Ana
              Ship it?
              Bot
              Tests are green.
              Tooltip Glossary

              glossary with hover tooltips

              Live preview
              APIApplication Programming Interface
              A2UIAdaptive Atom-based UI
              Focus Lens

              spotlight focus lens on blurred background

              Live preview
              Terminal Boot

              animated terminal boot sequence

              Live preview
              $ npm install a2ui
              added 42 packages
              ✓ Done in 1.2s
              Stagger List

              stagger-animated list of items

              Live preview
              •
              Item 1
              •
              Item 2
              Liquid Button

              liquid morphing hover button

              Live preview
              Highlight Sweep

              animated highlight sweep text

              Live preview
              A concise description of the content.
              Progress Reveal

              scroll-triggered animated progress bar

              Live preview
              75%
              Big Reveal

              spring-animation big number or word reveal

              Live preview
              A concise description of the content.
              Kinetic Headline

              word-by-word kinetic headline animation

              Live preview
              A concise description of the content. 
              Text Reveal Mask

              clip-path text reveal mask animation

              Live preview
              A concise description of the content.
              Split Reveal

              split-panel reveal animation

              Live preview
              Mesh Gradient

              dark card with radial mesh gradient background

              Live preview
              Stripe Background

              animated diagonal stripe background card

              Live preview
              Status Timeline

              status-dot vertical timeline

              Live preview
              Counter Group

              row of animated stat counters

              Live preview
              Orbit Diagram

              animated orbit diagram with satellite nodes

              Live preview
              Node 1
              Node 2
              Core Concept
              Noise Card

              dark card with film-grain noise texture

              Live preview
              Comparison Morph

              draggable before/after comparison slider

              Live preview
              BEFORE
              AFTER
              Word Cloud

              interactive word cloud with optional live Sheet feed

              Live preview
              Word cloud
              Quiz Set

              multi-question interactive quiz

              Live preview
              BYO-MCP quick check
              1. What does a structured JSON 404 (vs. an HTML 404) tell you?
              Globe 3D

              interactive spinning 3-D globe (wire or earth)

              Live preview
              Geo Mercator Radar

              dark-theme interactive Mercator map with node pins and links

              Live preview
              Geo Contour Waves

              animated atmospheric contour wave field

              Live preview
              Multi Surface

              three-engine multi-surface demo atom

              Live preview
              Geo Europe Airspace

              interactive European airspace map with airports and flights

              Live preview
              European Airspace
              Feed Status

              live/sim status pill for a named data feed

              Live preview
              SIM
              Playbook

              multi-slide fullscreen presentation playbook

              Live preview
              1/2
              Surface Unlocked

              achievement-style surface unlocked notification

              Live preview
              ⚡
              NEW SURFACE UNLOCKED
              google-apps-script-web
              Schema Reveal

              self-reveal: shows this page's own JSON schema

              Live preview
              🔬 Schema
              Schema viewer — pass a block JSON to inspect fields.
              Url Anatomy

              annotated URL anatomy diagram

              Live preview
              https://renderer.example.com/api/render?payload=…
              ProtocolHostPathQuery
              Schema Qr

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

              Live preview
              Scan to open on any device
              Take Away Card

              bold screenshot-ready insight card

              Live preview
              Main headline text here
              Next Step Strip

              horizontal numbered next-steps strip

              Live preview
                Copy Prompt

                copyable monospace prompt/code block

                Live preview
                Copy this prompt
                Describe what you'd like to create.
                Atom Anatomy

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

                Live preview
                ⬡ stat_card
                Rendered
                Daily users
                1,234
                Schema
                {
                  "type": "stat_card",
                  "value": "1,234",
                  "label": "Daily users"
                }
                Renderer Stats

                stat grid for renderer capability metrics

                Live preview
                1.2M
                Views
                42K
                Clicks
                3.5%
                CTR
                Prompt To Schema

                three-panel prompt → schema → output flow

                Live preview
                Prompt
                Describe what you'd like to create.
                Schema
                {"type": "example", "value": "1,234"}
                Output
                ✓ Done in 1.2s
                Before After Stack

                old-vs-new stack comparison animation

                Live preview
                Before
                After
                ✓ Improved
                Live Vote

                live audience voting with real-time bar chart results

                Live preview
                Which option do you prefer?
                Live tallying requires write_url / sheet_url.
                Reaction Shower

                emoji reaction buttons with raining particles

                Live preview
                Live tally requires write_url.
                Raise Hand

                raise-hand button with live participant count

                Live preview
                Raise your hand
                Live hand counting runs on Apps Script surfaces.
                Surface Map

                A2UI surface diagram (schema → surfaces)

                Live preview
                One schema. Three surfaces.
                Schema
                { blocks: […] }
                GAS Web App
                Live web app · GAS runtime · URL = content
                Meet Stage
                Full-screen · Live demos · Audience view
                Google Sites HTML
                Blog / docs · SEO · Static publish
                Google Chat
                Cards · Bots · Workspace native
                Speed Counter

                live page-load stopwatch

                Live preview
                0
                Live Edit

                embedded live atom JSON editor with preview

                Live preview
                0 chars
                Gmail Inbox

                swipeable Gmail inbox carousel — live on GAS, items[] or api connector on web/meet

                Live preview
                Inbox
                (no subject)
                (no subject)
                Drive Recent Files

                swipeable Drive files carousel — live on GAS, items[] or api connector on web/meet

                Live preview
                Recent Files
                Drive Folder Contents

                Drive folder grid — live on GAS via folder_id, items[] or api connector on web/meet

                Live preview
                Folder Contents
                Drive File Card

                single Drive file card — static on all surfaces; live name/type lookup via file_id on GAS

                Live preview
                Progress Store

                invisible LMS state connector — Sheet on GAS, localStorage on web; exposes window._A2UI_STORE

                Live preview
                Progress—
                Module Map

                course curriculum grid — module cards with live locked/available/complete status from progress_store

                Live preview
                Knowledge Check

                inline comprehension pulse — single question, instant feedback, no score pressure

                Live preview
                Knowledge Check
                Which option do you prefer?
                Quiz Result Summary

                end-of-quiz result — score %, pass/fail, question dots, writes to progress_store

                Live preview
                🎉
                Passed!
                Well done — you cleared the pass mark.
                1500%
                75 / 5 correct
                ⏱ Time: 0s
                🎯 Pass mark: 70%
                Scenario Branch

                branching scenario — situation + choices + consequence reveal with good/neutral/bad outcome

                Live preview
                🎭 Scenario
                Success path
                What do you do?
                Completion Gate

                content lock — hides until requires module id is complete in progress_store

                Live preview
                🔒
                Locked
                Complete the previous section to unlock this content.
                Certification Card

                completion certificate — locked until requires id complete in progress_store; earner from GAS session

                Live preview
                🎓
                Certificate of Completion
                A2UI Fundamentals
                Issued by A2UI Learning
                Skill Radar

                SVG radar/spider chart of skill competency levels — optional before/after growth overlay

                Live preview
                🎯 Skill Profile
                PythonJavaScriptTypeScript
                Badge Showcase

                achievement badge wall — earned badges glow, locked badges grey; status from progress_store

                Live preview
                Achievements
                🏅
                TypeScript
                🏅
                React
                🏅
                A2UI
                Learning Path Selector

                course entry path chooser — role/level cards, writes selection to progress_store, optional navigation

                Live preview
                Choose Your Path
                Beginner Path
                Advanced Path
                Video Checkpoint

                YouTube video with pausing quiz checkpoints — learner must answer to continue

                Live preview
                Checkpoints
                1. What is X?
                2. How does Y work?
                Cohort Progress Board

                instructor cohort table — per-learner module completion + scores; live on GAS

                Live preview
                Cohort Progress
                Student
                alice@example.com
                bob@example.com
                Reflection Prompt

                reflection textarea — saves to progress_store; restores on revisit

                Live preview
                Reflection
                Describe what you'd like to create.
                Annotation Highlight

                annotated body text — click highlighted terms to reveal inline explanations

                Live preview
                The renderer walks the block list and dispatches by type.
                Onboarding Stepper

                guided onboarding steps — completes to progress_store, restores on revisit

                Live preview
                Get Started
                1
                Step one
                2
                Step two
                Case Study Card

                structured case study — situation, data points, questions, optional model answer reveal

                Live preview
                📋 Case Study
                Case Study Card
                Situation
                A startup facing rapid growth challenges.
                Study Timer

                Pomodoro focus/break timer with SVG ring — session only, no persistence

                Live preview
                ⏱ Study Timer
                Focus
                25:00
                0 sessions completed
                Rubric Card

                assessment rubric table — criteria rows × performance level columns

                Live preview
                Assessment Rubric
                CriterionBeginningDevelopingProficientExemplary
                ————
                ————
                Spaced Repetition Card

                flip flashcard with confidence rating 1-5 — writes SRS interval to progress_store

                Live preview
                What is an atom?
                A self-contained UI block with a type and fields.
                Leaderboard Card

                ranked score leaderboard — live on GAS from Sheet, static on web; medal top 3

                Live preview
                🏆 Leaderboard

                No scores yet

                Nav Bar

                named-page nav bar — generates ?nav= URLs at runtime from _A2UI_NAV; active page auto-highlighted

                Live preview
                Palette

                page-level accent colour and spacing theme variables

                Live preview
                Print Button

                button to print or save page as PDF

                Live preview
                Drive Image

                Google Drive image embed by file ID

                Live preview
                Descriptive alt text for this image
                A descriptive caption
                Maps Embed

                Google Maps location embed iframe

                Live preview
                Sheet Form

                form submitting rows to a Google Sheet tab

                Live preview
                Form
                ⚠ sheet_form requires Google Apps Script — form submission not available in this renderer.
                Reveal

                entrance animation wrapper for child blocks

                Live preview
                Infrastructure hoops
                4
                Abandoned detour
                1
                Now documented
                2
                Skeleton

                shimmer loading placeholder shapes

                Live preview
                Marquee

                infinite horizontal scrolling ticker strip

                Live preview
                Item 1Item 2
                Pulse Dot

                pulsing status indicator dot

                Live preview
                Loading Dots

                three-dot pulsing loader

                Live preview
                Progress Ring

                animated circular progress gauge

                Confetti Burst

                confetti celebration burst effect

                Live preview
                Ripple Button

                CTA button with ripple click effect

                Live preview
                <
                Wave Divider

                animated wave section separator

                Live preview
                Floating Badge

                bobbing emoji or icon badge

                Live preview
                ⭐
                Shimmer Text

                headline text with shimmer gloss sweep

                Live preview
                A concise description of the content.
                Number Flip

                slot-machine digit reveal counter

                Live preview
                111
                Number Flip
                Spotlight Card

                card with cursor-following spotlight

                Live preview

                The error message was the documentation

                /authorize was built to print back a rejected redirect URI on purpose — the failure itself became the spec.

                Animated Border

                card with rotating gradient border

                Live preview

                A rotating conic-gradient border — pure CSS, no JS, three colour stops.

                Countdown Ring

                circular countdown timer ring

                Live preview
                60
                Countdown Ring
                Google Icon

                single Material Symbol icon

                Live preview
                Icon Badge

                Material icon in coloured circular badge

                Live preview
                Icon Row

                horizontal icon and label strip

                Live preview
                Item 1
                Item 2
                Workspace Logo

                single Google Workspace product logo

                Live preview
                MY
                Myworkspace
                Workspace Logo Strip

                horizontal strip of Workspace logos

                Live preview
                gmaildrivedocssheetsslidesmeet
                Workspace Logo Grid

                labelled grid of Workspace logos

                Live preview
                gmailGmail
                driveDrive
                docsDocs
                sheetsSheets
                slidesSlides
                calendarCalendar
                meetMeet
                formsForms
                chatChat
                CClassroom
                keepKeep
                sitesSites
                VVault
                GGroups
                TTasks
                CContacts
                JJamboard
                AAdmin
                AAppsheet
                CCurrents
                Icon Feature Grid

                feature grid with Material icons

                Live preview
                Item 1
                Item 2
                Icon Checklist

                checklist items with Material icons

                Live preview
                First item
                Second item
                Hub

                deck navigation shell with subjects and slides

                Live preview

                Fractions

                Jump Nav

                anchor pill buttons scrolling to page sections

                Live preview
                Command Step

                copyable command with completion checkbox

                Live preview
                $ npm install a2ui
                Form Textarea

                multi-line text input area

                Live preview
                Flashcard Deck

                flip-card deck of question answer pairs

                Live preview
                1 / 2
                QUESTION
                — space / click to flip —
                ANSWER
                — space / click to flip —
                QUESTION
                — space / click to flip —
                ANSWER
                — space / click to flip —
                Brevet Timeline

                dated vertical revision timeline

                Live preview
                2025
                Launch
                ▸ analyser l'impact au Brevet
                2026
                Today
                ▸ analyser l'impact au Brevet
                Me

                current user identity chip

                Try it live →
                Theme Toggle

                floating light dark theme switch

                Live preview
                Tool Tile

                large icon+title tile, whole tile clickable, for an app/tool selector grid

                Live preview
                Lens Grid

                selectable card grid for a small, explained set of options

                Live preview
                Domain Picker

                default-pill plus free-text override for a config question

                Live preview
                Tab Group

                pill tabs that show/hide sibling layout elements

                Live preview
                Quiet Link

                chromeless secondary text action, for use beside one primary button

                Live preview
                Gdm Rocket Panel

                isometric rocket launch canvas animation, fixed half-viewport overlay

                Live preview
                Content Tabs

                tabbed panels holding nested atom blocks

                Live preview

                One court, three rounds — every player partners with every other exactly once.

                RoundCourt 1
                Round 1P1 & P4 vs P2 & P3

                Two courts, seven rounds — a full partner rotation.

                Math Block

                native MathML equation typeset with the math font family

                Live preview
                x=-b±b2-4ac2a
                (1)
                Solutions of ax² + bx + c = 0
                Concept Ladder

                layered-depth concept explainer — hook, mental-model card, depth rungs, worked example

                Live preview
                Concept Rung

                one depth level (kind chip, title, body, code, takeaway) — normally used inside concept_ladder

                Live preview
                DEPTH
                Layer Stack

                labelled layer bands — field/note per layer, optional side-by-side columns, absent layers render hollow

                Live preview
                Stack Layer

                one layer band (badge, name, field/note or per-column cells) — normally used inside layer_stack

                Live preview
                Stack Layer
                —
                Tool Call Card

                structured agent tool call card with status, inputs, result, and latency

                Live preview
                Tool name● running
                Scene Stage

                animated looping SVG scene of a place (53 ready presets) from verified clipart

                Live preview
                wind-farm
                Animated scene: open this page in an MCP Apps or Apps Script surface to play it.
                Clipart

                one verified vector clipart image by id

                Live preview
                [ A wind turbine ]
                Histogram

                histogram: counts of numbers per bin

                Live preview
                API response times
                Count of values per bin
                0
                5
                10
                15
                20
                80
                100
                120
                140
                160
                180
                200
                Response time (ms)
                Bin fromBin toCount
                80 ms100 ms5
                100 ms120 ms15
                120 ms140 ms19
                140 ms160 ms7
                160 ms180 ms2
                180 ms200 ms2
                Box Plot

                box_plot: compare groups of numbers by median and spread

                Live preview
                API response times by region
                Europe
                Americas
                Asia Pacific
                50
                100
                150
                200
                250
                300
                Response time (ms)
                GroupCountMinimumLower quartileMedianUpper quartileMaximumOutliers
                Europe2087 ms104.25 ms119.5 ms135.25 ms171 ms0
                Americas20103 ms118.5 ms128.5 ms142.75 ms184 ms1
                Asia Pacific20110 ms128.75 ms145 ms159.5 ms290 ms1
                Waterfall

                waterfall: how changes add up to a total

                Live preview
                Revenue bridge, 2025 to 2026
                Revenue 2025
                1,240
                New customers
                +310
                Expansion
                +145
                Churn
                -220
                Price changes
                +60
                Discounts
                -85
                Revenue 2026
                1,450
                0
                500
                1,000
                1,500
                2,000
                Revenue (kEUR)
                StepChangeRunning total
                Revenue 2025Total1,240 kEUR
                New customers+310 kEUR1,550 kEUR
                Expansion+145 kEUR1,695 kEUR
                Churn-220 kEUR1,475 kEUR
                Price changes+60 kEUR1,535 kEUR
                Discounts-85 kEUR1,450 kEUR
                Revenue 2026Total1,450 kEUR
                Sunburst

                sunburst: share of a total in nested rings

                Live preview
                Where the budget goes (k EUR)
                People
                Engineering
                Salaries
                Training
                Sales
                Salaries
                Commission
                Recruiting
                Operations
                Cloud
                Compute
                Storage
                Network
                Offices
                Rent
                Utilities
                Insurance
                Marketing
                Paid
                Search
                Social
                Events
                Conference
                3,290 k EUR
                total
                Angle shows share of the total; each ring out is one level deeper.
                ItemPathValueShare of total
                ComputeOperations / Cloud420 k EUR12.8%
                StorageOperations / Cloud180 k EUR5.5%
                NetworkOperations / Cloud95 k EUR2.9%
                RentOperations / Offices300 k EUR9.1%
                UtilitiesOperations / Offices60 k EUR1.8%
                InsuranceOperations70 k EUR2.1%
                SalariesPeople / Engineering900 k EUR27.4%
                TrainingPeople / Engineering40 k EUR1.2%
                SalariesPeople / Sales520 k EUR15.8%
                CommissionPeople / Sales130 k EUR4.0%
                RecruitingPeople85 k EUR2.6%
                SearchMarketing / Paid160 k EUR4.9%
                SocialMarketing / Paid110 k EUR3.3%
                ConferenceMarketing / Events75 k EUR2.3%
                ContentMarketing55 k EUR1.7%
                LegalTop level90 k EUR2.7%
                Chord Diagram

                chord_diagram: flows between a few entities as ribbons on a ring

                Live preview
                Migration between regions (thousand people a year)
                Europe
                Asia
                North America
                Africa
                South America
                EuropeAsiaNorth AmericaAfricaSouth America
                Each ribbon joins two groups; its width at each end shows the flow from that group to the other.
                FromToValue
                EuropeAsia120 k people
                EuropeNorth America80 k people
                EuropeAfrica40 k people
                EuropeSouth America15 k people
                AsiaEurope95 k people
                AsiaNorth America70 k people
                AsiaAfrica55 k people
                AsiaSouth America10 k people
                North AmericaEurope60 k people
                North AmericaAsia45 k people
                North AmericaAfrica25 k people
                North AmericaSouth America30 k people
                AfricaEurope90 k people
                AfricaAsia30 k people
                AfricaNorth America12 k people
                AfricaSouth America5 k people
                South AmericaEurope20 k people
                South AmericaAsia18 k people
                South AmericaNorth America22 k people
                South AmericaAfrica6 k people
                GroupTotal outTotal in
                Europe255 k people265 k people
                Asia230 k people213 k people
                North America160 k people184 k people
                Africa137 k people126 k people
                South America66 k people60 k people
                Circle Pack

                circle_pack: grouping and rough size as packed circles

                Live preview
                Team skills by area (people)
                Engineering
                Backend
                Frontend
                Platform
                Data
                Design
                Python
                9 people
                SQL
                8 people
                Go
                5 people
                TypeScript
                7 people
                CSS
                Kubernetes
                Terraform
                Statistics
                5 people
                Machine learning
                dbt
                Prototyping
                Research
                Circle area shows share of the total; an outlined circle is a group.
                ItemPathValueShare of total
                PythonEngineering / Backend9 people14.3%
                GoEngineering / Backend5 people7.9%
                SQLEngineering / Backend8 people12.7%
                TypeScriptEngineering / Frontend7 people11.1%
                CSSEngineering / Frontend4 people6.3%
                KubernetesEngineering / Platform4 people6.3%
                TerraformEngineering / Platform3 people4.8%
                StatisticsData5 people7.9%
                dbtData3 people4.8%
                Machine learningData4 people6.3%
                ResearchDesign3 people4.8%
                PrototypingDesign4 people6.3%
                AccessibilityDesign2 people3.2%
                Technical writingTop level2 people3.2%
                Arc Diagram

                arc_diagram: links between nodes as arcs over a line

                Live preview
                Who co-authors with whom (papers together)
                Ada Okafor
                Ben Haas
                Chidi Eze
                Diana Rossi
                Elif Demir
                Fay Chen
                Gus Lindqvist
                Hal Brandt
                Ivy Moreau
                Jon Park
                SystemsVisionTheoryNo group
                Arc thickness shows the link value. In a narrow container only some node names are drawn; the table lists every node and link.
                NodeGroupLinks
                Ada OkaforSystems4
                Ben HaasSystems3
                Chidi EzeSystems3
                Diana RossiVision3
                Elif DemirVision3
                Fay ChenVision3
                Gus LindqvistTheory4
                Hal BrandtTheory2
                Ivy MoreauTheory3
                Jon ParkNo group2
                FromToValue
                Ada OkaforBen Haas6 papers
                Ada OkaforChidi Eze3 papers
                Ben HaasChidi Eze4 papers
                Ada OkaforDiana Rossi1 papers
                Diana RossiElif Demir5 papers
                Diana RossiFay Chen2 papers
                Elif DemirFay Chen3 papers
                Fay ChenGus Lindqvist1 papers
                Gus LindqvistHal Brandt7 papers
                Gus LindqvistIvy Moreau2 papers
                Hal BrandtIvy Moreau3 papers
                Ben HaasGus Lindqvist1 papers
                Chidi EzeJon Park1 papers
                Jon ParkAda Okafor2 papers
                Elif DemirIvy Moreau1 papers
                Contour Plot

                contour_plot: filled contour bands of a value grid or of the density of points

                Live preview
                Surface temperature across a field (°C)
                Metres south (rows of 10 m)
                0
                2
                4
                6
                8
                10
                0
                4
                8
                12
                16
                Metres east (columns of 10 m)
                Temperature
                Below 9 °C9 to 10 °C10 to 11 °C11 to 12 °C12 to 13 °C13 to 14 °C14 to 15 °C15 to 16 °C16 to 17 °C17 to 18 °C18 to 19 °C19 °C and above
                Each band is the area at or above its level; the outline between two bands is the level.
                Level fromBand colourCells at or above
                9 °Cpale blue100.0%
                10 °Cpale blue93.1%
                11 °Clight blue82.5%
                12 °Clight blue60.6%
                13 °Cmid blue43.1%
                14 °Cmid blue29.4%
                15 °Cmid blue18.8%
                16 °Cdeep blue13.1%
                17 °Cdeep blue8.8%
                18 °Cdark blue4.4%
                19 °Cdark blue0.6%
                Voronoi

                voronoi: nearest-site regions of a set of points (catchments, service areas)

                Live preview
                Which depot is nearest? 12 delivery depots by operator
                North (km)
                0
                2
                4
                6
                8
                10
                12
                0
                2
                4
                6
                8
                10
                12
                14
                Harbour
                Old Town
                Station
                Market
                Airport
                University
                Docks East
                Ring Road
                Park
                Retail Park
                Hospital
                Canal
                East (km)
                NorthlineParceloSwiftly
                Each region is the part of the area that is nearer to its site than to any other (straight-line distance in the x and y units). In a narrow container some names are hidden; the table lists every site and its share of the area.
                SitexyGroupValueShare of the area
                Harbour2.13.4Northline18 min12.9%
                Old Town4.65.2Northline12.5 min5.7%
                Station6.84.1Parcelo9 min5.3%
                Market5.27.9Parcelo14 min6.4%
                Airport10.48.8Swiftly22.25 min11.1%
                University8.19.6Swiftly11 min7.9%
                Docks East11.52.6Parcelo20 min11.6%
                Ring Road8.96.3Northline8 min6.4%
                Park1.48.2Swiftly16 min8.3%
                Retail Park12.36Northline13 min7.8%
                Hospital3.510.9Parcelo10 min7.5%
                Canal7.11.7Swiftly15 min9.0%