RadialShowcase

Circular ring with fall animate

An animated circular product ring with a three-phase animation cycle — images emerge from center with blur and bounce, rotate continuously as a ring, then fall one by one from the bottom and restart. Built for product showcases, fashion lookbooks, portfolio hero sections, and any visual collection that needs an unforgettable animated presentation. Features Images arranged in a perfect circle around a central point Three-phase animation cycle — appear, rotate, fall and repeat Phase 1 — images emerge from center with blur and bounce easing staggered 150ms apart Phase 2 — smooth infinite ring rotation with images staying upright Phase 3 — items fall one at a time from the bottom-most position with random rotation up to 720° Smart bottom detection — always drops the lowest item first Blur effect applied during fall for cinematic feel Automatic cycle restart after all items have fallen Configurable ring radius (100–500px) Configurable image size (80–300px) Configurable rotation speed (10–120s per full rotation) Configurable fall duration (0.5–5s per item) Configurable appear duration (0.3–3s) Configurable rotate duration before falling begins (3–30s) Shadow intensity control (0–100) Unlimited images via dynamic array Canvas edit mode shows static ring — animations disabled for easy editing No dependencies Property Controls Content — image array · image and alt text per item Visual Background Color · Ring Radius (100–500px) · Image Size (80–300px) · Shadow Intensity (0–100) Animation Rotation Speed (10–120s) · Fall Duration (0.5–5s) Appear Duration (0.3–3s) · Rotate Duration (3–30s) Technical Details Framer Motion useMotionValue for smooth rotation without re-renders useTransform for counter-rotation keeping images upright Phase-based state machine — appear, rotate, fall, repeat 50ms interval bottom detection for accurate fall order Key-based remounting for clean cycle restart startTransition for non-blocking state updates GPU-accelerated animations via Framer Motion

Circular ring with fall animate