docs(compose): tables for transitions + text style reference

jobs/compose.mdx

@@ -103,7 +103,7 @@
 </CodeGroup>
 
 <Info>
 **Assets:** video, image, text, audio, composition · **Output:** mp4 / webm / gif / mp3 (audio only) / jpg / png (still frame)
 </Info>
 
 That is the shape of every render. Everything below is one more clip, one more track, or one more field.
@@ -326,13 +326,13 @@
 
 | Field | What it does |
 | --- | --- |
 | `opacity` | `0`..`1`, or keyframes `[{ time, value, easing: step \| linear \| smooth }]` |
 | `transform` | `position {x,y}`, `scale`, `rotate`, `anchor` (`center` \| `topLeft`), `fit` (`contain` \| `fill`), `animateTo` (Ken Burns end state) |
 | `crop` | `top` / `right` / `bottom` / `left`, each a percent string like `"10%"` |
 | `speed` | playback rate (`0.5` = slow motion, `2` = fast, and pitch shifts with speed) |
 | `color` | `brightness` (-1..1), `contrast` (0..4), `saturation` (0..3), `gamma` (0.1..10), `hue` (-180..180), `temperature` (1000..40000 K) |
 | `filter` | `greyscale`, `negative`, `boost`, `muted`, `lighten`, `darken`, `contrast` (mutually exclusive with `color`) |
 | `blur` / `sharpen` | gaussian blur strength / unsharp amount |
 | `chromaKey` | `color` (hex), `similarity` (0..1) |
 | `blendMode` | `normal`, `multiply`, `screen`, `overlay`, `darken`, `lighten`, `add`, `difference` |
 | `pan` | stereo balance, `-1` (left) to `1` (right) |
@@ -342,21 +342,27 @@
 
 Place between two clips on a track: `{ "type": "transition", "transition": <kind>, "duration": <seconds>, "direction"?: <dir> }`.
 
-<Columns cols={2}>
-  <Card title="crossfade">A dissolves directly into B.</Card>
-  <Card title="fade">A dips through black, then B fades up.</Card>
-  <Card title="slide">B slides in from an edge. Set `direction`: left, right, up, or down.</Card>
-  <Card title="zoom">B grows in from the center.</Card>
-  <Card title="none">Hard cut, no blend.</Card>
-</Columns>
+| Transition | Effect |
+| --- | --- |
+| `crossfade` | A dissolves directly into B |
+| `fade` | A dips through black, then B fades up |
+| `slide` | B slides in from an edge (`direction`: left, right, up, down) |
+| `zoom` | B grows in from the center |
+| `none` | Hard cut, no blend |
 
 ### Text style
 
 Fields on a text asset's `style`:
 
-<Columns cols={2}>
-  <Card title="Type">`font`, `size`, `weight` (100..1000), `color`, `align` (left, center, right)</Card>
-  <Card title="Position">`position` as `{ x, y }` percent strings</Card>
-  <Card title="Decoration">`stroke {color,width}`, `background`, `shadow {color,opacity,offsetX,offsetY}`</Card>
-  <Card title="Entrance">`animate {type, duration}`, where `type` is fade, slideUp, slideDown, slideLeft, or slideRight</Card>
-</Columns>
+| Field | Notes |
+| --- | --- |
+| `font` | Font family name |
+| `size` | Point size |
+| `weight` | 100..1000 (default 400) |
+| `color` | Hex fill |
+| `align` | `left`, `center`, `right` |
+| `position` | `{ x, y }` as percent strings |
+| `stroke` | `{ color, width }` outline |
+| `background` | Hex fill behind the text |
+| `shadow` | `{ color, opacity, offsetX, offsetY }` |
+| `animate` | `{ type, duration }` (type: fade, slideUp, slideDown, slideLeft, slideRight) |