DX engineer & Generative artist. I make minimalist visuals with code: limited palettes, simple geometry, looping motion, using canvas, SVG and shaders. By day I'm on the DX team for Storybook and Chromatic, working on tools to build, test, and document UIs.https://varun.ca/https://varun.ca/writing/ray-march-sdf/https://varun.ca/ray-march-sdf/Building an iridescent crystal in a single fragment shader — raymarching and signed distance fields explained step by step, from a hand-rolled marching loop through surface normals, Blinn-Phong and iridescent lighting, to a crystal folded out of a plane, using off-the-shelf stackgl GLSL modules.Sat, 03 Jun 2023 00:00:00 GMThttps://varun.ca/writing/storybook-day/https://varun.ca/storybook-day/Storybook just hit a major milestone: version 7.0! With a re-engineered codebase and bunch of new features, it's faster and more stable than ever before.Thu, 20 Apr 2023 00:00:00 GMThttps://varun.ca/writing/three-js-particles/https://varun.ca/three-js-particles/Three techniques for building 3D particle systems in React Three Fiber — instanced meshes with animated transforms, dashed lines with an animated offset, and attractor-driven lines advanced step by step — broken down from a live solar-storm demo.Sat, 08 Jan 2022 00:00:00 GMThttps://varun.ca/writing/modular-webgl/https://varun.ca/modular-webgl/An introduction to WebGL with React Three Fiber — setting up a stage, creating geometry, adding lighting and post-processing effects, and composing it all into an animated 3D visualization built from components.Mon, 15 Nov 2021 00:00:00 GMThttps://varun.ca/writing/noise/https://varun.ca/noise/Noise is an indispensable tool for creative coding. We use it to generate all kinds of organic effects like clouds, landscapes and contours. Or to move and distort objects with a more lifelike behaviour.Thu, 22 Apr 2021 00:00:00 GMThttps://varun.ca/writing/confetti/https://varun.ca/confetti/Building a confetti cannon with a canvas particle system — velocity components for the launch, decay and gravity for the fall, noise-driven tilt and wobble for the tumble, an even-spread launch trick, and how to drop the finished animation into a larger app.Sat, 19 Dec 2020 00:00:00 GMThttps://varun.ca/writing/scrollytelling/https://varun.ca/scrollytelling/How I built a minimal scrollytelling setup with React and Intersection Observer — h3 headings as steps, a sticky figure pane beside the text, and a custom hook that swaps the visual as each heading crosses the viewport.Sat, 12 Dec 2020 00:00:00 GMThttps://varun.ca/writing/torsions/https://varun.ca/torsions/Breaking down a canvas-sketch animation of a twisting block — cosine-curved bezier edges, an offset second curve for perspective thickness, and bezier-intersection face coloring, built up step by step from Walter Leblanc's Torsions print.Mon, 30 Nov 2020 00:00:00 GMThttps://varun.ca/writing/react-icon-system/https://varun.ca/react-icon-system/Setting up a component-based SVG icon system with SVGR — consistent artboards, icons generated as build artifacts with custom templates, and a compound Icons component to tie it all together.Wed, 10 Jun 2020 00:00:00 GMThttps://varun.ca/writing/figma-plugins/https://varun.ca/figma-plugins/A designer-friendly breakdown of Figma plugin architecture — the sandboxed main code, the iframe UI and the postMessage bridge between them — plus figplug to tame the tooling, multi-command plugins and relaunch buttons.Wed, 20 May 2020 00:00:00 GMThttps://varun.ca/writing/styled-system-revisited/https://varun.ca/styled-system-revisited/An updated take on building design systems with Styled System — the Design Graph of scales, theme, variants and components, a component hierarchy for architectural choices, and ref forwarding done right.Sun, 19 Apr 2020 00:00:00 GMThttps://varun.ca/writing/side-loading-design-system/https://varun.ca/side-loading-design-system/How a growing team can establish a design system without pausing delivery — Storybook driven development, design tokens to centralize visual decisions, and light-weight documentation to seed a DesignOps practice organically.Thu, 12 Dec 2019 00:00:00 GMThttps://varun.ca/writing/dark-mode/https://varun.ca/dark-mode/Adding dark mode to a Gatsby site the Theme UI way — an intentional dark palette instead of inverted hues, a useColorMode hook that tracks the user's choice, and CSS custom properties plus a tiny inline script to kill the flash of the wrong theme.Tue, 12 Nov 2019 00:00:00 GMThttps://varun.ca/writing/why-not-both/https://varun.ca/why-not-both/On designing in the medium of the web — why static design tools fall short of fluid, two-dimensional layouts, the convergence of design and development tools, and generative design as a possible bridge between design and code.Sat, 11 May 2019 00:00:00 GMThttps://varun.ca/writing/what-is-a-design-system/https://varun.ca/what-is-a-design-system/Design systems are more than style guides or component libraries. On the hand-off problem, component-based design, and the six pillars — design language, kit, component library, sandbox, docs, and governance — that make a systematic design practice.Thu, 18 Apr 2019 00:00:00 GMThttps://varun.ca/writing/reuleaux-polygons/https://varun.ca/reuleaux-polygons/Constructing Reuleaux polygons — curvilinear shapes of constant width — with SVG arc commands and a polar-coordinate polygon generator, why they always have an odd number of sides, and how one rotates inside a square.Thu, 09 Aug 2018 00:00:00 GMThttps://varun.ca/writing/styled-system/https://varun.ca/styled-system/Building a design system with styled-system and system-components — encoding design constraints in a theme, responsive style props, extending components, and custom style functions, worked through an input-with-adornment and a composable product card.Fri, 11 May 2018 00:00:00 GMThttps://varun.ca/writing/tachyons-components/https://varun.ca/tachyons-components/Building a component-based design system on top of Tachyons — mapping props onto its scales to output class names, a withDesignSystem higher-order component, and the shortcut of jxnblk's tachyons-components.Thu, 10 May 2018 00:00:00 GMThttps://varun.ca/writing/components/https://varun.ca/components/Everything is a component. How I unlearned template-driven, route-sliced UIs and came around to seeing the interface as a composable system — small, stateless pieces that build up into a product-specific language.Wed, 09 May 2018 00:00:00 GMThttps://varun.ca/writing/convergence/https://varun.ca/convergence/How React, Angular and Vue converged on the same core ideas — components, templates vs JSX, scoped styles, props and events — and why learning any one framework now transfers to the rest.Sun, 24 Dec 2017 00:00:00 GMThttps://varun.ca/writing/polar-coords/https://varun.ca/polar-coords/An intro to polar coordinates for creative coding — converting between polar and Cartesian, spacing points evenly around a circle to generate polygons, relative coordinates, rotating things around a point, and drawing polar curves, with interactive CodePen demos throughout.Thu, 23 Nov 2017 00:00:00 GMThttps://varun.ca/writing/clip-path/https://varun.ca/clip-path/Recreating Herry Koo's SA 15 dribbble shot with SVG and animejs — arc slices drawn with the path element, sliding fills made from clipped rectangles, a little circle that bursts out, and a dash of squigglevision on top.Tue, 31 Oct 2017 00:00:00 GMThttps://varun.ca/writing/metaballs/https://varun.ca/metaballs/Generating gooey metaballs as a single SVG path — locating the tangent points between two circles, spreading and curving the connector with polar coordinates, and handling overlap, after Hiroyuki Sato's Illustrator script.Mon, 16 Oct 2017 00:00:00 GMThttps://varun.ca/writing/css-grid-2/https://varun.ca/css-grid-2/Grid template areas — naming regions of the grid and placing items with a layout you can literally see in the CSS, worked through a magazine-style article layout and a BBC Sport live page recreated at three breakpoints.Mon, 04 Sep 2017 00:00:00 GMThttps://varun.ca/writing/drag-with-rxjs/https://varun.ca/drag-with-rxjs/Making DOM elements draggable with RxJS and Hammer — pan events as an observable stream, switchMap/takeUntil composing the drag gesture, a viewBox coordinate transform, and LERP-ed smooth motion on top.Sun, 27 Aug 2017 00:00:00 GMThttps://varun.ca/writing/css-grid/https://varun.ca/css-grid/Notes from working through the CSS Grid Layout Module — tracks, lines, cells and areas, defining fixed and flexible grids with the fr unit, and auto placement with dense packing, built up to a responsive product-grid clone.Tue, 16 May 2017 00:00:00 GMThttps://varun.ca/writing/rebase/https://varun.ca/rebase/A practical guide to git rebase — squash a feature branch into a single commit, resolve conflicts without panic, work across forked remotes, and undo the whole thing with reflog when it goes sideways.Wed, 01 Mar 2017 00:00:00 GMThttps://varun.ca/writing/icon-component/https://varun.ca/icon-component/My workflow for a component-based SVG icon system — clean up icons with SVGO and currentColor, generate a symbol sprite sheet with webpack's svg-sprite-loader, and render everything through a tiny Icon component in React, Angular or Vue.Sat, 11 Feb 2017 00:00:00 GMThttps://varun.ca/writing/touch-and-mouse-together/https://varun.ca/touch-and-mouse-together/Implementing a pan gesture that works for both mouse and touch — building a draggable chat-head component in React, handling drag and touch events side by side, and hiding the desktop ghost drag image along the way.Tue, 15 Nov 2016 00:00:00 GMThttps://varun.ca/writing/flattening-deep-hierarchies-of-components/https://varun.ca/flattening-deep-hierarchies-of-components/Why config-prop components bloat as requirements grow, and how function-composition thinking — passing children instead of configuration — flattens deep hierarchies into small, single-responsibility, highly reusable components.Tue, 18 Oct 2016 00:00:00 GMThttps://varun.ca/writing/oam/https://varun.ca/oam/Building OAM with Ainsley Wagoner and learning redux on something more fun than a To Do app — responsive SVG via viewBox coordinates, giving up on CSS animations for GSAP, and playing sounds from reducers with Howler.Sun, 14 Aug 2016 00:00:00 GMThttps://varun.ca/writing/chillwave/https://varun.ca/chillwave/Recreating This Also's wave loading animation with pure SVG — building a sine-like wave out of Bézier curve commands, sliding it across with a CSS transform, and faking the rounded line caps with a carefully tuned stroke-dasharray.Mon, 23 Nov 2015 00:00:00 GMThttps://varun.ca/writing/parallax/https://varun.ca/parallax/A Tintin/Monument Valley mash-up built with AngularJS and SVG — layered peaks as directives, mouse position remapped to a centred origin, and CSS transforms that move each layer by a different ratio to fake 3D depth.Mon, 19 Oct 2015 00:00:00 GMThttps://varun.ca/writing/truncation/https://varun.ca/truncation/Truncation — ripping apart a polygon's vertices to create new facets and more complex geometry. Breaking the algorithm down step by step, then generalizing it for 2D polygons with a React and SVG demo.Fri, 03 Jul 2015 00:00:00 GMThttps://varun.ca/writing/triangles/https://varun.ca/triangles/I love triangles. After 30 days of making a new triangle every day, I'm back to constructing more of them — an ongoing series of triangle experiments you can follow at triangle.life.Fri, 26 Jun 2015 00:00:00 GMThttps://varun.ca/writing/react-svg/https://varun.ca/react-svg/Composing SVG images out of small reusable React components — a tetrahedron generator and a Fermat point calculator, with draggable handles whose click and drag logic lives isolated inside the component itself.Sun, 21 Jun 2015 00:00:00 GMThttps://varun.ca/writing/locator/https://varun.ca/locator/Turning raw geo-location into location identifiers that actually mean something to the user — reverse geocoding nearby options, manual lookup via Google's autocomplete service, and AngularJS directives that wrap both up like a select element.Mon, 05 Jan 2015 00:00:00 GMThttps://varun.ca/writing/the-core/https://varun.ca/the-core/A p5.js experiment drawing gradient fills inside a polygon with contours and lerpColor, plus a detour into Penner's easing equations — how polynomial functions produce bounce effects in plain JavaScript.Mon, 18 Aug 2014 00:00:00 GMThttps://varun.ca/writing/vector-field/https://varun.ca/vector-field/Recreating the spiralling vector field illustration from Google's Material Design handbook with p5.js — from a naive rotate-towards-the-mouse grid to the vector field equation that produces the exact spiral effect.Thu, 14 Aug 2014 00:00:00 GMThttps://varun.ca/writing/squiggle/https://varun.ca/squiggle/A first step towards an animated, generative version of a Jupiter illustration I've been obsessed with — paths flowing across the screen with organic movement, built with a 2D Perlin noise field and Two.js.Wed, 30 Jul 2014 00:00:00 GMThttps://varun.ca/writing/custom-easing-with-sass/https://varun.ca/custom-easing-with-sass/Baking patakk's custom easing function into CSS keyframes — a Sass easingGenerator mixin that computes the eased position at every step and writes out the whole animation for you.Mon, 28 Jul 2014 00:00:00 GMThttps://varun.ca/writing/jamie-xx/https://varun.ca/jamie-xx/A first experiment with React — a very minimal animation for Far Nearer by Jamie XX, with the Rdio API supplying the music.Thu, 17 Jul 2014 00:00:00 GMThttps://varun.ca/writing/open-and-close/https://varun.ca/open-and-close/Replicating CreativeDash's open & close animation — a burger icon morphing into a cross — with pure CSS/SASS. As close as it gets without SVG path animations, circular mask and all.Mon, 07 Jul 2014 00:00:00 GMThttps://varun.ca/writing/shrinking-header-footer/https://varun.ca/shrinking-header-footer/Extending Ionic's shrinking header demo to work at any scroll position and with a two-level header — tracking scroll direction with a delta, clamping the shrink amount to survive scroll bounce, and animating inside requestAnimationFrame.Wed, 25 Jun 2014 00:00:00 GMThttps://varun.ca/writing/swipe-li/https://varun.ca/swipe-li/A three pane swipeable list element for AngularJS — swipe right to accept, left to reject, with intent detection that auto-completes the swipe, built on hammer.js and a delegate service for managing multiple instances.Fri, 28 Mar 2014 00:00:00 GMThttps://varun.ca/writing/ellsworth-kelly-animated/https://varun.ca/ellsworth-kelly-animated/Animating Ellsworth Kelly's paintings with web technologies for Google's DevArt competition — Box2dWeb skeletons of particles and spring-links give the shapes springy, organic movement on every click.Mon, 24 Mar 2014 00:00:00 GMThttps://varun.ca/writing/angularjs-webgl-directive/https://varun.ca/angularjs-webgl-directive/A WebGL directive for AngularJS built with three.js — pass in canvas size, model, material and lighting as bindings, and hook up events like window resize to make the scene responsive.Tue, 11 Feb 2014 00:00:00 GMT