An infrastructure bento laid on a tilted 3D plane, tiles lifted to different heights, that settles flat as the section scrolls into view. Accepts a controlled progress or loops by itself for previews.
Cobalt Edge
Scroll and the whole stack settles into place: latency, throughput, cache and every region, on one plane.
Deploy to the edgePropagating to Sydney, about 6 s left.
npx shadcn@latest add https://hyperblur.dev/r/bento-tilted-plane.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/bento-tilted-plane.tsx.
import { BentoTiltedPlane } from "@/components/hyperblur/bento-tilted-plane"
<BentoTiltedPlane autoPlay />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Cobalt Edge" | Pill above the heading. |
| title | string | "Infrastructure that lands flat in front of you" | Section heading. |
| subtitle | string | "Scroll and the whole stack settles..." | Paragraph under the heading. |
| cta | { label: string; href: string } | null | { label: "Deploy to the edge", href: "#" } | Button under the heading. |
| progress | number | Controlled progress from 0 (tilted) to 1 (flat). Overrides scroll. | |
| autoPlay | boolean | false | Loop between tilted and flat on its own. Use it for previews. |
| accent | string | "#8b5cf6" | Accent for routes, bars, gauge and steps. |
| className | string | Extra classes for the section element. | |
| style | React.CSSProperties | Inline styles merged onto the section element. |