DESCRIPTION
Parasail's site runs on two custom shaders: a grid of light blinds in the home and contact heroes and every footer, and gradient shapes travelling a hand-drawn path behind fluted glass on the about, blog and customer pages. I was brought in by Ish Studio as creative dev to build both, plus a tool so a shader can be composed per page without code. I also built Parasail Defense, an arcade game for Parasail's expo booth.
Designed & developed by Ish Studio, shaders, shader tool & game by me
MY ROLE
Built both WebGL shaders, the hover pixel grids, and a browser tool for composing them: path editor, colours, glass, breakpoints, presets and export. Built the booth game from design doc to final build. Worked with Ish Studio's team through to delivery.
CONCLUSION
Shipped two shaders across nearly every page of parasail.io, the tool used to compose them, and a booth game for Parasail's expo stand.
Built with Ish Studio - check out their work at ish.studio
See it live
↳ parasail.io
MeTHOD
The path shader renders in three passes. The path is baked into a distance field only when it moves, so each frame costs one texture fetch per pixel instead of walking the curve. Time is a loop position, not a clock, so exports close seamlessly.
View more
Webflow Community Page
