Guides

Web Design

Explaining Technology: 3D Animation or Explainer Video for Energy and Aviation

Explainer video, 3D animation or scroll-driven scene? How to pick the right format for energy and aviation technology and build it cleanly into your website.

  • Published:

    October 31, 2026

  • Updated:

    October 31, 2026

  • 17 min read

    Reading time

Key takeaways

  • The format follows the question a visitor wants answered: a video explains processes, a 3D animation explains spatial structure, a scroll-driven or interactive scene lets visitors explore relationships on their own
  • Rendered 3D animations are the pragmatic route for most B2B explainer cases, and real-time 3D only pays off when visitors should rotate or configure an object themselves
  • With aviation and energy technology, the deciding factor is often not the technology but the question of which design data may be shown publicly at all
  • Captions (WCAG 1.2.2) and a pause function for automatically starting motion (WCAG 2.2.2) are Level A requirements and belong in every brief
  • The text for the scene is also on the page as HTML, so the explanation doesn't live only in the motion

Author: Edip Kilinc, founder of Webwavers. Last updated: October 31, 2026.

The key points in brief An explainer video fits when a process should be told in a fixed order. A 3D animation fits when visitors need to understand a spatial structure, such as a storage unit, a heat exchanger or an engine. A scroll-driven or interactive scene pays off when visitors set the pace themselves. In every case, the content is also on the page as text.

  • Choose the format based on the question the visitor wants answered
  • Rendered 3D scenes before real-time 3D, as long as nobody needs to rotate freely
  • Before modeling, clarify which design data may be public
  • Plan captions, a pause function and a text alternative from the start

Table of contents

Why walls of text fail with technology

If you sell energy technology or aircraft components, you explain things nobody can touch: energy flows, pressure curves, heat transfer, the inner workings of an assembly. A paragraph of text can describe that, but the visitor has to piece it together in their head. That works for specialists who already know the topic. It works badly for people who are still deciding whether your offer is relevant at all.

On top of that comes how B2B decisions are made today. In a Gartner survey from August and September 2025 with 646 respondents, 67% prefer a buying experience without a sales rep (Gartner, March 9, 2026). Anyone who researches on their own has to understand the technology on your site without someone explaining it. That is the job of the explainer video and the 3D animation: to replace the salesperson who would otherwise sketch it on a piece of paper with a pen.

Wyzowl provides a figure on the preference for video: in the survey "Video Marketing Statistics 2026" (conducted in late 2025, 266 participants from marketing and consumers), 63% would most like to use a short video to learn about a product or service, and 12% a text article (Wyzowl, 2026). Two caveats: Wyzowl itself sells explainer videos, and the sample is small and mixes consumers with marketers. As evidence for B2B decision-makers in the energy or aviation industry, the figure doesn't hold up. It shows a tendency, nothing more.

More important than any survey is the role the medium plays on the page. The video doesn't replace the text, it opens it up: someone who has grasped the core in one minute can read deeper where they choose, instead of working through everything. That is our assessment from project work, not a measured value.

Comparing the formats

There is no single right format. Five variants come up in practice:

Format Good for Effort Upkeep Typical risk
Static infographic or cutaway drawing Few steps, structure at a glance Low Easy, text stays editable Looks overloaded for complex processes
2D explainer video (motion graphics) Processes, energy flows, business model Medium Changes need re-rendering Text in the image makes language versions expensive
Rendered 3D animation Spatial structure, inner workings, how an assembly functions High New variants need the 3D model Wrong level of detail: too much or too little shown
Scroll-driven scene Step-by-step explanation that visitors control themselves High Sensitive to layout changes Load time and mobile display
Interactive 3D (real-time) Rotating, zooming, configuring, AR Very high Models must stay web-ready Data volume, device performance

The technical side of scroll-driven scenes, lazy loading and performance is covered on our page 3D and scroll animation in Webflow. Here we deal with the question that comes first: which format explains your topic best?

A rule of thumb from our projects that you should test against your own case: rendered 3D animations are the pragmatic route for most B2B explainer cases. You get the quality of 3D software without the browser having to compute geometry. Real-time 3D only pays off when visitors should really move an object themselves. The guide 3D configurator or rendering weighs configurator against rendering.

Engines of a HyImpulse rocket as a 3D rendering
From our work: HyImpulse, 3D Motion Design. View case study

Five questions before choosing a format

  1. What should the visitor have understood afterward? Phrase it as one sentence, for example: "The storage unit charges when there is a surplus and releases energy again when needed." If it doesn't fit in one sentence, it is two scenes or two videos.
  2. Is it a process or a structure? Processes (first A, then B) are told by a video. Structure (how things fit together) is better shown in a 3D view, especially with a cutaway or exploded view.
  3. Who is watching? A municipal administration needs a different depth than a development engineer. The target group determines technical terms, pace and detail.
  4. Where does it run? In the homepage hero, on a product page, at a trade show, in a sales conversation, on LinkedIn? One format for every channel is usually a compromise. Good projects plan a master asset and derive cutdowns for other channels.
  5. How often does the product change? With variants and frequent updates, a cleanly built 3D model pays off. For one-off statements, a video is enough.

