Wheel Selector

What is Wheel Selector?

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

Radial showcase dial for services & feat