DESCRIPTION
Webflow's developer platform page features a custom animated hero: grid lines bending and flowing around the Webflow "W" logo, built to sit pixel-perfectly on the real 12-column layout. I was brought in by N4 Studio to build and ship the animation. Designed & built by Webflow, hero animation & grid by me
MY ROLE
Built the full hero animation & grid in vanilla JavaScript on Canvas 2D. Worked directly with Webflow's design and dev team through to final delivery.
CONCLUSION
Shipped a performant, dependency-free animation that holds pixel alignment at every breakpoint, as part of Webflow's developer platform launch.
Built with N4 Studio n4.studio
See it live
↳ developers.webflow.com
Want to know how I did it?
↳ Read the breakdown
MeTHOD
The brief called for grid lines bending around the W logo, fluid and organic. The constraint was that the straight sections had to sit exactly on Webflow's real 12-column grid, not approximately. That tension ruled out every physics-based approach I tried: smooth simulations round off sharp corners, and the V-shaped notches in the W kept getting eaten.
After testing warp distortion, pull fields, potential flow solvers, hybrid velocity fields, and particle systems, the answer was the simplest one. I exported the designer's exact paths from Figma and rendered them directly on a Canvas 2D element. No WebGL, no dependencies.
The real engineering challenge came after that: making static SVG paths adapt correctly to a live responsive layout, and hunting down a scrollbar-width bug, a load-timing race condition, and a mis-named CSS variable that only surfaced in certain states.
View more
Baked Graphics
