Paisa — Website
Your money. Your clarity.
A cinematic, scroll-driven story about how a simple question became Paisa, an Android expense tracker
that brings your balance, income and spending into one clear picture.
Paisa app repository · Developer portfolio
About
This is the marketing website for Paisa. Instead of a conventional landing page, it unfolds like a short film:
- The question — What if managing money… just made sense?
- The problem — scattered payments pile up until the month is over.
- The idea — a turning point and the Paisa reveal.
- The product — the real app assembles inside a floating phone.
- Know your money — balance, budget and quick actions on the home screen.
- Smarter tracking — how supported UPI payments can be detected and logged once.
- Insights — transactions become categories, then plain-language AI insights.
- Better habits — budgets, savings goals and budget alerts.
- Behind the idea — the builder's perspective.
- The story continues — explore Paisa or view the project on GitHub.
The design was created in Wonder and recreated here faithfully; every phone shows real Paisa app screens with
sample data.
Features
- Launch splash — the app's own Lottie animation (
src/assets/paisa-splash.json) plays on first load with
the same size, colour and timing as the Android app, then fades into the story.
- Scroll-linked storytelling — pinned scenes, multi-layer parallax, word-by-word text reveals and seamless
hand-offs between chapters, all driven by scroll position so they reverse when scrolling back up.
- Faithful layouts — desktop scenes reproduce the 1440×900 Wonder frames and scale to any viewport.
- Mobile-first fallbacks — on phones, pinned scenes become short, naturally scrolling sequences.
- Accessible — respects
prefers-reduced-motion (static resting frames), keyboard focus styles, a skip link,
semantic headings and readable contrast.
Tech stack
Getting started
npm install
npm run dev # http://localhost:3000
Production build:
npm run build
npm run start
Project structure
src/
app/ layout, page, global styles and design tokens
assets/ Lottie splash animation
components/
splash/ launch splash
story/ shared primitives: StoryScene, Stage, PhoneFrame, StoryNav, text reveals
scenes/ one file per chapter
lib/site.ts links, app screens and chapter list
public/
app/ real Paisa app screens
brand/ Paisa logo
docs/story-brief.md design-to-code brief (scene map, tokens, choreography)
Configuration
Outbound links live in src/lib/site.ts. Any link left as null (download, privacy policy, terms, support) is
hidden rather than rendered as a dead button.
The "Behind the idea" copy lives at the top of src/components/scenes/SceneBehind.tsx.
Links
