Open Paraplex

HTML to video, frame for frame.

Paste HTML, CSS, JavaScript or a React component into a Paraplex scene and it runs on the timeline's clock, so CSS animations, canvases and GSAP timelines follow the playhead and export frame for frame. Put it in front of the scene, behind it, or on a card in 3D space, then export MP4, WebM or GIF from your browser.

Paste your codeSee how it works

Code layers: HTML, CSS, JS, React, shadcn/ui and GSAP. HyperFrames and Remotion projects come in too. Free to start, in your browser.

App launch (your UI) template in Paraplex: an app interface pasted in as HTML and CSS, the camera pushing in on its input and easing back out to a tagline

Your code, on the timeline's clock.

A code layer is a live web page inside the scene. Paraplex drives its clock, so what you see at the playhead is the frame you export.

Paste

Paste or drop the code.

HTML, CSS and JavaScript, a React component, a shadcn/ui component, or an HTML, TSX or JSX file dropped on the canvas.

Sync

It follows the playhead.

CSS animations, timers, canvases, videos and GSAP timelines run on the timeline's clock, so scrubbing shows the exact frame.

Stage

Place it in 3D.

In front of the scene, behind it, or as a card in 3D space, lit with everything else and filmed by the same camera.

Export

Export frame for frame.

MP4, WebM, GIF or a PNG sequence, in every shape the scene has, or a live embed where the code keeps running.

Frame-accurate, not screen-recorded.

Recording a browser tab captures whatever the computer managed to draw. A code layer is different: Paraplex runs the page on the timeline's own clock and renders every frame one at a time at full quality, so a GSAP timeline, a CSS keyframe animation or a canvas lands on the same frame in the export as on the canvas, at 10 to 120 fps.

For full control, the page can define window.renderAt(seconds) and draw itself for any moment, or register its GSAP timelines in window.__timelines and let Paraplex scrub them.

Building a pipeline around it? See Paraplex for developers.

Your CSS variables become dials.

Every CSS variable in the code becomes a keyframeable control, so a brand color, a progress value or a corner radius animates on the timeline like any other setting, without opening the code again.

The Elements tab restyles parts of the page directly: position, width, height, opacity, background, text color, radius, font size, weight, letter spacing, padding, margin and tilt. Your code stays as you wrote it.

Lift it into layers, or keep it live.

When you'd rather animate the page by hand, Lift into layers turns it into ordinary Paraplex layers you can give depth, materials and keyframes, or hand to the AI assistant.

Or keep it as code. Published as an interactive embed, a code layer keeps running in real time and answers the visitor's pointer, inside the same scene as your 3D, light and camera.

More on live code on your site: interactive 3D embeds.

HyperFrames, Remotion and agent-written video.

Coding agents such as Claude Code often write video as HTML. Bring a HyperFrames project in whole, as a folder, a .zip or its HTML file, and it plays on Paraplex's timeline with its clip timings and nested timelines intact. Paste a Remotion composition, or drop its .tsx, and it plays on the same clock, answered by Paraplex's own version of the Remotion parts compositions use most.

Either becomes a code layer you can place, light and export with the rest of the scene, with up to 48 MB of files packed into the layer. Connect Claude Code to Paraplex and the agent can write the project and bring it straight in. A HyperFrames layer needs an internet connection, since its player loads from the web.

Set up the agent: Paraplex with Claude Code.

Templates that take your interface.

App launch (your UI) is built for your app's own HTML and CSS: paste it in and the camera move is already done. In the others, a code layer can stand in for a screen, a tile or a backdrop.

HTML to video, at a glance.

CSS variables as keyframeable controls

React and shadcn/ui components, pasted in

MP4, WebM, GIF or PNG sequence, free at 1080p

Every aspect ratio from one scene

Elements tab restyles without touching the code

Lift into layers to animate by hand

Someone else's code runs restricted until you trust it

HyperFrames and Remotion projects come in whole

Questions about HTML to video

How do I convert HTML to video?

Open Paraplex and paste your HTML, CSS and JavaScript on the canvas, or drop an HTML file on it. The page becomes a code layer that runs on the timeline's clock, so its animations follow the playhead. Set the length and frame rate, then export MP4, WebM, GIF or a PNG sequence; every frame is rendered one at a time, so the file matches what you saw. Code layers are part of the editor's Full mode, under View › Full.

Can I turn a GSAP animation into an MP4?

Yes. GSAP timelines in a code layer follow Paraplex's playhead and export frame for frame. For full control, register your timelines in window.__timelines, or define window.renderAt(seconds) so the page draws itself for any moment.

Can I export a React component as a video?

Yes. Paste a React component, drop a TSX or JSX file, or paste a shadcn/ui component, and it runs as a live code layer. Its CSS variables become keyframeable controls, and the Elements tab restyles its parts without touching the code.

Does it work with CSS animations and canvas?

Yes. CSS animations, timers, canvases and videos inside the page all run on the timeline's clock, so scrubbing shows the exact frame and the export matches it.

Can I bring in a HyperFrames project or a Remotion composition?

