SoftPay

# SoftPay Product Overview

🚀 Live Demo: https://feifeiexplains.online 

📦 GitHub Repository: https://github.com/jencyfei/softpay.git

## Product Positioning

SoftPay is an innovative Web3 creator tipping platform adopting a minimalist Japandi design language, seamlessly merging blockchain execution with a gamified digital collection experience[cite: 3].

---

## Core Features

### 1. Dual-Mode Wallet Infrastructure

- Simulate Mode (Default): Zero-friction onboard testing allowing judges to experience the full operational logic without consuming real devnet assets or extension popups[cite: 3].

- Live Mode: Native integration via window.solana API, prompting authentic browser extensions for Phantom wallet connection and tracking true 64-character blockchain signatures on the Solana Devnet[cite: 3].

### 2. Multi-Tier Interactive Tipping

- Green Tea Cup ($1 USDC): Comes with dedicated hand-drawn icon asset[cite: 3].

- Chiffon Cake ($3 USDC): Comes with dynamic hover micro-animations[cite: 3].

- Cozy Tea Pot ($5 USDC): Aesthetic premium support tier[cite: 3].

- Custom Amount: Flexible customized configuration support for open-ended tips[cite: 3].

### 3. Blind Box Stamp Card System

- 34 Unique Card Framework: Every transaction unlocks a randomized, uniquely styled watercolor aesthetic collectible card asset based entirely on fair algorithmic assignment[cite: 3].

- Three Rarity Tiers: Transparently distributed via hash distribution[cite: 3]:

  - ✦ SSR - LIMITED (10% Probability - Deluxe Metallic Gilded Shimmer Border)[cite: 3]

  - ✦ SR - RARE (30% Probability - Vibrant Purple Palette Border)[cite: 3]

  - ✦ COMMON (60% Probability - Minimalist Hard-Shadow Gray Border)[cite: 3]

- 100% Deterministic Matrix: Pure mathematical distribution ensuring Same Input Seed = Same Hash Signature = Same Card Reward, preventing fraudulent random behaviors[cite: 3].

### 4. Canvas Scratch-Off Reveal Engine

- Tactile Scratch Mechanics: Built entirely on HTML5 Canvas pixel-manipulation tracking, supporting fluid mouse dragging and mobile touch swipe responses[cite: 3].

- Smooth 60fps Optimization: Real-time computation of scratch clearance percentage[cite: 3]. Reaching a 50% clearing threshold automatically triggers a smooth 400ms alpha fade-out to elegantly expose the underlying blind box watercolor[cite: 3].

### 5. Stamp Album Progression Achievements

- Collection Progress Tracker: Keeps historical track of unique card indices (X / 34 Unique Stamps) paired with a responsive visual progress bar tracker, backed by persistent LocalStorage caching[cite: 3].

- Hidden Palette Milestones: Collecting 5 distinct unique card items automatically unlocks a Milestone Achievement Reward[cite: 3].

### 6. Generative Watercolor Postcard Receipts

- Rich Context Layout: Generates a complete digital card displaying the supporter's name, personalized greetings seed, certified timestamp, dynamic Solana signature, and an automated healing response from the creator[cite: 3].

- Deterministic Geometric Angles: Utilizing the transaction signature to calculate an organic rotation angle between -3 and +3 degrees[cite: 3]. Every postcard lands with a unique stop-motion paper rattle effect[cite: 3].

### 7. High-Definition 2x Export Pipeline

- Implements html2canvas rendering bypassing oklab color space boundaries[cite: 3]. Outputs high-resolution 2x Retina-ready PNG image stubs with smart dynamic naming conventions for seamless desktop storage or physical printing[cite: 3].

### 8. Viral X (Twitter) Share Interface

- One-click native intent router utilizing automated gamified social engineering copy[cite: 3]. Dynamically embeds rarity levels, transaction signatures, and production URLs while cleanly hiding local server properties, guiding followers to join the collection loop[cite: 3].

### 9. Responsive Creator Mailbox

- Grid display container compiling persistent local browser caches into organized columns (2 to 4 responsive tracks)[cite: 3]. Clicking any historical card seamlessly mounts the precise snapshot data back into the interactive Postcard Modal viewport[cite: 3].

- Displays clear transparent global counter stubs differentiating "X / 34 Unique Stamps Collected" and "X Total Cozy Receipts"[cite: 3].

### 10. Secret Premium Pastel Theme

- Once the milestone achievement unlocks, users can activate a smooth 500ms CSS transition changing the dashboard backdrop to an exclusive, high-end flowing pastel gradient stream (Pink to Creamy Cream to Sky Blue) maintaining full WCAG AA contrast accessibility[cite: 3].

---

## Technical Stack

- Frontend Architecture: React 19 + TypeScript 5.8[cite: 3]

- Bundler Platform: Vite 6.2[cite: 3]

- Style Framework: Tailwind CSS v4[cite: 3]

- Animation Physics: Framer Motion 12[cite: 3]

- Web3 Ecosystem: Solana Web3.js API Integration[cite: 3]

- Graphic Processing: HTML5 Canvas Context + html2canvas[cite: 3]

---

## Growth & Engagement Strategy

- The Viral Growth Loop: User Sends Tip -> Scratches Mystery Card -> Generates Aesthetic Postcard -> Shares Rare SSR Metadata to X (Twitter) -> Followers Click Coded Link -> New Users Enter Ecosystem[cite: 3].

- FOMO Gamification: Driving retention through a visible 34-card index deck, scarce 10% SSR distribution drop rates, and aesthetic interface rewards locked behind collection milestones[cite: 3].