In most cases the answers settle the choice of format on their own. If they don't, that is a sign the brief isn't clear enough yet.

Explaining energy technology: problem, solution, technology

In the energy industry, committees often make the decisions. The EY/BDEW municipal utilities study 2024 (100 utilities) shows how scarce attention is: 87% of respondents name digitalization, heat planning and recruiting skilled staff as their most important topics (BDEW, press release June 4, 2024). The study says nothing about explainer videos, but it shows that your explanation has only a few seconds to look relevant.

The order that has proven itself in our energy projects, and which we describe on our industry page: first the problem, then the solution, then the technology. If you start with the technology, you lose everyone who doesn't recognize the problem as theirs. An example of how to structure a 60-second scene on a heat recovery system (fictional example, not client work):

  1. Problem (10 seconds): Waste heat is lost unused.
  2. Solution (15 seconds): A system captures the heat and feeds it back into the process.
  3. Technology (25 seconds): Cutaway through the heat exchanger, energy flow as animated lines, labels for the three most important components.
  4. Benefit and next step (10 seconds): What does this mean for the operator, and where do they click next?

The running time is a rule of thumb from practice, not a standard. What matters is the structure: one message per scene and no technical term that isn't explained.

An example from practice. For Phasic Energy, an energy startup working on AI-supported heat recovery (2025), the web presence was meant to present a highly complex technological solution in a way that is understandable, tangible and visually convincing. AI, energy efficiency and "waste heat recovery" were translated into a clear, structured visual language: reduced layouts, precise typography and targeted animations that convey technical depth without overwhelming. It was built in Webflow with a focus on performance, scalability and information architecture (Phasic Energy project).

Visualization and advertising claims. When an animation promises a benefit ("saves energy", "climate neutral"), the rules on environmental claims apply. Under the Third Act Amending the Act against Unfair Competition (UWG), which applies for the most part from September 27, 2026, general environmental claims such as "sustainable" or "eco-friendly" are no longer permitted without proof, unless they are specified on the same medium. Product-level climate neutrality claims based on offsetting are not permitted (IHK Schwerin, greenwashing). According to one summary, the prohibitions of the so-called blacklist apply only in dealings with consumers, while the general ban on misleading practices also applies in B2B (industrie-fachwissen.de). For the brief, that means every figure and every claim about impact in the animation needs evidence that you can produce on request. Have texts with legal weight reviewed by someone qualified to do so.

Aviation components in 3D: what works, what doesn't

With aviation and space technology, 3D is often the only way to show what is meant at all. You can't photograph an assembly that isn't openly accessible for security or confidentiality reasons, and a photo never shows the cross-section.

An example from practice. For HyImpulse, a space company (mobility and aviation industry, 2025), the rocket and propulsion systems SL1, SR75 and HyMove were built in detail in 3D so that structure and function become easy to follow. The means are precise modeling, controlled movements and technically clean animations. The goal was to translate technical precision, engineering and innovative strength into a clear, high-quality visual language (HyImpulse project).

Before anyone models, three things to clarify:

  1. What may be shown publicly? Design data is often confidential, and customer or program data is subject to non-disclosure. Clarify internally what level of detail the public may see, and line up the data suppliers who can approve it.
  2. Are there export control questions? Export control concerns not only goods but also technology and technical assistance (IHK Magdeburg, export control in technology transfer). Whether an animation or a 3D model on a public website falls under it depends on the individual case. Your compliance department or a specialist lawyer clarifies that, not the agency.
  3. Are you showing the product or the principle? A simplified functional model explains a principle without revealing the exact component. That is often the better choice, also for reasons of clarity.

For the presentation itself, the rule is: show only what you explain. A cutaway through a component with every screw and line visible looks impressive and explains nothing. A simplified model with three highlighted assemblies explains more.

From CAD model to web scene

Design data from CAD is built for engineering, not for the browser. It often contains millions of faces, every screw, every thread. For a web scene, the model is usually simplified, rebuilt or reduced to the parts that matter for the explanation.

The path in four steps:

  1. Data delivery: Typically STEP files from CAD, plus drawings and photos as reference for materials and colors.
  2. Simplification: Remove inner workings and details that contribute nothing to the explanation. If confidential details may not be shown, remove them here for good, not just by hiding them.
  3. Preparation: Set materials, lighting, cameras and motion. This produces either a rendered video or an image sequence, or a web-ready 3D model.
  4. Export and integration: Compress the video or sequence for the website, and for real-time 3D, deliver the model in a web format.

