The picture is a component

What it is

Our pages keep needing the same pictures: a process with one step marked, a chart that draws itself, an agent that stops to ask a person, the three plates of the platform. Drawing each one in a design tool and exporting it is slow, and the export never follows the page it lands on.

A visual composition is that picture written as code. It is one Elixir module with typed props and one stylesheet. It renders on the server like every other part of the site, it takes its colours from the brand tokens, and it stays sharp at any size.

Why it is built this way

• Code, not exports. A composition is SVG markup and CSS. Change a prop and the picture changes. There is no file to re-export.
• Server-rendered. Plain HEEx function components, in line with the rule of the landing umbrella: no React, no LiveView runtime, no client framework. The only script is an optional trigger file of about 1 KB.
• Clean under our CSP. The site sends style-src 'self'. No composition writes a style attribute or a <style> tag. Colour comes from classes and every data-driven number is an SVG attribute. A test fails the build if that ever changes.
• One accent, our tokens. Compositions read --canvas, --text-primary, --lime and the rest from the page, with the brand values as fallback. They come in the dark canvas and in the cream reversed surface.
• Still by default, animated on request. Without animated a composition is its final frame. With it, the entrance plays on load or when the picture scrolls into view, and it respects reduced motion.
• Typed props. Copy, numbers, steps and series are attr declarations with defaults. A misspelled prop is a compile warning, not a broken page.
• Self-contained. Compositions share one base layer and nothing else. Depend on the library, or copy the two files of one composition into your app and change them freely.

What you need

• A Phoenix app that renders HEEx. Phoenix.Component ships in the phoenix_live_view package, which the umbrella already compiles.
• A CSS pipeline that follows @import. Tailwind v4 with Vite, as in the landing, does.
• Albert Sans and JetBrains Mono on the page. Without them a composition falls back to the system fonts.

Next steps

• InstallationAdd the dependency, the stylesheet and the trigger script.
• UsageContainers, layouts, animation, props and themes.
• AI agentsLet a coding agent pick and place compositions with the skill.
• All visualsEvery composition with its variations, props and source.