Design Notes

The case-study layer for how the experiments are supposed to work.

The notes layer exists so the showcase work does not become pure surface. Each piece needs a reason, a frontend proof, and a short list of guides worth reaching for when the next version gets built for real.

Why it exists What it proves Which guides matter
01

Experiment notes

What each microsite is trying to prove.

Motion Poster

Prove that one release page can feel cinematic and premium without needing a full gallery or a product stack.

  • Use typography as the main piece of choreography.
  • Keep the supporting copy sparse enough that the frame still does the talking.
  • Route continuity matters more than micro-interaction clutter.
Open experiment

Photography Contact Story

Prove that the contact or booking moment can stay emotionally aligned with the rest of a quiet photography site.

  • Sequence matters more than form fields.
  • Whitespace is part of the conversion path.
  • Reduced-motion safety cannot break the pacing.
Open experiment

Interactive Product Story

Prove that a premium product page can be technical, calm, and visually distinct without defaulting to generic SaaS blocks.

  • Anchor callouts to real story beats, not random decoration.
  • Use transitions to smooth route changes and section reveals.
  • Keep the object or central idea visible throughout the page.
Open experiment

Data Story

Prove that benchmarks and product signals can read like an argument instead of a clipped dashboard export.

  • Use data to support the narrative, not replace it.
  • Readable hierarchy matters more than flashy charting.
  • Keep the page useful even when advanced effects are missing.
Open experiment
02

Reference shelf

External guides we want close at hand.

Baseline-aware web platform targets

Use this to keep the showcase work ambitious without drifting into brittle one-browser tricks.

Open guide

View Transitions

The clearest route-level polish tool for making these pages feel connected instead of isolated panels.

Open guide

Astro view transitions

Relevant the moment one of these experiments graduates from a single static page into a fuller Astro-powered surface.

Open guide

Anchor positioning

Useful for notes, labels, and UI callouts that should stay attached to the visual they are describing.

Open guide

Scroll-driven animations

Useful for staging reveals and narrative pace when the effect remains readable and optional rather than essential.

Open guide

WebGPU

Keep it in reserve for one flagship experiment only, and only behind graceful fallbacks.

Open guide