Components
Loading preview...
This loader component is a gooey dots animation built with React, TypeScript, Tailwind CSS, and a small amount of custom CSS keyframes. It consists of three colorful circular dots (yellow, blue, and red) that shrink, move, and return in a loop while the entire group rotates smoothly, creating a fluid and dynamic motion. The effect is enhanced by an SVG goo filter (feGaussianBlur + feColorMatrix) that blends the dots together into a single organic shape when they overlap, giving the illusion of liquid merging and separating. The component is fully responsive, centered on the screen with Tailwind utilities, and uses modern CSS animations for performance-friendly rendering. It’s an eye-catching, reusable loader ideal for projects that need a playful, modern loading animation.