Distributed Media Systems & SaaS•2026

Sonance Studio

A full-stack, distributed cloud video mastering and transcoding SaaS engineered to eliminate quality degradation and compression artifacts on short-form video platforms (TikTok, Instagram Reels, and YouTube Shorts) using Next.js 16, FFmpeg, Cloudflare R2/Queues, and Supabase.

CLIENTDistributed Media Infrastructure & SaaS
TIMELINE2026
TECHNOLOGIES
Next.js 16 (App Router)React 19TypeScript 5Node.jsFFmpeg Coreffprobe TelemetryCloudflare R2Cloudflare QueuesSupabase (PostgreSQL 15)Row Level Security (RLS)PayMongo API (QRPH/Cards)Tailwind CSS v4TurborepoVercel Edge Network
EXTERNAL LINKS
Sonance Studio
Sonance Studio
[ 01 — THE BRIEF & APPROACH ]

ENGINEERING IMMERSIVE NARRATIVES

Sonance Studio is a full-stack, distributed media optimization platform engineered to eliminate quality degradation and compression artifacts on short-form video platforms (TikTok, Instagram Reels, and YouTube Shorts).

[01] EXECUTIVE SUMMARY

By pre-conditioning raw mobile and cinema footage into the exact algorithmic ingest sweet-spots of social media transcode clusters, Sonance Studio prevents platform re-compression penalties, eliminates frame-rate jitter, normalizes audio to broadcast loudness standards, and optimizes container headers for instant playback.

[02] THE PROBLEM & PLATFORM COMPRESSION DILEMMA

Every day, social media platforms process billions of video uploads. To conserve bandwidth and edge compute, platform ingestion servers run aggressive automated transcode passes. When creators upload unconditioned video files, five catastrophic failures occur:

• Variable Frame Rate (VFR) Jitter: Smartphones record in VFR to save battery, causing playback micro-stutters and frame drops when converted by standard web compressors.

• Crushed Bitrate Allocation: Files with oversized bitrates trigger harsh, lossy downsampling that introduces severe macroblocking and motion blur.

• Audio Limiter Pumping: Unnormalized, high-peak audio triggers platform limiters, creating audible distortion, volume dips, and muffled dialogue.

• Color Range Mismatch: Unspecified RGB/YUV matrix tags cause color shifting and washed-out contrast during mobile decoding.

• Moov Atom Buffer Delay: Standard MP4 files store container headers at the end of the file, causing 2–4 second initial buffer latencies on mobile networks.

[03] THE SOLUTION: 4-STAGE NEO-MASTERING PIPELINE

Sonance Studio replaces generic web converters with a dedicated 4-stage mastering pipeline designed specifically around social platform encoder specifications:

1. CFR Cadence Lock: Strict 60.00 / 120.00 FPS hardware clocking regularizes all timestamps and eliminates VFR micro-stutter.

2. Calibrated CRF 18 Rate Control: H.264 High Profile Level 5.2 dynamically allocates bits to high-motion frames while remaining under platform re-encode thresholds.

3. Range-Aware Colorimetry: Explicit BT.709 matrix parameter injection preserves 100% color fidelity across OLED displays without washed-out blacks.

4. EBU R128 Audio Normalization: Automated two-pass loudness leveling targets -14.0 LUFS with a -1.0 dBTP True Peak ceiling, preventing platform limiter ducking.

5. Progressive Container Mux: +faststart shifts MP4 index headers (Moov atom) to the front of the file, eliminating buffer delay.

[04] KEY ARCHITECTURAL INNOVATIONS

• Range-Aware Colorimetry & BT.709 Tagging: Custom FFmpeg filter chains using in_range=full:out_range=limited alongside explicit -colorspace bt709 -color_primaries bt709 -color_trc bt709 -color_range tv injection.

• Distributed Asynchronous Worker Architecture: Direct client upload to Cloudflare R2 via IAM presigned URLs, asynchronous job dispatch via Cloudflare Queues, and an atomic state machine in Supabase PostgreSQL with job leasing and heartbeats.

• Fintech & Credits Engine (PayMongo Integration): Cryptographic webhook signature verification (paymongo-signature) with atomic credit reservations and regional payment methods (QRPH, GCash, Maya, Cards).

• Zero-Downtime Maintenance Interception: Edge Middleware route interception layer safely holding queue message leases and displaying friendly status modals without losing in-flight conversions.

[05] MEASURABLE OUTCOMES & BENCHMARKS

—
0.00s Initial Playback Delay: +faststart shifts Moov atom to beginning (down from 2.5s – 4.0s mobile delay).
—
Strict 60 / 120 FPS CFR Lock: Hardware-clocked frame cadence replaces erratic VFR jitter.
—
-14.0 LUFS Loudness: EBU R128 compliance with -1.0 dBTP ceiling eliminates limiter ducking.
—
0 MB Server Overhead: Direct client-to-R2 IAM presigned uploads bypass server memory bottlenecks.

[06] TECH STACK

—
Frontend Architecture: Next.js 16 (App Router), React 19, TypeScript 5, Tailwind CSS v4
—
Media Processing: FFmpeg Core, ffprobe Stream Telemetry, EBU R128 Filter, Custom CFR Retimers
—
Cloud & Queues: Cloudflare R2 (Private IAM S3), Cloudflare Queues, Atomic PostgreSQL Lease
—
Database & Fintech: Supabase (PostgreSQL 15, RLS), PayMongo API (QRPH, GCash, Maya, Cards)
[ 02 — VISUAL ARCHIVE & EXPLORATIONS ]
Sonance Studio — Automated Transcoding Pipeline & Live Telemetry Inspector
Sonance Studio — Automated Transcoding Pipeline & Live Telemetry Inspector
Automated 4-stage mastering pipeline executing CFR cadence stabilization, CRF 18 rate control, BT.709 colorimetry, and -14 LUFS loudness mastering.
NEXT CASE STUDY·Curated Portfolio Archive & Developer Community·2026

DEV-STATION

DEV/STATION is a curated archive for developer portfolios. I designed its editorial interface and built the system for submissions, live previews, structured ratings, saved work, weekly selections, and Discord-linked membership. It uses Next.js, Supabase, Cloudflare R2, Discord, and Vercel.

Next.js 16 (App Router)React 19TypeScript 5Supabase (PostgreSQL & Auth)