Demos

Hands-on experiments and UI playgrounds

These are the posts that need raw HTML, CSS, and JavaScript to make the idea click.

  • Fonts Carry Voice

    Practical typography systems from a UX/front-end perspective: scales, spacing, family pairings, and side-by-side demos that show both great and disastrous treatments of the same layout.

    Run the demo

  • Screen Shredder Demo

    • Operational Safety

    A semantic HTML shredding experiment that slices the current page into thin strips and drags them off screen in plain CSS and JavaScript.

    Run the demo

  • React Context vs Zustand vs Jotai — A Visual Guide

    • React, State Management

    A clear, dependency‑free visual guide to why React Context updates rerender every consumer — and how Zustand selectors and Jotai atoms keep updates narrow. Includes simple simulated demos.

    Run the demo

  • Hand‑Held Card Fan (Lerped)

    • UI, Animation

    A tiny HTML/CSS/JS demo that fans, opens, and rotates a deck of cards with smooth lerped transforms — no frameworks.

    Run the demo

  • Light & Color Ideas for Modern Frontend

    • Design, Frontend

    Practical UI patterns: modular rhythm, natural motion, OKLCH palettes, hierarchy, tiny charts, and accessible status—with an interactive palette and copy‑paste code.

    Run the demo

  • Simple Math for Better UI Motion

    • UI/UX, Interaction Design

    Use noise, nonlinear intensity, and smoothing to make UI motion feel deliberate and calm, not jittery.

    Run the demo

  • Rainbow Border with Modern CSS (One Rule)

    • CSS

    Minimal, copy‑paste CSS to make a rainbow border using layered backgrounds and conic‑gradient. One rule. No extra markup.

    Run the demo

  • Lesser-Known Native HTML Elements

    • Web Development, HTML

    Exploring powerful HTML elements you probably haven't used: dialog, details, ruby, meter, and output for interactive content without JavaScript

    Run the demo