The 3 Studio
WorkPortfolioServicesInsights
BACK TO PORTFOLIO
Web Application / Tool

The3Studio Internal Product

ROLE: Full-Stack DeveloperMarketing & Video Automation
PROJECT OVERVIEW

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%.

DELIVERABLES & FEATURES
  • 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.
DEV HIGHLIGHT & CODE QUALITY

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

READY TO SELL MORE?