This site is the demo
You are looking at the portfolio piece.
This is not a screenshot or a list of hypothetical features. Use the page: each example below is the real browser feature.
Change the actual page theme
Click the control and watch the whole page respond.
One accessible button drives CSS custom properties, OKLCH color, color-mix(), and a native View Transition when supported.
Resize the component, not the window
Drag the demo's right edge left or right. Only its width changes.
A CSS container query lets the component react to the space it actually receives. The edge also works with touch and arrow keys.
Its own inline size—not the browser width—changes this composition.
Card width
Open a real native disclosure
Open the disclosure in this demo.
Semantic HTML works without JavaScript. Newer CSS adds a smooth transition while older browsers keep the useful fallback.
What works before enhancement?
The disclosure, keyboard behavior, and meaning come from HTML. It works without JavaScript; modern CSS only improves the reveal.
Let the browser pick the image
Resize the card from its right edge and watch the live width and image format.
Picture and srcset offer AVIF and WebP at multiple sizes; the browser chooses an efficient source for the card.
Card width
Mix a perceptual color system
Move the hue control and remake the palette live.
OKLCH keeps perceived lightness coherent while a registered CSS property makes the color change smoothly.
oklch(72% 0.16 148)
Switch a real View Transition
Choose a project phase or use the arrow keys.
Accessible tabs update immediately; supporting browsers animate the panel with the native View Transition API.
Audience, message, proof, and next action before decoration.
Responsive, accessible, fast, and ready for real content.
Short review loops keep changes concrete and maintainable.
Let the parent understand its fields
Check the task and enter a valid email address.
Pure CSS :has() styles the whole card from native child state. There is no JavaScript listener behind this demo.
CSS reads the native checked and valid states from these fields.
Make progress follow the scroll
Scroll inside the demo, not the page.
A contained CSS scroll timeline drives the progress meter and tile reveals without an animation loop.
Useful landmarks before motion.
The timeline only decorates content already present.
Your scroll position is the clock.
Ask this browser what it can do
Read the live capability results from your browser.
Small standards-based probes support progressive enhancement: use the modern path when available and keep a useful fallback.
- OKLCH colorChecking…
- Container queriesChecking…
:has()selectorChecking…- Scroll timelinesChecking…
- View TransitionsChecking…
- Anchor positioningChecking…
Faster than the agency ritual.
We start with the clearest useful version, review it together, and work in short, scoped loops until the design and message feel coherent. You see progress early, and revisions stay practical.
Talk through your site