Numbered feature rows that alternate copy and visual sides. Each visual is a small animated product screen (an inbox, a routing flow, a chart) that plays when its row scrolls into view.
How Fieldnote works
Three steps, no spreadsheets. Teams at 2,300 companies use Fieldnote to decide what to build next.
01Capture
Fieldnote listens to support chat, email, sales calls and the in-app widget, then folds duplicates together so one ask from forty customers reads as one.
Can we export the weekly digest as CSV for our board deck?
Blocker for renewal: we need SSO before Q1 rollout.
Would love a CSV export, finance asks for it every Monday.
02Route
Rules look at product area, plan and account value, so a renewal blocker from a large account never waits behind a font request.
03Report
Rank requests by the revenue behind them, watch themes rise month over month and tell customers automatically when their request ships.
npx shadcn@latest add https://hyperblur.dev/r/features-alternating.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/features-alternating.tsx.
import { FeaturesAlternating } from "@/components/hyperblur/features-alternating"
<FeaturesAlternating features={[{ eyebrow: "Plan", title: "Plan the week", description: "Drag tasks into place.", visual: <img src="/plan.png" alt="" /> }]} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "How Fieldnote works" | Mono label above the heading. Hidden when empty. |
| title | string | "From scattered feedback to a roadmap customers asked for" | Section heading. |
| subtitle | string | sample text | Supporting line under the heading. |
| features | { eyebrow?: string; title: string; description: string; bullets?: string[]; link?: { label: string; href: string }; visual?: ReactNode }[] | 3 sample rows | Rows in order. Without `visual`, rows cycle through the built-in inbox, flow and chart screens. |
| accent | string | "#10b981" | Accent for step numbers, checks, highlighted paths and bars. |