Skip to content
Motif UI
Go Pro

Release Rail

A vertical changelog timeline that reads the site's own CHANGELOG data — one list, so a component page, the roadmap and the changelog share the same visual language.

80
MIT licensev1.0.01 KB gzipzero dependenciesby Motif Studioadded 2026-09-12review due 2026-12-11
Live playground — drag, click, hoversandboxed previewsample copy
  1. Platform

    Bank 3 closes at 500/500

    Items 486–500 finish the third bank: zh-CN glossary terms, the one locale date helper, the hreflang plan page, structured data for components and prompts (Softw…

  2. Platform

    Bank 3 batch 20: the community and sharing pass

    Items 466–485 of docs/enrichment-500-2.md: a computed hall of fame, submission guidelines, share cards for prompts and collections, an embeddable collection she…

  3. Platform

    Bank 3 batch 19: /admin/ops — the content-operations shelf

    Items 446–465 of docs/enrichment-500-2.md land as one ops page: module freshness, the review queue, in-admin data-integrity orphans, translation coverage, publi…

  4. Platform

    Bank 3 batch 18: the harness polices the harness

    Items 421–445 of docs/enrichment-500-2.md: /quality/gates-2 lists every automated check from the blame-verified index; the check scripts gain runtime reporting,…

  5. Platform

    Bank 3 batch 17: the prompt catalog leaves the shared chunk

    Item #410 — the structural fix the shell-budget notes kept pointing at — ships: 116 prompt bodies move to src/lib/prompts-data.ts and the twelve client importer…

  6. Platform

    Bank 3 batch 16: the accessibility pass

    Items 371–395 of docs/enrichment-500-2.md: the skip link ships on every built page and is harness-asserted; the scanner gains table-caption and link-purpose rul…

  7. Platform

    Bank 3 batch 15: the stack workbench and the studio pass

    Items 351–370 of docs/enrichment-500-2.md: /saved/stack gains a workbench — JSON and HTML-starter exports, import, naming, a weight estimate with a comfort line…

  8. Platform

    Bank 3 batch 14: the search and discovery pass

    Items 326–350 of docs/enrichment-500-2.md: twenty new alias pairs, a zero-result page that recovers instead of shrugging, a global / shortcut, an honest showing…

reads the same CHANGELOG as /changelog · 8 of 34 entries shown

Ambience
vibes

Ambience is a live light wash over the preview. Full palette re-theming of every demo arrives with Theme Studio (Pro).

deps: zeroJSX + TailwindMIT · original
release-rail.tsx
// 1) install
//   npm i @motifui/cli && npx motifui add release-rail
// 2) import where you need it
import { Component } from "@motifui/release-rail";

export function Demo() {
  return <Component theme="inherit" className="w-full" />;
}

Snippet provenance

lines 1–8 · v1.0.0
v1.0.0Motif Studio2026-09-12the only version the catalog records for this asset

No changelog entry mentions “Release Rail”, so the catalog records a single version for it.

Every line above is attributed to the single version this catalog records — we keep no per-line history, so no per-line attribution is invented. See the provenance page for the rule and the gaps.

Review notes · anchored to code lines

Threads attach to a line number in this asset's snippet, so a remark about the focus trap stays next to it.

demo · stored in this browser

Loading notes…

The snippet on this page is 8 lines long, so anchors run 1–8. Notes are per-asset and per-browser; a shared review thread is a server feature, and this panel is the local stand-in that proves the anchoring works.

Dependency-aware copy: zero packages to install — paste and run. All markup is original Motif UI content (MIT).

Course rail — understand it before you ship it

Theme Studio preview

Theming example — two token themes

Assets are token-driven (100% design-token driven). Here the same scene runs under two theme presets from the token sheet.

Midnight / violet
  1. Platform

    Bank 3 closes at 500/500

    Items 486–500 finish the third bank: zh-CN glossary terms, the one locale date helper, the hreflang plan page, structured data for components and prompts (Softw…

  2. Platform

    Bank 3 batch 20: the community and sharing pass

    Items 466–485 of docs/enrichment-500-2.md: a computed hall of fame, submission guidelines, share cards for prompts and collections, an embeddable collection she…

  3. Platform

    Bank 3 batch 19: /admin/ops — the content-operations shelf

    Items 446–465 of docs/enrichment-500-2.md land as one ops page: module freshness, the review queue, in-admin data-integrity orphans, translation coverage, publi…

  4. Platform

    Bank 3 batch 18: the harness polices the harness

    Items 421–445 of docs/enrichment-500-2.md: /quality/gates-2 lists every automated check from the blame-verified index; the check scripts gain runtime reporting,…

  5. Platform

    Bank 3 batch 17: the prompt catalog leaves the shared chunk

    Item #410 — the structural fix the shell-budget notes kept pointing at — ships: 116 prompt bodies move to src/lib/prompts-data.ts and the twelve client importer…

  6. Platform

    Bank 3 batch 16: the accessibility pass

    Items 371–395 of docs/enrichment-500-2.md: the skip link ships on every built page and is harness-asserted; the scanner gains table-caption and link-purpose rul…

  7. Platform

    Bank 3 batch 15: the stack workbench and the studio pass

    Items 351–370 of docs/enrichment-500-2.md: /saved/stack gains a workbench — JSON and HTML-starter exports, import, naming, a weight estimate with a comfort line…

  8. Platform

    Bank 3 batch 14: the search and discovery pass

    Items 326–350 of docs/enrichment-500-2.md: twenty new alias pairs, a zero-result page that recovers instead of shrugging, a global / shortcut, an honest showing…

reads the same CHANGELOG as /changelog · 8 of 34 entries shown

--accent 262 · dark surfaces

Bone / amber
  1. Platform

    Bank 3 closes at 500/500

    Items 486–500 finish the third bank: zh-CN glossary terms, the one locale date helper, the hreflang plan page, structured data for components and prompts (Softw…

  2. Platform

    Bank 3 batch 20: the community and sharing pass

    Items 466–485 of docs/enrichment-500-2.md: a computed hall of fame, submission guidelines, share cards for prompts and collections, an embeddable collection she…

  3. Platform

    Bank 3 batch 19: /admin/ops — the content-operations shelf

    Items 446–465 of docs/enrichment-500-2.md land as one ops page: module freshness, the review queue, in-admin data-integrity orphans, translation coverage, publi…

  4. Platform

    Bank 3 batch 18: the harness polices the harness

    Items 421–445 of docs/enrichment-500-2.md: /quality/gates-2 lists every automated check from the blame-verified index; the check scripts gain runtime reporting,…

  5. Platform

    Bank 3 batch 17: the prompt catalog leaves the shared chunk

    Item #410 — the structural fix the shell-budget notes kept pointing at — ships: 116 prompt bodies move to src/lib/prompts-data.ts and the twelve client importer…

  6. Platform

    Bank 3 batch 16: the accessibility pass

    Items 371–395 of docs/enrichment-500-2.md: the skip link ships on every built page and is harness-asserted; the scanner gains table-caption and link-purpose rul…

  7. Platform

    Bank 3 batch 15: the stack workbench and the studio pass

    Items 351–370 of docs/enrichment-500-2.md: /saved/stack gains a workbench — JSON and HTML-starter exports, import, naming, a weight estimate with a comfort line…

  8. Platform

    Bank 3 batch 14: the search and discovery pass

    Items 326–350 of docs/enrichment-500-2.md: twenty new alias pairs, a zero-result page that recovers instead of shrugging, a global / shortcut, an honest showing…

reads the same CHANGELOG as /changelog · 8 of 34 entries shown

--accent 40 · paper surfaces

90-second read

Usage recipe — where this fits

Put it where a micro-decision happens: a toggle, a loader, a hover state — the small moments that make an interface feel considered.

Drop it into the exact spot it belongs, keep the default props until the copy is final, then tune the one knob that matters for your context.

belongs in elementsclick behaviour

Cost honesty

Performance note

1 KB gzipnegligible — a single painted surface; nothing moves unless hovered.

Cheaper alternative — if you need even lighter, the plain HTML version skips React entirely — same result, ~0 KB.

What it needs

Browser support strip

HTML semanticsfocus-visiblecustom propertiesprefers-reduced-motionall evergreen browsers

No polyfills ship with the asset — if a listed feature is missing in a target browser, the graceful fallback is the static layout.

prefers-reduced-motion

Reduced-motion fallback

With prefers-reduced-motion: reduce, the animation loop and travel are removed; state changes keep working through opacity and colour (≤ 300ms). The demo you see above honours the switch — try it in your OS settings and the loop will quiet down.

Design rule: the reduced branch is a second design, not a stripped page — every state change stays visible.

Pressable step-through

Keyboard walk demo

Step through what a keyboard user experiences with this asset.

1

Tab to the element — the focus ring is visible before interaction

Auto-suggested

Composition map — what pairs well

Same-family assets that compose cleanly with this one:

Elements

Prism Switch

A theme-aware toggle that sweeps a six-stop prism gradient across the track on every flip. Pure CSS states, keyboard reachable, announces state to screen readers.

Elements

Halo Button

Primary button with a mouse-tracking halo, press ripple and a springy scale. Ships as React + Tailwind or dependency-free HTML/CSS.

Elements

Pulse Loader

Three-note loader with staggered radial pulse and optional progress text. Reduced-motion safe and tiny — 0.8 KB gzipped.

One original micro-case

Inspiration context

The settings row that got fewer support tickets

A settings screen had seventeen identical switches with no press state. Users could not tell whether a tap had registered, so they tapped twice — and support logs filled with 'it toggles back'. The fix was one press-state scale plus a 250ms state fade per row. Ticket volume on that screen dropped by half in a month.

Written in-house — no screenshots, no borrowed imagery. The pattern, not the pixels.

Every version, why

Changelog — this asset

v1.0.02026-09-12

Current release — this page documents the asset as shipped.

v1.0.02026-08-18

Token pass: colours and radii moved to the design-token sheet; a11y score raised to the current bar.

v0.1.02026-07-02

Initial release to the library — original markup, MIT licensed.

30-day sparkline

Copy history

80copies this month

Sample series from this asset's usage fingerprint · last 12 days shown.

Future queue

Community remixes

Queue opens after launch. Remixes arrive as alternate versions of this asset — same job, different voice — submitted by users and audited by the studio before they appear beside the original.

0 remixes yetaudited by studiocredit + link back to the remixer

Star / favourite

Save this asset

Your collection is stored in this browser (localStorage) — no account needed.

Build a page around it

Pairs well with a prompt

This asset belongs inside a bigger build — here is the prompt that would generate a page containing it:

A11y-strict page — WCAG AA as a hard requirement

AA requirements · Contrast audit · Keyboard map

featured

Exact tree

Bundled dependencies — disclosed

release-rail.tsx0.2 KB raw · ~1 KB gzip
(no runtime dependencies)the CSS ships with the snippet

Full snippet ≈ 0.3 KB raw, ~1 KB gzip — before any framework you already load.

Download

Export as single file

Grab the asset as one file, ready to paste into your project.

Files are generated in your browser from the snippets on this page — nothing leaves the tab.

Scale, not clutter

Sizing system — three densities

Density is a token decision, not a per-page override — pick one density per product surface and hold it. Active: Default.

Runnable copy

Open in a sandbox

Opens this asset in a new tab with its stylesheet injected — a real, editable HTML document in your browser. No account, no upload.

If the tab is blocked, use the single-file export instead — same content, saved locally.

Written version first

Tutorial transcript

This asset does not have a video yet — so the written version stands in: the code line walk below narrates the snippet line by line, and the design rationale on this page explains the default decisions. When a video ships, this exact panel hosts its full transcript.

video: not yettranscript: line walk belowformat: markdown, searchable

Annotated snippet

Code line walk

The lines that matter, with the reason they matter. Click one:

Trade-off, visible

Size vs. quality slider

~2 KB~6 KB~12 KB

Standard · CSS + hover states

~6 KB

adds transitions, focus-visible and reduced-motion rules

The slider is honest: the slim tier has no JS, the pro tier pays for behaviour. Start slim, upgrade only the surfaces that need it.

HTML → React, priced

Stack-switch cost note

Taking the HTML/CSS version into a React component costs real work — and the cost is predictable:

Event wiring

Hover, focus and click become handlers — the CSS stays, the state appears.

Props for the knobs

Every inline value that should vary becomes a prop with a default — the defaults must match the CSS exactly.

The estimate

A clean port of this asset is 20–45 minutes for a React developer — the 109-character stylesheet is the easy half.

Find it the way you say it

Tag synonyms

Search on this site resolves synonyms globally — "dropdown", "select" and "picker" land on the same asset, so you never need to know the catalog's internal vocabulary.

When to pick which

Sibling comparison

Data table — data table
CompareRelease RailPrism SwitchHalo Button
KindElementsElementsElements
Bundle1 KB gzip1.2 KB gzip2.1 KB gzip
a11y98/10098/10096/100
Dependenciesnonenonenone
Copies / mo804,8203,910
Interactionsclickclick, hoverhover, click, drag

The honest verdict — Release Rail is the lighter default here; reach for Prism Switch when its extra weight buys an interaction this one lacks.

← Previous in the library

Tree View

Similar to this — scored on shared tags, not hand-picked

Changelog Feed 2 shared tags →Vertical Timeline 2 shared tags →Changelog / Journal Template 1 shared tags →

Related assets

ElementsReact · HTML/CSS
Open & copy →

Prism Switch

1.2 KB · a11y 98 · Q 96

4.8k
switchtogglegradient
ElementsReact · HTML/CSS
Open & copy →

Halo Button

2.1 KB · a11y 96 · Q 94

3.9k
buttonmagnetichover
ElementsHTML/CSS · React
Open & copy →

Pulse Loader

0.8 KB · a11y 99 · Q 93

5.2k
loaderloadingspinner

Read next — two guides and a prompt

picked by tag overlap, not by hand

Guide

Designing in the open

9 min · Beginner · updated 2026-09-10

Guide

Ship the boring version first

7 min · Beginner · updated 2026-09-12

Prompt

Indie game studio — wishlist push

Gaming · 90% fidelity

How these three were chosen: essays scored on shared tags (1 and 1 matches), then prompt scored on block/vibe overlap (1 matches). The rule lives in src/lib/spine.ts, so the same asset always links to the same three pages and a second reader can reproduce the choice.

–remixes · this browser

The counter is a note to yourself — it adds one each time you tap, in motif:remix-count:v1, and goes nowhere. A real, public remix count would need a server and accounts; this site has neither, and it would rather say that than print a number it cannot own.

Was this helpful?