A light bento with a dark hero tile in the middle and six satellite tiles around it. Pointing at a satellite lights a flowing connector into the hero, which redraws its dial, story and sparkline for that source.
Aster home hub
Point at any tile and the hub in the middle tells you what it is doing, why, and what it will do next.
Panels are running at 78% of peak under thin cloud. Expected 31 kWh by sunset.
npx shadcn@latest add https://hyperblur.dev/r/bento-hero-satellites.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/bento-hero-satellites.tsx.
import { BentoHeroSatellites } from "@/components/hyperblur/bento-hero-satellites"
<BentoHeroSatellites accent="#16a34a" />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Aster home hub" | Label above the heading. |
| title | string | "Every source of power in your home, orbiting one screen" | Section heading. |
| subtitle | string | "Point at any tile..." | Paragraph beside the heading. |
| satellites | { label: string; value: string; note: string; level: number; trend: number[]; icon?: "sun" | "battery" | "grid" | "car" | "heat" | "coin" }[] | 6 sources | Satellite tiles (up to six). level is 0 to 100 and drives the dial. |
| defaultIndex | number | 0 | Satellite shown in the hero first. |
| onItemSelect | (index: number) => void | Called when a different satellite is selected. | |
| accent | string | "#16a34a" | Accent for the dial, connectors and icons. |
| className | string | Extra classes for the section element. | |
| style | React.CSSProperties | Inline styles merged onto the section element. |