https://framer.com/m/Wheeltimeline-KK9Yvh.js
Io / Enhancements / WheelTimeline
WheelTimeline
WheelTimeline arranges entries around a wheel and turns it to bring each one into focus, with a desktop and a mobile arrangement of the same data.
Examples
Live specimens for every control the component exposes.
Default
items carries the entries. variant switches between the desktop wheel and a mobile arrangement, and contentMode decides how much of each entry is shown at once.
Content and pace
contentMode runs from detailed through minimal to hidden. autoRotate turns the wheel unattended at autoRotateInterval seconds, and animationSpeed sets how briskly it moves.
detailed
minimal
hidden
Variant and motion
The mobile variant lays the same entries out for a narrow screen. autoRotate can be switched off entirely so the reader drives.
mobile variant
auto rotate off
slow
Icon weight
Each entry carries a Phosphor glyph, and iconWeight sets the stroke for all of them at once. Regular is the default; bold reads better at small arc radii, fill turns the glyphs solid.
regular
bold
fill
Props
The controls exposed on the instance panel.
Usage
Guidance carried over from the component definition.
Reach for WheelTimeline
A history or roadmap should be turned rather than scrolled.
The same entries need a separate arrangement on mobile.
The wheel should idle through its entries unattended.
The entries are few enough that a wheel shows them all.
Reach for something else
The entries read better as a straight run — use MilestoneTimeline.
There are many entries; a wheel hides most of them.
The data lives in the CMS.
Io — Enhancements
Every specimen above is a live component instance. Colour, type and radius resolve from the project theme tokens.