ScatterFlow
A hero section component where images flow outward from the center in all directions, growing as they travel to create a stunning tunnel depth illusion. Perfect for product showcases, portfolios, and creative landing pages.
About this Component
ScatterFlow is a WebGL-powered hero component built with Three.js. Images are distributed using the golden angle algorithm — the same pattern found in sunflowers — giving an organic, naturally balanced scatter that never looks repetitive or mechanical.
Each image travels outward along a fixed angle, fading in near the center and reaching full opacity at the midpoint, then continuing off screen. A custom GLSL fragment shader handles object-fit cover so images always fill their frame perfectly regardless of aspect ratio.How to use itDrop the component onto your canvas, set it to fill the frame, then add your images via the Images array in the property panel. Adjust Image Count and Speed to taste.
