Exclusivebeta

Dorian — `<mv-dorian>`

Content freshness you can see at a glance: wrap any content (doc page header, help-center article, pricing table, policy) and it stays exactly as it is, while a small framed portrait next to it ages with the time since its last review. The age ratio (time since updated / lifespan) maps to five stages (fresh, settled, aging, stale, decrepit, thresholds configurable) and drives a procedural, seeded bust drawn in inline SVG: each item gets its own face, and as it ages the colors drain, the varnish yellows, fine lines appear, features and shoulders droop, hair silvers, the gilded frame tarnishes into patina and cracks, and dust gathers in a vignette, all continuously. The portrait is a button that opens a panel with the stage, the exact dates, an age gauge against the lifespan, the owner and a “Mark as reviewed” action that rejuvenates the portrait with a smooth tween and a glint. Badge variant adds “Aging · Reviewed 7 months ago”; placements inline-start, inline-end, corner or any element marked data-dorian-anchor.

Category	Data display
Type	Web Component (`<mv-dorian>`)
Status	beta
Keywords	exclusive, culture, freshness, staleness, content-review, last-updated, review-cycle, knowledge-base, documentation, policy, governance, age, portrait, generative, svg, procedural, popover, relative-time

When to use

Help-center or internal docs articles must show at a glance which ones are overdue for a review
A policy, pricing sheet or runbook page should make its own staleness obvious to readers and to its owner
Content owners need a lightweight in-place “Mark as reviewed” action next to the content they maintain
A list of documents should be scannable by freshness without adding a dedicated column of dates

Avoid when

Only a short status label is needed, with no age progression or review action → use Badge instead
The content changes continuously (live data, feeds) and has no review cycle to measure against
Hundreds of items render at once on a dense table, where a date column sorts and scans better → use Data table instead

Install

node scripts/add.mjs dorian --out ./src/marvelous

AI agent with the Marvelous UI MCP server: install_components({ slugs: ["dorian"], target_dir: "<absolute path>/src/marvelous", framework: "react" }).

Files copied (dependencies included): tokens/tokens.css, core/base.css, core/dismiss.js, core/dom.js, core/element.js, core/motion.js, core/position.js, components/dorian/dorian.js, components/dorian/dorian.css.

Usage

Canonical markup — start from it and customize with attributes, data-* and CSS variables:

