Two about pages: a mission-led story with principles, rolling company numbers and a flip-card team grid, and a company timeline whose line fills and lights each milestone as you scroll.
Story
story.tsxA word-by-word mission headline, the origin story, numbered principles, NumberTicker company stats, a team grid that flips to fun facts, and a hiring CTA.
| Prop | Type | Default | Description |
|---|---|---|---|
company | string | "Northlight" | Company name used in eyebrow and headings. |
headline | string | — | Mission headline, revealed word by word. |
mark | string | — | One headline word to underline. |
intro | string | — | Paragraph under the headline. |
story | string[] | — | Origin story paragraphs. |
principles | { title: string; body: string }[] | — | Numbered principles. |
stats | { value: number; label: string; prefix?: string; suffix?: string; decimals?: number }[] | — | Numbers rolled in with NumberTicker. |
team | { name: string; role: string; location: string; fact: string }[] | — | Team grid; initials become monograms. |
cta | { heading; body; primary: { label; href }; secondary?: { label; href } } | — | Closing call to action. |
className | string | — | Classes for the outer section. |
Journey timeline
journey-timeline.tsxA company history whose centre line fills with scroll, lighting each milestone as it's reached, with sticky year chips that jump to any moment.
| Prop | Type | Default | Description |
|---|---|---|---|
company | string | "Tidewater" | Company name in the eyebrow. |
heading | string | — | Page heading. |
intro | string | — | Paragraph under the heading. |
milestones | { year: string; title: string; body: string; metric?: string; metricLabel?: string }[] | — | Timeline entries, oldest first. |
next | { heading; body; action: { label; href } } | null | — | Closing “what's next” card. null hides it. |
className | string | — | Classes for the outer section. |
Install the whole set
Installs every about variant at once. Each section above has its own command for a single variant.
Pro installs use your private registry token. Add the @geturui-pro registry once — setup guide. The command works after you get Pro.
Also installs: Odometer Number, Text Animation
Accessibility
- Animated headlines and number tickers keep their full text in aria-label.
- Team cards are toggle buttons with aria-pressed; timeline year chips are buttons that scroll to and focus their milestone.
- Scroll-linked fills and reveals render in their final state under reduced motion.