UX Experiments and other fun web/screen exercises

Sometimes I need to build out web-based interfaces to measure the possibilities or to fully visualize design gaps and interaction issues. Here are a few that are not under embargo...

  • Color Contrast via Twind

    A Twind v0 auto accessible foreground color contrast "plugin" using CSS props/variables.

  • Theme Switcher

    Dynamic class swapping to simulate on-the-fly theme switching using Twind's amazinf CSS in Js.

  • jQuery-ish Contrast Color

    DEPRECATED ~ Another Twind v0 foreground color contrast example but this one is using jQuery.

    Request

  • Twind Prose + Vue Fun

    A starter page using Vue and Twind. Contains advanced examples for both libraries.

  • Kiesel Itemization

    A prototype example of a Kiesel Guitar itemized option list and price sheet.

  • Wrapped

    A super simple template to mimic Spotify's "Wrapped" yearly usage experience.

  • SASG + Twind

    A recreation of a the classic SASG website home page using modern HTML, Twind, and Alpine.

  • Alpine.js + Elasticlunr

    Example of how to use Alpine.js & Elasticlunr together as well as an external data file.

  • BeOS

    Let's use modern web tech to recreate BeOS UI chrome. No images. Just JSS/Twind and HTML...

  • Xpandy via Twind

    An interesting horizontal accordion effect for columns with background images.

  • Calendar

    Every day of the calendar year in a nice grid format, printable on a single page.

  • Music Player UI

    A pure HTML/CSS music player UI created entirely in Twind/Tailwind and Alpine.js.

  • Alpine.js Drag & Drop

    Pure Alpine.js drag & drop with full keyboard controls and hooks in place for a11y...

  • 11ty Twind

    Starter kit for 11ty that uses Twind, Alpine, and some other cool stuff.