Lab

How I built it, with the code.

The effects on this site and on beamish.ink, taken apart. Each guide opens with the effect running, explains the decisions, and gives you the whole thing to copy.

  1. Written for this site · 6 min read How to add a scroll to top button (no plugins needed) Add a scroll to top button to your website in five minutes. No plugins and no page builder, just a few lines of code you can copy and paste.
  2. beamish.ink · 16 min read Text that decodes on hover: how I built it, with the code The hover effect on every button on this site, explained. Why it never moves the page, why it looks the same on every screen, and the whole thing to copy.
  3. beamish.ink · 5 min read The 600 lines every web effect needs: a runtime for canvas and DOM effects Pausing when off screen, capping the pixel ratio, surviving a lost WebGL context, respecting reduced motion and cleaning up after itself. The runtime every effect in the Lab plugs into, with the code.
  4. beamish.ink · 5 min read A grid that opens into a page: expanding tiles, with the code Press a tile and it fills the window while the lines of the grid travel out with it. How to do it without scaling anything, so the type never stretches, and the full code.
  5. beamish.ink · 5 min read Real glass on the web: a refracting search bar in WebGL, with the code backdrop-filter can blur. It can't bend. How to build a glass panel that refracts, splits and catches the light, keeps its label readable, and works in every browser, with the full code.

These are for people who build sites. If you run a business and want one built, the websites page is the place, or tell me about your project.