Here is a breakdown for our main effect on our newest template - Strand
We wanted to create something eye-catching and interactive for our hero section that represented connectivity. Defining a shape and making sense of chaos using nodes and strands. Extra challenge - make it customizable.
We prototyped the effect in Blender, as it is blazing fast to iterate with geometry nodes, getting a feel for the procedures for the effect, as well as how to interact with it.
The next step was translating the node setup into three.js code. Geometry nodes become geometry buffers, 3D noise and interactivity become the vertex shader, pulses and visuals (blender shader) become the fragment shader.
Since our effect is procedural we can plug any shape into it. This was the final challenge - how do we provide good input? We wanted to supply the user with the tools to do so without ever leaving Framer. We created a custom component with one job - connect an SVG (a shape) to it and convert it to points (the input). Added bonus: we offload this process from runtime.
Copy the points over to our main effect and done!