<div id="dg-demo" style="width:min(100%,46rem);margin-inline:auto">
  <style>
    #dg-demo { display:grid; gap:1.75rem }
    #dg-demo .dg-card { border:1px solid var(--mv-border); border-radius:var(--mv-radius-xl); background:var(--mv-surface); box-shadow:var(--mv-shadow-xs) }
    #dg-demo .dg-head { display:flex; align-items:center; justify-content:space-between; gap:.75rem 1rem; flex-wrap:wrap; padding:1rem 1.25rem; border-bottom:1px solid var(--mv-border) }
    #dg-demo .dg-head h3 { margin:0; font-size:.9375rem; letter-spacing:-.01em }
    #dg-demo .dg-head p { margin:.125rem 0 0; color:var(--mv-fg-muted); font-size:.8125rem }
    #dg-demo .dg-list { list-style:none; margin:0; padding:.25rem 0 }
    #dg-demo .dg-list li + li { border-top:1px solid var(--mv-border) }
    #dg-demo .dg-list mv-dorian { align-items:center; padding:.75rem 1.25rem }
    #dg-demo .dg-list .mv-dorian-trigger { min-width:12.25rem }
    #dg-demo .dg-article { display:flex; align-items:center; gap:.875rem; min-width:0; color:inherit; text-decoration:none }
    #dg-demo .dg-icon { display:grid; place-items:center; flex:none; width:2.25rem; height:2.25rem; border-radius:var(--mv-radius-md); background:var(--mv-bg-muted); color:var(--mv-fg-muted) }
    #dg-demo .dg-icon svg { width:1.05rem; height:1.05rem }
    #dg-demo .dg-article strong { display:block; font-size:.875rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
    #dg-demo .dg-article:hover strong { text-decoration:underline; text-underline-offset:.2em; text-decoration-color:var(--mv-border-strong) }
    #dg-demo .dg-meta { display:block; margin-top:.125rem; color:var(--mv-fg-muted); font-size:.75rem }
    #dg-demo .dg-foot { display:flex; align-items:center; justify-content:space-between; gap:.75rem; flex-wrap:wrap; padding:.75rem 1.25rem; border-top:1px solid var(--mv-border); color:var(--mv-fg-muted); font-size:.8125rem }
    #dg-demo .dg-actions { display:flex; gap:.5rem; flex-wrap:wrap }
    #dg-demo .dg-policy { padding:1.5rem }
    #dg-demo .dg-policy mv-dorian { --mv-dorian-size:88px; --mv-dorian-gap:1.5rem; align-items:center }
    #dg-demo .dg-kicker { margin:0; color:var(--mv-fg-muted); font-size:.75rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase }
    #dg-demo .dg-policy h2 { margin:.3rem 0 .4rem; font-size:1.5rem; line-height:1.2; letter-spacing:-.02em }
    #dg-demo .dg-policy p.dg-lede { margin:0; max-width:34rem; color:var(--mv-fg-muted); font-size:.875rem; line-height:1.55 }
    #dg-demo .dg-tags { display:flex; gap:.375rem; flex-wrap:wrap; margin-top:.75rem }
    #dg-demo .dg-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:1rem }
    #dg-demo .dg-grid .dg-card { padding:1.125rem 1.25rem }
    #dg-demo .dg-grid mv-dorian { --mv-dorian-size:40px }
    #dg-demo .dg-grid h4 { margin:0 0 .25rem; padding-inline-end:3.25rem; font-size:.9375rem }
    #dg-demo .dg-grid p { margin:0; padding-inline-end:3.25rem; color:var(--mv-fg-muted); font-size:.8125rem; line-height:1.5 }
    #dg-demo .dg-grid .dg-price { margin-top:.75rem; padding:0; color:var(--mv-fg); font-size:1.25rem; font-weight:600; letter-spacing:-.02em }
    #dg-demo .dg-grid .dg-price small { color:var(--mv-fg-muted); font-size:.8125rem; font-weight:400 }
  </style>

  <!-- 1 · Policy page header, large portrait -->
  <section class="dg-card dg-policy" aria-label="Policy header">
    <mv-dorian id="dg-policy" data-days="152" lifespan="1y" owner="Amara Nwosu, Legal" seed="data-retention">
      <p class="dg-kicker">Policy · Version 3.2</p>
      <h2>Data Retention Policy</h2>
      <p class="dg-lede">How long we keep customer records, backups and logs, and how deletion requests are handled across every region we operate in.</p>
      <div class="dg-tags">
        <span class="mv-badge" data-variant="secondary">Legal</span>
        <span class="mv-badge" data-variant="outline">Applies to all workspaces</span>
      </div>
    </mv-dorian>
  </section>

  <!-- 2 · Knowledge base, badge variant -->
  <section class="dg-card" aria-labelledby="dg-kb-title">
    <div class="dg-head">
      <div>
        <h3 id="dg-kb-title">Help Center · Billing &amp; accounts</h3>
        <p>Each article ages against a 6-month review cycle.</p>
      </div>
      <span class="mv-badge" data-variant="outline">5 articles</span>
    </div>
    <ul class="dg-list" id="dg-kb">
      <li><mv-dorian variant="badge" placement="inline-end" data-days="3" owner="Priya Raman">
        <a class="dg-article" href="#"><span class="dg-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="5" width="20" height="14" rx="2"/><path d="M2 10h20"/></svg></span>
          <span style="min-width:0"><strong>Update your payment method</strong><span class="dg-meta">Billing · 3 min read · 4,812 views</span></span></a>
      </mv-dorian></li>
      <li><mv-dorian variant="badge" placement="inline-end" data-days="61" owner="Marcus Chen">
        <a class="dg-article" href="#"><span class="dg-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6M9 13h6M9 17h4"/></svg></span>
          <span style="min-width:0"><strong>Download invoices and receipts</strong><span class="dg-meta">Billing · 2 min read · 2,390 views</span></span></a>
      </mv-dorian></li>
      <li><mv-dorian variant="badge" placement="inline-end" data-days="152" owner="Sofia Alvarez">
        <a class="dg-article" href="#"><span class="dg-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/></svg></span>
          <span style="min-width:0"><strong>Change your plan or seat count</strong><span class="dg-meta">Accounts · 4 min read · 1,975 views</span></span></a>
      </mv-dorian></li>
      <li><mv-dorian variant="badge" placement="inline-end" data-days="243" owner="Daniel Okafor">
        <a class="dg-article" href="#"><span class="dg-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg></span>
          <span style="min-width:0"><strong>Set up single sign-on with SAML 2.0</strong><span class="dg-meta">Security · 7 min read · 864 views</span></span></a>
      </mv-dorian></li>
      <li><mv-dorian variant="badge" placement="inline-end" data-days="730" owner="Hannah Weber">
        <a class="dg-article" href="#"><span class="dg-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m16 18 6-6-6-6M8 6l-6 6 6 6"/></svg></span>
          <span style="min-width:0"><strong>Migrate from the legacy v1 API</strong><span class="dg-meta">Developers · 9 min read · 512 views</span></span></a>
      </mv-dorian></li>
    </ul>
    <div class="dg-foot">
      <span id="dg-log" aria-live="polite">Open a portrait to see its dates, owner and review action.</span>
      <div class="dg-actions">
        <button class="mv-button" data-variant="outline" data-size="sm" type="button" id="dg-forward">Fast-forward 3 months</button>
        <button class="mv-button" data-variant="ghost" data-size="sm" type="button" id="dg-reset">Reset</button>
      </div>
    </div>
  </section>

  <!-- 3 · Cards, portrait in the corner -->
  <div class="dg-grid">
    <article class="dg-card">
      <mv-dorian placement="corner" data-days="18" lifespan="90d" owner="Revenue team">
        <h4>Enterprise pricing sheet</h4>
        <p>Per-seat pricing, volume tiers and the annual discount grid.</p>
        <p class="dg-price">$38 <small>per seat / month</small></p>
      </mv-dorian>
    </article>
    <article class="dg-card">
      <mv-dorian placement="corner" data-days="420" lifespan="1y" owner="Site Reliability">
        <h4>Incident response runbook</h4>
        <p>Severity levels, paging rotation and the customer comms template.</p>
        <p class="dg-price">SEV-1 <small>page within 5 minutes</small></p>
      </mv-dorian>
    </article>
  </div>

  <script type="module">
    const root = document.getElementById("dg-demo");
    const all = [...root.querySelectorAll("mv-dorian")];
    const iso = (d) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
    const daysAgo = (n) => { const d = new Date(); d.setDate(d.getDate() - n); return iso(d); };
    let offset = 0;
    const reset = () => {
      offset = 0;
      for (const el of all) { el.removeAttribute("now"); el.setAttribute("updated", daysAgo(Number(el.dataset.days))); }
    };
    reset();

    const log = document.getElementById("dg-log");
    const title = (el) => el.querySelector("strong, h2, h4")?.textContent.trim() ?? "Item";
    root.addEventListener("mv-review", (e) => { log.textContent = `“${title(e.target)}” marked as reviewed.`; });
    root.addEventListener("mv-stage", (e) => { log.textContent = `“${title(e.target)}” is now ${e.detail.label.toLowerCase()}.`; });
    document.getElementById("dg-forward").addEventListener("click", () => {
      offset += 91;
      const now = new Date(); now.setDate(now.getDate() + offset);
      for (const el of all) el.setAttribute("now", now.toISOString());
      log.textContent = `Viewing the list as of ${now.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" })}.`;
    });
    document.getElementById("dg-reset").addEventListener("click", () => {
      reset();
      log.textContent = "Back to today.";
    });
  </script>
