At Adstacker, a video ad is a combination of clips, subtitle timing, text layers, styles, animations, aspect ratios, and calls to action. Creators need to see those choices immediately—and the finished export must match.
That is why we use Remotion. Its React-based composition powers editable previews and provides the same visual rules for rendered video. We define the creative once and keep the two experiences aligned.
The challenge: preview and export often drift apart
Creative tools commonly face a frustrating problem: the editor preview looks right, but the exported file does not. A text position may shift, a font may wrap differently, captions may appear at the wrong moment, or a sequence of clips may play differently after export.
The problem grows when users mix segments, choose subtitle styles, add hook/body/CTA text, and change the output aspect ratio. If each surface interprets these settings independently, small differences compound.
Adstacker needs immediate previews and scalable rendering. The composition must be flexible for editing and predictable in production.
One shared composition for preview and rendering
Our central building block is a shared Remotion VideoTemplate. It accepts:
- One video or a sequence of video segments
- The total duration and frame rate
- A target canvas size for the selected aspect ratio
- Timed text, CTA, and subtitle layers
- Styling and animation settings for each layer
Remotion’s Series chains segments into one timeline. Sequence places text and subtitle layers at specific frames. A variation is therefore data, not a one-off edited file.
Architecture
The frontend and rendering path share the template, fonts, subtitle-style map, and layer types. A style means the same thing in the browser and in a finished ad.
Live previews with the Remotion Player
The Remotion Player provides the interactive preview canvas. When a creator changes a hook, body, CTA, subtitle style, or aspect ratio, we pass updated props to the template instead of building a new file.
The preview uses the real composition, not a static approximation. It shows sequential clips, timed subtitles, animated text, and selected canvas dimensions together, with familiar playback controls.
For text editing, the preview temporarily hides the active composition layer while an on-canvas editor handles interaction. The stored position then flows back into that Remotion layer—without creating a separate visual model.
Dynamic layers, timed to frames
Remotion gives us a frame-based timeline, so every layer has a start frame and duration rather than an imprecise visual guess.
Timed subtitle words are grouped into short chunks and converted into frames before reaching the composition. Each hook, body, or CTA likewise has a defined time window, style, animation, and position. The template renders only the layer for the current frame.
This makes a new variation a data change: Adstacker supplies a different layer specification to the same component - the kind of composable, template-driven approach our video technology engineering teams apply across client media pipelines.
Designing for a faithful rendered output
A browser preview and a render worker do not decode video in exactly the same way. Our template checks whether it is in rendering mode: in the browser, it uses Remotion’s Video component so the Player can play the source audio; when rendering, it uses OffthreadVideo, which is better suited to dependable server-side frame extraction.
We also share fonts and style maps between the two contexts. This keeps subtitle wrapping, text sizing, and animation behavior consistent. An aspect-ratio canvas and clamped overlays prevent layers from disappearing beyond the edge.
Real-world example: testing a winning hook without rebuilding every ad
Imagine a brand with one product demonstration and two calls to action testing three opening hooks and two subtitle styles. The creator can preview a combination, including its sequence, captions, and animated text, in the final ratio.
If the team changes hook copy or moves a CTA, it updates the layer data. There is no separate preview design to recreate; the rendering pipeline uses the same template rules for export.
Marketers can test more ideas while controlling the details that make a video feel polished.
Build, preview, and render with confidence
Remotion helps Adstacker treat video ads as dynamic, reusable compositions. The same template supports browser exploration and predictable output, while frame-aware layers keep subtitles, text, and clips in sync.
Create your next set of hooks, captions, and CTAs in Adstacker, preview the combinations as you build, and export the variations that are ready to test.
We’ve applied this same preview-matches-export discipline on other AI video platform builds, including Ssemble’s short-form editing tools and VideoCap’s AI-driven generation pipeline, both scaled on render infrastructure managed through our cloud infrastructure services.
Technology stack: React · Next.js · Remotion · @remotion/player · AWS ECS render workers · FFmpeg
Read more from our team
1. Export Service vs. Video Editor Pipeline
