STATIX · explainer scenes

Animated explainer gallery

Hand-authored, code-based vector animations for the STATIX structural suite — pure SVG, CSS and a little canvas. No video files, no AI, no external libraries. Each scene is a clean loop, on-brand, labelled, and shows a static final frame when a visitor prefers reduced motion.

SVG + CSS + canvas No libraries Standalone & embeddable prefers-reduced-motion aware By the STATIX design team
01

Modelling

A portal frame assembles step by step: nodes appear, members connect, pinned supports drop in, then loads are applied.

Open standalone
02

Analysis

The frame deflects under load — a ghost undeformed shape with the solved deformed shape sweeping in, and a bending-moment diagram drawing along the members.

Open standalone
03

Member design

A member highlights, a utilisation bar fills green to amber, settles at 0.87, and the governing clause check returns PASS.

Open standalone
04

CBFEM connection

An end-plate connection assembles — column, beam, end-plate, bolts and welds — then a von Mises stress contour sweeps blue to red with a legend.

Open standalone
05

Generators & secondary steel

A single portal extrudes into a multi-bay shed; purlins then appear tilted along the roof slope and girts run web-out on the walls.

Open standalone
06

3D shell FEM

A member meshes into 4-node shell quads, then a von Mises stress contour animates across it (canvas + requestAnimationFrame).

Open standalone
07

Bending schedule

A beam shows its bars, one bar bends to its shape code, then the row drops into a SANS 282-style bar bending schedule.

Open standalone

Embedding a scene

Each scene is a self-contained HTML file. The simplest, most robust way to drop a live scene into a page is an <iframe> (it isolates the scene's CSS from the host page):

<iframe src="animations/04-cbfem-connection.html"
        title="CBFEM connection"
        loading="lazy"
        style="width:100%;max-width:640px;height:430px;border:0;border-radius:16px;">
</iframe>

Or copy the scene's <figure class="statix-scene">…</figure> block directly into your page and include the matching <style> from that scene (each scene already inlines its own keyframes, so no extra build step is needed). The shared animations.css is optional and only carries the common palette and frame chrome.

Source of truth. These vector scenes are the master assets. To produce an MP4 or GIF (for a platform that won't run live HTML), capture frames from a scene with a headless browser screenshot loop and stitch them — see README.md for the exact recipe.