Helper · #422
Shareable, without a picture
If you write about an asset — a blog post, a changelog, a launch note — the markup below gives the link a correct title and a description built from the asset's own stored facts. The block itself deliberately contains no image reference, for the reason stated below. This site's own share cards are a different thing: they are generated PNGs served at /og/<slug>.
Tilt Card — Motif UI
/components/tilt-card
Title and description come from the catalog record: stack, bundle size, audit score and licence. Change the record and this block changes with it.
og:image: none — see below
<meta property="og:type" content="article" />
<meta property="og:title" content="Tilt Card — Motif UI" />
<meta property="og:description" content="Perspective card with a light-spot that tracks the cursor and an edge that glows at tilt extremes. The classic 'premium card' — original implementation. React / HTML/CSS · 2.9 KB · a11y 94 · MIT." />
<meta property="og:url" content="https://motif.example/components/tilt-card" />
<meta name="twitter:card" content="summary" />
<!-- No og:image: this site ships no raster artwork. A card image would need a
build step that rasterises, which is a deliberate gap, not an oversight. -->Aurora Veil — Motif UI
/components/aurora-veil
Title and description come from the catalog record: stack, bundle size, audit score and licence. Change the record and this block changes with it.
og:image: none — see below
<meta property="og:type" content="article" />
<meta property="og:title" content="Aurora Veil — Motif UI" />
<meta property="og:description" content="Layered mesh of drifting colour fields behind a fine grain veil. Built on GPU-composited CSS gradients — a 60 fps full-page backdrop at 0 JS. HTML/CSS / React · 2.6 KB · a11y 100 · MIT." />
<meta property="og:url" content="https://motif.example/components/aurora-veil" />
<meta name="twitter:card" content="summary" />
<!-- No og:image: this site ships no raster artwork. A card image would need a
build step that rasterises, which is a deliberate gap, not an oversight. -->Star Motes — Motif UI
/components/star-motes
Title and description come from the catalog record: stack, bundle size, audit score and licence. Change the record and this block changes with it.
og:image: none — see below
<meta property="og:type" content="article" />
<meta property="og:title" content="Star Motes — Motif UI" />
<meta property="og:description" content="Three-layer parallax starfield with twinkle variance and pointer drift. Canvas-free version included for quiet brand sites; WebGL tier for dense scenes. React / HTML/CSS · 3.4 KB · a11y 97 · MIT." />
<meta property="og:url" content="https://motif.example/components/star-motes" />
<meta name="twitter:card" content="summary" />
<!-- No og:image: this site ships no raster artwork. A card image would need a
build step that rasterises, which is a deliberate gap, not an oversight. -->How the previews resolve
With twitter:card = summary and no image, a shared link shows the title and the description as text. The block stays image-free because it is markup you paste onto a page you control, and this helper cannot rasterise for it — a real preview image is a server pipeline, not a snippet. The site's own cards, by contrast, are generated at /og/<slug>: every asset has a PNG, and a scene that animates says so on the card rather than pretending the still is the motion.
What this helper is not
It is not what this site emits about itself. The site's own pages carry title and description metadata from the page, and the helper is for markup you place on a page you control — the copy is explicit about the origin URL so a pasted block does not silently claim to be this domain.
289 assets have a generated block available; these three are the most copied in the catalog.