Loading…
Live page · scroll inside
PremiumInvoicing for freelancers · light · landing page · gsap · lenis · html
Invoyce
An invoicing app site on warm paper with ledger green and stamp red: the hero invoice writes itself line by line, its amounts and totals count up, the status rail steps Sent, Viewed, Paid and a PAID stamp slams onto the sheet, with a USD/EUR/GBP switch and replay. Then a four-stop reminder timeline with a Friendly/Direct tone switch, big-figure payment fees, receipt-shaped pricing and a deep green CTA.
What's inside
- 01Tick-stub barSolid after 80 px.
- 02Self-assembling invoice heroOn load the invoice writes itself: header, then each line slides in with its amount counting up, totals count, the rail steps Sent, Viewed, Paid, and a red PAID stamp slams onto the sheet. All within 4.8 s. USD, EUR and GBP re-price every amount; Replay runs it again.
- 03Reminder timelineThe track line draws left to right and the cards rise in order; the switch rewrites every subject and body.
- 04Ways to payFigures count up as rows rise.
- 05Receipt tiersReceipts rise one after another.
- 06Green ledger bandHeading lines rise.
- 07FooterNone.
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.