For real-time 3D, glTF is the common format. The Khronos Group describes it as an open standard for the efficient transmission and loading of 3D scenes, standardized as ISO/IEC 12113:2022. The model can be delivered as a single .glb file, and textures can be compressed using KTX 2.0 (Khronos Group, glTF). A practical way to show such models on websites is Google's model-viewer web component, which according to its site displays 3D models on the web and in AR. The AR modes via WebXR are supported by Chrome, Edge and Samsung Internet, not by Safari and Firefox (modelviewer.dev). So only plan real-time 3D if your target group really needs it.

Script and storyboard: one scene, one message

The script decides whether an animation explains or merely impresses. Five rules have proven their worth:

  • One message per scene. If you want to explain two things, you need two scenes.
  • Words first, then pictures. Write the script before anyone models. A good script also reads well as text.
  • Introduce technical terms, don't assume them. Anyone who says "heat exchanger" has to show it briefly. The more mixed the target group, the more this matters.
  • The camera follows the explanation. Every camera move has a reason: it shows where the eye should go. Decorative moves distract.
  • The end says what happens now. A link to the data sheet, the contact page or the next page. An animation without a next step is a work of art, but not a sales tool.

The storyboard phase is the cheapest point for changes. A correction in the script costs minutes, in the rendered film days. So give the subject-matter department and the legal department the chance to review script and storyboard before modeling.

Accessible and multilingual

Two requirements from the Web Content Accessibility Guidelines are especially relevant for video and animation, both at Level A:

  • Captions for prerecorded content. Success criterion 1.2.2 requires captions for all prerecorded audio content in synchronized media. They should also identify speakers and convey meaningful sounds (W3C, Understanding 1.2.2).
  • Pause, stop, hide. Success criterion 2.2.2 requires a way to pause, stop or hide content that starts automatically, lasts longer than five seconds and is presented alongside other content, unless the motion is essential (W3C, Understanding 2.2.2).

The Accessibility Strengthening Act (BFSG) mainly concerns offers for consumers. Pure B2B websites are mostly not covered. If your company also serves private customers, for example through portals, you should check whether the rules apply. Background and classification are in the guide Accessible website and BFSG. Regardless of the legal situation, captions are a mark of quality: they also help the buyer in an open-plan office who can't turn the sound on.

Practical rules:

  • The transcript is on the page as text, with subheadings.
  • For scroll-driven scenes, there is a reduced-motion variant. How that is implemented is explained on our page 3D and scroll animation in Webflow.
  • Labels in the animation are built as HTML text over the medium, not burned into the video. Then language versions can be produced without re-rendering. If you bake text into the video, you have to re-render for every language.
  • Alt text describes what the animation shows and what you learn from it, not just "animation".

For multilingual versions, plan narrators or captions separately from the picture. With captions that is easy; with spoken text you need a recording per language. Decide early whether the language versions run with voice-over or only with captions.

Building it into the website

Three ways to embed a video, each with different consequences:

Approach Advantage Disadvantage
Embedding from YouTube or Vimeo Easy upkeep, caption management, streaming quality External provider, data protection review needed
Self-hosted file Full control, no external requests You have to solve file size and streaming
Background video without sound Feels like part of the design Has to stay small, needs a way to pause (see WCAG 2.2.2), still image as poster

Whether a YouTube embed requires consent is a data protection question that you clarify with your data protection officer. The basics on consent and tracking are in the guide Tracking and consent under the TDDDG (German Telecommunications Digital Services Data Protection Act).

For all variants, the first frame is a still image that loads immediately. Heavy files come afterward. The first visible medium on a page easily becomes the largest element in the loading process and so affects the Core Web Vitals. Measured values and thresholds for load time and interaction are covered, with sources, on the page about 3D and scroll animation. Here one rule is enough: your performance budget is set before the shoot, not after the launch.

What drives effort and duration

A flat price range for "an explainer video" or "a 3D animation" would be misleading, because the spread is huge and we have no reliable, independent market source for energy and aviation technology. It makes more sense to know the drivers and ask about them in the proposal:

Driver Lower effort Higher effort
Model basis Existing, clean 3D data Only drawings or photos, model has to be rebuilt
Level of detail Principle model with few assemblies Real component with many details and materials
Number of scenes One message Several scenes with transitions
Variants One product, one language Several products or languages
Channels Website only Plus trade show, social media, presentation
Interaction Playback Scroll control, rotating, configuring
Approvals One approver Subject-matter department, legal, compliance, customer

The last point is underestimated. In energy and aviation companies, approvals often run through several departments. That extends projects more than any render time.

