127 Components
Product Sequence Scrubber
MotionApple-inspired interactive 360° hardware sequence scrubber with vector frame rotation, multi-layer explosion disassembly view, and angle-synchronized feature callouts.
360° Hardware Sequence Scrubber
Pro Titanium Design Sequence
Scrub continuous multi-angle inspection • Disassemble layer architecture
Chassis
Grade 5 Titanium Band
Precision PVD-coated aerospace alloy with sub-micron brushed finish
Scrub Sequence TimelineAngle: 60° (7/36)
0° (Face)90° (Left)180° (Back)270° (Right)360°
Jump to:
Drag slider or click presets to inspect angles
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/product-sequence-scrubber.json"
Props
TypeScript props supported by <ProductSequenceScrubber />.
| Prop | Type | Default | Description |
|---|---|---|---|
| totalFrames | number | 36 | Total number of rotational steps around the 360° circle. |
| defaultFrame | number | 6 | Initial frame index to display on render. |
| defaultAutoPlay | boolean | false | Whether the product sequence auto-spins on mount. |
| defaultExploded | boolean | false | Whether the hardware layers are initially exploded. |
| callouts | FeatureCallout[] | — | List of angle-synchronized feature annotations. |
| className | string | — | Additional Tailwind CSS classes for the root container. |
| showHeader | boolean | — | Whether to render header title, hardware specs badge, and action CTA |
Key Features
- Smooth 36-frame continuous vector rotation with realistic lighting and reflections.
- Interactive timeline scrubber bar with preset key angles (0°, 90°, 180°, 270°).
- Exploded multi-layer hardware disassembly view separating screen, chassis, A18 Pro logic board, and battery.
- Angle-synchronized feature callouts highlighting titanium frame, action button, and silicon.
- Play/pause auto-spin mode with responsive framer-motion micro-interactions.
Keyboard & Accessibility
- Full keyboard navigation support with accessible range slider controls.
- Includes ARIA labels for play/pause, explosion toggles, and preset rotation angles.
- Reduced motion respected for transitions and rotation intervals.