Slipway
App-download section block: headline, a rating row whose stars fill in sequence while the review count rolls on Tally drums, Detent platform tabs that swap store badges and requirements, and a QR card with a seeded module grid and scan-line sweep. A CSS phone frame runs a swipeable, auto-advancing screen carousel with dot pagination and a floating callout chip tethered by a drawn leader line.
motionpro
Pro
The preview is live. The source is Pro.
One purchase, lifetime access: every pro component's source, CLI install with your own registry token, and all future drops.
Installation
CLI
npx shadcn@latest add @crucible/slipwayManual — install dependencies, then copy the source
npm install motionProps
| Prop | Type | Default | Description |
|---|---|---|---|
| title | React.ReactNode | "Your whole day, in your pocket." | Headline. |
| subtitle | React.ReactNode | Supporting line under the headline. | |
| eyebrow | React.ReactNode | false | "Now on {platform labels}" | Small pill above the headline. Pass false to hide. |
| platforms | SlipwayPlatform[] | Platform tabs, each with its own badges and requirements line. Omit for iOS / Android / Desktop samples. | |
| platform | string | Controlled selected platform id. | |
| defaultPlatform | string | first platform | Initial platform id when uncontrolled. |
| onPlatformChange | (id: string) => void | Fires when the platform tab changes. | |
| onBadgeClick | (platformId: string, badge: SlipwayBadge, event: React.MouseEvent<HTMLAnchorElement>) => void | Fires when a store badge is activated (before navigation). | |
| screens | SlipwayScreen[] | Phone screens (auto-advancing carousel). Omit for 4 seeded sample screens. | |
| onScreenChange | (index: number) => void | Fires with the new index whenever the visible screen changes. | |
| rating | SlipwayRating | false | { value: 4.8, count: 12480 } | Rating row config, or false to hide it. |
| url | string | Download URL — seeds the decorative QR pattern and is what "Copy link" copies. | |
| qr | React.ReactNode | false | Your own QR node (e.g. a real generated QR code) to replace the decorative seeded pattern, or false to hide the QR card entirely. | |
| interval | number | 4200 | Milliseconds each screen stays up during the idle loop. |
| accentColor | string | "#2dd4bf" | Accent hex for stars, focus rings, chip, scan line and screen highlights. |
| paused | boolean | false | Freeze the ambient idle loop (auto-advance + QR scan sweep). |
| ref | React.Ref<SlipwayHandle> | Imperative handle (replay(), goTo(i)). React 19 ref-as-prop. | |
| className | string | Extra classes for the <section> root. | |
Also accepts all props of Omit<React.ComponentPropsWithoutRef<"section">, "title" | "children"> — they pass through to the underlying element. | |||
Honors prefers-reduced-motion with a designed static fallback, and passes className through.