I'm always excited to take on new projects and collaborate with innovative minds.
https://krafton.my.id
The public website for TeePay at teepay.me: a fast, animated marketing site that explains mobile money payments for African businesses, with live pricing and admin-managed pages.
Client
Website
teepay.me introduces TeePay to businesses: payment links, payment pages, invoices, Control Numbers, payouts and a developer API, all paid for with M-Pesa, Airtel Money, Mixx by Yas and HaloPesa. The site uses interactive product previews (a live-feeling checkout and payment flow), motion design with WebGL "venom" call-to-action buttons, rolling button labels and a custom cursor, while staying accessible: everything falls back gracefully on touch screens and with reduced motion. Pricing and legal pages are managed from the admin console and refresh on the public site within a minute of publishing, and hosted invoices open on invoice.teepay.me.
TeePay needed a website that earns trust from small businesses and developers at the same time, explains a new way of getting paid in seconds, and looks unlike any other payment company in the region.
The site is built in the same Next.js codebase as the dashboard, with its own public layout. Product sections use interactive previews instead of static screenshots, and motion is layered on top of fully working, accessible links. Content that changes often (pricing, legal pages) comes from the admin console rather than code, with server-side caching that refreshes automatically after publishing.
- Next.js public routes with incremental revalidation and on-demand refresh when pages are published.
- Admin-managed pages (Terms, Privacy, Acceptable Use, Cookies) and per-country pricing.
- WebGL signed-distance-field "venom" buttons drawn on overlay canvases around real links; idle frames skipped for performance; static fallback on touch, reduced motion or no WebGL.
- Dark and light themes, phone-first layouts, no horizontal overflow.
Next.js, React, TypeScript, Tailwind CSS, shadcn/ui, Motion, WebGL (GLSL), Python FastAPI (content API), Docker, Nginx.
A live marketing site at teepay.me that presents every TeePay product, links straight into the dashboard and docs, and lets the team publish pricing and legal pages without a code deploy.
- Motion should decorate, never block: every animated button is still a plain, focusable link.
- Prerendered pages need a revalidation strategy, or published content silently goes stale.
- Interactive previews explain a payment product faster than paragraphs.
Your email address will not be published. Required fields are marked *
