Case study
Explainer Visuals
I built a portfolio website for a video production studio. Every video on the page plays automatically, so the site had to stay fast under that load.
- Client
- Explainer Visuals (video production studio)
- My role
- Design and development
- Year
- 2024
Portfolio section
1 / 3
- AutoplayEvery portfolio video plays at once without buffering
- HLS playlistsMP4 files converted to streaming segments with a script I wrote
- Static Astro siteNo server and no CMS
Project overview
Explainer Visuals makes animated explainer videos for SaaS companies. Their portfolio is how they sell, and they wanted every video to play automatically as soon as the page opens. That is a lot of video for one page, so the main technical requirement was that the videos play without buffering.
I started in Figma with their reference sites and made mockups the team could review before any code was written. I built the site on Astro as a static site.
To handle the video, I wrote a shell script that converts each MP4 into an HLS playlist, so each video streams in small segments. The page loads quickly even with all the videos playing, and because the site is static there is nothing to update or renew.
Tools used
- Astro
- HTML & CSS
- JavaScript
- Shell scripts
- HLS video
- Figma