Magnetic Creative

The new Magnetic Creative site was the result of hundreds of hours of exploration and pixel-pushing to get things just right.

A ton of the hours I put into this site went towards effects. Smooth scrolling, static grain, cursor effects, magnetic displacement carousels, giant parallaxing SVG letters - the list goes on and on. So does the list of components and effects that didn’t make the cut.

Originally, I developed the static as a WebGL geometry with a custom GLSL fragment shader using glsl-noise. At some point, I realized I could use a stepped keyframe and a background image to achieve a similar effect that was a bit less expensive performance-wise.

There were probably half a dozen Hero components mocked and prototyped for the homepage. Tons of mix-blend-mode text with a vertical WebGL carousel and some other effects that nearly set my macbook on fire when used all at once.

My main takeaway from this build was that, while flashy and exciting, special effects can be really expensive and an optimization phase should be expected to make sure effects are adding to the experience rather than taking away from it.