Yes. Use Menu › Import HyperFrames project…, or drop the folder, a .zip or its HTML file on the canvas, and it plays with its clip timings and nested timelines intact. Paste a Remotion composition, or drop its .tsx or .jsx, and it plays on the same clock. A project can pack up to 48 MB of files into its layer, and a HyperFrames layer needs an internet connection because its player loads from the web.

Can an AI agent write the code for me?

Yes. Connect Claude Code to Paraplex with the Paraplex MCP server and the agent can write a HyperFrames project or a Remotion composition and bring it straight into your open scene. Inside Paraplex, the AI assistant can also write and edit code layers for you.

Can I edit the result without code?

Yes. The Elements tab changes the position, size, opacity, colors, radius, type, spacing and tilt of any part of the page, CSS variables appear as controls you can keyframe, and Lift into layers turns the page into ordinary Paraplex layers to animate by hand.

Is it safe to run code someone else wrote?

Code layers run walled off from your projects and account. Code that arrived from someone else is marked and runs restricted, reaching only the code libraries, until you choose to trust it.

Is HTML to video free?

Yes. Code layers are on every plan, including Free, and the free plan exports MP4 at 1080p and 30 fps with no watermark. Pro adds exports up to 4K at 60 fps.

Your animation is already written.

Paste it into Paraplex, set it in a 3D scene and export it frame for frame, all in your browser.

Paste your codeSee pricing

Paraplex is a browser-based 3D motion design studio with an AI assistant that edits real layers and keyframes.

01

Describe it.

One or two sentences on this way to start.

Open Paraplex
A screenshot depicting artboards in Paraplex, the 3D motion design web app, which allow you to export multiple media formats and sizes with one click, automatically formatted for different social media platforms.

Brand and social

Video ad variations

One version per spreadsheet row: columns fill headlines, prices and photos by layer name, and Export all variants renders them in one job (Pro).

Templates: On sale, Product launch

Three ways to start.

Whatever the job, a project starts from words, from a finished template, or from the files you already have. All three open in the same editor, and you can mix them in one scene.

01

Describe it.

Type what you want on the home page and click Make it. The assistant builds the scene from real layers and keyframes, and you Apply or Discard what it made.

Describe a scene

02

Open a template.

62 finished templates in 13 categories, each built for you to swap in your words, pictures, logo, colors, data, music, video or voice.

Browse templates in Paraplex

03

Bring what you have.

Drop screenshots, recordings, GLB models or Lottie files on the canvas, paste an SVG from Figma or HTML and React as a live layer, or upload a CSV for a chart.

Start with a blank scene

One scene, every screen.

Whatever the job, the same scene exports for every place it runs. Add formats as artboards beside your frame, let Responsive framing re-stack blocks for each shape, and pin your logo to its corner. Then export MP4, WebM, a GIF or a Lottie, or publish a live embed for your site.

Export to

5 shapes

16:9, 9:16, 1:1, 4:5 and 4:3, or a custom size

Safe zones for

4 feeds

TikTok, Reels, Shorts and the Instagram feed

Up to

4K at 60 fps

on Pro; free exports run to 1080p, no watermark

Landscape 16:9 · YouTube, slides and your site

Vertical 9:16 · Reels, Shorts & TikTok

Portrait 4:5 · feeds on Instagram, X and LinkedIn

Render needed · FR-03

Paraplex for

Marketers

Every channel wants its own cut. Build one scene, reframe it for 16:9, 9:16, 1:1 and 4:5 with safe zones for each feed, and keep every version on brand with a design system.

Templates: Stat drop, Match-cut stack, The AI ROI gap

Eight types of charts against a black background: Bar chart showing vertical bars for days Mon-Fri; Line chart plotting connected points for days; Area chart filled beneath a line for days; Pie chart divided into colored segments labeled by day; Donut chart similar to pie but with a hollow center; Scatter plot with dots of varying sizes; Gantt chart with horizontal bars labeled Research, Design, Build, Launch; Timeline with labeled milestones Founded, First product, Series A, Worldwide.

Render needed · FR-04

Paraplex for

Agencies

Every client has a brand, and every brand has revisions. Keep each client's colors, fonts and motion as a design system, apply it in one step, and share a link for review.

Templates: Logo match cut, Logo swarm, Whiteboard explainer

Your brand in one step.

Keep colors, fonts, text styles, materials, scene looks and motion as a design system, and apply it to any scene at once.

Video, Lottie or a live embed.

Export MP4, WebM, GIF, PNG or Lottie, or publish an embed that plays in real time on your site and answers hover, click and scroll.

Question

Answer.

App launch (your UI) template: the camera pushes in on the input of an app interface pasted in as HTML, then eases back out to a tagline
App launch template: a question types into an app window, an answer streams in, steps slide in and a chart grows
Liquid glass nav template: a liquid glass bar bends the big headline beneath it, both inside the same Paraplex scene
One Paraplex scene on four artboards: the primary scene beside Landscape 16:9, Square 1:1 and Portrait 4:5, each laid out for its shape

Screenshot · one scene on four artboards

Coming soon: post straight to your accounts.

