KQ-711 · INTEREST/DRIP

Interest Drip

A savings balance with the interest accruing in front of you. While playing, a timer compounds the balance by fractions of a cent per tick with a soft colour pulse, the cent column rolls on snap when a whole cent turns, and a projection line beneath extends on glide as simulated days pass. Hovering or focusing the figure shows the daily rate; Tab reaches the figure, Enter pins the card and Escape dismisses it.

KQ-711 · INTEREST/DRIP

Easy saver3.05% APY

earned $0.00day 0.0

day 0day 365 · $12,861.02

Day 0.00 · earned 0.0000 · 3.05% APY · paused

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/interest-drip

Props

principal: number; default —; The balance at day 0.
rate: number; default —; Annual percentage yield as a fraction — 0.0305 for 3.05%. Changing it morphs the projection on glide.
playing: boolean; default false; Runs the accrual timer. It pauses itself while the tab is hidden.
tickMs: number; default 900; Milliseconds between ticks.
stepDays: number; default 1 / 24; Simulated days advanced per tick — an hour by default, so the drip is fractions.
horizonDays: number; default 365; How far the projection line looks ahead.
format: (value: number) => string; default Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }); Formats the balance and the daily rate. The default pins an explicit locale so server and client agree.
label: string; default —; Names the balance.
onTick: (balance: number, days: number) => void; default —; Fires from each timer tick with the compounded balance and elapsed days.

Prop	Type	Default	Description
principal	number	—	The balance at day 0.
rate	number	—	Annual percentage yield as a fraction — 0.0305 for 3.05%. Changing it morphs the projection on glide.
playing	boolean	false	Runs the accrual timer. It pauses itself while the tab is hidden.
tickMs	number	900	Milliseconds between ticks.
stepDays	number	1 / 24	Simulated days advanced per tick — an hour by default, so the drip is fractions.
horizonDays	number	365	How far the projection line looks ahead.
format	(value: number) => string	Intl.NumberFormat("en-US", { style: "currency", currency: "USD" })	Formats the balance and the daily rate. The default pins an explicit locale so server and client agree.
label	string	—	Names the balance.
onTick	(balance: number, days: number) => void	—	Fires from each timer tick with the compounded balance and elapsed days.