KQ-726 · EARNINGS/COUNTDOWN
Earnings Countdown
A card that counts down to a company's results: a ring drains toward the report, its fraction the seconds left over a window, while a mono readout rolls its digit columns on snap as each second lands. The clock is the component's own, seeded from a prop and ticking in an effect that halts while the document is hidden. When results land the ring closes on snap and turns success, the actual figures roll in beside the estimates on the same spring, and a verdict chip appears — Beat on recoil because a beat is a landing, Miss and In line on snap with no bounce. Reaching zero without results swaps the readout to Due and holds; nothing takes focus.
- Estimate EPS
- $1.20
- Actual EPS
- —
- Estimate revenue
- $1.84B
- Actual revenue
- —
Fernworks Q3 · 2d 14h 06m 12s · clock paused
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/earnings-countdown
Props
- label
- string
- default —
- What is being reported; labels the card.
- seconds
- number
- default —
- Seconds until the report when the clock is seeded; changing it re-seeds the clock.
- window
- number
- default 259200
- Seconds the full ring represents; three days by default.
- running
- boolean
- default false
- Ticks the clock.
- estimate
- { eps: number; revenue: number }
- default —
- The consensus figures.
- actual
- { eps: number; revenue: number }
- default —
- The reported figures; providing them lands the results.
- format
- (value: number) => string
- default Intl.NumberFormat("en-US", { style: "currency", currency: "USD" })
- Prints earnings per share.
- formatRevenue
- (value: number) => string
- default Intl.NumberFormat("en-US", { style: "currency", currency: "USD", notation: "compact", maximumFractionDigits: 2 })
- Prints revenue.
- onElapsed
- () => void
- default —
- Fires from the tick that reached zero.
- onLand
- (verdict: "beat" | "miss" | "inline") => void
- default —
- Fires from the effect that observed the actual figures arrive.
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | — | What is being reported; labels the card. |
| seconds | number | — | Seconds until the report when the clock is seeded; changing it re-seeds the clock. |
| window | number | 259200 | Seconds the full ring represents; three days by default. |
| running | boolean | false | Ticks the clock. |
| estimate | { eps: number; revenue: number } | — | The consensus figures. |
| actual | { eps: number; revenue: number } | — | The reported figures; providing them lands the results. |
| format | (value: number) => string | Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }) | Prints earnings per share. |
| formatRevenue | (value: number) => string | Intl.NumberFormat("en-US", { style: "currency", currency: "USD", notation: "compact", maximumFractionDigits: 2 }) | Prints revenue. |
| onElapsed | () => void | — | Fires from the tick that reached zero. |
| onLand | (verdict: "beat" | "miss" | "inline") => void | — | Fires from the effect that observed the actual figures arrive. |