Circular Split Roll

Overview

Circular Split Roll moves items around a center of attention. It is useful when the work should feel collected, not scattered.

Use Circular Split Roll when content should rotate through focus instead of sliding in a straight line. Portfolio and product showcases can use it when the relationship between items matters as much as the active item. The page job is hierarchy: the current item takes focus while the surrounding set remains visible.

The risk in production is orientation. Orbit motion can confuse users if the active item, controls, and reading order are not obvious after each rotation.

Install

Usage

Component Code

Example Production Use Case

A product showcase page grouping related modules: Circular Split Roll keeps the active module in focus while showing the surrounding set as context. The outcome is hierarchy: visitors see what matters now without losing the system around it.

Best Used For

• Small product or service groups where one active item should stay framed by its surrounding context.
• Small groups of related services or products gathered around a theme.
• Circular Split Roll creates a concrete scroll outcome that a static section would not deliver.

Not For

Not for large product sets, pricing choices, or items that users need to compare side by side.

Not for product groups where orbiting motion makes hierarchy less obvious.

Performance Budget

Animate transform and opacity, avoid layout reads in scroll handlers, pre-size media, and clean up timelines/listeners when the route changes.

Accessibility and Mobile

The animated sequence must match DOM order. On mobile, replace pinned or horizontal mechanics with stacked sections, native swipe, or static cards.

Common Mistakes

• Creating an orbit without a meaningful center.
• Letting surrounding items obscure the active item.
• Using circular motion for content that needs fast scanning.