Elements

Search

Search components and documentation

Elements

Interface components pulled out of shipped work, each with a live preview and the source that runs it. Dark surface, tabular figures, status colour used only where it means something.

  • Frosted nav CTA

    Glass pill — translucent fill over backdrop-blur, with an inverted arrow well

    See a week of your fleet
    Frosted nav CTA

  • Sliding tab pill

    Segmented control where the pill measures and slides to the selection

    Sliding tab pill

  • Character shimmer

    A colour sweep run per-character on a loop, pulled from a dashboard hero

    Reading the fleet, live
    Character shimmer

  • Phone-width view dock

    A bottom nav dock built from measured target sizes, not guessed ones

    Phone-width view dock

  • Crossfading testimonial

    A quote crossfade picked by monogram chips that expand into a name on hover

    This place gave me a language for what I'd only ever felt.
    Grace M.
    Crossfading testimonial

  • Auto-rotating quote

    A timed quote block with a dot-progress bar that stretches into a pill

    They treated our shipment like it was their own cargo.
    Amara ChenOps Lead, Northline Freight
    Auto-rotating quote

  • Infinite logo marquee

    A doubled CSS track scrolling at -50%, edge-faded, paused on hover

    Founders from

    LightAutoAIDevLayerSingularityOrivEvlogiaCreator InsightsLightAutoAIDevLayerSingularityOrivEvlogiaCreator Insights
    Infinite logo marquee

  • Wooden quest board

    Pinned paper cards on a wood panel, texture from inset shadows alone

    Ship the referral loop

    shipped

    for Northline

    Turn happy customers into a growth channel.

    difficulty

    Cut onboarding to one screen

    shipped

    for Reyes Co.

    Five steps down to one, no drop in signups.

    difficulty

    Untangle the pricing page

    open quest

    Nobody can tell what plan they're on.

    difficulty

    Your problem here

    The board has room. Difficult submissions get reviewed first.

    Wooden quest board

  • Slot-machine counter

    Each digit its own sprung reel, rolling to a new value like an odometer

    Slot-machine counter

  • Filterable integration index

    A numbered catalog with a filter chip whose highlight glides via shared layoutId

    • 001Altium DesignerEDA

      Native library sync via REST

    • 002KiCadEDA

      Open plugin, community supported

    • 003Cadence OrCAD / AllegroEDA

      CIS connector in progress

    • 004Siemens TeamcenterPLM

      Integration via Teamcenter connectors

    • 005Aras InnovatorPLM

      REST-native, open schema

    • 006PTC WindchillPLM

      Standard REST + webhook events

    • 007SAP S/4HANAERP

      Material master sync via REST

    • 008SnowflakeERP

      Native SQL. Query directly

    • 009BigQueryERP

      REST export on schedule or event

    • 010CursorAI

      MCP server. Native tool calls

    • 011Claude CodeAI

      MCP server. Zero config

    • 012LangChain / LlamaIndexAI

      REST tool, Python SDK

    • 013REST APICUSTOM

      OpenAPI 3.1 spec, versioned

    • 014GraphQLCUSTOM

      Typed schema, introspectable

    • 015SQLCUSTOM

      Standard SQL, Postgres dialect

    Filterable integration index

  • Dynamic-Island header

    A pill that morphs into a card on one shared layout animation, not a cross-fade

    Dynamic-Island header

  • Locality search palette

    Prefix-first substring search, with a solid-vs-dashed swatch mirroring the map

    Locality search palette

  • Metric panel

    Dashboard card that names its source, fails without blanking, and collapses on a phone

    Sample metric

    One sentence on what the reader should take away.

    Last 28 days

    1,284

    Sample data

    Sample source
    Metric panel

  • KPI tile

    Headline figure with period delta, a moved-since-last-pull marker, and no fabricated zeroes

    Sample metric
    12,480
    +21%vs previous 28 daysSample data
    Sample rate
    23.8%
    moved since last pull-12%
    KPI tile

  • Sortable bento board

    Drag, keyboard and tap reordering over a subgrid bento layout

    Order: sessions · signups · delivery

    Sessions

    Sample data

    Signups

    Sample data

    Delivery

    Builds

    Sample data

    Rollbacks

    Sample data

    Layout saved

    Sortable bento board

  • CSS data marks

    Diverging bar, unit grid and dumbbell, drawn in DOM and CSS so they fit any column

    Sample row
    +5.4pp
    Sample row
    +1.1pp
    Sample row
    −0.6pp
    Sample row
    −4.9pp
    CSS data marks