Plugtronics- Smart Solution for Ev Charging

Plugtronics - Smart EV Solutions

Designed and built an interactive landing page for an EV hardware brand, focused on delivering premium visuals without compromising performance by engineering a custom media optimization pipeline end-to-end.

Built a dynamic single-page experience using React 19, Vite, and Three.js (React Three Fiber), integrating a real-time 3D product viewer that users can orbit and interact with.

Designed the interface to balance visual richness with fast load times and smooth interactions across desktop, tablet, and mobile

Wired the contact/lead form to Supabase for instant form capture and lightweight lead storag

Developed a custom FFmpeg pipeline to process and optimize the hero video.

Retimed footage, synthesized new frames via motion interpolation, and upscaled 1080p to 4K using a Lanczos filter.

Encoded using HEVC with Safari-compatible tagging, taking a 30-second 4K 120fps clip down to roughly 610 KB without visible quality loss.

Integrated Draco mesh compression for the 3D product, bringing the GLB from 7.5 MB down to 736 KB with in-browser decoding.

Treated media (video, 3D, illustrations) as an engineering problem rather than static assets handed in by someone else.

Code-split the 3D module so the initial shell loads in under 120 KB gzipped, with the heavier libraries deferred until needed.

A lightweight, high-impact landing page that feels like a hardware product brand: 4K motion and real-time 3D without the multi-megabyte payload usually attached to either. Modern, branded, fast on any connection.

Tools

React 19

TypeScript

Vite

Three.js

React Three Fiber

drei

Framer Motion

Mapbox GL

ffmpeg

Draco

Vercel

Supabase