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.
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
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)
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
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.
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
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)
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
