Add vellum: layered browsing visualization experiment

[spencerc99]

Summary

New visualization experiment at wewere.online/vellum, inspired by printing the cursor/scroll visualizations on translucent vellum paper and overlapping the sheets.

Each unit of browsing — by default one person's visit to one page — becomes a translucent sheet, normalized into a single shared browser-window frame. Sheets stack on a warm paper background and composite with mix-blend-mode: multiply, so overlapping ink darkens the way translucent prints do. Each sheet is composed of plates (bottom → top):

1. PagePlate — a faint serif domain/title "ghost title" per page; optionally (off by default, see below) a ghosted render of the actual page in a sandboxed, scaled iframe whose scroll position replays the recorded viewport scroll events
2. ScrollPlate — a hairline viewport-frame band tracking where the person's viewport sat on the page (optional scroll-history ticks)
3. TrailsPlate — cursor-trail ink in the house style (perfect-freehand tapered outlines, same @movement geometry as the portrait/archive visualizations) plus click/hold marks, progressively drawn during playback

A spread control fans the stack apart (progressive per-sheet offset + slight seeded rotation) so you can peek between the layers, mirroring lifting physical vellum sheets; hovering a fanned sheet lifts it and dims the others.

Screenshots

Captured against deterministic fixture data (the sandbox can't reach the worker); the branch preview shows it with real data.

Full ink (animation off) — riso pigment per sheet, ghost titles overprinting at seeded offsets:

Mid-playback — trails reveal progressively; the still-drawing head gets a blunt cap, finished strokes taper:

Fanned apart (spread 0.55) — cascading captions per sheet, physical shadows:

Dev panel — every parameter, spec-driven:

Domain grouping + mono ink — one sheet per domain, single-pigment monoprint look:

Built as a flexible base

• Grouping is pluggable (grouping.ts): page-visit / domain / day today; calendar views and other groupings slot in as new modes
• Plates are a registry (plates/registry.ts) with per-plate isEnabled(settings) predicates: Sheet.tsx iterates it, so future plates (typing, navigation) plug in without touching the compositor
• Every parameter is spec-driven (settings.ts): ~30 params across data / composition / fan / page / scroll / trails / playback groups, each declared once and auto-rendered in the dev panel (⚙ bottom-right), persisted to localStorage
• Data comes from the existing useArchiveEvents hook (day picker fed by dayCounts, server-side domain filter supported)

Findings from real-data testing

Fixture data masked three problems that live data surfaced; all fixed here:

• Page iframes are opt-in (default off). Real sites behind bot protection render Cloudflare challenge pages ("max challenge attempts") inside embedded iframes — a challenge can never complete in a sandboxed, cross-origin, cookie-less iframe, and the failure is undetectable cross-origin. Since the top-of-stack sheets are exactly the iframe-eligible ones, the top of the pile washed out. Ghost titles are decoupled from the page toggle and stay on.
• Ink defaults to riso (per-sheet pigment). With single-participant real data, participant ink mode gave every sheet the same color, collapsing the stack into one unreadable scribble. Participant mode remains available for multi-person days.
• Trails use the house style. TrailsPlate now renders SVG perfect-freehand filled outlines with tapered ends via @movement/utils/trailAnimation (shared with the portrait/archive visualizations), and click/hold marks reuse CLICK_DEFAULTS ring+core proportions — instead of the earlier bare canvas strokes.
• Sheet backing color is a param (sheetColor + sheetOpacity); settings storage key bumped to v2 so the changed defaults override stored v1 values.

Compositing note (the subtle bit)

Fan offsets are applied via left/top, not transform — a transform on the sheet root creates a CSS stacking context, which isolates each sheet's mix-blend-mode and silently kills cross-sheet multiply blending (the entire vellum effect). Rotation still uses transform but only engages while fanned, where sheets have physically separated. Same rule governs why the PagePlate container carries the blend itself (its opacity already isolates its children). Comments in Sheet.tsx/PagePlate.tsx explain this so it doesn't get "optimized" back.

Known limitations

• domain/day sheets use a first-seen representative URL/color for their page render and ink.
• The opt-in iframe mode keeps its bot-challenge caveat; there is no cross-origin way to detect a failed embed.

Verification

• Type-check clean across all vellum files (the website tsconfig's include only covers src/, so this was checked with an explicit include — pre-existing quirk)
• Visual pass via Playwright against fixture data covering: stacked playback, static full ink, fanned + captions, dev panel, domain grouping + mono ink
• Website-only change (extension/website/**) — no changeset, no PENDING.md bullet, per repo release conventions

🤖 Generated with Claude Code

https://claude.ai/code/session_01VWX2qwLcDT8B83HBHBmJ1V

[cloudflare-workers-and-pages]

Deploying we-were-online-website with    Cloudflare Pages

Latest commit:	82ae068
Status:	✅  Deploy successful!
Preview URL:	https://a6302187.we-were-online-website.pages.dev
Branch Preview URL:	https://claude-layered-browsing-viz.we-were-online-website.pages.dev

View logs

[pkg-pr-new]

Open in StackBlitz

bun add https://pkg.pr.new/@playhtml/common@351

bun add https://pkg.pr.new/playhtml@351

bun add https://pkg.pr.new/@playhtml/react@351

commit: ad09386