BACK TO PORTFOLIO
Web Application / Tool
The3Studio Internal Product
ROLE: Full-Stack DeveloperMarketing & Video Automation
To support scaling D2C clients, we built an internal engine that takes a Shopify Product JSON feed, parses the images, titles, and price points, and renders premium promotional video ads in minutes using serverless render queues.
THE CHALLENGE
Rendering MP4 video files programmatically on the server is resource-intensive, which blocked server processes and caused high API latency.
THE SOLUTION
We decoupled the renderer by bundling the composition in a serverless function and utilizing a headless headless-browser cluster, saving server CPU resources and reducing rendering times by 80%.
- Automated Shopify Product API connector fetching real-time catalog items.
- Headless video rendering queue leveraging AWS Lambda and Remotion compiler.
- Dynamic typography and color-mapping styles based on store branding settings.
- Interactive timeline editor built in React.
Next.js server action importing Remotion compiler bundles to execute headless media rendering sequences asynchronously.
Headless Serverless Video Rendering Coretypescript
import { bundle } from "@remotion/bundler";
import { renderMedia, selectComposition } from "@remotion/renderer";
import path from "path";
interface RenderParams {
productId: string;
title: string;
price: string;
imageUrl: string;
}
export async function renderPromoVideo({ productId, title, price, imageUrl }: RenderParams) {
try {
const bundleLocation = await bundle(path.resolve("./video/Composition.tsx"));
const inputProps = { title, price, imageUrl };
const composition = await selectComposition({
bundleLocation,
id: "PromoVideo",
inputProps,
});
const outputFilePath = path.resolve(`./public/renders/${productId}.mp4`);
await renderMedia({
composition,
serveUrl: bundleLocation,
codec: "h264",
outputLocation: outputFilePath,
inputProps,
});
return { success: true, url: `/renders/${productId}.mp4` };
} catch (error) {
console.error("Headless video render failed:", error);
return { success: false, error: (error as Error).message };
}
}PERFORMANCE STATS
MOBILE PAGESPEED
91/100
DESKTOP PAGESPEED97/100
AVG. LOAD TIME0.9s
TECH STACK USED
Next.js 15TypeScriptRemotionNode.jsTailwind CSSDrizzle ORM