[marcduiker]

Summary

All four homepage value-prop videos are now 2D D3 diagrams, following the hero diagram (#194). They use the hero's wireframe style and the videos' colors, except for app hexagons. Those take a fixed set in order: light blue, dark blue, teal, orange. There is no yellow, which is too light on white. The adopt diagram has five apps, so it colors them by role: the existing system teal, and the two Dapr apps light and dark blue.

Each one follows its video's layout, order and timing, measured frame by frame. Motion is eased and runs at the display's frame rate instead of 24 fps. Each loop ends with a fade instead of the video's hard cut.

Section	Scene	What it shows
Durable execution for your business processes	automate	A workflow builds up step by step: • started by a pub/sub message • Activity 1 calls the Secrets API • waits for an external event • Activity 2 invokes an app • Activity 3 writes key/value state • completion publishes a message
Secure and resilient by default	secure	Three calls fail (red, with a cross), a resiliency policy retries them (green) and they go through. Colors blend instead of switching.
Integrate with the infrastructure of your choice	integrate	The same app on Microsoft Azure, AWS, Google Cloud and on-premises, sliding from one platform to the next
Incrementally adopt	adopt	Three existing apps and Kafka, then a Dapr app with a state store, then a Dapr app sending to RabbitMQ

What changes

• Diagram script (assets/js/diagrams.js, formerly value-props.js): a small 2D engine and one scene per diagram.
  • The engine draws hexagons and Dapr badges, activity boxes, workflow nodes, envelopes, a message broker, a lock box, a person, and secure-lock, retry and failure marks.
  • Arrows grow, and can change color and drop their head.
• Data (data/homepage.yml): each feature item has diagram: <scene> and a diagramdesc text description, instead of video. The diagrams are 600×480 like the videos, and the same size on phones.
• Still diagrams: a feature item with diagramstatic: true shows its scene as a still. It is drawn once at its complete frame, with no animation and no pause button. A scene without a loop length is always drawn as a still. All four current diagrams are animated.
• Vendor marks (assets/images/icons/):
  • Official icon sets: the Azure, AWS and Google Cloud architecture icon sets, as published by each vendor.
  • Simple Icons (CC0): Kafka, RabbitMQ, Redis and HashiCorp Vault.
  • All files are kept unmodified; sources and terms are listed in its README.md.
  • The template inlines every file there as a <symbol>, prefixing ids and classes so they cannot clash on the page. The Google Cloud files carry <style> blocks with generic class names.
• Motion and accessibility: each diagram has the same setup as the hero:
  • a pause/play button
  • a still frame under prefers-reduced-motion
  • pauses while offscreen
  • a title and description for screen readers
  • a static fallback without JavaScript, in assets/images/diagrams/. It sits in a <noscript>, so visitors running the scripts never download it (the hero's fallback too)
• Fallback exporter: npm run export:diagram-fallbacks in tests/ regenerates the hero and all four fallbacks. It drops elements the still frame hides.
• Hero diagram colors: the hero's three apps follow the same color order: Workflow app light blue, Agent dark blue, App teal. Its fallback is regenerated.
• Shared D3: the script tags move from the hero partial to the homepage layout. The hero script and tests scope to the hero's own toggle.
• Deleted: all value-prop MP4s and GIFs, about 8 MB in total (1.4 MB for video 4, 6.7 MB for the other three). Nothing in the repo or on GitHub references them.

APIs overview as a still diagram

"The APIs behind it" showed dapr-apis-overview.png. It is now a still D3 diagram on a 1200×624 canvas that fills the section's width, like the image did.

• APIs: it adds Binary Store, Search and Vector. The six alpha APIs are grouped at the end of the second row and tagged "alpha", matching the API cards.
• Languages: C++ is removed.
• Logos: the languages, runtimes and cloud providers use their official logos from Wikimedia. Every source and license is in assets/images/icons/README.md.
• Java: its logo is not freely licensed; Wikipedia hosts it as fair use. It is used at the maintainers' request.
• Generic icons: they are Fluent UI System Icons (MIT), the set the API cards already use.
• Old image: the PNG is deleted. The Markdown rendering points at the diagram's fallback.

To support diagrams outside the value props:

• Engine: the script is now diagrams.js.
• Partials: one shared partial renders a diagram, and another adds the symbols and script once per page.
• Fallbacks: they moved to assets/images/diagrams/.

Unused images

Every tracked image and video outside styleguides/ and themes/ was checked three ways:

• Build output: the site was built, and every image path its output references was collected.
• Repo search: each file name was searched for.
• Outside links: GitHub code search looked for other repos linking to its dapr.io/images/ URL.

Deleted, 17 files (about 800 KB):

• Adopter logos referenced only by commented-out entries in data/homepage.yml: amd, apple, ea, ford, jpmorgan, loreal, paloalto, pfizer.
• Case study images referenced only by commented-out entries: atbay, bosch.
• Unreferenced files: avatar.png, building-blocks.webp, cta.svg, hero.png, on-prem.png, pubsub.webp, screenshot.svg.

Kept: building-blocks.png and service-invocation.png, because other repos embed them from dapr.io.

The rebuilt site has no image references to missing files. Re-enabling a commented-out entry needs its image restored from git history.

Skill for future diagrams

skills/d3-2d-diagrams/ sits in a generic skills/ folder at the repo root, not under .claude/. It records the rules and workflow behind these diagrams, so new ones match:

• SKILL.md:
  • Animated or still: videos are always animated; still images and text descriptions follow the user's instructions, and the skill says to ask when there are none.
  • Design rules: 2D wireframe style at 600×480, the palette and the app hexagon color order, no yellow, labels, arrows, motion and smooth loops.
  • Brand marks: where to source them and on what terms.
  • Accessibility: what each diagram must keep working.
  • The workflow: a first step for each starting point (a video or GIF, a still image, or a text description), then build, compare, measure and test.
  • The traps already hit.
• reference/engine.md: the engine's API, with a minimal scene.
• scripts/:
  • video-frames.sh: frames and color samples from a source video.
  • scene-frames.mjs: a scene's frames at exact moments, next to the source.
  • smoothness.mjs: checks frame rate, moves and opacity steps against limits.

AGENTS.md points to the skills folder and to this skill.

Tests

• New tests/specs/diagrams.spec.js. For each scene's still frame, it checks:

  • the title and description
  • every expected label is drawn
  • all symbols resolve
  • nothing visible falls outside the frame
  • the fallback image loads as SVG
  • no script errors

  It also fails if a scene is added to the page without being listed.

• Existing specs: they cover every diagram, including the pause button, focus ring, animate/pause/play, reduced motion and the no-JavaScript fallback.

• Still test: diagrams.spec.js marks a diagram as a still in the page's HTML before its script runs, then checks it has no pause button, draws its complete frame, and never changes. The animation and pause tests cover animated diagrams only.

• Video tests: they now skip when the page has no videos. They stay in place in case a video is added back.

Notes for reviewers

• Brand marks:
  • Company logos: the Microsoft Azure, AWS and Google Cloud logos are not used; the diagrams name the platforms in text, like the original's "On-Prem". The official icon sets cover product icons for architecture diagrams, not the company logos.
  • Newer designs: the original video used older AWS, Google Cloud and Redis designs. The diagrams use the current official files.
  • Trademarks: Simple Icons is CC0, but the marks remain trademarks of their owners.
• Reduced motion: the still frame for integrate is the Azure version.
• Small screens: on phones the diagrams render at 312×250, like the videos. Video 1's box labels get small at that size, as they did in the video.
• Chrome: tests/playwright.config.js and AGENTS.md said system Chrome was needed for the MP4s. Both now say that reason is gone. The setting is unchanged.
• Carousel tests: they still time out now and then under parallel load (noted in Replace the homepage hero image with an animated D3 diagram #194).

Test plan

• Playwright suite on the final code: 219 passed, 9 skipped (visual opt-in, plus video tests with no videos)
• Each scene compared frame by frame against its video for layout, colors and timing
• Smoothness: all four at 60 fps, no frame gaps over 17 ms, no visible position jumps
• Fallbacks render as standalone images; desktop 600×480 and phone 312×250 checked
• CI run on the pinned Hugo 0.147.9 (local runs used a newer Hugo)

🤖 Generated with Claude Code