Template Gallery Page

The same Template Gallery Page demo re-lit in three tones — no code change, three personalities.

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

Assemble it between your own header and footer — sections are the middle of the page, where information architecture lives.

Swap the demo copy for real content first, then reduce: cut decorative blocks until the section survives on its information alone.

Cheaper alternative — the minimal variant drops the decorative layers and keeps the content hierarchy.

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

This asset is not motion-first, so reduced-motion mainly affects its decorative extras (reveals, hovers). The content layer never depends on motion to be readable.

Step through what a keyboard user experiences with this asset.

Same-family assets that compose cleanly with this one:

The pricing page that stopped lying

A pricing section with three tiers and no indication of which one people actually chose produced analysis paralysis. Adding one honest 'most chosen' chip — not a fake 'popular' badge, but a real count — lifted conversions by 8% and cut support questions about tier differences.

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

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

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.

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

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

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

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.

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

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.

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.

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

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.

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

The honest verdict — Template Gallery Page is the lighter default here; reach for Aurora Hero Section when its extra weight buys an interaction this one lacks.

Every template ships with its origin and its audits visible — provenance is part of the product.

One template, two token sheets — the build survives a rebrand without structural edits.

Try a different lead section under this template's frame:

Swap comparisons: which lead says more about the template's audience? The best pairing is the one whose voice matches your copy.

Build a template from a checklist instead of a blank page. Tick the sections your page needs:

4 sections chosen — a sane first build is 3–5. The checklist rides along in the JSON export.

Export this template's build as a machine-readable spec — paste it into a future Motif CLI to reproduce the assembly.

{
  "spec": "motif-build/v1",
  "template": "template-gallery",
  "title": "Template Gallery Page",
  "author": "Motif Studio",
  "published": "2026-09-09",
  "stack": [
    "React"
  ],
  "theme": {
    "mode": "dark",
    "hue": 262
  },
  "sections": [
    "hero",
    "proof",
    "feature",
    "footer"
  ],
  "lead": "hero-aurora",
  "license": "MIT"
}

The parts that make up this build, and the library assets that play each part:

.tile { display: flex; flex-direction: column; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.06); background: rgba(255,255,255,.03);
  padding: 8px 10px; transition: border-color .2s ease; }
.tile:hover { border-color: rgba(255,255,255,.15); }
.tile[data-copied="true"] { border-color: rgba(52,211,153,.4); }

Diff verdict: same visuals, zero runtime — the cheapest version.

Templates built by the community can join this gallery. The flow is explicit: submit a build URL + the asset list → studio audit (originality, a11y, size) → published beside the originals with credit.

One zip for offline use: the stylesheet, a blank index.html shell with it wired in, the JSON build spec and a README that tells the next person how to rebrand and where the recipe lives. No account, no build step.

Packaged client-side as a classic (uncompressed) zip — open with any OS unzip tool.