---
title: "Custom page example gallery"
description: "Four live custom pages — a local-business landing, an animated product launch, an interactive calculator, and an animated showpiece — built from these docs."
url: "https://comstack.ai/docs/custom-pages/examples/"
---
## What this is

Four live custom pages, each for a different fictional business and a different archetype. Every one was authored by an AI agent that learned the platform **only from the documentation in this section** — the same pages you just read — then uploaded with `upload-custom-page` and published through the standard two-step flow. They are working proof of the docs, not mockups.

Each example passes the quality bar described in [Quality gates](/docs/custom-pages/quality.md) (Lighthouse ≥95 across performance, accessibility, best practices, and SEO), carries translation markers throughout, and renders in every site locale — open any of them under `/es/` for the Spanish variant.

## The examples

### [Harbor Paws Veterinary Clinic](/docs/custom-pages/examples/harbor-paws.md)

*Archetype: local-business landing page.* A small-town vet clinic: hero with a clear promise, services at a glance, opening hours, and a `tel:` call-to-action. The bread-and-butter custom page — the kind a restaurant, clinic, or salon ships on day one. Demonstrates clean `data-t-key` marker coverage and a fully self-contained single-file layout.

### [LUMEN smart kettle](/docs/custom-pages/examples/lumen.md)

*Archetype: product launch.* A launch page for a fictional smart kettle: animated hero, feature trio, spec strip, and a pre-order call-to-action. Demonstrates CSS keyframe animation that stays on `transform`/`opacity` (no layout shift), `prefers-reduced-motion` handling, and marker discipline on dense marketing copy.

### [TileWise calculator](/docs/custom-pages/examples/tilecalc.md)

*Archetype: interactive tool.* A tile-and-grout quantity calculator in plain vanilla JavaScript: labeled form controls, instant results, keyboard- and screen-reader-friendly. Demonstrates that custom pages can be genuinely interactive — script included — while holding the accessibility bar.

### [Aurora Skies Tours](/docs/custom-pages/examples/aurora-skies.md)

*Archetype: animated showpiece.* A northern-lights tour operator with a heavily animated, visually striking treatment — layered CSS gradient auroras, drifting stars, scroll-revealed sections. Demonstrates how far pure CSS can go while still passing the performance gate, and how a page this designed still translates cleanly because every string is marked.

## What to take from them

- **View source.** Each page is one self-contained body — the exact thing its author uploaded. What you see is what `upload-custom-page` shipped.
- **Switch locales.** Visit any example with the `/es/` prefix: same layout, translated strings, no per-locale page copies. That is the marker system doing its job — see [Translation](/docs/custom-pages/translation.md).
- **Copy the patterns.** The annotated versions of these techniques — with the reasoning spelled out line by line — are in [Recipes](/docs/custom-pages/recipes.md).

## Related

- [Custom pages overview](/docs/custom-pages.md) — what custom pages are
- [Author a custom page](/docs/custom-pages/authoring.md) — the upload contract
- [Quality gates](/docs/custom-pages/quality.md) — the bar every example here passes
- [Recipes](/docs/custom-pages/recipes.md) — annotated walkthroughs of the same patterns