---
title: "RadialShowcase — Free Framer component · Best of Framer"
description: "Free Framer component · by Hamim Reza · Sections. Circular ring with fall animate"
canonical: "https://framer.elliotli.dev/component/radialshowcase"
---

[Home](/)/[Components](/components)/[Sections](/components/category/sections)/RadialShowcase

# RadialShowcase

Circular ring with fall animate

[View on Framer](https://framer.com/marketplace/components/radialshowcase/?via=elliot-li)

![RadialShowcase preview image 1](https://framer.elliotli.dev/og/component/radialshowcase/2bc115d295998e4c/1600x1200.jpg)

## Summary

Circular ring with fall animate

## Description

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
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #6903

## Details

- **Author**: Hamim Reza
- **Published**: 2026-06-21
- **Updated**: 2026-07-05
- **Added**: 2026-06-21
- **Categories**: Sections

## More like this

-   [Project Index](/component/project-index) — Bernardo Lickfold · Free — Editorial index: hover & scroll
-   [Face Parade](/component/face-parade) — RAjan · Free — Animated team profiles
-   [Staircase Cover Flow](/component/staircase-cover-flow) — Karim Saif · $7 — editorial-inspired image gallery
-   [In Their Words](/component/in-their-words) — Majed Monem · $9 — A wall of customer quotes