PLATFORM ENGINEERING / IN MOTION

From commit
to confidence.

Don't just describe the delivery path.
Let people follow it.

MarkdownSVGJavaScript

DELIVERY SYSTEM DEMO / 0142
A connected delivery system A source commit flows through verification and into a release. Moving light traces the delivery path in the HTML presentation. COMMIT VERIFY RELEASE
One artifact.A visible path to production.

AN INTERACTIVE MARP EXPERIMENT Use the arrow keys to explore

01 / THE PLATFORM CONTRACT

Build once. Earn the right to ship.

The platform turns a change into evidence, then into a release.

01

CREATE

One immutable artifact.

Compile once. Sign the result. Keep the same identity across environments.

sourceimage
02

VERIFY

Independent evidence.

Run tests and security checks in parallel. Both must pass before promotion.

testspolicy
03

PROMOTE

A deliberate release.

Validate in staging. Approve the gate. Increase production traffic gradually.

stagingproduction

THE KEY IDEA Promotion moves the artifact, not a new build.

02 / FOLLOW THE ARTIFACT INTERACTIVE SIMULATION

Watch the platform work.

Parallel checks. A human gate. A progressive release.

release / 0142 main · example commitSTATIC VIEW
From source commit to production Commit to build, then parallel tests and security checks. Both checks must succeed to publish a signed artifact. The same artifact is validated in staging, waits for approval, and rolls out to production. Failed tests block all downstream work. CONTINUOUS INTEGRATION CONTINUOUS DELIVERY Commit git push Build Compile + cache Tests Unit + integration Security Scan + policy Artifact Sign + publish Staging Smoke tests Production Canary rollout APPROVAL
Ready to follow a commit.

Both checks must pass. Approval unlocks production. Open the HTML export for playback controls.

Try Fail tests to block the release. Step advances one stage without bypassing approval.

03 / MAKE THE PATTERN YOURS

Motion is a layer, not the format.

Markdown tells the story.

Keep stages and decisions visible.
Move detail into speaker notes.

JavaScript drives the timeline.

JavaScript moves SVG signals
and updates stage state.

Keep a static fallback.

Even without JavaScript,
the delivery path stays readable.

THREE EDITABLE LAYERS

Animated-CICD.md
  narrative + SVG + speaker notes

themes/animated-cicd.css
  color tokens + layout + motion

assets/animated-cicd.js
  stages + timing + interaction

Local code. Browser-native playback.

DESIGN RULE Animate the relationship you want people to remember.

This is a simulated delivery platform, not a connection to real CI/CD infrastructure. The moving signal is decorative; the third slide contains the working simulation. Use the exported HTML in a browser. PDF and PowerPoint exports are static.

This is an illustrative platform contract, not a claim that every organization needs a manual approval. Automated policy gates can serve the same purpose. The demo deliberately models tests and security as independent checks. Introduce the three responsibilities, then move to the live delivery path.

In the audience HTML window, this simulation starts when the slide becomes active. It stops at the approval gate. Click Approve release to begin the canary rollout. Pause and Step let you explain a stage; Replay starts the selected scenario again. Changing Scenario resets the run. Choose Fail tests and Run pipeline to demonstrate that failure prevents artifact publication, staging, and production. Timing and traffic percentages are illustrative, not performance measurements. Reduced-motion users start manually and can use Step without moving particles. Custom playback state is local to each browser window, not synchronized with Marp presenter view. Operate this demo in the audience window; presenter previews stay static.

Customize the stages and durations in assets/animated-cicd.js, the stage nodes and connections in this Markdown file, and the scoped tokens in themes/animated-cicd.css. The composed custom-default theme imports the animated-cicd companion stylesheet. Its opt-in cicd classes keep the demo's styling scoped. Visual inspiration: https://github.com/favourhong/Awesome-Marp (typographic hierarchy, section labels, and card layouts). All diagram markup and animation code here are original. Transitions use Marp's built-in fade: https://github.com/marp-team/marp-cli/blob/main/docs/bespoke-transitions/README.md