For Parasail's new site I built two shaders with Ish Studio: a grid of light blinds, and gradient shapes travelling a path behind fluted glass. Nearly every page has one, and every page wanted its own composition. Different path, different colours, different crop on mobile.

Tweaking numbers in code for each page was not going to scale. So I built a tool.

What it does

You draw a path with handles, pick two colours, set how many shapes travel along it and how the glass bends them. Each page is one document with a desktop, tablet and mobile version, where the smaller ones only store what they change. Presets, undo and redo, all saved in the browser.

Then you export: a looping MP4, or the shader as a single JavaScript file ready to drop into the site.

Three things I learned

Bake the path. Asking "how far is this pixel from the curve?" for every pixel, sixty times a second, gets expensive fast. So the path gets drawn once into a texture that remembers three things: how far away the curve is, how far along it you are, and which side you're on. After that, every frame is a single lookup. It only redraws when you drag a handle.

Time is a loop, not a clock. The shader has no idea what time it is. It just gets a number between 0 and 1. Sounds like a small thing, but it fixed two problems at once: loops close perfectly, and exporting video is just counting from 0 to 1, one frame at a time. No screen recording, no dropped frames when the GPU hiccups.

You don't need three.js to draw a triangle. I used three to build the tool, and it was great for that. But what ends up on the site is one triangle covering the screen, and shipping 600 KB for that felt silly. So the export is plain WebGL2 with the shader code baked in. To make sure I hadn't broken anything I compared the two pixel by pixel. Same image, apart from the film grain.

Small things that mattered

• Narrow screens crop the composition instead of squashing it, so shapes keep their size
• Shaders pause off screen and respect reduced motion
• Bloom is not exported. I measured it, and at these settings it added exactly nothing
• Blog, customer story and about pages ship as presets

See it live
↳ parasail.io

Built with the team at Ish Studio.

‍