Not available yet. Two things are on the way for marketing teams. The first is posting finished pieces straight to your linked social accounts.

The second is a long-form YouTube workflow for 3D documentaries, educational videos and tutorials: an outline and research, a voiceover, B-roll and generated 3D scenes, edits timed to the narration with music, sound and titles, landscape and vertical renders for each platform, and titles, descriptions and hashtags written for each post. Both will be listed here when they ship.

The word 'Clarity' in large white text over a black background with abstract light patterns in warm brown on the left and cool blue on the right, showcasing the advanced 3D effects, shaders and materials shown in the Paraplex app including the liquid glass motion design template.

“Every client has a brand.”

A design system per client.

Keep each client's colors, fonts, text styles, materials, scene looks and motion as its own design system in your Library, and apply it to any scene in one step. A client's kit exports as one file to share with a teammate.

“The revisions never end.”

A link for review, a step to undo.

Copy a shareable link that publishes the piece as a web page, then refresh it after each round while the address stays the same. Notes on the canvas never export, undo has no limit, and each project keeps a History of recent saves to restore.

“The volume keeps growing.”

Templates, including your own.

Start from 70+ editable templates that each say what to swap in, or save any scene as a template of your own. Data variants make one version per spreadsheet row, and on Pro, Export all variants renders them in one job.

“Every channel wants its own size.”

One scene, every format.

Add 16:9, 9:16, 1:1, 4:5 or 4:3 as artboards beside the frame, each reframed for its shape, with safe zones for TikTok, Reels, Shorts and the Instagram feed. On Pro, one export renders every enabled format.

The client's own fonts, saved in the project

Light and dark themes, or a brand and sub-brand, in one palette

Beat detection, so cuts land on the drum hits

Notes on the canvas that never export

Transparent WebM and PNG sequences (Pro)

Live embeds the client's site fills in by layer name

AI images and 3D models from a sentence

Components that follow the master's edits

Responsive artboards in Paraplex: one scene laid out in several aspect ratios side by side

Screenshot · responsive artboards

The same Paraplex embed twice on a page, one filling the layer named Headline with Glow, the other with Ember

Screenshot · one embed, filled by name two ways

On brand, in light and dark.

Link layers to your palette and give each color a value per theme. Switch the embed's theme from your page and every linked layer follows, so the scene matches your site in light mode and in dark mode.

Bring the whole design system along, with its colors, fonts, text styles and materials, and apply it to any scene in one step.

The Design systems library in Paraplex: five design systems side by side, each with its colors, text styles, materials and motion tokens and a Use in project button, under Save from this project and Import tokens

Screenshot · your design systems

Your own code, running live inside it.

Code layers bring HTML, CSS, JavaScript or React into a scene, flat over the frame or as a card in 3D. In an embed they keep running and respond to the pointer, so a live counter or a slice of your product's UI can sit inside the 3D scene on your site.

A live HTML card with a gradient heading and a filling progress bar, standing at an angle in a Paraplex 3D scene

Screenshot · a live HTML card in a 3D scene

Camera

A camera they can move.

Let viewers Orbit, Look around like a panorama, Walk with W A S D or two fingers on a phone, or keep the camera Fixed.

States

States, not just a loop.

Idle loops, presses that play once and hold, and held poses, switched by clicks, the pointer, a delay or your page.

Keyboard

Reachable without a mouse.

Every interactive layer gets a keyboard-focusable stand-in, so visitors can reach it with Tab and press it with Enter.

Reduced motion

Calm for anyone who asks.

Visitors who ask their device for less motion see the first frame held instead of the animation.

The Publish as an embed panel in Paraplex: a live embed with its two-line snippet ready to copy, scrolling and viewer options

Screenshot · publishing a live embed

A transparent, irregularly shaped glass tube floating against a smooth, wavy background of blue, beige, black, and white hues, showcasing the 3D rendering, shaders and materials available in the Paraplex app, with customizable properties and animated keyframes, like the liquid glass effect seen in this image.
Particle logo reveal made in Paraplex: thousands of fine particles stream in from a loose cloud and pack into a logo mark on a dark ground
Logo swarm template: a swarm of fine specks packs into a logo until it reads solid, holds as a few flicker warm and cool, then bursts toward the camera
The word 'Clarity' in large white text over a black background with abstract light patterns in warm brown on the left and cool blue on the right, showcasing the advanced 3D effects, shaders and materials shown in the Paraplex app including the liquid glass motion design template.
The word 'Clarity' in large white text over a black background with abstract light patterns in warm brown on the left and cool blue on the right, showcasing the advanced 3D effects, shaders and materials shown in the Paraplex app including the liquid glass motion design template.
An app demo in the Paraplex editor: a browser frame with a cursor whose path and clicks are keyframed on the timeline

Screenshot · a cursor path over a browser frame

The Paraplex editor with a promo made from screens: an app's order-tracking screen on a 3D phone, the callout Live order tracking beside it, and its title and callout layers on the timeline
Product launch template in Paraplex: a 3D phone fills the frame and settles beside a chrome product name
One Paraplex scene reframed for landscape, vertical and square artboards side by side