---
title: "Wheel Selector — Framer component · Best of Framer"
description: "$14.00 · Framer component · by Aidan Looker · Navigation. What is Wheel Selector?"
canonical: "https://framer.elliotli.dev/component/wheel-selector"
---

[Home](/)/[Components](/components)/[Navigation](/components/category/navigation)/Wheel Selector

# Wheel Selector

Radial showcase dial for services & feat

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

![Wheel Selector preview image 1](https://framer.elliotli.dev/og/component/wheel-selector/f8c2b886dc64d874/1600x1200.jpg)

## Summary

What is Wheel Selector?

## Description

## What is Wheel Selector?

Wheel Selector is a radial showcase dial that arranges content items around an interactive circular ring. Users navigate by dragging the wheel, scrolling, or clicking individual nodes — each selection triggers a staggered content reveal with blur transitions, an animated accent bar, and optional imagery. Built for agencies, SaaS landing pages, and portfolio sites that need a memorable way to present services, capabilities, or product features. Ships with desktop (full ring) and mobile (horizontal arch) responsive variants.

[![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-8vjwbcr2-RQLDut7AgLOovQEwgaJNpNG4n3n3B6)](https://teampixelau.lemonsqueezy.com/checkout/buy/3b016e8d-2ba4-4944-8431-e2c592334df1)

## Core Features

-   Interactive radial wheel with drag, scroll, and click navigation across a full 360-degree ring
    
-   Staggered content reveal with blur-in text transitions and a vertical accent bar that grows on selection
    
-   Responsive mobile arch variant with horizontal swipe navigation and edge-fade effects
    
-   Animated tick marks with proximity-based color intensity around the ring perimeter
    
-   Center hub counter with animated number transitions matching each item's accent color
    
-   Toggleable CTA button with per-item custom label text and full color control
    
-   Four curated dark-mode themes (Obsidian, Midnight, Arctic, Ember) plus full custom color control
    
-   Auto-rotate mode with configurable interval and automatic pause on user interaction
    

## Controls inside Framer

### Items

-   Title, subtitle, and description text per item
    
-   Preset icon library (16 icons) or custom icon image upload
    
-   Per-item accent color for icon, hub counter, and visual theming
    
-   Optional image (or automatic Unsplash placeholder)
    
-   CTA link using native Framer Link property
    
-   CTA label text per item (default: "Learn More")
    

### Appearance

-   Theme selector: Obsidian, Midnight, Arctic, Ember, or Custom
    
-   Full custom color overrides: background, accent, text, card, ring stroke
    
-   CTA color overrides: background, text, and border (Custom theme)
    
-   Content mode: Minimal, Detailed, or Hidden
    
-   Variant toggle: Desktop (ring) or Mobile (arch)
    

### Wheel Configuration

-   Ring radius control (100–400px)
    
-   Tick mark count (10–80) with show/hide toggle
    
-   Center hub counter show/hide toggle
    

### Animation & Interaction

-   Animation speed: Slow, Medium, or Fast
    
-   Auto-rotate toggle with interval control (1–15 seconds)
    
-   Show CTA toggle to globally enable or disable call-to-action buttons
    

### Typography

-   Independent font controls for title, body, and label text
    
-   Base font override for unified typography
    

## Best use cases

-   Agency service pages — present capabilities like strategy, design, and development on a single interactive dial
    
-   SaaS feature tours — walk users through product highlights with rich descriptions and imagery
    
-   Portfolio showcases — display project categories or skill areas with visual navigation
    
-   Product landing pages — highlight key differentiators with an engaging, scroll-stopping interaction
    

Deliver a scroll-stopping first impression that keeps visitors exploring — every interaction feels intentional and polished.

## Questions or custom requests?

We design and build custom Framer components. Get in touch at [**contact@teampixel.com.au**](mailto:contact@teampixel.com.au).

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

-   All · #7396

## Details

- **Author**: Aidan Looker
- **Price**: $14.00
- **Published**: 2026-05-12
- **Updated**: 2026-06-13
- **Added**: 2026-05-04
- **Categories**: Navigation

## More like this

-   [Reveal Navigations](/component/reveal-navigations) — Design Supply · Free — A calmer way to open your menu
-   [Collapsible Sidebar](/component/collapsible-sidebar) — Marso Angelov · $10 — Responsive Side Navigation
-   [Dial Picker](/component/dial-picker) — Tanmay Kaper · $14 — A machined dial for your projects
-   [Expanding Side Menu](/component/expanding-side-menu) — Russet Supply · $5 — Animated Framer Navigation