Fluid Canvas V2

Fluid Canvas V2 is a continuous fabric of tightly packed circles. Precise at rest, it expands around your touch and settles smoothly back into place.

Press to expand. Drag to pull the fabric. Release to let it glide and settle. The fabric follows the selected SNDBX section colour, blending smoothly between themes. Every circle keeps the same solid section colour throughout the motion. Use several fingers to shape the fabric together, or press elsewhere before it settles to layer several bloats. On supported phones, a brief vibration marks each press.

BUILD NOTES

LANGUAGES
TypeScript / CSS / HTML
RENDERING
WebGL2 instancing / Canvas 2D fallback
GEOMETRY
6 px circles / 3 px resting gap / staggered hexagonal packing
SIMULATION
Radial deformation / spring motion / independent overlapping decay
MOTION
requestAnimationFrame / pointer hold + drag / elastic release
INTERFACE
React 19 / Pointer Events / fixed viewport / touch interaction
BUILD
Next.js / vinext / Vite
TREATMENT
Independent continuous-fabric interaction study
© JEEVAN VIJAYAN

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

© JEEVAN VIJAYAN
V2 BETA. Updated 10.26