Usage

Give it a container

A composition fills its parent and scales its drawing to fit, so the only thing you size is the outer box. Set a height on it. h-96 is a good start. Without a height the frame falls back to its minimum of 15rem.

<div class="h-96 rounded-xl border border-border bg-surface-1">
  <.charts_line animated />
</div>

Keep the container free of padding. The frame pads and clips its own content, and it takes the container's border radius, so the picture runs up to the rounded corners.

Compose it into a layout

A feature card puts the composition above a title and a line of copy:

<article class="rounded-xl border border-border">
  <div class="h-72 border-b border-border">
    <.agents_run animated fade_out />
  </div>
  <div class="p-5">
    <h3 class="eh-h3">Agents that stop and ask</h3>
    <p class="eh-caption">Every run shows its steps, and where a person decides.</p>
  </div>
</article>

A bento grid mixes widths on a twelve-column track. Make the spans of each row add up to twelve:

<div class="grid grid-cols-1 gap-3 lg:grid-cols-12">
  <div class="h-96 rounded-xl border border-border lg:col-span-7">
    <.intelligence_knowledge_graph animated />
  </div>
  <div class="h-96 rounded-xl border border-border lg:col-span-5">
    <.process_approval animated isometric />
  </div>
</div>

The Hero category is made for wide containers. Give a hero scene a responsive height, for example h-104 sm:h-120 lg:h-136, and trigger="mount" when it sits above the fold.

Control the animation

• animated turns motion on. Without it the composition renders its final, still frame.
• trigger decides when the entrance plays: "mount" on page load, "in-view" (the default) once when it scrolls into view, "in-view-repeat" every time it comes back.
• hover turns on the hover micro-interactions a composition supports.

<.process_flow animated trigger="mount" />
<.process_flow animated trigger="in-view" />
<.process_flow animated trigger="in-view-repeat" hover />

The scroll triggers need the trigger script. If it is missing, both behave like "mount", so a picture is never left hidden. Visitors who ask for reduced motion get the still frame.

Change it with props

Copy, values, steps and series are props. Every prop has a default, so pass only what you want to change. A list prop takes plain maps.

<.charts_line
  animated
  title="Hours of manual re-keying"
  value="6 h"
  caption="Per week"
  values={[41, 38, 39, 30, 27, 22, 18, 12, 9, 6]}
  ticks={~w(Q1 Q2 Q3 Q4)}
  target={nil}
/>

<.process_flow
  animated
  caption="Returns"
  steps={~w(Requested Inspected Refunded)}
  current={1}
/>

Props are declared with attr, so the compiler warns about a name that does not exist or a value of the wrong type. The preview page of each composition lists its props with their defaults.

Presentation modifiers

• glow (default true) is the warm halo behind the composition, the lighting of the site.
• fade_out (default false) fades the bottom edge into the surface underneath.
• isometric (default false) tilts the composition into the plane of the platform stack. The platform stack itself is drawn in that projection and does not take the prop.

<.charts_bar animated isometric fade_out />
<.events_stream animated glow={false} />

Themes

theme="dark" is the site canvas. theme="light" is the cream reversed surface used for documents and print, where lines and text switch to lime-deep. The Dark and Cream switch in the top bar of this site flips every preview so you can check both.

<div class="h-96 rounded-xl bg-canvas-light">
  <.metrics_goal animated theme="light" />
</div>

Accessibility

The frame is one image to a screen reader: role="img" with an aria-label, and the drawing inside is hidden from it. Each composition has a default label that describes the default picture. When you change what the picture shows, pass a label that says so.

<.charts_bar
  animated
  title="Invoices posted per day"
  values={[240, 262, 318, 221, 205]}
  labels={~w(Mon Tue Wed Thu Fri)}
  highlight={2}
  label="Invoices posted per day this week, highest on Wednesday at 318"
/>

Add a composition

A new composition is three files: the module, the stylesheet and the preview template. AGENTS.md in the repository has the checklist and the rules that keep the library coherent. The tests check every composition against them.