Pebla sits on top of mobile money rails people already trust (MTN MoMo, Airtel Money). The product solves a messy everyday loop: USSD codes, screenshots, chasing friends for splits, and digging through SMS for history. The marketing problem was different. Fintech apps in East Africa often look like utility tools. Pebla needed a site that: - Makes the product feel human and social, not like another wallet clone - Explains six pillars (pay, split, top up, see, earn, belong) without dumping feature lists - Shows the real app experience clearly enough that people download - Feels premium and modern while staying readable on mid-range phones Without a strong web presence, store listings alone couldn’t carry positioning (“the AI Splitwise for Africa”) or tell the full story.

I designed and built a multi-page marketing SPA centered on one idea: Pebla doesn’t replace your wallet - it sits on top of how you already pay. The home page is a single scroll narrative: 1. Hero - brand-first typewriter reveal, short promise lines, download CTA 2. Product pillars - six capabilities with clear voice 3. 3D product viewer - iPhone model + live app screen recording 4. Showcase & performance - social money context with parallax imagery 5. Features - scroll-scrubbed 3D MacBook scene with video textures 6. Highlights - outcome-led quotes that reinforce relief, not jargon Supporting routes cover download, contact, blog, and privacy. Store buttons deep-link to iOS and Android so the site’s job ends in installs.

• Brand-led hero

  Typewriter animation and a single primary CTA to download.

• Product pillars

  Frames Pebla as a warm layer over mobile money across six capabilities.

• Interactive 3D iPhone

  React Three Fiber phone model with app screen texture / video.

• Scroll-driven MacBook features scene

  Model rotation, pinned canvas, and sequenced feature callouts.

• Parallax & performance imagery

  Atmosphere without cluttering the first viewport.

• Dedicated download page

  Full-bleed video background, large phone canvas, and store buttons.

• Secondary pages

  Contact, Blog, and Privacy with shared nav/footer and scroll-to-top routing.

• Responsive 3D & video

  Media-query-aware 3D scales, DPR caps, and mobile-safe muted playsInline video playback.

• ScrollTrigger vs late-loading 3D / fonts

  Pinned and scrubbed sections broke when the canvas or fonts loaded after layout. Solved with a shared scheduleScrollRefresh helper and refresh hooks on load / font readiness so triggers recalculate after heavy assets settle.

• Heavy 3D on mobile

  Multiple WebGL canvases (phone + MacBook) risk jank on mid-range devices. Mitigated with Suspense, texture preload, DPR capped at 2, responsive model scales, and lighter lighting variants where transparency/size demanded it.

• Video as product proof without autoplay failure

  Browsers block unmuted autoplay and can flake on looped demos. Used muted playsInline videos plus a small play helper so product screen recordings start reliably across Safari/Chrome.

• Turning a tutorial-style 3D shell into a real brand site

  Started from an Apple-style MacBook demo pattern and rebuilt messaging, routes, brand system, hero composition, download funnel, and Pebla-specific 3D/phone storytelling so it read as a product marketing site - not a tech demo.

Shipped a live marketing site at pebla.io supporting the consumer app launch in Rwanda. Clear download path to both App Store and Google Play. Multi-page structure ready for content (blog), support (contact), and compliance (privacy). Motion/3D product storytelling that shows the app in context instead of relying only on static screenshots.

1. 1.Brand has to win the first viewport. If you remove the nav and the page could belong to any fintech, the hero failed. Putting “Pebla” as the hero signal - then one promise and one CTA - worked better than stacking features up top.
2. 2.Scroll animation needs layout discipline. Fancy timelines are fragile unless you treat font load, 3D mount, and image decode as part of the animation system - not afterthoughts.
3. 3.3D is a storytelling tool, not decoration. The phone/MacBook scenes earn their cost when they show the product; otherwise they just slow the page.
4. 4.Marketing sites for offline-first products still need premium web craft. Pebla works without perfect connectivity in-app; the website’s job is trust and clarity for people discovering it on the open web.

Live product

www.pebla.io/

Demo

www.pebla.io/

App Store

apps.apple.com/rw/app/pebla-track-mobile-money-pay/id6748704464

Play Store

play.google.com/store/apps/details?id=com.pebla.pebla