A split hero with a lit 3D sphere whose gradient mesh swirls inside it, a turning wireframe, an orbit ring with a moon that passes behind, and a row of palette tokens beside the copy.
Meshwork / tokens v5 now sync to iOS and Android
Meshwork blends your brand colors into accessible palettes, then ships them as tokens for Figma, CSS and native apps in one sync.
npx shadcn@latest add https://hyperblur.dev/r/hero-gradient-sphere.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/hero-gradient-sphere.tsx.
import { HeroGradientSphere } from "@/components/hyperblur/hero-gradient-sphere"
<HeroGradientSphere colors={["#f97316", "#db2777", "#6366f1"]} title="Palettes that scale" />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Meshwork / tokens v5 now sync to iOS and Android" | Mono line above the headline. Text before " / " is set brighter. Hidden when empty. |
| title | string | "Color systems that hold together at every scale" | Headline. |
| subtitle | string | "Meshwork blends your brand colors..." | Supporting paragraph. Hidden when empty. |
| primaryCta | { label: string; href: string } | null | { label: "Generate a palette", href: "#" } | White button with a conic glow on hover. null hides it. |
| secondaryCta | { label: string; href: string } | null | { label: "View token docs", href: "#" } | Outlined button. null hides it. |
| colors | [string, string, string] | ["#ff5f3d", "#7c3aed", "#22d3ee"] | The three colors mixed inside the sphere and the moon. |
| tokens | { name: string; value: string }[] | [ember-500, iris-600, tide-400, ink-950] | Swatch chips under the buttons. Empty array hides them. |
| speed | number | 1 | Multiplier for the swirl and wireframe rotation. |
| headingAs | "h1" | "h2" | "h1" | Heading level of the headline. |