EventTicker
An animated feed of events landing one by one, newest on top, with the exception surfaced.
View code
<EventTicker
aria-label="Recent checkout checks, newest first"
pauseLabel="Pause the animation"
title="Checkout, every 5 minutes"
statusLabels={{ ok: "Passed", warn: "Slow", fail: "Failed", pending: "Running" }}
rows={[
{ time: "09:25", label: "Checkout", status: "ok", detail: "4 steps in 1.2s" },
{ time: "09:30", label: "Checkout", status: "warn", detail: "Pay took 3.8s" },
{
time: "09:35",
label: "Checkout failed at Pay",
status: "fail",
code: "POST /api/pay → 502",
},
{ time: "09:40", label: "Checkout", status: "ok", detail: "4 steps in 1.1s" },
{
time: "09:45",
label: "Checkout",
status: "pending",
detail: "Step 2 of 4",
flipTo: { status: "ok", detail: "4 steps in 1.3s" },
},
]}
footnote="A failure pages the on-call with the step that broke"
/>Demo landings
Whole pages built only from @sdxc/ui, each for an invented product with its own palette and type. They open in a new tab.
- RooftreeRooftree keeps a household's groceries, chores, calendar and meals on one encrypted list that syncs across iPhone, Android, Mac and Windows./demo/app
- The MeasureA book and video course on web typography for designers and engineers: measure, rhythm, scale and fonts, with CSS for every chapter./demo/book
- KeelKeel meters every event your product emits, prices it on any plan and sends the invoice on the first of the month./demo/saas
Every demo, landings and docs sites alike, is listed in the demo gallery.
Installation
An ordinary dependency: install it, import the theme once, and import the component where it is used.
npm add @sdxc/ui remiximport "@sdxc/ui/theme.css";Usage
import { EventTicker } from "@sdxc/ui/landing";Renders the feed as an ordered list on a raised surface inside a MotionLoop. Each row opens in its turn at the top and pushes the older ones down; a hidden copy of the finished feed holds the surface's height, so the page never shifts while it loops. Without motion every row shows with its final status. Equal row counts share keyframes.
Props
Read from the component's own types, so every prop, every default and every allowed value is listed.
| Prop | Type | Required | Description |
|---|---|---|---|
"aria-label" | string | Yes | Accessible name of the feed's list. Required — the library ships no copy. |
pauseLabel | string | No | Accessible name of the pause toggle. |
title | RemixNode | No | Header line over the feed, drawn beside a live dot. |
rows | readonly Row[] | Yes | The events, oldest first; the feed renders them newest first. |
statusLabels | Record<Status, string> | Yes | The text of each status chip, such as { ok: "Passed", fail: "Failed", … }. |
footnote | RemixNode | No | A note under the feed, such as how often the checks run. |
Also accepts everything in Omit<TagProps<"div">, "children" | "title">.
Types
| Name | Values | What it decides |
|---|---|---|
Status | "ok" | "warn" | "fail" | "pending" | Outcome of one event, drawn as a success, warning, danger or neutral chip. |