A cinematic, SSR-powered React platform for Wondros, a strategic creative agency turning complex ideas into impact across film, branding, campaigns, and digital communications.
Wondros — Strategic Creative Agency
Los Angeles, CA
Web Development
SSR Architecture
Motion & Video
Creative Agency
Film & Branding
Philanthropy
2024
Wondros designs communications that build trust, drive engagement, and deliver measurable outcomes for clients like the NIH, IBM, MD Anderson, Stand Up 2 Cancer, American Express, and Craig Newmark Philanthropies. The site needed to feel as cinematic and considered as the work itself, a portfolio-first experience where film, campaigns, and case studies could breathe.
Our team built it as a server-side rendered React application on Vite, giving the team fluid, app-like interactions while keeping every case study fully crawlable, instantly shareable, and fast on first paint. Capability and focus-area filters update the work grid in place, with state preserved across navigation so visitors never lose their place.
Film is treated as a first-class citizen. I integrated the Vimeo API into a custom video pipeline that pulls thumbnails, durations, and HLS streams directly from the client’s library, so the Wondros team can publish a new film without touching code. Lottie handles micro-interactions and lightweight motion graphics, and Framer Motion drives page transitions, hover choreography, and layered reveals across hero modules and case study scroll states.
Everything ships through AWS CodePipeline to an EC2 fleet, fronted by a global CDN for fast asset delivery worldwide, an infrastructure stack that matches the production value Wondros brings to every frame they put out.
A modern React stack with Vite-powered SSR, Vimeo-driven film delivery, and motion handled by Lottie and Framer Motion, deployed to AWS via CodePipeline and served from the edge.
Component architecture for the entire front-end experience.
Utility-first CSS for rapid, consistent UI development.
Server-side rendering for fast first paint and full SEO.
Custom film pipeline pulling thumbs, durations, and HLS.
Lightweight, scalable motion graphics and micro-interactions.
Page transitions, hover choreography, and layered reveals.
Scalable cloud compute serving the SSR Node runtime.
Automated CI/CD from commit through build to deploy.
Global edge delivery for assets, images, and video posters.