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