# Visual Library

A growing, browsable catalog of website elements. Open `index.html` in any browser when starting a new project, scan the tiles, pick what fits.

This is the **visual front door** to the webs agency knowledge base. For deep code, the canonical playbook is still `vault/Topics/web-patterns.md` — every tile here that has working code links back to it.

## Three element types

Every tile carries a badge showing which type it is. The library grows in all three directions over time.

**BUILT** — Working HTML/CSS demo I wrote. Self-contained, mobile-first, JS-free per `CLAUDE.md` rules. Has its own detail page with full code you can copy. Tile shows a live mini-demo.

**CAPTURED** — A section cloned from a real site (URL Julian sent or HTML he pasted). The relevant HTML+CSS extracted into a local working demo, with the original URL kept as attribution. Use these as a head-start when you want that specific look — but always check licensing if you go beyond personal reference.

**REFERENCE** — Screenshot + source URL, for things too JS-heavy or proprietary to clone cleanly (Stripe homepage, Apple product pages, animation-heavy interactives). Visual inspiration only — no copy-paste code.

## Folder layout

```
visual-library/
├── index.html                    # the gallery — open this first
├── README.md                     # this file
├── INTAKE.md                     # workflow for adding new captured elements
├── elements/                     # BUILT + CAPTURED demos (full detail pages)
│   ├── carousels/
│   ├── heroes/
│   ├── navigation/
│   ├── ctas/
│   ├── trust-bands/
│   ├── pricing/
│   ├── animations/
│   ├── effects/                  # neon, scroll progress, reveal, back-to-top, shine sweep
│   ├── layouts/
│   ├── forms/
│   ├── typography/
│   └── multilingual/
├── captured/                     # CAPTURED demos (cloned from real sites)
│   └── <category>/
└── references/                   # REFERENCE screenshots + notes
    └── <category>/
```

Each category folder mirrors across `elements/`, `captured/`, and `references/`, so a carousel cloned from a real estate site lives at `captured/carousels/<slug>.html` and a screenshot at `references/carousels/<slug>.md` next to its image.

## How to extend the library

Two paths:

**Add a new BUILT demo** — Tell Claude *"add a new element to the visual library: a [thing] in the [category] category."* Claude writes `elements/<category>/<slug>.html`, adds a tile to `index.html`, and updates the playbook cross-link if relevant. Detail page template: see any existing carousel page (e.g. `elements/carousels/thumbnail-strip.html`) as the canonical template.

**Add a CAPTURED or REFERENCE from the web** — See `INTAKE.md`. Trigger phrases live there.

## How the gallery filters work

Top of `index.html` has two filter rows (CSS-only, `:has()` selector):

1. **Category** — All / Heroes / Carousels / Navigation / CTAs / Trust bands / Pricing / Animations / Layouts / Forms / Typography / Multilingual
2. **Type** — All / Built / Captured / Reference

Click a pill, the grid filters instantly. No JS. Works in iOS Safari Quick Look.

## Cross-references

- `webs agency/patterns.md` — text index of all 26 patterns (the *code* index)
- `vault/Topics/web-patterns.md` — full playbook with code snippets per pattern
- `webs agency/projects.md` — past projects where patterns were used
- `webs agency/cro/` and `webs agency/seo/` — pre-launch playbooks

## Naming conventions

Detail page filenames: `<descriptive-slug>.html` — e.g. `thumbnail-strip.html`, `before-after-slider.html`. Kebab-case. No dates in filenames (the library is a reference, not a journal).

Captured + reference filenames: same slug + a short source hint if needed — e.g. `airbnb-listing-gallery.html`.

## Last updated

2026-05-18 — v1.1: 26 detail pages across 8 categories. 14 Built from the playbook + 12 Captured from chevy55-premium.html (uploaded test). Added "Effects" category for neon, scroll progress, reveal, back-to-top, shine sweep.