Eye of the Viber logo

Tag: Quick Build

  • The Dirt Guide

    The Dirt Guide

    What I Asked For

    The idea was a historical reference site for dirt and dual-sport motorcycles, covering all the major manufacturers from the early 1970s forward. Each brand gets its own page, and the main view is a year grid: cards arranged oldest-to-newest, three or four across, so you can scroll through a manufacturer’s entire output and see which models existed in which years at a glance. Click a year, get a modal with the lineup for that year. Click a bike, get the full detail: photo, specs, displacement, engine type, famous riders who raced or rode it.

    One structural idea that shaped the whole thing from the start: store data model-centric, not year-by-year. A bike like the Honda XR250R ran from 1981 to 2004. Storing a separate record for each of those 23 years would be a maintenance nightmare. Instead, each model is one record with a year span, and the year grid is computed from that at render time. That also makes it easy to link dual-sport and off-road sister models to each other, because those relationships are just ID references between records.

    The dual-sport angle mattered. A lot of what makes this space interesting is the pairing: the XR and the XL, the XT and the TT, the DR and the DR-Z. Understanding one usually means understanding the other.

    What It Is

    Dirt Guide is a full Next.js app deployed on Vercel, browsable at dirt-guide.vercel.app. It currently covers nine manufacturers: Honda, Yamaha, Suzuki, Kawasaki, KTM, Husqvarna, GasGas, Beta, and Sherco, with model histories running from the late 1960s through 2026. There’s also a cross-manufacturer timeline view for seeing the whole landscape in one place.

    The data structure is the part I’d build the same way again. Because each model is stored as a single record with a year span and a set of year-specific notes for major changes, adding a new manufacturer or correcting a detail means touching one record, not twenty-five. The grid view, the modal, and the timeline all derive from the same source.

    It is not a forum. It is not a buying guide. It is a map. That was always the point.

  • Surf tuner

    Surf tuner

    What I Asked For

    The starting idea was a guitar tuner that didn’t have to look or behave like every other guitar tuner. The basic tuner still needed to be accurate and useful, but I wanted to experiment with different ways of visualizing pitch — something more interesting than watching a needle move toward the center of a gauge.

    That eventually led to Surf Mode. Instead of simply showing whether a note is sharp or flat, the idea was to turn tuning into a tiny game: use the pitch of the guitar to control a surfer riding a wave. As you tune the string, the surfer responds to how far above or below the target pitch you are. Getting in tune means finding the sweet spot and riding it.

    From there the idea expanded into a little laboratory for experimenting with pitch. The traditional tuner could be one mode, but the same microphone and pitch data could drive completely different visual experiences.

    What It Is

    Tune Lab is a browser-based guitar tuner and pitch visualization experiment. It uses your device microphone to listen to the guitar, detect the fundamental frequency of the note, and compare it against the target pitch.

    There are currently five different ways to interact with that information: Tuner, Visuals, Surfer, Butterfly, and Staff. The regular Tuner gives you the practical version, while the other modes reinterpret the same pitch information visually. Surfer turns tuning into a game-like experience, while modes like Butterfly and Staff explore completely different ways of seeing pitch.

    There are also reference buttons for the six standard guitar strings — E2, A2, D3, G3, B3, and E4 — so you can select a target string directly instead of relying entirely on automatic note detection.

    The interesting part is that none of these are really different tuners. They’re different interfaces sitting on top of the same basic input: the frequency coming from your guitar. Once that number exists in the browser, it can move a needle, animate an image, place a note on a staff, or let you surf a wave.

    It’s at tune-lab-ten.vercel.app. Try Surfer mode. It’s much more fun than staring at a tuning needle.

  • Living Text

    Living Text

    What I Asked For

    The starting concept was a generative art app where typing text produces animated visuals driven by two things simultaneously: the semantic weight of the words themselves, and the physical shapes of the letters. Soft, slow words like “dream” or “still” would generate ambient, trailing motion. Fast, hard words like “fire” or “shatter” would produce something fragmented and strobing.

    From there, the priority became the share flow. Not just a visual you look at alone, but something you could send: type a message, hit Share, and the recipient gets a full-screen, chrome-free version of your living letter at a unique URL. The URL format is a poetic adjective-noun slug generated from the word pool in the app, something like “wandering-fire” or “silent-bloom,” so even the link itself carries a little bit of the feeling.

    What It Is

    Living Text is a full production web app, not a self-contained file. It runs on Next.js, deploys on Vercel, and uses Vercel KV (Redis) to store shares with a 30-day expiry. When you hit Share, an API route saves your text and returns a slug. That slug resolves to a viewer page that shows nothing but the visual, with a subtle “create your own” link in the corner.

    The visual engine itself is a dual-canvas system with eight motion forms: pulse, burst, spiral, bloom, wave, fall, shatter, and bounce. The semantic analysis happens client-side, mapping words and letters to color ranges, motion types, and intensity levels. No model calls, no backend processing. The meaning lives in the word map.

    It’s at livingtext.vercel.app. Type something slow and then type something fast and see what happens.

  • Tube Amps Family Tree

    Tube Amps Family Tree

    What I Asked For

    The starting idea was straightforward: an interactive educational guide to electric guitar tones, organized around the signal chain, with visual spectrum displays showing where different gear sits relative to everything else. Not just a list of amps, but a way to see that a Fender Champ and a Diezel VH4 exist on opposite ends of the same axis, and that everything in between is a point on that line. The same idea applied to drive pedals, pickups, and speakers.

    From there it grew into a two-way tool: you could set parameters and see which artists or tones you were approximating, or start from a famous tone and reverse-engineer the recipe. The Dimebag example is a good one. His “Cowboys from Hell” tone sounds impossibly aggressive, but when you break it down, it’s hot pickups pushing a solid-state Randall with a mid-scooped EQ. That’s a teachable, reproducible concept.

    The final version that got built focuses specifically on amplifiers, organized into a field guide and a genealogy tree that shows how amp designs actually descended from each other. The Soldano SLO is a hot-rodded Marshall. The 5150 has its own bloodline. The Fender Bassman is the ancestor of more amps than most people realize. Seeing it laid out as a family tree makes the whole landscape make sense in a way that reading individual reviews never did.

    What It Actually Is

    No app store, no backend, no subscription. It’s a self-contained interactive React component, built entirely inside Claude as a single file. All the amp data, the lineage relationships, the narratives, everything lives inside that file. You open it in a browser and it works. If you want to add an amp or correct a relationship, you edit one array.

    That’s kind of the point. The tool should be as simple as the idea it’s trying to communicate.

    https://amp-field-guide-nine.vercel.app