sideVibes - PPFast v0.5

Beep Iams — Wed, 12 Nov 2025 23:29:30 +0000

After 15 years in NYC, I moved to the mountains. And, as most of the rest of USA relies on automobiles for transportation, I went through the car-purchasing experience.

In my aftermarket / detailing / protective service research, I found the marketing from these shops were less about the possible options, and more slopcasing autotube...

sideVibes 🚗✨

Test Spin: https://ppfast.netlify.app/

PPFast v0.5 - PPFast is an interactive configurator that lets customers visualize and customize vehicle protection services. Users can select different zones on a car (hood, bumper, doors, etc.) and see real-time pricing for PPF, window tinting, and ceramic coating packages.

Interactive Features

Multi-Service Support:

PPF - Body panel protection zones
Window Tinting - Window-specific zones with tier-based products
Ceramic Coating - Full-vehicle or package-based coverage

Real-Time Pricing:

Dynamic calculator with tier-based discounts
Automatic package deal detection
Volume discounts
Service-specific rules (e.g., Colorado hood size variants)

Visual Feedback:

Smooth hover states with zone highlighting
Selected zone visualization with service-specific colors
Preview mode for package deals
Framer Motion-powered transitions

IDEALS

For aftermarket shops, this solves real problems:

No manual mask creation for every vehicle model
Accurate visualization helps customers understand what they're buying
Real-time pricing reduces back-and-forth
Professional presentation builds trust

v0.6 preview -> 1.0 release

I'm planning to implement the dynamic upload feature next. If you're interested in following along, I'll be sharing updates on:

SAM 2 integration challenges (self-host vs. replicate)
Mobile-view UX/design enhancements
Account betterauth
Stripe Integration (testing autumn integration)

The Stack

Frontend

React 19 | TypeScript | Vite (Rolldown) | Framer Motion | - Tailwind CSS v4 -

Backend

Convex

AI/ML

SAM 2 - Meta's image segmentation model
Python Pipeline - Custom mask generation script with GPU acceleration support

Current State

Right now, ppfast supports 4 pre-generated vehicle categories:

SEDAN/HATCH - Traditional compact vehicles
CUV/SUV - Crossover/Sport utility vehicles
TRUCK - Pickup trucks
SUPER - High-performance sports cars

Each category has:

A master wireframe image (3/4 front view)
Pre-generated zone masks using SAM 2
Category-specific zone definitions
JSON metadata with SVG paths and bounding boxes

The Mask Generation Pipeline

SAM 2 to automatically generate masks:

Hood (with size variants)
Front bumper & cladding
Headlights, fenders, mirrors
Doors, rocker panels
Door handle cups
A-pillars, wheel arches
Top grill details

The Python script (scripts/generate_masks.py) does the heavy lifting:

# Simplified flow
1. Load category image (e.g., SEDAN.png)
2. For each zone:
   - Use base coordinates as bounding box prompt
   - Add center point as foreground prompt
   - Run SAM 2 segmentation
   - Select best mask from multiple candidates
   - Convert to RGBA mask format
   - Extract SVG paths and bounding boxes
3. Save masks as PNG files
4. Generate zone metadata JSON

The masks are then loaded dynamically in the React app, with mask-based hit detection for precise hover/click interactions (more accurate than coordinate-based detection).

SAM 2 Integration

Meta's SAM 2 (Segment Anything Model 2) automatically generates precise masks for car zones, eliminating the need to manually trace every vehicle model.

Generate masks once per category using SAM 2
Store them as PNG files with alpha channels
Load them dynamically in the React app
Use them for hit detection (checking if a point is inside a mask)

GPU acceleration (10-50x faster)
CPU fallback
Multiple model variants (large/base_plus/tiny)
Automatic coordinate scaling

Convex Backend

Service definitions and pricing
Vehicle catalog
Zone metadata
Package deal calculations
end-to-end type safety schema (TypeScript)

React 19 Features

Improved concurrent rendering
Better performance with automatic batching
Enhanced error boundaries

Mask-Based Hit Detection

check if it's inside the actual mask:

// Simplified version
const getMaskAlpha = (mask: MaskData, x: number, y: number): number => {
  const maskX = Math.floor((x / currentWidth) * mask.width)
  const maskY = Math.floor((y / currentHeight) * mask.height)
  const maskIdx = maskY * mask.width + maskX
  return mask.alpha[maskIdx] || 0
}

// Check if point is in zone
const isInZone = getMaskAlpha(zoneMask, mouseX, mouseY) > 127

This gives us pixel-perfect accuracy, even for irregular shapes like door handle cups or A-pillars.

Next: Dynamic User Uploads 🚀

The current version uses pre-generated masks for the 4 categories.

Universal vehicle support by allowing users to upload their own 3/4 front view car images.

User uploads image of choice
System processes it with SAM 2
Automatically generates zone masks
User can configure and visualize services on their exact vehicle

Technical Approach

Phase 1: Infrastructure

Image upload component (drag-and-drop)
Convex file storage or S3 integration
Image preprocessing pipeline
SAM 2 processing endpoint

Phase 2: SAM 2 Integration

Adapt mask generation for arbitrary images
Template matching (use existing masks as starting points)
Zone prompt system that works across vehicle types
Mask validation and confidence scoring

Phase 3: Dynamic Zone Loading

Modify CarVisualization to handle dynamic masks
Mask caching system
Fallback to coordinate-based detection
Loading states and error handling

Phase 4: UX Polish

Image upload UI with preview
Processing status indicator
Zone review/correction interface
Save/load configurations

Challenges & Solutions

Challenge: Processing time (SAM 2 can be slow)
Solution: Show progress, process in parallel, cache results, use smaller model variants

Challenge: Vehicle orientation variations
Solution: Image normalization, SAM 2's robustness, user guidance on optimal angles

Challenge: Cost at scale
Solution: Cache masks for common models, rate limiting, cloud GPU optimization

Architecture Flow

User Upload → Image Preprocessing → Template Matching 
→ SAM 2 Processing → Mask Validation → Store/Cache 
→ Render in UI

Resources

Live Demo: https://ppfast.netlify.app/
SAM 2 GitHub
SAM 2 Paper
Convex Docs
React 19 Release

DEV Community: Beep Iams