Project growth with compound interest
Plug in a principal, an annual rate, a compounding frequency, and a monthly contribution. Watch the curve year by year.
How compound interest works
Interest accrues on prior interest. Higher compounding frequencies and steady contributions are what turn modest principals into significant balances.
- 01
Start with principal
Your initial deposit. Even zero works if you only invest the contribution.
Inputs are treated as UTF-8 throughout the pipeline and validated client-side as you type — nothing dispatches until the value is well-formed.
principalinpututf-8client-sidevalidatedP · text$10k · setP = 10,000
loaded · parsedclient-side - 02
Pick the rate
Annual percentage rate as a plain percent — 8 means 8%.
Each toggle re-computes through a memoised hook, so flipping options never resets your input and the UI stays snappy on large inputs.
rateoptionslivememoisedtogglesr · memoised8% · liver = 0.08
options set · memoisedlive - 03
Choose compounding
Monthly compounding edges out annual; daily edges monthly.
Randomness — where used — comes from
crypto.getRandomValues, neverMath.random. Heavy work sits inuseMemo.freqcomputeinstantlocaldeterministicn · instant12 · computedmonthly
computed · instantinstant - 04
Read the curve
Grey is what you put in. Coloured is interest. The total is the final balance.
Copy writes through
navigator.clipboardand downloads use aBlob— zero network traffic. Same input plus same options always yield the same bytes.chartcopydownloadzero-networkreproducibleok · copiedready · copied$36,729 in 10y
shipped · ready to shipsuccess
Pro tips for everyday utilities
Reach for crypto.getRandomValues
Cryptographically random for IDs, tokens, salts. Math.random is for animation and games, not security.
Mock data with seeds
Faker-style libraries can be seeded so tests are reproducible. Embed the seed in the fixture file.
Reference cards beat memory
Cheatsheets for Vim, Git, Docker, Linux signals are faster than man pages when you’re mid-flow.
Browser APIs vary
Touch events, gamepads, and clipboard differ across vendors. Feature-detect before use.
Persist in the right place
localStorage for user preferences, sessionStorage for transient state, IndexedDB for structured data.
When to use compound interest
Savings, retirement, education, investments.
Retirement
Project a 401(k) over 30 years with monthly deposits. Random values come from crypto.getRandomValues — cryptographically secure for tokens, salts, and session IDs. Math.random is deterministic enough for animations but predictable enough to be a security bug.
CSPRNG-backedEducation funds
Plan for a child's college tuition with quarterly compounding. Pair with hashids, ULID, or UUID v7 when you need both random and sortable — useful for primary keys, public-facing IDs, and event log ordering without a sequence column.
reproducibleDCA strategies
Test what regular crypto buys look like at various APYs. Output is deterministic given the same seed, so fixtures and tests stay reproducible across CI runs and contributor machines. Embed the seed in the fixture file for full replay.
snappyEmergency funds
See how a high-yield savings account stacks vs. a checking account. Heavy work runs through useMemo so the UI stays snappy on large inputs. Same input + same options yields identical bytes — the kind of stability snapshot tests rely on.
feature-detectedMortgage offset
Estimate how extra contributions shorten a loan timeline. Storage tools persist to the right backend: localStorage for user preferences, sessionStorage for transient state, IndexedDB for structured data. Pick the right shelf and quota worries disappear.
deterministicTeach compounding
Demonstrate why starting early dwarfs starting late. Browser feature detection: clipboard, fullscreen, gamepad, and Web Bluetooth APIs gracefully fall back when unavailable. No surprise white screens on Safari or older Firefox.
production-readyFrequently asked questions
Something missing?
Tell us what you need. We ship the top requests every two weeks.