Briefing checklist

  1. One sentence the visitor should have understood after the animation.
  2. Target group and their prior knowledge.
  3. Places of use (hero, product page, trade show, social media) and the master format.
  4. Available data: CAD, drawings, photos, texts. Who delivers, and by when?
  5. Approval: What may be shown? Who decides? Is there non-disclosure or export control?
  6. Script and storyboard before modeling, signed off by the subject-matter department.
  7. Languages and handling of text and sound.
  8. Captions, transcript, alt text and a reduced-motion variant.
  9. Technical conditions: platform, hosting, consent, performance budget.
  10. Benefit claims: Which figures and claims appear, and what evidence is available?
  11. Upkeep: Who will produce new variants in the future, and what do they need for it?

Common mistakes

  • Starting with the technology. The problem is missing, and everyone who doesn't know it drops out.
  • Too much detail. Every visible part competes for attention.
  • Text in the image. Every text change and every language costs re-rendering.
  • No plan for upkeep. After a product update the animation is out of date, and nobody can adapt it.
  • Autoplay with sound. It annoys people and goes against what many users expect, and the pause function is often missing.
  • No text alternative. Search engines, AI systems and people without sound see only an empty box.
  • Approval too late. If legal or the subject-matter department only see the finished video, the work starts over.
  • Benefits without evidence. A beautiful animation that promises more than can be proven can become a legal problem.

When you don't need an agency for this

You don't need an agency if a well-made graphic is enough. Many explainer cases can be solved with a clean cutaway drawing, an exploded view or a screen recording that your engineering or sales team creates itself. A manufacturer's rendering from the CAD system can also be enough for a data sheet. An agency pays off when the animation is part of the brand presence, is meant to be built into the website and has to cover several scenes, languages or variants. If you only need a single animation for a trade show, a specialized animation studio with no web focus is often the simpler choice. If you want animation and website from one source, you save the interface between studio and development.

How we do it

Webwavers offers 3D and 2D animation, motion graphics and web motion for brands, products and websites. According to our Motion Design page, design data, drawings or photos serve as the basis, the models are built in-house, and scroll sequences, Lottie files and videos are built directly into Webflow or into your existing stack on request. For energy companies, the Energy industry page describes how technology is brought into an understandable order, and the Aviation industry page describes how motion is used where text reaches its limits.

For working together, the process from our process page applies: intro call, a questionnaire with 34 questions, a strategy session, then moodboards and design in Figma with one feedback round per milestone. You get a dedicated project lead and your own Slack channel. Which scenes and formats fit your topic, we clarify in the intro call.

Focused look while working at the screen
Focused look while working at the screen.

FAQ

Which agencies build 3D animations and infographics for the website?

There are animation studios, motion design agencies and web agencies with motion expertise. Check whether the agency only delivers the medium or also takes care of building it into the website, whether it can work with your CAD data, and how it handles accessibility and load time. References from technical industries show whether it can make technology understandable.

Can aircraft components be animated in 3D without showing confidential data?

Yes, with a simplified functional model. It shows the principle and the most important assemblies, but not the exact design. Clarify internally beforehand which data is approved and whether export control or non-disclosure play a role. Compliance or a specialist lawyer decides that, not the agency.

Is an explainer video enough, or do I need a 3D animation?

An explainer video is enough for processes, business models and energy flows. A 3D animation pays off when it is about spatial structure, such as the cutaway, inner workings or function of an assembly. You can combine the two: a video as the entry point, a 3D scene for depth.

When does a scroll-driven or interactive 3D scene pay off?

When visitors should set the pace themselves or rotate and explore an object. The effort is higher than for a video, and the presentation has to work on mobile devices. For one-off statements, a rendered video is often enough.

How do I build captions and accessibility into the animation?

Plan captions and a transcript into the script. You build labels in the animation as HTML text over the medium. For automatically starting motion you need a pause function, and for scroll-driven scenes a variant with reduced motion.

What does a 3D animation for the website cost?

There is no sensible flat price for it. Effort and duration depend mainly on the model basis, the level of detail, the number of scenes, the languages and the number of approval departments. Ask about these items in the proposal and have them explain what variants will cost later.

How long can an explainer video on the website be?

There is no fixed rule, and we have no reliable study on it. As a rule of thumb from practice: short scenes with one message, supplemented by text and further pages. Long videos belong on their own page with chapters and a transcript, not in the hero.

Conclusion

Technology is easy to explain when the format fits the question and the explanation doesn't live only in the motion. A video tells processes, a 3D animation shows structure, a scroll-driven scene lets visitors choose the pace. With energy and aviation technology, the deciding factor is often not the graphics but the groundwork: which data may be shown, which sentence stays in people's minds, and who implements changes later. Anyone who clarifies this before modeling saves themselves the most expensive rounds of corrections.

Support with 3D, explainer video and web motion: You'll find more about our offering on the page Motion Design, or you can write to us via the contact page.

Sources

More guides

All guides
Chrome 3D Webwavers WChrome 3D Webwavers W

Contact

Start your next digital chapter

Request a project