Loading…
Live page · scroll inside
FreeAccountancy practice · light · landing page · gsap · lenis · html
Abacus
A small-town accountancy practice in ledger paper, bottle green and red ink: an old-style serif statement beside a ruled card of a café client's next deadlines, then a double-entry demo where six journal lines post leg by leg into a trial balance while a balance beam tips towards debits and back, settling level under a drawn double rule. Then a ruled fixed-fee schedule, two partners shown as initials roundels, a client quote and a green meeting band.
What's inside
- 01Practice barSolid after 80 px.
- 02Statement and deadlinesStatement lines rise; the deadline rows rise in turn.
- 03Double-entry ledger with balance beamWhen the section enters, each transaction lights up and its legs post one at a time: the debit leg updates its account and tips the beam towards Debits, the credit leg evens it back. When all six are posted the totals match, the beam settles level and a double rule draws under the totals. Hovering a transaction highlights its accounts.
- 04Fixed-fee scheduleRows rise in turn.
- 05PartnersCards rise.
- 06Client quoteLines rise.
- 07Meeting bandLines rise.
- 08FooterNone.
Utility pages in the same file: 404 · Style guide · Password · Changelog
How to use it
From prompt to a live page.
- 01Walk the page
The preview is the real template: loader, scene, scroll choreography. Scroll inside it or open it full-screen.
- 02Pick a palette
Token sets re-tint the whole page live, scene included. The prompt carries the one you chose.
- 03Pick your stack
Single HTML, Next.js, React, Vue, Astro, WordPress blocks, Shopify sections or a Webflow build guide.
- 04Copy the prompt
It carries the art direction, the tokens, the motion system and every section's layout, motion and content, in order.
- 05Make it yours, then iterate
Swap copy and images first, keeping the structure. Then refine section by section rather than re-running the whole prompt.
