Morphing Shapes Loader

How this effect works

The secret is that circle, square and triangle are the same shape wearing different coordinates: all three are stored as 90 points around a center. The circle uses all 90 evenly; the square is 90 points walking along four edges; the triangle, along three. Morphing is then just lerp(pointA[i], pointB[i], t) for every i — no path libraries, no SVG tricks, one loop.

The rhythm does the acting: an eased morph phase flows one costume into the next, then a hold phase lets the new shape pose. Loaders live or die by that hold — morph nonstop and it reads as molten confusion; pause too long and it reads as stuck. Spin adds rotation per step so the shape arrives with momentum, and tint crossfades each shape's own colour during the morph.