Build Animated Slideshows That Export as Real Components

You have used Swiper. You have wrestled with Reveal.js configs. You have built custom carousel components from scratch more times than you would like to admit. Every time, the same tradeoff: either settle for a library's opinionated design, or spend days hand-coding animations frame by frame.

PaneFlow takes a different approach. Design your slideshow visually - with a real editor, not a config file - then export it as a clean React, Vue, or Svelte component that drops into your project. No iframes. No embed scripts. A real component file.

#The Problem with Slideshow Libraries

Most slideshow libraries fall into two camps, and neither is great for developers who care about both design quality and clean code.

Camp one: config-driven libraries. Reveal.js, Swiper, Slick - these give you programmatic control but zero visual feedback during development. You write JSON or JavaScript configs, refresh the browser, check the result, tweak, repeat. Building anything with custom animations means chaining CSS transitions by hand or learning a library-specific API that nobody on your team knows.

Camp two: visual design tools. Canva, Google Slides, Gamma - these are great for non-technical users but export images, PDFs, or proprietary embed codes. None of them give you a React component. When your PM builds a slide deck in Canva and hands it to you to "put it on the website," you are starting from scratch.

There is a gap between these two camps. You want the visual editing experience of a design tool with the code output of a developer tool. That is exactly where PaneFlow fits.

#How PaneFlow Works for Developers

PaneFlow is a visual slideshow builder that runs in the browser. You design slides by dragging and positioning elements, picking animations, and previewing everything in real time. When you are done, you export the result as a framework-native component.

Here is what matters from a developer's perspective.

#Export as Framework Components

When you are done designing, hit Export and choose your framework. PaneFlow generates a ready-to-use component file - not an iframe embed, not a CDN script tag. You get a .tsx, .vue, or .svelte file that imports into your project like any component you wrote yourself.

The exported component includes the PaneFlow runtime (a lightweight vanilla JS engine) and all your slide content. It works with Next.js, Nuxt, SvelteKit, or any framework setup.

#Clean HTML Output

If you do not need a framework component, PaneFlow also exports clean HTML with inline CSS and JavaScript. This is useful for static sites, email templates, or anywhere you need self-contained HTML. The output is readable - you can open it in a code editor and understand what is happening.

#17+ Built-in Animation Types

PaneFlow ships with 18 animation types that you configure visually instead of writing CSS keyframes. Fade, blur, bounce, drift, drop, pop, pulse, rotate, spin, stomp, succession, twirl, zoom - each one is configurable with duration, delay, and easing.

For developers, this means you skip the tedious part of animation work (writing and debugging keyframes) and go straight to picking the right effect. The visual preview shows you exactly what the animation looks like before you export.

#3D Device Mockups for App Showcases

If you are building an app showcase, portfolio piece, or product demo, PaneFlow includes built-in 3D device mockups. iPhone, MacBook, iPad, Samsung Galaxy - drop your screenshots into a 3D model and animate the reveal. No need for a separate 3D rendering tool like Rotato or manual After Effects work.

#Custom Code Elements

Need to embed something custom inside a slide? PaneFlow supports code blocks where you can write raw HTML and CSS. This is useful for embedding forms, interactive widgets, or any custom content that lives alongside your animated elements.

#CDN Publishing

For projects where you want to host the slideshow separately and embed it on multiple pages, PaneFlow publishes directly to a CDN. You get a URL that you can embed via iframe or link to directly. This is useful for product demos that live on your docs site, marketing pages, and help center simultaneously.

#Example: Building an App Showcase with 3D Mockups

Here is a concrete workflow for a common developer task - building an animated app showcase with 3D device mockups.

1. 1Create a new project and set your aspect ratio (16:9, 4:3, or custom)
2. 2Add your app screenshots to each pane as image blocks
3. 3Drop in a 3D iPhone mockup and map your screenshots to the device screen
4. 4Add entrance animations - try "drift-y" for a smooth vertical reveal
5. 5Preview the slideshow and adjust timing, easing, and transitions
6. 6Export as a React component and import into your app

The entire process takes minutes, not hours. And when you need to update the showcase later (new screenshots, different animations), you edit the project visually and re-export.

#Example: Creating an Animated Documentation Walkthrough

Another common use case - building step-by-step documentation that shows a process with animated transitions between steps.

1. 1Create a pane for each step of your process
2. 2Add screenshots, diagrams, or code snippets to each pane
3. 3Use "fade" or "blur" transitions between panes for a clean, professional feel
4. 4Add text overlays with step numbers and descriptions
5. 5Export as HTML and embed in your documentation site

#Example: Adding a Product Tour to a React App

If you are building an in-app product tour or onboarding flow, PaneFlow lets you create the tour visually and export it as a component you embed directly in your app.

1. 1Design each tour step as a pane with screenshots and callout annotations
2. 2Add "pop" or "zoom" entrance animations to highlight key UI elements
3. 3Configure auto-advance timing or manual navigation
4. 4Export as a React component
5. 5Import the component into your app and render it in your onboarding flow

#What You Need vs What PaneFlow Delivers

#Why Not Just Use Reveal.js or Swiper?

This is a fair question. If you are already comfortable with these tools, here is an honest comparison.

Reveal.js is powerful if you think in Markdown and do not mind configuring everything manually. It excels at text-heavy technical presentations where you control every detail via code. But it has no visual editor, no 3D mockups, no AI image tools, and the animation system is limited to built-in transitions. If you want a custom animated product showcase, you are writing all the CSS yourself.

Swiper is a carousel/slider library, not a presentation tool. It is great for simple image carousels but does not handle multi-element slides with positioned blocks, layered animations, or 3D mockups. Comparing PaneFlow to Swiper is a bit like comparing Figma to a CSS grid generator - they operate at different levels of abstraction.

GSAP gives you fine-grained animation control, but you are writing every animation by hand. GSAP is a tool for developers who need pixel-perfect animation control and have the time to code it. PaneFlow is for developers who want polished animations without the manual work.

Slides.com (built on Reveal.js) adds a visual editor on top, which gets closer to PaneFlow's approach. But Slides.com exports Reveal.js presentations - not framework-native components. You cannot export a React component from Slides.com.

The key difference: PaneFlow is the only tool that combines a visual editor with framework-native code export. You design visually and get code output that fits your stack.

#Frequently Asked Questions

Can PaneFlow export to React components?

Yes. PaneFlow exports slideshows as ready-to-use React, Vue, and Svelte components that you can import directly into your project. The exported code is clean, readable, and framework-native.

Does PaneFlow work with Next.js?

Yes. The exported React component works with Next.js, Gatsby, Remix, and any React-based framework. You get a standard .tsx component file that you import like any other component.

What animation types does PaneFlow support?

PaneFlow includes 18 animation types: fade, blur, bounce, drift-x, drift-y, drop, pop, pulse, rotate, spin, stomp, succession, twirl, zoom, and more. Each animation is configurable with custom duration, delay, and easing.

Can I use custom HTML and CSS in PaneFlow slides?

Yes. PaneFlow supports code blocks where you can write custom HTML and CSS directly inside a slide. This is useful for embedding custom widgets, forms, or any HTML content alongside your animated elements.

Is the exported code clean and maintainable?

Yes. PaneFlow generates clean, readable component code without unnecessary wrappers or dependencies. The exported components use standard framework patterns and can be edited by hand after export if needed.

#Related

• PaneFlow for SaaS Teams - embed onboarding slideshows in your app
• PaneFlow for Landing Pages - animated hero sections
• PaneFlow for Webflow - native Webflow plugin integration
• PaneFlow vs Slides.com - detailed comparison
• Browse all PaneFlow use cases