A laptop, tablet and phone stacked in depth that tilt with parallax as the pointer moves, above a four-column feature caption row.
One account, every screen
Orbit keeps your dashboards, calendar and wallet in lockstep across every device, with nothing to configure.
Download OrbitLayouts adapt from a 4-inch phone to a 32-inch display.
Changes land on every device in under 200 ms.
Keep editing on a plane and merge cleanly when you land.
Gestures, haptics and shortcuts tuned for each platform.
npx shadcn@latest add https://hyperblur.dev/r/showcase-device-stack.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/showcase-device-stack.tsx.
import { ShowcaseDeviceStack } from "@/components/hyperblur/showcase-device-stack"
<ShowcaseDeviceStack intensity={1.2} accent="#a78bfa" />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "One account, every screen" | Label above the title. |
| title | string | "Start on your laptop, finish on your phone" | Section heading. |
| subtitle | string | "Orbit keeps your dashboards..." | Supporting paragraph under the title. |
| cta | { label: string; href: string } | null | { label: "Download Orbit", href: "#" } | Pill button under the paragraph. |
| features | { title: string; description: string }[] | 4 features | Caption row under the devices, up to four items. |
| intensity | number | 1 | Multiplier for the parallax tilt. 0 turns it off. |
| accent | string | "#a78bfa" | Accent for the screens, glow and feature icons. |
| className | string | Extra classes for the section element. | |
| style | React.CSSProperties | Inline styles merged onto the section element. |