Open Paraplex

Live 3D on your website, answering every visitor.

Publish a Paraplex scene as an embed and paste two lines of code into any site. It plays in real time, answers hover, click, drag and scroll, picks the right layout for each screen width, and your page can fill it in by layer name. You set it all up visually, with no code.

Publish your first embedOpen Chrome & glass hero

Free to start, no watermark.  Unlimited interactive embeds on Pro.

Chrome & glass hero template: a chrome panel turns slowly behind a floating milky glass card as studio lights sweep across, the kind of scene you publish as a live embed

Everything a visitor can do with it.

Each interaction is set up visually in the editor and tried out in Preview before you publish. The embed carries all of it to your site.

Hover

Things that react to the pointer.

Give a layer a hover state, with its own properties changing over a duration or on a spring, and it reacts the moment the pointer arrives.

Click

Clicks that do something.

Jump to a moment, play a range, play or pause, open a link, or glide the camera to a hotspot when a visitor clicks.

Drag

Pieces people can pull.

Let visitors drag a layer along an axis, or send particles scattering away from the pointer.

Scroll

Scrolling that drives the story.

The visitor's scrolling plays the timeline forward and back, tied to the embed's own section or to the whole page.

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.

One snippet, on any website.

Choose Publish embed, name the piece and click Publish. Paraplex gives you two lines of plain HTML: a script tag you load once per page and a paraplex-scene element. Paste them into a custom code or embed element in Webflow, Framer, WordPress, Shopify or Squarespace, or straight into your own HTML, and the scene fills the width it's given while keeping its shape. Some site builders only allow custom code on paid plans.

Change the scene later and click Update: every page that embeds it shows the new version, with no new snippet.

On Webflow? Here's the step-by-step guide.

States that answer the visitor.

Build the piece as states: a stretch of the timeline that loops as an idle, plays once and holds like a button press, or holds a pose. Transitions fire on a click, the pointer arriving or leaving, a state finishing, a delay, or an input sent by your page.

So a hero can idle until someone hovers, then answer when they click. The same states work in Preview, in share links and in embeds.

The right layout at every width.

Add the artboards you need, say a wide 16:9 for desktop and a tall 9:16 for phones, and give each one a breakpoint: the smallest page width it should appear at. The embed measures the space it has, shows the artboard with the largest breakpoint that fits, and checks again whenever the page resizes.

Responsive framing lays the scene out for each shape, so you design it once.

Your page can fill it in.

Name a layer in Paraplex and your page can fill it by that name: a headline's words, a counter's number, a color or a picture. Set fills in the snippet, change them from your own code with setSlots, switch the palette's theme live, send an input to a state machine, or pass the same fills as link parameters.

One promo can serve many pages, each with its own words and photos.

In Webflow, those fills can come from CMS fields: see how.

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.

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.

Templates built for the web

Website heroes that open with every layer, light and camera move ready to wire up and publish as an embed.

In every embed.

Up to 64 fill-in slots: text, numbers, colors and pictures

Share links that show the piece on its own page

Pieces up to 25 MB, pictures and video included

Breakpoints that pick the artboard for each page width

Palette colors that follow the theme your page sets

Two lines of HTML: a script tag and a paraplex-scene element

Plays only while on screen and pauses when scrolled away

A transparent background that sits on your page's own design

Questions about interactive 3D embeds

How do I embed a 3D animation on my website?

Open or build a scene in Paraplex, choose Share › Publish embed, name it, choose how scrolling should drive it and click Publish. Copy the two-line snippet, a script tag you load once per page and a paraplex-scene element. It's plain HTML, so it works anywhere that accepts custom code: paste it into an embed or custom code element in Webflow, Framer, WordPress, Shopify or Squarespace, or into your own HTML. The scene fills the width it's given and keeps its shape.

What can visitors do with an interactive embed?

They can hover, click, drag and scroll. Layers can change on hover; clicks can jump to a moment, play a range, open a link or glide the camera to a hotspot; layers can be dragged along an axis; and scrolling can drive the timeline. You can also let viewers Orbit, Look around or Walk through the scene, and build state machines that switch between idle, pressed and held states.

Do embeds work on phones?

Yes. Give each artboard a breakpoint and the embed shows the layout that fits the page width, such as a tall 9:16 version on phones, and checks again when the page resizes. Embeds play only while they're on screen and pause when scrolled away, and visitors who ask for less motion see the first frame held.

Can my website change what the embed shows?

Yes. Your page can fill named layers with text, numbers, colors or pictures, up to 64 slots, change them from JavaScript with setSlots, switch the palette's theme, such as Light or Dark, and send inputs to a state machine. The same fills work as link parameters. They only change what that page shows; they aren't saved to the piece.

If I edit the scene, do I need a new snippet?

No. Click Update in the Publish dialog and the embed's link shows the new version, so every page that embeds it updates without a new snippet. Unpublishing removes the piece, and embeds then show nothing.

Are interactive embeds free?

The Free plan includes three published pieces, one of them an interactive embed, with up to 10,000 views a month per piece on other sites. Past that, the embed shows its first frame and a View on Paraplex link. Pro includes 50 published pieces with unlimited interactive embeds and views. Nothing carries a watermark on either plan.

Build for the web.

Start free in your browser. Go Pro when you need unlimited interactive embeds.

Publish your first embedSee 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
Chrome & glass hero template: a chrome panel turns behind a milky glass card as studio lights sweep across both
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

Liquid glass nav template: a pill of liquid glass slides from label to label over a big headline, the kind of interface motion a state machine drives in an embed