PhotonFX Motion Lab
Quadrupled launch-day engagement and established reusable creative pipelines.
The challenge
Brands launching physical products in the 2024–2025 window faced a creative paradox: digital audiences expected immersive, cinematic experiences, but production timelines and budgets could not support separate builds for web, mobile, and XR. Traditional 3D web agencies were delivering high-quality experiences on 3–6 month timelines with costs that only made sense for single campaigns. There was no reusable pipeline — every launch started from zero. The result was brands either accepting mediocre digital launches or concentrating budget on one platform and accepting a degraded experience everywhere else.
Architecture
PhotonFX is a procedural 3D rendering engine built on Three.js with WebGPU as the graphics backend (with a WebGL fallback for browsers without WebGPU support). The engine has three layers: a scene graph abstraction (handles object hierarchy, lighting, and camera), a procedural animation system (parametric keyframe generation driven by brand configuration files), and a responsive render pipeline (automatically adjusts geometry complexity, texture resolution, and shader complexity based on device capability profiling). SvelteKit wraps the engine in a component model that makes scene composition declarative — a campaign designer can configure a launch sequence in a JSON file without touching Three.js code. AWS Lambda handles asset optimisation and format conversion at build time, generating WebP textures, compressed geometry, and environment maps optimised for each target platform.
How we shipped it
The engine core (scene graph, render pipeline, and capability profiling) was built over six weeks as a standalone library. The SvelteKit integration and the declarative campaign configuration layer followed over four weeks. The first client campaign (a consumer electronics launch) was configured and shipped in three days using the completed engine — this was the validation point that the reusable pipeline concept was working. The WebGPU path required an additional two weeks of shader optimisation to achieve consistent 60fps on mid-range mobile GPUs.
Results
The first product launch using PhotonFX achieved 4.1× launch-day engagement versus the client's previous campaign baseline. Average session duration on the launch page increased from 48 seconds to 3 minutes 22 seconds. The reusable pipeline reduced subsequent campaign production time from 10–14 weeks to 3–5 days for campaigns within the same product family. WebGPU adoption rate among visitors was 34% at launch, with the WebGL fallback delivering 92% visual parity.
What we would do differently
The capability profiling system was the hardest engineering problem and the most important one. A single rendering path that worked beautifully on a MacBook Pro but dropped to 8fps on an Android mid-range device would have been commercially useless. The declarative campaign configuration format took three iterations to get right — the first version was too close to Three.js concepts for non-engineers to use effectively.
Written by Mudassir Khan
Agentic AI Consultant & AI Systems Architect · CEO of Cube A Cloud · Islamabad, Pakistan
Free tools
Related service
Next.js Development
See scope & engagement →Related case studies
Want to build something like this?
Book a 30-minute strategy call and let us map out what is possible for your situation.