Agency Showcase

The same Agency Showcase 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.

Start here when a page shape is 80% of the battle — a landing, a changelog, a waitlist — then replace the demo voice with yours.

Duplicate the template, re-theme the tokens, then replace sections one at a time so the layout never breaks mid-edit.

Cheaper alternative — compose the same page from section assets to strip what you do not need.

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 landing that loaded before the hero photo

A template-heavy landing shipped with a 2MB hero image, so the headline appeared 4 seconds late on 3G. The fix: a skeleton shell in the template's own layout plus width/height on the image. Perceived load dropped to under a second because the frame painted first.

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.3 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:

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.

This templates asset is currently the only one in its family — siblings arrive as the catalog grows.

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": "agency-showcase",
  "title": "Agency Showcase",
  "author": "Motif Studio",
  "published": "2026-07-30",
  "stack": [
    "React",
    "HTML/CSS"
  ],
  "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:

/* Grab the fully-written CSS from the "HTML/CSS" view,
   or install with:  npx motifui add agency-showcase  */

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.