A huge mission statement on the left that reveals word by word with highlighted words, and three numbered principle cards on the right whose metrics count up when they scroll into view.
Every feature ships with a number we promise to move. If it does not move, we remove the feature.
Our models assume half of all homes will sell power back. We design for that world today.
Profitable since year three. No growth at any cost, no surprise price changes, ever.
npx shadcn@latest add https://hyperblur.dev/r/about-mission-split.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/about-mission-split.tsx.
import { AboutMissionSplit } from "@/components/hyperblur/about-mission-split"
<AboutMissionSplit statement="We make clean energy the default choice." highlight={["clean", "energy"]} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Our mission" | Small label above the statement. |
| statement | string | The mission sentence. Words are split on spaces. | |
| highlight | string[] | ["cheapest,", "simplest"] | Words of the statement drawn in the accent color, matched exactly including punctuation. |
| signature | string | "Ingrid Solberg, founder of Fjordlight" | Attribution under the statement. |
| principles | { title: string; text: string; value: number; prefix?: string; suffix?: string; label: string }[] | 3 principles | Numbered cards. value counts up from zero. |
| cta | { label: string; href: string } | { label: "Read the 2025 impact report", href: "#impact" } | Link under the statement. |
| accent | string | "#10b981" | Highlight, number and underline color. |
| className | string | "" | Extra classes for the section element. |
| style | CSSProperties | Inline styles merged after the accent variable. |