Bloom: Nested Squares Animated Loader: 🌸

I built this loader as a shadcn/ui-style component, twenty-five concentric square outlines that scale and rotate in an endless bloom, staggered by per-index delay so each ring ripples out and back like a slow-motion wave. It's built with React, TypeScript, Tailwind, and Framer Motion, no npm magic, just clean components and a Vite setup. The borders use gradient border-image with a violet/purple palette, and it's generated using for that "dreamy" aesthetic.

The real fun? You can see each ring take its turn, not all at once. The staggered delays let the animation feel organic, not robotic. You can even watch how the rotation and scale sync up, with each ring slightly offset to avoid visual clashing. Mouse hover? It doesn't do anything, because I didn't want to overcomplicate it. Just pure motion. Pure visual rhythm.

The tricky part? Getting the staggered delays to work without causing frame jitter. I was using useDelayedUnmount with delay props on each ring, but the browser was reflowing too aggressively, causing the animation to stutter. I fixed it by wrapping each ring in a motion.div with animate and variants that use transition with easeOutQuint + duration tuned to 1.2s per ring. Then I used useLayoutEffect to manually trigger the next ring's animate after the previous one completed, a tiny bit of manual timing to smooth out the rhythm. No libraries, no hacks, just timing + React's state management.

🔥 😊

NIZAAM is a retail management SaaS designed for mobile shops and small retail businesses to manage their daily operations from a single system. The platform helps shop owners handle sales, inventory, suppliers, expenses, accounts, and business reporting without relying on multiple separate tools. I developed NIZAAM using Flutter and Supabase, with a strong focus on real-world retail workflows, data accuracy, and ease of use. The system includes product and stock management, sales recording, supplier management, account transactions, expense tracking, reporting, authentication, and role-based data access. The backend is built on Supabase PostgreSQL with Row Level Security (RLS) to keep business data isolated and secure. The architecture is designed to support multiple users and branches while keeping the app simple enough for everyday shop operations. I also worked on the database structure, business logic, authentication flows, reporting modules, and synchronization between the Flutter frontend and backend. Key Features:

Sales and transaction management

Product and inventory tracking

Supplier management

Expense and account records

Business reports and analytics

User authentication and access control

Multi-user / branch-ready architecture

Secure Supabase backend with PostgreSQL & RLS

Mobile-friendly and easy-to-use interface Tech Stack: Flutter, Dart, Supabase, PostgreSQL, Row Level Security, REST APIs