Case study · Our own product · mokshify.io
This website - a film you scroll.
The most honest case study we can offer: the product you are using right now. A 914-frame cinematic homepage with no video element and no framework, wrapped in a 60-page engineering site - every claim verifiable by view-source.
- 914frames, scroll-scrubbed
- 97.7%frame payload reduction
- 0front-end frameworks
- 60+pages, all static
The problem
A software studio’s website must prove two contradictory things at once: taste (the film) and discipline (the engineering). Most agency sites pick one. We needed the cinematic homepage to itself be evidence of engineering - measured, accessible, fast on modest phones.
Architecture & stack
The film: a TypeScript frame engine (loader with HEAD-probe discovery, budgeted ImageBitmap cache, damped scroll playhead, cover-fit canvas) scrubbing WebP derivatives - masters are 2.1 MB 4K PNGs, streamed frames ~48 KB, the pipeline story told in journal 001. The site around it: hand-written static HTML with one shared stylesheet, JSON-LD graphs on every page, security headers, and zero client-side rendering. Deliberately, provocatively boring - ADR-010 applied to ourselves.
Challenges
Five of them became a published journal entry: CSS class collisions that blanked the site, background-clip that vanished through word spans, image pipelines that reorder operations, Windows DPI lying to headless screenshots, and canvas black-flash before first decode. Real bugs, real fixes, kept public.
Performance & deployment
Everything measurable is published on the benchmarks page: 55 MB total film, sub-200 KB page JS, immutable caching. Deploys ride the same GitHub Actions shape we sell; the mobile experience is a separate vertical film QA’d by device emulation.
Lessons & future improvements
Lesson: the asset pipeline is the performance feature; discipline is the differentiator content. Next: more library articles, an architecture-review template, and open-sourcing the frame-pipeline and QA-screenshot tools once a public repo exists - listed here so the promise is dated.
Want your product built like this?
Same pipeline, same standards, same published honesty.
More case studies: FinCalix · Medico Diagnostics · Terravion · SkillForceHub