</div>

Cultural reference

The Picture of Dorian Gray — Oscar Wilde (1890, novel). Dorian stays young and flawless while his hidden portrait ages and bears the marks of time in his place. Here the content itself stays pristine while a small portrait beside it ages with the time since its last review, and a review restores its youth.

API

Attributes

Name	Type	Default	Description
`updated`	date (YYYY-MM-DD \| ISO 8601 \| epoch ms)		Date of the last review. A plain YYYY-MM-DD is read as a local calendar date. Missing or invalid: “Never reviewed”, fully aged (decrepit).
`lifespan`	duration	`180d`	How long the content stays trustworthy after a review: 36h, 90d, 26w, 6mo (or 6m), 1y; a bare number means days. The age ratio is (now − updated) / lifespan.
`stages`	string	`0.25,0.5,0.8,1`	Four ascending ratio thresholds separating fresh \| settled \| aging \| stale \| decrepit. Ratio ≥ the last one (1 by default: past the lifespan) is decrepit.
`stage-labels`	string	`Fresh,Settled,Aging,Stale,Decrepit`	Five visible labels for the stages (badge, panel, accessible name), comma-separated.
`seed`	string		Seed of the procedural face. Without it, the face is derived from a hash of the text content at first render, so each item gets its own stable face.
`placement`	inline-start \| inline-end \| corner	`inline-start`	Where the portrait sits relative to the content: a column before or after it, or absolutely positioned in the top-end corner (leave room with padding on the content). Ignored when an element inside carries data-dorian-anchor: the portrait is then appended into it.
`variant`	portrait \| badge	`portrait`	portrait: the framed portrait alone. badge: a compact bordered chip with a smaller portrait, the stage (dot + label) and “Reviewed 7 months ago”.
`owner`	string		Person or team responsible for reviewing the content, shown in the panel.
`label`	string	`Freshness`	Prefix of the accessible name and panel kicker (“Freshness: aging — …”).
`now`	date		Freezes the clock at this date (tests, screenshots, server-rendered snapshots, “as of” views). Without it, the real time is used and re-checked every minute and on tab return.
`readonly`	boolean		Hides the “Mark as reviewed” action (readers who cannot review).
`data-dorian-anchor`	marker attribute		On a descendant: the portrait button is appended into that element (e.g. a card’s meta line) instead of beside the content.
`data-stage`	fresh \| settled \| aging \| stale \| decrepit		Set by the component on the host (styleable).

