Varun Vachhar

Colophon

How this site is built: what it runs on, the few rules it's designed by, and how the demos inside the posts work.

Stack

  • Framework Astro 6, built to static HTML. Posts are MDX.
  • Interactivity React 19 islands for live sketches and the demos.
  • Styling Tailwind CSS 4.
  • Sketches ssam and canvas-sketch-util.
  • Type Recursive, Departure Mono, MEK Sans and Devanagari Pixel.
  • Code Shiki, with the Night Owl theme.
  • Components Storybook, with visual tests on Chromatic.

Style guide

Black-and-white chrome, mono type, 1px hairlines, and no shadows or gradients. All the color and motion belongs to the sketches.

Storybook · latest from main

Inks

  • Ink Black

    #000000

    Type, hairlines, inversions

  • Gallery White

    #FFFFFF

    The wall

  • Tube Black

    #030712

    The masthead band

Voices

Grid

A placard, a framed window and a paragraph. The placard's box and the window's frame line up on the grid edge; the placard's first letter and the paragraph's text line up on the text axis just inside it. ABOUT

Grid edge Frames, placards, lists and rules sit here.

Text axis 0.5rem in, for running text and the label inside a placard.

Interaction

Hover me

Hover and focus are a full black-and-white inversion, and nothing else.

Embedded demos

  • D01

    Pens

    Code samples that used to live on CodePen are kept in this repo as plain HTML, CSS and JS. At build time each one is stitched into a self-contained page and loaded into an iframe, next to read-only source tabs.

  • D02

    Legacy demos

    Older interactive demos, like the React Three Fiber scenes and the 2018 design-system examples, stay on the exact library versions their posts teach. Each post's demos are a small Vite app built to static files and shown in an iframe.

  • D03

    Live sketches

    The generative sketches, like the one in the footer, are React islands. Each loads only when it scrolls into view and is torn down when it scrolls away.