Cinematic Dark-Themed Portfolio & Streaming Platform for Commercial Video Agency
Crafted an immersive, dark-aesthetic agency web platform featuring high-bitrate showreel streaming, adaptive thumbnail pipelines, category-based project grids, and sub-second navigation designed to convert commercial production clients.
The Problem & Challenge
Cybertruck Films produces cinematic commercials, music videos, and fashion brand films. Their previous web presence struggled with performance bottlenecks: embedding unoptimized raw video iframes blocked rendering on mobile networks, degraded Core Web Vitals, and caused prospective corporate brand clients to bounce before reaching the inquiry form.
The Engineering Solution
Architected a custom, ultra-lightweight WordPress architecture paired with modern CSS motion primitives, custom video streaming wrappers, and asynchronous player hydration. Replaced initial heavy third-party iframes with lightweight animated WebP posters that only load video players when explicitly interacted with. Built custom responsive grids categorized by commercial tier and integrated direct WhatsApp and email shoot consultation funnels.
Features & Functionality Delivered
- Dynamic full-width video showreel player with instant playback and zero layout shift
- Category-driven portfolio filtering for Commercials, Brand Films, Fashion Shoots, and Social Ads
- Direct client consultation & shoot booking pipeline with instant notification dispatch
- Dark glassmorphic UI aesthetics with custom cursor interactions and smooth scroll physics
- Adaptive video thumbnail streaming with automated device viewport scaling
My Direct Role & Responsibilities
UI/UX Designer & Full-Stack Developer
- Art direction and dark-aesthetic UI design for commercial video studio
- Video player wrapper implementation with lazy iframe mounting
- WebP animated poster pipeline generation for zero-bandwidth previewing
- Direct shoot consultation funnel integration
What This Incident Demonstrated & Lessons Learned
Never Load Video Iframes on Initial DOM Render
Third-party video players inject hundreds of kilobytes of external scripts. Using facade poster images that only hydrate the player on user click drops LCP by several seconds.