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.
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
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")
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)
Ring radius control (100–400px)
Tick mark count (10–80) with show/hide toggle
Center hub counter show/hide toggle
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
Independent font controls for title, body, and label text
Base font override for unified typography
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.
We design and build custom Framer components. Get in touch at contact@teampixel.com.au.
Aidan Looker
