EricPay

pay eric to keep playing

Comment

Inspiration

The creator economy has a discovery problem. Patreon and OnlyFans require upfront subscription commitments before viewers know if content is worth it. YouTube/TikTok pay fractions of a cent per view while taking 45% cuts. The result: 98% of creators make less than minimum wage, and fans have no good way to directly support creators at the moment of peak interest.

We're building the missing layer: preview-to-pay infrastructure that turns content discovery into instant monetization. The insight came from watching our friend Eric's guitar performances—technically skilled, genuinely engaging, but trapped in the "post it for free and hope" model that starves most creators. Eric became our proof-of-concept: if we can build a system where watching 10 seconds of a guitar solo naturally converts to a $3 tip, we've solved the fundamental creator economy problem.

The technical bet: micropayments work when the friction is lower than the content value. No accounts, no subscriptions, no "please support me" guilt—just honest previews that create natural upgrade moments. If we nail this UX for Eric's guitar videos, the same system scales to cooking tutorials, fitness coaching, music lessons, or any creator vertical where quality is immediately apparent but full value requires commitment.

We're not building a platform for Eric. We're building the payment primitive that makes supporting creators feel like pressing play.

What it does

Core Flow: Progressive disclosure payment funnel with embedded Visa merchant integration

1. Smart Preview System

  • Grid-based video library with responsive layouts (1-4 columns based on viewport)
  • Hover-triggered 15-second previews with audio-first playback
  • Real-time progress visualization: Sub-video gradient progress bar (0-100% over 15s)
  • Countdown UX: Live timer displays "🎬 Free Preview: Xs remaining" with sub-second precision

2. Payment Integration (Visa Request to Pay)

  • Merchant location discovery: Shows Visa-accepting physical merchants near user   - Real merchant data: "Starbucks #12345 - 1390 Market St"   - Geographic proximity sorting by distance
  • Dual-path payment: Online (Visa Direct) + offline (merchant redemption)
  • Transaction transparency: Displays creditor details, settlement options, payment status

3. Progressive Unlock Architecture

State Machine:
IDLE → [hover] → PREVIEWING (0-15s) → LOCKED → [payment] → UNLOCKED

Visual States:
- IDLE: Static thumbnail + duration badge
- PREVIEWING: Video playback + progress bar + countdown
- LOCKED: Gradient overlay + lock icon + "Tip $X to unlock" CTA
- UNLOCKED: Full video controls + no overlays

4. Production-Ready Features

  • Real creator content: 3 production videos (64MB, 24MB, 30MB H.264/AAC MP4)
  • Dynamic duration calculation: onLoadedMetadata reads actual video length
  • Responsive design: Mobile-first with touch/hover detection
  • Accessibility: ARIA labels, keyboard navigation, semantic HTML

How we built it

  • Visa API
  • Frontend: Vite + React + TypeScript, Tailwind CSS, shadcn/ui, lucide-react icons
  • Runtime: Bun 1.x (3x faster than Node.js)
  • Framework: Elysia (type-safe routing, 15x faster than Express)

Challenges we ran into

  • Browser media policies: Modern autoplay restrictions required sophisticated detection and fallback logic—implemented layered approach with audio-first, muted fallback, and user-initiated playback paths.
  • Asset management at scale: Video binaries (100MB+) broke standard Git workflows. Architected solution using Git LFS with clear production CDN migration strategy.
  • State synchronization: Three concurrent timers (preview window, countdown display, progress bar) required careful coordination to avoid drift and ensure cleanup on component unmount/re-hover.
  • Cross-codec compatibility: Safari + Chrome require different encoding profiles; standardized on H.264/MP4 baseline for universal playback.
  • Overlay ergonomics: Balancing visual prominence (icons must be seen) vs. content occlusion (viewers need to see Eric) across thumbnail variance.

Accomplishments that we're proud of

  • A smooth 10-second, audio-on-hover preview that feels natural and informative.
  • Transparent countdown showing remaining full-video time to set clear expectations.
  • Lightweight, readable UI with subtle progress indicator and minimal code changes.
  • Creator-friendly architecture: Zero-friction video ingestion path documented for non-technical users.
  • Real conversion funnel: Preview exhaustion → lock state → tip CTA creates natural monetization path without dark patterns.

What we learned

  • Practical handling of browser media policies and autoplay behaviors.
  • Using onLoadedMetadata and React refs/effects to build time-aware UI.
  • Tradeoffs of committing large media vs. using LFS/CDN for reliability and performance.
  • Small UX cues (countdown, icon change) can significantly improve clarity and conversion.

What's next for EricPay

  • Mobile UX: tap/press-to-preview, clear audio controls, and accessible states.
  • Media pipeline: thumbnail generation, multiple encodes/bitrates, and CDN delivery.
  • Creator tools: dashboard, analytics (views/tips/CTR), varied tip tiers, and goals.
  • Accessibility: captions/subtitles, keyboard-nav, focus states, ARIA labels.
  • Security/hardening: signed URLs or tokenized access for unlocked videos.

Built With

Share this project:

Updates