Properties

Name	Type	Description
`age`	{ ratio, stage, label, days, updated, due, lifespan, visual, now }	Read-only snapshot: ratio (0…∞), stage key and label, days since the review, updated and due as Date (null if never reviewed), lifespan in days, visual age 0–1 used by the portrait (1 − e^(−1.1·ratio)).
`updated / lifespan / stages / seed / placement / variant / owner / now / readonly`	reflected	Every attribute is mirrored as a property; changing one re-renders (age changes are tweened).

Methods

Name	Description
`review()`	Marks the content as reviewed now (or at the frozen `now`): sets `updated` to an ISO timestamp, rejuvenates the portrait and emits mv-review.
`open() / close()`	Opens (focus moves into it) or closes the details panel.
`refresh()`	Recomputes age, stage and labels immediately (it also happens every minute, on tab return and on attribute changes).

Events

Name	Description
`mv-review`	“Mark as reviewed” (or review()). detail: { previous: Date \| null, updated: Date }. Persist it on your side; set `updated` back if the save fails.
`mv-stage`	The stage changed after the first render: time crossed a threshold while the page was open, `updated`, `lifespan` or `now` changed, or a review happened. detail: { stage, previous, ratio, days, label }.

Content structure

Name	Description
`(content)`	Any content; it is moved into a .mv-dorian-body wrapper and never altered.

CSS classes

Name	Description
`mv-dorian-trigger`	The portrait button (aria-expanded, aria-controls) holding .mv-dorian-frame and, in the badge variant, .mv-dorian-text (.mv-dorian-stage + .mv-dorian-when).
`mv-dorian-frame / mv-dorian-svg`	Frame box (4:5) and the procedural SVG inside it; data-size="lg" in the panel.
`mv-dorian-body`	Wrapper of the original content.
`mv-dorian-attic`	Details panel (Popover API, non-modal role=dialog): -attic-head, -kicker, -attic-stage, -attic-summary, -gauge (-meter, -meter-fill, -meter-tick, -meter-caption), -facts (dl), -review button.

CSS variables

Name	Type	Default	Description
`--mv-dorian-size`		`44px (34px in badge)`	Portrait width; the height follows a 4:5 ratio.
`--mv-dorian-attic-size`		`72px`	Width of the large portrait in the panel.
`--mv-dorian-gap`		`var(--mv-space-4)`	Space between portrait and content (inline placements).
`--mv-dorian-inset`		`0`	Offset from the corner (corner placement).
`--mv-dorian-gild`		`soft gold (light-dark)`	Artistic: the frame’s gilding when fresh. Set it to var(--mv-border-strong) for a plain neutral frame.
`--mv-dorian-patina`		`muted olive (light-dark)`	Artistic: what the gilding turns into with age (also the chips on the frame).
`--mv-dorian-age`	output		Set on the host: visual age 0–1, usable to style the content itself (e.g. a faint border).

Accessibility

The stage is never conveyed by the picture alone: the portrait is a real <button> (aria-haspopup="dialog", aria-expanded, aria-controls) whose accessible name spells it out (“Freshness: aging — last reviewed 7 months ago, review due in 2 months” / “…, review overdue by 3 months”), the badge variant prints the stage label and relative time next to a colored dot, and the panel repeats stage, dates, lifespan share and owner in text. The procedural SVG is aria-hidden. The panel is a non-modal role="dialog" labelled by its stage heading, shown with the Popover API (top layer) and positioned next to the portrait; opening moves focus into it, Tab reaches “Mark as reviewed”, Escape or an outside click closes it and Escape returns focus to the portrait, and tabbing out closes it. After a review a polite role=status announces “Marked as reviewed. Freshness: fresh.”; stage crossings are only announced while the panel is open so a page full of items stays quiet. Visible focus rings on the portrait and the button; full touch support (plain taps). Relative times use Intl.RelativeTimeFormat en-US, dates Intl.DateTimeFormat. prefers-reduced-motion and [data-motion="reduce"]: no rejuvenation tween, glint or bounce, the portrait switches instantly to its new age; the panel appears without motion.