# fframes-kit components

> fframes-kit is a Rust component library for fframes videos: Remotion's model (props, children, time set by the parent) with Manim's animation names, LaTeX formulas typeset by a built-in Typst, and explainer kits for math, physics, chemistry, computer science, machine learning, biology and 3D.

Every component is a struct: set the fields you need, fill the rest with `..ui.defaults()`, draw it with `ui.show(..)`. `theme.` defaults are fields of the current `Theme`.

## ActionPotential

An action potential traced on axes of time (ms) against membrane potential (mV), `x_length` by `y_length` (units of `ui.space`) around `center`. From `delay` the trace draws from 0 to 6 ms in `duration` seconds, a dot at its head; the dashed threshold and resting lines are there from the start. Each phase is named as the trace reaches it: resting potential, stimulus, depolarization, the peak, repolarization and hyperpolarization.

Page: https://fframes-kit.pages.dev/docs/biology/action-potential.md · feature `biology`

- `delay: f32 = 0.0`: Seconds after the container's start before the trace begins to draw.
- `duration: f32 = 5.0`: Seconds the trace takes to draw from 0 to 6 ms.
- `center: (f64, f64) = (0.0, -0.3)`: The middle of the axes, in units of `ui.space`.
- `x_length: f64 = 9.0`: Width of the axes, in units of `ui.space`.
- `y_length: f64 = 5.2`: Height of the axes, in units of `ui.space`.
- `trace_color: Color = Color::hex("#ffd43b")`: Colour of the trace and the dot at its head.
- `threshold_color: Color = Color::hex("#ff8787")`: Colour of the dashed threshold line (-55 mV).
- `axis_color: Color = theme.colors.muted`: Colour of the axes and the dashed resting line (-70 mV).
- `label_style: TextStyle = label_style`: The font of the axis labels and numbers: family, size in pixels and weight.
- `phase_style: TextStyle = theme.typography.caption`: The font of the phase names along the trace: family, size in pixels and weight.
- `text_color: Color = theme.colors.text`: Colour of the phase names.
- `enter: Option<FadeIn> = None`: Fade in at the start; `None` for none.
- `exit: Option<FadeOut> = None`: Fade out before the end; `None` for none.

## Angle

The mark of the angle between two lines (Manim `Angle`): an arc of `radius` about where they cross, counterclockwise on screen from the first line to the second.

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/shapes.md

- `line1: Segment = ((0.0, 0.0), (200.0, 0.0))`: The first line as two points `((x1, y1), (x2, y2))` in pixels of the canvas; the mark starts from it.
- `line2: Segment = ((0.0, 0.0), (0.0, -200.0))`: The second line, in the same form; the mark turns to it.
- `radius: f32 = ANGLE_RADIUS`: Radius of the mark in pixels, about where the lines cross.
- `quadrant: (f32, f32) = (1.0, 1.0)`: Which half of each line the mark sits on: `1` along its direction, `-1` against.
- `other_angle: bool = false`: Marks the other angle, clockwise from the first line to the second.
- `elbow: bool`: A square corner instead of an arc.
- `dot: bool = false`: A dot inside the mark, `dot_distance` of the way out from the corner.
- `dot_radius: f32 = 5.0`: Radius of the dot in pixels.
- `dot_distance: f32 = 0.55`: How far out the dot sits, as a fraction of the mark's radius (0 at the corner, 1 on the mark).
- `dot_color: Color = theme.colors.title`: Colour of the dot.
- `label: ShapeLabel = ShapeLabel::None`: A label beside the mark, `label_buff` beyond its radius.
- `label_buff: f32 = 3.0 * SMALL_BUFF`: Pixels between the mark's radius and the label.
- `label_style: TextStyle = theme.typography.body`: The label's font: family, size in pixels and weight.
- `label_color: Color = theme.colors.title`: Colour of the label text.
- `stroke: Option<Color> = Some(theme.colors.accent)`: `None` draws no outline.
- `stroke_width: f32 = theme.stroke.regular`: Outline width in pixels.
- `opacity: f32 = 1.0`: 0 transparent to 1 opaque.
- `enter: Option<EnterAnim> = None`: How it appears; `None` shows it from the start.
- `exit: Option<ExitAnim> = None`: How it leaves at the end of its container; `None` stays.
- `emphasis: Option<Emphasis> = None`: An emphasis animation (`Indicate`, `Wiggle`, ..) played while it is shown.
- `fn value(&self) -> f32`: The angle the mark spans in radians, always positive (Manim `get_value`).
- `fn path(&self) -> BezPath`: The mark alone: an arc, or a square corner.

## AnimatedBoundary

An outline that keeps drawing itself in one colour after another, the previous colour fading out under it (Manim's `AnimatedBoundary`). It never ends; put it in a `Sequence` to stop it.

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/geometry-animations.md

- `shape: Shape`: The shape whose outline is traced; the shape itself is not drawn.
- `colors: Vec<Color>`: The colours it draws in, one after another; empty draws nothing.
- `max_stroke_width: f32`: Outline width in pixels of the colour being drawn; the previous colour thins from this to 0.
- `cycle_rate: f32`: Colours per second.
- `back_and_forth: bool`: Every other colour draws from the end back.
- `draw_rate_func: RateFunc`: Easing of each colour's drawing along the outline.
- `fade_rate_func: RateFunc`: Easing of the previous colour fading out.
- `delay: f32`: Seconds after the container's start before it begins.
- `fn new(shape: Shape, colors: Vec<Color>) -> Self`: Around `shape` in `colors`, Manim's defaults otherwise.

## AnimatedEmoji

A Noto animated emoji (Remotion's `<AnimatedEmoji>`), played from `start` seconds of its container from the file `file_name` gives in the media folder. `(x, y)` is the top left of a `size` pixel square. It fades in over `fade` seconds and plays at `speed`, again and again with `looping`, otherwise its last frame stays. A missing file draws nothing, and `inspect` warns with the address to download it from. The tone applies to the emoji that have skin tones.

Page: https://fframes-kit.pages.dev/docs/media-and-overlays/cursors-emoji-sound-effects-and-gi-fs.md

- `name: &str = "grinning"`: Name of the emoji from `NAMES`, which also names its `.json` file in the media folder.
- `skin_tone: Option<SkinTone> = None`: Skin tone of a hand emoji; `None` for the default, and ignored for emoji without skin tones.
- `x: f32 = 880.0`: Left edge in pixels of the canvas.
- `y: f32 = 460.0`: Top edge in pixels of the canvas.
- `size: f32 = 160.0`: Side of the square the emoji fills, in pixels.
- `start: f32 = 0.0`: Second it starts playing, local to the parent container.
- `speed: f32 = 1.0`: Playback speed; 1 is normal, 2 twice as fast.
- `looping: bool = true`: Plays again and again; `false` keeps the last frame.
- `fade: f32 = theme.motion.duration.fast`: Seconds it takes to fade in from `start`.
- `fn file(&self) -> String`: The file this emoji plays.

## AnimationGroup

Every child at once (Manim's `AnimationGroup` with no lag).

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/geometry-animations.md

- `children: Vec<Children>`: The children, all started together; each is a closure taking the `Ui`.

## Annotation

An annotation: a dot on the `target`, an elbow line to `label` (first across, then up or down) and the text at its end. The line draws on over `run_time` seconds from `delay`; the text fades in over the last 40 %. (The shape called `Callout` is the Remotion speech bubble, so this one has another name.)

Page: https://fframes-kit.pages.dev/docs/media-and-overlays/overlays.md

- `target: (f32, f32) = (0.0, 0.0)`: The point the dot marks, in pixels of the canvas.
- `label: (f32, f32) = (0.0, 0.0)`: Where the line ends and the text sits, in pixels of the canvas; the text goes right of it when it is right of `target`, else left.
- `text: Cow<str> = Cow::Borrowed("")`: The words at the end of the line.
- `color: Color = theme.colors.accent`: Colour of the dot, line and text.
- `style: TextStyle = theme.typography.caption`: The font: family, size in pixels and weight.
- `letter_spacing: f32 = 2.0`: Extra space between letters of the text, in pixels.
- `stroke_width: f32 = theme.stroke.thin`: Width of the line and the ring around the dot, in pixels.
- `delay: f32 = 0.0`: Seconds after the container's start before it begins.
- `run_time: f32 = theme.motion.duration.slow`: Seconds the line takes to draw on; the text fades in over the last 40 %.
- `rate_func: RateFunc = theme.motion.easing.standard`: Easing of the drawing over its run time.
- `fn draw(self, progress: f32) -> Svgr`: The annotation `progress` (0 to 1) of the way drawn.

## AnnotationDot

A dot that marks a point for an annotation (Manim `AnnotationDot`): a third larger than a `Dot`, filled in the accent colour with a light outline.

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/shapes.md

- `cx: f32 = 0.0`: Center x in pixels of the canvas.
- `cy: f32 = 0.0`: Center y in pixels of the canvas (y down).
- `radius: f32 = 10.4`: Radius in pixels.
- `fill: Option<Color>`: `None` leaves the inside empty.
- `stroke: Option<Color>`: `None` draws no outline.
- `stroke_width: f32`: Outline width in pixels.
- `dash: Option<(f32, f32)> = None`: Dash and gap lengths of the outline.
- `opacity: f32 = 1.0`: 0 transparent to 1 opaque.
- `enter: Option<EnterAnim> = None`: How it appears; `None` shows it from the start.
- `exit: Option<ExitAnim> = None`: How it leaves at the end of its container; `None` stays.
- `emphasis: Option<Emphasis> = None`: An emphasis animation (`Indicate`, `Wiggle`, ..) played while it is shown.
- `fn shape(&self) -> Shape`: The path and paint as a `Shape`.

## AnnularSector

The part of a ring from `start_angle` by `angle` (Manim `AnnularSector`).

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/shapes.md

- `cx: f32 = 0.0`: Center x in pixels of the canvas.
- `cy: f32 = 0.0`: Center y in pixels of the canvas (y down).
- `inner_radius: f32 = 50.0`: Radius in pixels of the inner edge.
- `outer_radius: f32 = 100.0`: Radius in pixels of the outer edge.
- `start_angle: f32 = 0.0`: Where it starts, in radians counterclockwise on screen from the right (0 is right).
- `angle: f32 = std::f32::consts::FRAC_PI_2`: Turn in radians, counterclockwise on screen for a positive value.
- `fill: Option<Color> = Paint::solid(theme).fill`: `None` leaves the inside empty.
- `stroke: Option<Color> = Paint::solid(theme).stroke`: `None` draws no outline.
- `stroke_width: f32 = Paint::solid(theme).stroke_width`: Outline width in pixels.
- `dash: Option<(f32, f32)> = None`: Dash and gap lengths of the outline.
- `opacity: f32 = 1.0`: 0 transparent to 1 opaque.
- `enter: Option<EnterAnim> = None`: How it appears; `None` shows it from the start.
- `exit: Option<ExitAnim> = None`: How it leaves at the end of its container; `None` stays.
- `emphasis: Option<Emphasis> = None`: An emphasis animation (`Indicate`, `Wiggle`, ..) played while it is shown.
- `fn shape(&self) -> Shape`: The path and paint as a `Shape`.

## Annulus

A ring between two circles (Manim `Annulus`).

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/shapes.md

- `cx: f32 = 0.0`: Center x in pixels of the canvas.
- `cy: f32 = 0.0`: Center y in pixels of the canvas (y down).
- `inner_radius: f32 = 50.0`: Radius in pixels of the hole.
- `outer_radius: f32 = 100.0`: Radius in pixels of the outer edge.
- `fill: Option<Color> = Paint::solid(theme).fill`: `None` leaves the inside empty.
- `stroke: Option<Color> = Paint::solid(theme).stroke`: `None` draws no outline.
- `stroke_width: f32 = Paint::solid(theme).stroke_width`: Outline width in pixels.
- `dash: Option<(f32, f32)> = None`: Dash and gap lengths of the outline.
- `opacity: f32 = 1.0`: 0 transparent to 1 opaque.
- `enter: Option<EnterAnim> = None`: How it appears; `None` shows it from the start.
- `exit: Option<ExitAnim> = None`: How it leaves at the end of its container; `None` stays.
- `emphasis: Option<Emphasis> = None`: An emphasis animation (`Indicate`, `Wiggle`, ..) played while it is shown.
- `fn shape(&self) -> Shape`: The path and paint as a `Shape`.

## Appear

Shows its children from `from` seconds on: they rise `rise` units into place, grow from `scale_from` about `center` and fade in over `enter` seconds. They leave the same way up over `exit` seconds, ending at `until` seconds, or at the end of the container (`ui.duration`) when `until` is `None`. Inside, time starts at `from`, as in a `Sequence`.

Page: https://fframes-kit.pages.dev/docs/media-and-overlays/overlays.md

- `from: f32`: Seconds after the container's start when the children appear; inside, their time starts at `from`.
- `until: Option<f32>`: Seconds when the children are gone, after leaving over `exit`; `None` ends with the container.
- `center: (f32, f32)`: The point the content scales about, in canvas units.
- `rise: f32`: Pixels the children rise into place as they enter, and sink as they leave.
- `scale_from: f32`: Scale the children grow from as they enter, 1 for no growth.
- `enter: f32`: Seconds the children take to fade, rise and grow in.
- `exit: f32`: Seconds the children take to leave before `until` or the end of the container; 0 cuts them off.
- `rate_func: RateFunc`: Easing of the entrance over `enter` seconds.
- `children: Children`: What it shows (a closure taking the `Ui`).
- `fn new(ui: &Ui, from: f32, center: (f32, f32), children: Children) -> Self`: Times and motion from the theme: `motion.duration.enter` and `exit`, a 60 unit rise, scaling from 0.92.
- `fn state(&self, t: f32, end: Option<f32>) -> (f32, f32)`: `(entered, left)`, both from 0 to 1, at `t` seconds of a container that ends at `end`.

## ApplyComplexFunction

Moves every point of the shape to `function(re, im)` of the complex number at it (Manim's `ApplyComplexFunction`, 1 second), in the units of `ui.space`. As in Manim the points travel on arcs as wide as the angle of `function(1)`, so a rotation turns.

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/geometry-animations.md

- `shape: Shape`: The shape that is transformed; drawn unchanged until `delay` has passed.
- `function: fn((f64, f64)) -> (f64, f64)`: Maps the complex number `(re, im)` at a point, in units of `ui.space`, to where the point ends up.
- `delay: f32`: Seconds after the container's start before it begins.
- `run_time: f32`: Seconds the animation takes.
- `rate_func: RateFunc`: Easing of the animation over its run time.
- `fn new(shape: Shape, function: fn((f64, f64)) -> (f64, f64)) -> Self`: Manim's 1 second, smooth.
- `fn path_arc(&self) -> f64`: The angle of `function(1)`: how far the points turn on their way.

## ApplyFunction

Morphs the shape into `function(shape)` (Manim's `ApplyFunction`, a `Transform` in 1 second).

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/geometry-animations.md

- `shape: Shape`: The shape that is transformed; drawn unchanged until `delay` has passed.
- `function: fn(Shape) -> Shape`: Builds the shape it morphs into from a copy of `shape`.
- `delay: f32`: Seconds after the container's start before it begins.
- `run_time: f32`: Seconds the animation takes.
- `rate_func: RateFunc`: Easing of the animation over its run time.
- `fn new(shape: Shape, function: fn(Shape) -> Shape) -> Self`: Manim's 1 second, smooth.

## ApplyMatrix

Moves every point of the shape by the 2×2 `matrix` about `about_point` (Manim's `ApplyMatrix`, about the origin of `ui.space` in 3 seconds). The matrix and the point are in the units of `ui.space`, `y` up: `[[0, -1], [1, 0]]` turns a quarter counterclockwise.

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/geometry-animations.md

- `shape: Shape`: The shape that is transformed; drawn unchanged until `delay` has passed.
- `matrix: [[f64; 2]; 2]`: The 2x2 matrix, row by row, applied to each point's offset from `about_point`, in units of `ui.space` with y up.
- `about_point: Option<(f64, f64)>`: In units; `None` is the origin of the space.
- `delay: f32`: Seconds after the container's start before it begins.
- `run_time: f32`: Seconds the animation takes.
- `rate_func: RateFunc`: Easing of the animation over its run time.
- `fn new(shape: Shape, matrix: [[f64; 2]; 2]) -> Self`: About the origin in Manim's 3 seconds, smooth.
- `fn map(&self, space: Space, p: Point) -> Point`: Where the pixel `p` ends up.

## ApplyPointwiseFunction

Moves every point of the shape to `function(x, y)` (Manim's `ApplyPointwiseFunction`, 3 seconds), in the units of `ui.space`, `y` up. The path is cut into small pieces first like a `super::Homotopy`, so straight lines bend.

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/geometry-animations.md

- `shape: Shape`: The shape that is transformed; drawn unchanged until `delay` has passed.
- `function: fn(f64, f64) -> (f64, f64)`: Maps a point `(x, y)` in units of `ui.space` (y up) to where it ends up.
- `delay: f32`: Seconds after the container's start before it begins.
- `run_time: f32`: Seconds the animation takes.
- `rate_func: RateFunc`: Easing of the animation over its run time.
- `fn new(shape: Shape, function: fn(f64, f64) -> (f64, f64)) -> Self`: Manim's 3 seconds, smooth.

## ApplyPointwiseFunctionToCenter

Moves the whole shape so its center goes to `function(center)` (Manim's `ApplyPointwiseFunctionToCenter`, 3 seconds), in the units of `ui.space`. The shape keeps its form.

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/geometry-animations.md

- `shape: Shape`: The shape that is transformed; drawn unchanged until `delay` has passed.
- `function: fn(f64, f64) -> (f64, f64)`: Maps the shape's center `(x, y)` in units of `ui.space` (y up) to where the center ends up.
- `delay: f32`: Seconds after the container's start before it begins.
- `run_time: f32`: Seconds the animation takes.
- `rate_func: RateFunc`: Easing of the animation over its run time.
- `fn new(shape: Shape, function: fn(f64, f64) -> (f64, f64)) -> Self`: Manim's 3 seconds, smooth.

## ApplyWave

A wave runs across the shape from left to right and bends it by `amplitude` pixels in `direction` (Manim's `ApplyWave`). The shape is drawn as built before and after.

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/geometry-animations.md

- `shape: Shape`: The shape that is bent by the wave; drawn as built before and after.
- `direction: (f32, f32)`: Canvas units, `y` down: `(0.0, -1.0)` is Manim's `UP`.
- `amplitude: f32`: How far points are nudged at the crest, in pixels of the canvas.
- `wave_func: RateFunc`: Easing that shapes each ripple of the wave.
- `time_width: f32`: The wave's length as a fraction of the shape's width.
- `ripples: usize`: Number of crests that pass across the shape (at least 1).
- `delay: f32`: Seconds after the container's start before it begins.
- `run_time: f32`: Seconds the wave takes to cross the shape.
- `rate_func: RateFunc`: Easing of the animation over its run time.
- `fn new(shape: Shape) -> Self`: Up by 27 pixels (Manim's 0.2 units), one ripple in 2 seconds.
- `fn path_at(&self, p: f32) -> BezPath`: The path at progress `p`.

## Arc

Part of a circle's outline from `start_angle` by `angle` (Manim `Arc`).

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/shapes.md

- `cx: f32 = 0.0`: Center x in pixels of the canvas.
- `cy: f32 = 0.0`: Center y in pixels of the canvas (y down).
- `radius: f32 = 100.0`: Radius in pixels.
- `start_angle: f32 = 0.0`: Where the arc starts, in radians counterclockwise on screen from the right (0 is right).
- `angle: f32 = std::f32::consts::FRAC_PI_2`: How far the arc turns, in radians; counterclockwise on screen for a positive value.
- `fill: Option<Color> = Paint::outline(theme).fill`: `None` leaves the inside empty.
- `stroke: Option<Color> = Paint::outline(theme).stroke`: `None` draws no outline.
- `stroke_width: f32 = Paint::outline(theme).stroke_width`: Outline width in pixels.
- `dash: Option<(f32, f32)> = None`: Dash and gap lengths of the outline.
- `opacity: f32 = 1.0`: 0 transparent to 1 opaque.
- `enter: Option<EnterAnim> = None`: How it appears; `None` shows it from the start.
- `exit: Option<ExitAnim> = None`: How it leaves at the end of its container; `None` stays.
- `emphasis: Option<Emphasis> = None`: An emphasis animation (`Indicate`, `Wiggle`, ..) played while it is shown.
- `fn shape(&self) -> Shape`: The path and paint as a `Shape`.

## ArcBetweenPoints

The arc from `(x1, y1)` to `(x2, y2)` that turns by `angle`, counterclockwise on screen for a positive angle (Manim `ArcBetweenPoints`). A `radius` replaces the angle with the shorter arc of that radius (negative for the other side).

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/shapes.md

- `x1: f32 = 0.0`: Start x in pixels of the canvas.
- `y1: f32 = 0.0`: Start y in pixels of the canvas (y down).
- `x2: f32 = 200.0`: End x in pixels of the canvas.
- `y2: f32 = 0.0`: End y in pixels of the canvas (y down).
- `angle: f32 = std::f32::consts::FRAC_PI_2`: Turn in radians, counterclockwise on screen for a positive value.
- `radius: Option<f32> = None`: `Some` replaces `angle` with the shorter arc of this radius in pixels (negative for the other side); `None` uses `angle`.
- `fill: Option<Color> = Paint::outline(theme).fill`: `None` leaves the inside empty.
- `stroke: Option<Color> = Paint::outline(theme).stroke`: `None` draws no outline.
- `stroke_width: f32 = Paint::outline(theme).stroke_width`: Outline width in pixels.
- `dash: Option<(f32, f32)> = None`: Dash and gap lengths of the outline.
- `opacity: f32 = 1.0`: 0 transparent to 1 opaque.
- `enter: Option<EnterAnim> = None`: How it appears; `None` shows it from the start.
- `exit: Option<ExitAnim> = None`: How it leaves at the end of its container; `None` stays.
- `emphasis: Option<Emphasis> = None`: An emphasis animation (`Indicate`, `Wiggle`, ..) played while it is shown.
- `fn shape(&self) -> Shape`: The path and paint as a `Shape`.
- `fn turn(&self) -> f64`: The turn of the arc: `angle`, or the one `radius` gives.

## ArcBrace

A brace bent along an arc (Manim `ArcBrace`): round the circle of `radius` about `(cx, cy)` from `start_angle` turning `angle` (radians, counterclockwise on screen), its tip `depth` pixels outward, or toward the center when `inside`. `ArcBrace::tip` is where a label goes.

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/shapes.md

- `cx: f32 = 0.0`: Center x in pixels of the canvas.
- `cy: f32 = 0.0`: Center y in pixels of the canvas (y down).
- `radius: f32 = 135.0`: Radius in pixels of the circle the brace follows.
- `start_angle: f32 = -1.0`: Where the brace starts, in radians counterclockwise on screen from the right.
- `angle: f32 = 2.0`: How far the brace turns, in radians; counterclockwise on screen for a positive value, clockwise for a negative one.
- `depth: f32 = 24.0`: How far in pixels the tip sticks out of the arc; negative turns the brace over.
- `inside: bool = false`: Puts the tip toward the center instead of outward.
- `fill: Option<Color> = Paint::outline(theme).fill`: `None` leaves the inside empty.
- `stroke: Option<Color> = Paint::outline(theme).stroke`: `None` draws no outline.
- `stroke_width: f32 = Paint::outline(theme).stroke_width`: Outline width in pixels.
- `dash: Option<(f32, f32)> = None`: Dash and gap lengths of the outline.
- `opacity: f32 = 1.0`: 0 transparent to 1 opaque.
- `enter: Option<EnterAnim> = None`: How it appears; `None` shows it from the start.
- `exit: Option<ExitAnim> = None`: How it leaves at the end of its container; `None` stays.
- `emphasis: Option<Emphasis> = None`: An emphasis animation (`Indicate`, `Wiggle`, ..) played while it is shown.
- `fn shape(&self) -> Shape`: The path and paint as a `Shape`.
- `fn tip(&self) -> (f32, f32)`: The point of the tip.

## ArcPolygon

A closed shape of arcs between consecutive `points`, each turning by `angle` (Manim `ArcPolygon`); a `radius` replaces the angle as on `ArcBetweenPoints`.

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/shapes.md

- `points: Vec<(f32, f32)> = vec![(0.0, -100.0), (100.0, 100.0), (-100.0, 100.0)]`: Corner points `(x, y)` in pixels of the canvas; arcs join them in order and back to the first.
- `angle: f32 = std::f32::consts::FRAC_PI_4`: Turn in radians of each arc between consecutive points.
- `radius: Option<f32> = None`: `Some` replaces `angle` with the shorter arc of this radius in pixels on each side; `None` uses `angle`.
- `fill: Option<Color> = Paint::outline(theme).fill`: `None` leaves the inside empty.
- `stroke: Option<Color> = Paint::outline(theme).stroke`: `None` draws no outline.
- `stroke_width: f32 = Paint::outline(theme).stroke_width`: Outline width in pixels.
- `dash: Option<(f32, f32)> = None`: Dash and gap lengths of the outline.
- `opacity: f32 = 1.0`: 0 transparent to 1 opaque.
- `enter: Option<EnterAnim> = None`: How it appears; `None` shows it from the start.
- `exit: Option<ExitAnim> = None`: How it leaves at the end of its container; `None` stays.
- `emphasis: Option<Emphasis> = None`: An emphasis animation (`Indicate`, `Wiggle`, ..) played while it is shown.
- `fn shape(&self) -> Shape`: The path and paint as a `Shape`.

## ArcPolygonFromArcs

A closed shape of the given arcs (Manim `ArcPolygonFromArcs`): each one after the other, joined by straight lines where one does not end where the next starts.

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/shapes.md

- `arcs: Vec<ArcBetweenPoints> = Vec::new()`: The arcs, drawn in order; a straight line joins one that ends away from where the next starts.
- `fill: Option<Color> = Paint::outline(theme).fill`: `None` leaves the inside empty.
- `stroke: Option<Color> = Paint::outline(theme).stroke`: `None` draws no outline.
- `stroke_width: f32 = Paint::outline(theme).stroke_width`: Outline width in pixels.
- `dash: Option<(f32, f32)> = None`: Dash and gap lengths of the outline.
- `opacity: f32 = 1.0`: 0 transparent to 1 opaque.
- `enter: Option<EnterAnim> = None`: How it appears; `None` shows it from the start.
- `exit: Option<ExitAnim> = None`: How it leaves at the end of its container; `None` stays.
- `emphasis: Option<Emphasis> = None`: An emphasis animation (`Indicate`, `Wiggle`, ..) played while it is shown.
- `fn shape(&self) -> Shape`: The path and paint as a `Shape`.

## Area

The region between `f` and `bounded` (the x-axis when `None`) from `x_range.0` to `x_range.1` (Manim `get_area(graph, x_range, bounded_graph)`).

Page: https://fframes-kit.pages.dev/docs/math/riemann-sum-and-area-under.md

- `f: Func = |x| x`: The upper function of the region, in data units; a plain `fn`.
- `bounded: Option<Func> = None`: The function that bounds the region below; `None` bounds it with the x-axis.
- `x_range: (f64, f64) = (0.0, 1.0)`: The first and last `x` the region covers, in data units.
- `axes: AxesMap = AxesMap::default()`: The mapping of the axes the region sits on (`axes.map(ui)`).
- `samples: usize = 128`: Number of straight pieces the region's edges are sampled with.
- `fill: Option<Color> = paint.fill`: `None` leaves the inside empty.
- `stroke: Option<Color> = paint.stroke`: `None` draws no outline.
- `stroke_width: f32 = paint.stroke_width`: Outline width in pixels.
- `dash: Option<(f32, f32)> = None`: Dash and gap lengths of the outline.
- `opacity: f32 = 1.0`: 0 transparent to 1 opaque.
- `enter: Option<EnterAnim> = None`: How it appears; `None` shows it from the start.
- `exit: Option<ExitAnim> = None`: How it leaves at the end of its container; `None` stays.
- `emphasis: Option<Emphasis> = None`: An emphasis animation (`Indicate`, `Wiggle`, ..) played while it is shown.
- `fn shape(&self) -> Shape`: The path and paint as a `Shape`.

## AreaUnder

The area under a graph revealed from left to right over `run_time` seconds after `delay` (Manim's `get_area` with a growing `x_range`), with the integral of the part shown so far written after the text of `value`. Build `area` with `Axes::area`; `key` tells the clip paths of two areas in one frame apart.

Page: https://fframes-kit.pages.dev/docs/math/riemann-sum-and-area-under.md · feature `math`

- `area: Area = Area::themed(theme)`: The region to reveal, built with `Axes::area`: the graph, its axes and the `x_range` it covers.
- `delay: f32 = 0.0`: Seconds after the container's start before the area starts to grow.
- `run_time: f32 = 1.5`: Seconds the area takes to grow across its `x_range`.
- `rate_func: RateFunc = RateFunc::default()`: Easing of the growth over its run time.
- `value: Option<Label> = None`: Text written beside the area followed by the integral of the part shown so far; `None` for no number.
- `decimals: usize = 3`: Digits after the decimal point of the integral.
- `key: Option<&str> = None`: Names the clip path when two areas share a frame; `None` for the default.

## ArrayView

An array as a row of cells with its values, placed around `center` (units of `ui.space`), each `cell` pixels wide and `gap` apart, with the index under each cell (`indices`, manim-dsa's `add_indexes`) and `label` left of the row (`add_label`, empty for none). It plays an `ArrayTrace`, one step every `step_time` seconds from `delay`: compared cells light up, moved cells travel to their new place on an arc, cells in their final place turn `colors.sorted`, cells outside the step's range dim and pointers move under the cells. An appended cell drops in at the end and a popped one rises out; the row is laid out for the trace's longest step, so the other cells stay where they are. With `notes` the step's note is written under the pointers. The whole figure fades with `enter` and `exit`.

Page: https://fframes-kit.pages.dev/docs/computer-science/array-view-and-binary-search.md · feature `cs`

- `trace: Option<&ArrayTrace> = None`: The recorded steps to play (`ArrayTrace`); `None` draws nothing.
- `delay: f32 = 0.0`: Seconds after the container's start before the first step.
- `step_time: f32 = 0.6`: Seconds each step of the trace takes.
- `center: (f64, f64) = (0.0, 0.0)`: The middle of the row, in units of `ui.space`.
- `cell: f32 = 96.0`: Width and height of one cell in pixels.
- `gap: f32 = 12.0`: Space between neighbouring cells in pixels.
- `indices: bool = true`: Whether the index of each cell is written under it.
- `label: &str = ""`: Text written left of the row; empty for none.
- `notes: bool = true`: Whether the step's note is written under the pointers.
- `colors: CellColors = CellColors::themed(theme)`: Colours of the cells in each state (compared, moved, sorted, found).
- `pointer_color: Color = theme.colors.highlight`: Colour of the pointer names and arrows under the cells.
- `index_color: Color = theme.colors.muted`: Colour of the indices under the cells.
- `label_color: Color = theme.colors.text`: Colour of the label left of the row.
- `value_style: TextStyle = value_style`: The font of the values in the cells.
- `small_style: TextStyle = theme.typography.caption`: The font of the indices, pointer names and notes.
- `enter: Option<FadeIn> = None`: Fade in at the start; `None` for none.
- `exit: Option<FadeOut> = None`: Fade out before the end; `None` for none.
- `fn slot_x(&self, middle: f64, n: usize, slot: f64) -> f64`: The pixel centre of slot `slot` (fractional while cells move) for `n` cells.

## Arrow

An arrow from `(x1, y1)` to `(x2, y2)` (Manim `Arrow`).

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/shapes.md

- `x1: f32 = 0.0`: Start x in pixels of the canvas.
- `y1: f32 = 0.0`: Start y in pixels of the canvas (y down).
- `x2: f32 = 200.0`: End x in pixels of the canvas.
- `y2: f32 = 0.0`: End y in pixels of the canvas (y down).
- `tip_length: f32 = 24.0`: Length in pixels of each tip from its point back along the shaft; shortened to fit a short arrow.
- `tip_width: f32 = 20.0`: Width in pixels of each tip across the shaft.
- `tip_start: Option<ArrowTip> = None`: The tip at the start; `None` for none.
- `tip_end: Option<ArrowTip> = Some(ArrowTip::TriangleFilled)`: The tip at the end; `None` for none.
- `fill: Option<Color> = Paint::arrow(theme).fill`: `None` leaves the inside empty.
- `stroke: Option<Color> = Paint::arrow(theme).stroke`: `None` draws no outline.
- `stroke_width: f32 = Paint::arrow(theme).stroke_width`: Outline width in pixels.
- `dash: Option<(f32, f32)> = None`: Dash and gap lengths of the outline.
- `opacity: f32 = 1.0`: 0 transparent to 1 opaque.
- `enter: Option<EnterAnim> = None`: How it appears; `None` shows it from the start.
- `exit: Option<ExitAnim> = None`: How it leaves at the end of its container; `None` stays.
- `emphasis: Option<Emphasis> = None`: An emphasis animation (`Indicate`, `Wiggle`, ..) played while it is shown.
- `fn shape(&self) -> Shape`: The path and paint as a `Shape`.

## ArrowVectorField

An arrow at every grid point of a `VectorField` (Manim `ArrowVectorField`), starting at the point, pointing along the vector, `length(magnitude)` units long and coloured by the magnitude. Zero vectors draw nothing.

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/coordinate-systems.md

- `field: VectorField = VectorField::themed(theme)`: The vector field: the function, the box of grid points the arrows start from, and the colour by length.
- `length: fn(f64) -> f64 = sigmoid_length`: The arrow's length in units for a vector of this magnitude.
- `stroke_width: f32 = theme.stroke.regular`: Width of the arrow shafts in pixels.
- `tip_length: f32 = 14.0`: Length of the arrow tips in pixels; shortened to half of a short arrow.
- `tip_width: f32 = 12.0`: Width of the arrow tips in pixels, scaled down with a shortened tip.
- `opacity: f32 = 1.0`: 0 transparent to 1 opaque.
- `enter: Option<EnterAnim> = None`: How the arrows appear; `None` shows them from the start.
- `exit: Option<ExitAnim> = None`: How the arrows leave at the end of their container; `None` stays.
- `emphasis: Option<Emphasis> = None`: An emphasis animation (`Indicate`, `Wiggle`, ..) played on the arrows while they are shown.
- `fn shapes(&self, space: Space) -> Vec<Shape>`: The arrows as shapes, in pixels of `space`.

## Axes

Two number lines that cross where `x = 0` and `y = 0` (Manim `Axes`), or at the ends of the ranges that do not contain 0. Build the graphs and lines that go on them with `Axes::plot`, `Axes::vertical_line`, `Axes::riemann_rectangles` and `Axes::area`; they keep the axes' mapping.

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/coordinate-systems.md

- `x_range: Range = Range::new(-6.0, 6.0, 1.0)`: In axis units, see `Scaling`.
- `y_range: Range = Range::new(-3.0, 3.0, 1.0)`: Range of the y-axis, `Range::new(min, max, step)`, in axis units; see `Scaling`.
- `x_scaling: Scaling = Scaling::Linear`: How x values are spread along the x-axis: `Linear` or `LogBase`; `x_range` is then in axis units (exponents).
- `y_scaling: Scaling = Scaling::Linear`: How y values are spread along the y-axis: `Linear` or `LogBase`; `y_range` is then in axis units (exponents).
- `x_length: f64 = 12.0`: Length of the x-axis in units of `ui.space`.
- `y_length: f64 = 6.0`: Length of the y-axis in units of `ui.space`.
- `center: (f64, f64) = (0.0, 0.0)`: The middle of the axes' box, in units of `ui.space`.
- `color: Color = theme.colors.text`: Colour of the axis lines, their tips and their ticks.
- `stroke_width: f32 = theme.stroke.thin`: Width of the axis lines and the ticks in pixels.
- `tips: bool = true`: Arrow tips at the positive ends.
- `tip_length: f32 = 24.0`: Length of an arrow tip in pixels.
- `tip_width: f32 = 20.0`: Width of an arrow tip in pixels.
- `include_ticks: bool = true`: Draws a tick at every step of each range.
- `tick_size: f32 = 10.0`: Half the length of a tick, in pixels.
- `x_numbers: Vec<f64> = Vec::new()`: Values written below the x-axis (Manim `numbers_to_include`). A number where the y-axis crosses is left out, as in Manim.
- `y_numbers: Vec<f64> = Vec::new()`: Values written left of the y-axis.
- `decimals: usize = 0`: Digits after the decimal point of the written numbers.
- `number_style: TextStyle = theme.typography.caption`: The font of the numbers: family, size in pixels and weight.
- `number_fill: Color = theme.colors.text`: Colour of the numbers.
- `x_label: Option<Cow<str>> = None`: Written up and right of the end of the x-axis (Manim `get_axis_labels`).
- `y_label: Option<Cow<str>> = None`: Text written up and right of the end of the y-axis; `None` for none.
- `label_style: TextStyle = theme.typography.body`: The font of the axis labels: family, size in pixels and weight.
- `label_fill: Color = theme.colors.title`: Colour of the axis labels.
- `enter: Option<EnterAnim> = None`: How the axis lines and ticks appear; `None` shows them from the start.
- `exit: Option<ExitAnim> = None`: How the axis lines and ticks leave at the end of their container; `None` stays.
- `emphasis: Option<Emphasis> = None`: An emphasis animation (`Indicate`, `Wiggle`, ..) played on the lines while they are shown.
- `labels_enter: Option<FadeIn> = None`: How the numbers and labels appear and go; the lines use `enter` and `exit`.
- `labels_exit: Option<FadeOut> = None`: Fade the numbers and labels out before the end of the container; `None` for none.
- `fn map_in(&self, space: Space) -> AxesMap`: The mapping in `space`.
- `fn map(&self, ui: &Ui) -> AxesMap`: The mapping in `ui.space`.
- `fn c2p(&self, ui: &Ui, x: f64, y: f64) -> (f32, f32)`: The pixel of the data point `(x, y)` (Manim `c2p`).
- `fn p2c(&self, ui: &Ui, x: f32, y: f32) -> (f64, f64)`: The data point at a pixel (Manim `p2c`).
- `fn plot(&self, ui: &Ui, f: Func) -> FunctionGraph`: The graph of `f` over the whole x range (Manim `axes.plot(f)`); change `x_range`, the paint or `enter` with struct update syntax.
- `fn plot_parametric(&self, ui: &Ui, f: Curve, t_range: (f64, f64)) -> ParametricFunction`: The curve `t -> f(t)` in the axes' data units (Manim `plot_parametric_curve`).
- `fn vertical_line(&self, ui: &Ui, x: f64, y: f64) -> DashedLine`: A dashed line from the data point `(x, y)` straight down (or up) to the x-axis, in the highlight colour (Manim `get_vertical_line(c2p(x, y))`).
- `fn graph_label(&self, ui: &Ui, graph: &FunctionGraph, text: impl Into<Cow<str>>, x: f64, direction: Anchor) -> Label`: A label next to the point of `graph` above `x`, in the graph's colour (Manim `get_graph_label(graph, label, x_val, direction)`).
- `fn riemann_rectangles(&self, ui: &Ui, f: Func, x_range: (f64, f64), dx: f64) -> RiemannRectangles`: Rectangles of width `dx` under `f` from `x_range.0` to `x_range.1` (Manim `get_riemann_rectangles`).
- `fn area(&self, ui: &Ui, f: Func, x_range: (f64, f64)) -> Area`: The region between `f` and the x-axis from `x_range.0` to `x_range.1`; set `bounded` for the region between two graphs (Manim `get_area`).
- `fn plot_implicit_curve(&self, ui: &Ui, f: Implicit) -> ImplicitFunction`: The curve where `f(x, y) = 0` over the axes' ranges (Manim `plot_implicit_curve`).

## BackgroundRectangle

A filled rectangle behind a box, so it reads over a busy picture (Manim `BackgroundRectangle`): the background colour at Manim's 75% opacity, no outline.

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/shapes.md

- `around: Rect = Rect::ZERO`: The box it is drawn around, in pixels of the canvas.
- `buff: f32 = 0.0`: Pixels the rectangle extends beyond the box on every side.
- `corner_radius: f32 = 0.0`: Radius of the rounded corners in pixels; 0 for square corners.
- `fill: Option<Color> = paint.fill`: `None` leaves the inside empty.
- `stroke: Option<Color> = paint.stroke`: `None` draws no outline.
- `stroke_width: f32 = paint.stroke_width`: Outline width in pixels.
- `dash: Option<(f32, f32)> = None`: Dash and gap lengths of the outline.
- `opacity: f32 = 1.0`: 0 transparent to 1 opaque.
- `enter: Option<EnterAnim> = None`: How it appears; `None` shows it from the start.
- `exit: Option<ExitAnim> = None`: How it leaves at the end of its container; `None` stays.
- `emphasis: Option<Emphasis> = None`: An emphasis animation (`Indicate`, `Wiggle`, ..) played while it is shown.
- `fn shape(&self) -> Shape`: The path and paint as a `Shape`.

## BarChart

Bars that grow one after another from a baseline, each with its value counting up above it and its label below. `(x, y)` is the left end of the baseline; the tallest bar is `max_height` high when `max_value` is `None`. A bar is never thinner than half a pixel, so a growing bar starts as a hairline.

Page: https://fframes-kit.pages.dev/docs/media-and-overlays/data-audio-decoration-and-media.md

- `bars: Vec<(Cow<str>, f64)> = Vec::new()`: `(label, value)` of each bar, left to right.
- `x: f32 = 0.0`: Left end of the baseline in pixels of the canvas.
- `y: f32 = 0.0`: Baseline in pixels of the canvas; bars grow up from it.
- `bar_width: f32 = 126.0`: Width of one bar in pixels.
- `gap: f32 = 62.0`: Space between neighbouring bars in pixels.
- `max_height: f32 = 330.0`: Height in pixels of the bar whose value is `max_value`.
- `max_value: Option<f64> = None`: The value drawn `max_height` high; `None` uses the largest value.
- `radius: f32 = 8.0`: Corner radius of the bars in pixels.
- `fill: Color = theme.colors.muted`: Colour of the bars.
- `highlight: Option<usize> = None`: The index of a bar drawn in `highlight_fill`.
- `highlight_fill: Color = theme.colors.accent`: Colour of the highlighted bar.
- `value_style: TextStyle = theme.typography.body`: The font of the values above the bars.
- `value_fill: Color = theme.colors.title`: Colour of the values above the bars.
- `label_style: TextStyle = theme.typography.caption`: The font of the labels below the bars.
- `label_fill: Color = theme.colors.muted`: Colour of the labels below the bars.
- `decimals: usize = 0`: Digits after the decimal point of the counting values.
- `delay: f32 = 0.0`: Seconds after the container's start before the first bar begins to grow.
- `stagger: f32 = theme.motion.stagger.loose`: Seconds between the start of one bar and the start of the next.
- `run_time: f32 = theme.motion.duration.slow`: Seconds one bar takes to grow.
- `rate_func: RateFunc = theme.motion.easing.enter`: Easing of each bar's growth over its run time.
- `fn grown(&self, i: usize, t: f32) -> f32`: How far bar `i` has grown at `t`, from 0 to 1 (past 1 while a spring overshoots).

## BevelAlpha

Highlights and shadows along the alpha edges of its children, so text, logos and shapes look raised (Remotion's `bevelAlpha()`). `edge_thickness` is the width of the rounded bevel, `light_angle` the light's direction in degrees clockwise from above (0 lights the top edges), `light_color` the colour added to the lit edges (its alpha sets the strength) and `light_intensity` the strength of both, 0 to 1. A fully opaque picture has no alpha edges and stays as it is.

Page: https://fframes-kit.pages.dev/docs/motion/effects.md

- `edge_thickness: Anim<f32> = Anim::Fixed(2.0)`: Width of the rounded bevel in the children's user units; 0 or less leaves the picture unchanged. Animatable.
- `light_angle: f32 = -60.0`: Degrees clockwise from straight up that the light comes from: 0 lights the top edges, 90 the right ones.
- `light_color: Color = Color::WHITE`: Colour added to the lit edges; its alpha sets the strength of the light.
- `light_intensity: f32 = 0.4`: 0 to 1 strength of the lit and the shaded edges.
- `key: Option<&str> = None`: Names the filter when two effects of this kind share a frame.
- `children: Children = ui::no_children()`: The content the filter is applied to (a closure taking the `Ui`).

## BinarySearch

`ArrayView` playing `ArrayTrace::binary_search`, with what it looks for written above the cells (`"looking for 23"`). The search's range dims the cells it has ruled out, and the `lo`, `mid` and `hi` pointers move under the cells.

Page: https://fframes-kit.pages.dev/docs/computer-science/array-view-and-binary-search.md · feature `cs`

- `view: ArrayView = ArrayView { step_time: 0.9, ..ArrayView::themed(theme) }`: The array view that plays the search; its `trace` should be `ArrayTrace::binary_search`.
- `target: i64 = 0`: The value the search looks for, written in the caption.
- `caption: bool = true`: Whether `looking for ..` is written above the cells.
- `caption_color: Color = theme.colors.text`: Colour of the caption.

## BlockArrow

A block arrow `length` long pointing in `angle` (counterclockwise on screen, 0 is right), centered on `(cx, cy)` (Remotion `Arrow`).

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/shapes.md

- `cx: f32 = 0.0`: Center x in pixels of the canvas.
- `cy: f32 = 0.0`: Center y in pixels of the canvas (y down).
- `length: f32 = 300.0`: Total length in pixels, tail to point.
- `head_width: f32 = 185.0`: Width in pixels of the arrowhead across the shaft.
- `head_length: f32 = 120.0`: Length in pixels of the arrowhead (at most `length`).
- `shaft_width: f32 = 80.0`: Width in pixels of the shaft.
- `angle: f32 = 0.0`: Direction it points, in radians counterclockwise on screen from the right (0 is right).
- `fill: Option<Color> = Paint::solid(theme).fill`: `None` leaves the inside empty.
- `stroke: Option<Color> = Paint::solid(theme).stroke`: `None` draws no outline.
- `stroke_width: f32 = Paint::solid(theme).stroke_width`: Outline width in pixels.
- `dash: Option<(f32, f32)> = None`: Dash and gap lengths of the outline.
- `opacity: f32 = 1.0`: 0 transparent to 1 opaque.
- `enter: Option<EnterAnim> = None`: How it appears; `None` shows it from the start.
- `exit: Option<ExitAnim> = None`: How it leaves at the end of its container; `None` stays.
- `emphasis: Option<Emphasis> = None`: An emphasis animation (`Indicate`, `Wiggle`, ..) played while it is shown.
- `fn shape(&self) -> Shape`: The path and paint as a `Shape`.

## Blur

Its children blurred by a Gaussian of `radius` (the standard deviation, in view-box units), which can be animated: a focus pull, a background pushed back behind a title. A radius of 0 draws the children unfiltered. `key` names the filter when two blurs share a frame.

Page: https://fframes-kit.pages.dev/docs/motion/effects.md

- `radius: Anim<f32> = Anim::Fixed(8.0)`: Gaussian standard deviation in view-box units; 0 draws the children unblurred. Animate it for a focus pull.
- `key: Option<&str> = None`: Names the filter when two blurs share a frame.
- `children: Children = no_children()`: The content that is blurred (a closure taking the `Ui`).

## BohrAtom

The Bohr model of element `element` (atomic number): its symbol on the nucleus at `center` (units of `ui.space`) and its electrons on rings `shell_gap` pixels apart, from the ground state configuration. After `delay` the electrons appear one by one, innermost shell first, over `fill` seconds, and every shell turns, the outer ones slower (`speed` radians a second on the first). With `labels` the name and the electrons per shell sit under the atom. The rings draw with `enter`, the nucleus, the electrons and the labels with `parts_enter`.

Page: https://fframes-kit.pages.dev/docs/chemistry/bohr-atom.md · feature `chemistry`

- `element: u32 = 11`: Atomic number of the element drawn (11 is sodium).
- `center: (f64, f64) = (0.0, 0.0)`: The middle of the nucleus, in units of `ui.space`.
- `nucleus_radius: f32 = 46.0`: Radius in pixels of the nucleus disc that carries the symbol.
- `shell_gap: f32 = 56.0`: Distance in pixels between neighbouring shell rings, and from the nucleus to the first.
- `electron_radius: f32 = 10.0`: Radius in pixels of an electron dot.
- `delay: f32 = 0.0`: Seconds after the container's start before the electrons begin to appear.
- `fill: f32 = 1.5`: Seconds the electrons take to appear one after another, innermost shell first.
- `speed: f32 = 1.2`: Turning speed of the first shell in radians per second; outer shells turn slower.
- `labels: bool = true`: Writes the element name and the electrons per shell under the atom; `false` for none.
- `nucleus_color: Color = theme.colors.accent`: Colour of the nucleus disc.
- `shell_color: Color = theme.colors.muted`: Colour of the shell rings.
- `electron_color: Color = theme.colors.highlight`: Colour of the electron dots.
- `text_color: Color = theme.colors.text`: Colour of the name and shell count label under the atom.
- `stroke_width: f32 = theme.stroke.thin`: Outline width in pixels of the shell rings.
- `enter: Option<EnterAnim> = None`: How the shell rings appear; `None` shows them from the start.
- `exit: Option<ExitAnim> = None`: How the shell rings leave at the end of the container; `None` stays.
- `parts_enter: Option<FadeIn> = None`: Fade in of the nucleus, electrons and labels; `None` for none.
- `parts_exit: Option<FadeOut> = None`: Fade out of the nucleus, electrons and labels before the end; `None` for none.
- `fn shell_radius(&self, index: usize) -> f64`: The radius in pixels of shell `index` (0 innermost).
- `fn electron_angle(&self, index: usize, slot: u32, count: u32, t: f64) -> f64`: The angle in radians of electron `slot` of the `count` on shell `index`, `t` seconds after `delay`: evenly spaced, turning at `speed / (index + 1)`.

## BondFormation

Two atoms forming a bond, with their valence electrons on rings around their symbols. Ionic: from `at` over `duration` seconds the left atom's electrons arc over to the gaps of the right one, the left ring fades when it is empty, and the charges appear. Covalent: the atoms move together until their rings overlap and the shared electrons pair up between them. `left` and `right` are atomic numbers, placed `distance` pixels apart around `center` (units of `ui.space`). The rings draw with `enter`, the rest with `parts_enter`.

Page: https://fframes-kit.pages.dev/docs/chemistry/bond-formation.md · feature `chemistry`

- `kind: BondType = BondType::Ionic`: Ionic (the left atom gives electrons away) or covalent (the atoms share pairs).
- `left: u32 = 11`: Atomic number of the left atom; the electron donor when ionic.
- `right: u32 = 17`: Atomic number of the right atom; the electron acceptor when ionic.
- `center: (f64, f64) = (0.0, 0.0)`: The middle between the two atoms, in units of `ui.space`.
- `distance: f32 = 520.0`: Pixels between the atom centres at the start; covalent atoms then move closer until their rings overlap.
- `radius: f32 = 130.0`: Radius in pixels of each valence ring; the nucleus and electron sizes follow it.
- `at: f32 = 1.0`: Seconds after the container's start when the bonding begins.
- `duration: f32 = 1.5`: Seconds the electron transfer (and, when covalent, the approach) takes.
- `labels: bool = true`: Writes the ion charges (ionic) or the number of shared pairs (covalent) once bonded; `false` for none.
- `nucleus_color: Color = theme.colors.accent`: Colour of the nucleus discs behind the symbols.
- `ring_color: Color = theme.colors.muted`: Colour of the valence rings.
- `electron_color: Color = theme.colors.highlight`: Colour of the electrons.
- `shared_color: Color = Color::hex("#69db7c")`: Colour the shared electron pairs and the "shared pairs" label turn to when covalent.
- `text_color: Color = theme.colors.text`: Colour of the ion charge labels.
- `stroke_width: f32 = theme.stroke.thin`: Outline width in pixels of the valence rings.
- `enter: Option<EnterAnim> = None`: How the valence rings appear; `None` shows them from the start.
- `exit: Option<ExitAnim> = None`: How the valence rings leave at the end of the container; `None` stays.
- `parts_enter: Option<FadeIn> = None`: Fade in of the nuclei, electrons, symbols and labels; `None` for none.
- `parts_exit: Option<FadeOut> = None`: Fade out of the nuclei, electrons, symbols and labels before the end; `None` for none.

## Brace

A curly brace along `(x1, y1)` to `(x2, y2)` whose tip points `depth` pixels to the right of that direction on screen: below for a brace drawn left to right (Manim `Brace` under a mobject). `Brace::tip` is where a label goes.

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/shapes.md

- `x1: f32 = 0.0`: Start x in pixels of the span the brace runs along.
- `y1: f32 = 0.0`: Start y in pixels of the span the brace runs along (y down).
- `x2: f32 = 200.0`: End x in pixels of the span the brace runs along.
- `y2: f32 = 0.0`: End y in pixels of the span the brace runs along (y down).
- `depth: f32 = 24.0`: How far in pixels the tip sticks out, to the right of the direction from start to end on screen; negative turns the brace over.
- `fill: Option<Color> = Paint::outline(theme).fill`: `None` leaves the inside empty.
- `stroke: Option<Color> = Paint::outline(theme).stroke`: `None` draws no outline.
- `stroke_width: f32 = Paint::outline(theme).stroke_width`: Outline width in pixels.
- `dash: Option<(f32, f32)> = None`: Dash and gap lengths of the outline.
- `opacity: f32 = 1.0`: 0 transparent to 1 opaque.
- `enter: Option<EnterAnim> = None`: How it appears; `None` shows it from the start.
- `exit: Option<ExitAnim> = None`: How it leaves at the end of its container; `None` stays.
- `emphasis: Option<Emphasis> = None`: An emphasis animation (`Indicate`, `Wiggle`, ..) played while it is shown.
- `fn shape(&self) -> Shape`: The path and paint as a `Shape`.
- `fn tip(&self) -> (f32, f32)`: The point of the tip.

## BraceLabel

A `Brace` with text at its tip (Manim `BraceLabel`, `brace.get_text`). The label sits on the side the tip points to; the brace draws with its own `enter`, the text fades with `label_enter`.

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/shapes.md

- `brace: Brace = Brace::themed(theme)`: The brace to label; it draws with its own `enter` and `exit`.
- `text: Cow<str> = Cow::Borrowed("")`: The text at the brace's tip.
- `style: TextStyle = theme.typography.body`: The font: family, size in pixels and weight.
- `fill: Color = theme.colors.title`: Colour of the text.
- `buff: f32 = theme.spacing.sm`: Pixels between the tip and the text's box.
- `label_enter: Option<FadeIn> = None`: How the text fades in; `None` shows it from the start.
- `label_exit: Option<FadeOut> = None`: How the text fades out before the end; `None` for none.
- `fn label(&self) -> Label`: The label at the tip, on the side the tip points to; centered on it for a brace of zero length.

## Brightness

Its children brighter or darker (CSS `brightness()`): `amount` 1 unchanged, 0 black.

Page: https://fframes-kit.pages.dev/docs/motion/effects.md

- `amount: Anim<f32> = Anim::Fixed(1.3)`: Brightness factor on the colours: 1 unchanged, 0 black, above 1 brighter.
- `key: Option<&str> = None`: Names the filter when two effects of this kind share a frame.
- `children: Children = ui::no_children()`: The content the filter is applied to (a closure taking the `Ui`).

## Broadcast

Rings that grow out of `point` to `radius` one after another while they fade (Manim's `Broadcast`). Each ring runs as a part of a `LaggedStart` of `n_mobs`.

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/geometry-animations.md

- `point: (f32, f32) = (960.0, 540.0)`: Where the rings start, in pixels of the canvas.
- `radius: f32 = 270.0`: The radius the rings grow to.
- `color: Color = theme.colors.accent`: Colour of the rings.
- `stroke_width: f32 = theme.stroke.regular`: Width of the rings in pixels.
- `n_mobs: usize = 5`: How many rings are sent out, one after another (at least 1).
- `initial_opacity: f32 = 1.0`: Opacity of a ring when it starts, 0 transparent to 1 opaque.
- `final_opacity: f32 = 0.0`: Opacity of a ring when it has reached `radius`.
- `initial_width: f32 = 0.0`: The width the rings start at.
- `lag_ratio: f32 = 0.2`: Fraction of a ring's time between the starts of two rings.
- `delay: f32 = 0.0`: Seconds after the container's start before it begins.
- `run_time: f32 = 3.0`: Seconds the whole broadcast takes.
- `rate_func: RateFunc = RateFunc::Smooth`: Easing of the animation over its run time.

## BulletedList

Manim's `BulletedList`: one line per item, each after a round bullet. `(x, y)` is the left of the first bullet on the first baseline; lines are `line_spacing` times the font size apart. The bullets are circles, so they need no glyph in the font.

Page: https://fframes-kit.pages.dev/docs/text-and-formulas/text.md

- `items: Vec<Cow<str>> = Vec::new()`: One line per item, each after a bullet.
- `x: f32 = 0.0`: Left of the first bullet, in pixels of the canvas.
- `y: f32 = 0.0`: Baseline of the first item, in pixels of the canvas.
- `style: TextStyle = style`: The font: family, size in pixels and weight.
- `fill: Color = theme.colors.text`: Colour of the text.
- `bullet_fill: Color = theme.colors.accent`: Colour of the bullets.
- `indent: f32 = style.size as f32 * 1.1`: Pixels from the bullet's left to the text.
- `line_spacing: f32 = style.line_height * 1.25`: Baseline distance as a multiple of the font size.
- `opacity: f32 = 1.0`: 0 transparent to 1 opaque.
- `delay: f32 = 0.0`: Seconds before the first item comes in, when `stagger` is set.
- `stagger: Option<f32> = None`: Seconds between the starts of two items coming in; `None` (the default) shows every item from the start.
- `run_time: f32 = theme.motion.duration.enter`: Seconds each item takes to fade and rise into place, when `stagger` is set.
- `fn baseline(&self, index: usize) -> f32`: The baseline of item `index`.
- `fn revealed_at(&self, index: usize) -> f32`: Seconds into the container when item `index` is fully in: 0 without a `stagger`.

## Burlap

Coarse woven sacking over its children (Remotion's `burlap()`): strands `size` units wide run across and down, the gaps between them and blotchy `roughness` darken the picture towards `color`, mixed in by `amount`. `seed` picks the blotches. Remotion's over and under weave, strand jitter and dashes are left out. The strands are repeating gradients, so they stay sharp at any size, but keep them a few output pixels wide; finer cloth aliases. The children render twice, their alpha stays.

Page: https://fframes-kit.pages.dev/docs/motion/effects.md

- `amount: Anim<f32> = Anim::Fixed(0.55)`: 0 the children unchanged to 1 fully woven; at most the share `color` covers the gaps. Animatable.
- `size: f32 = 5.0`: Width of one strand in the children's user units; keep it a few output pixels wide or it aliases.
- `roughness: f32 = 0.7`: 0 to 1 strength of the blotchy darkening on top of the weave.
- `seed: u32 = 0`: Picks the blotches.
- `color: Color = Color::BLACK`: Colour the gaps and blotches darken the picture towards.
- `area: (f32, f32) = (1920.0, 1080.0)`: Width and height of the area the cloth covers from the top left, in the children's user units.
- `key: Option<&str> = None`: Names the gradient, filter and mask ids when two burlaps share a frame.
- `children: Children = no_children()`: The content that is covered with burlap, by its alpha (a closure taking the `Ui`).

## Callout

A speech bubble: a rounded box with a tail that points at `(tail_x, tail_y)`. The tail overlaps the box, so give it a fill and no outline.

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/shapes.md

- `cx: f32 = 0.0`: Center x in pixels of the canvas.
- `cy: f32 = 0.0`: Center y in pixels of the canvas (y down).
- `width: f32 = 400.0`: Width in pixels of the box.
- `height: f32 = 200.0`: Height in pixels of the box.
- `corner_radius: f32 = theme.radius.md`: Radius of the rounded corners in pixels; 0 for square corners.
- `tail_x: f32 = -100.0`: X in pixels of the canvas the tail points at.
- `tail_y: f32 = 200.0`: Y in pixels of the canvas the tail points at.
- `tail_width: f32 = 60.0`: Width in pixels of the tail where it meets the box.
- `fill: Option<Color> = Paint::solid(theme).fill`: `None` leaves the inside empty.
- `stroke: Option<Color> = Paint::solid(theme).stroke`: `None` draws no outline.
- `stroke_width: f32 = Paint::solid(theme).stroke_width`: Outline width in pixels.
- `dash: Option<(f32, f32)> = None`: Dash and gap lengths of the outline.
- `opacity: f32 = 1.0`: 0 transparent to 1 opaque.
- `enter: Option<EnterAnim> = None`: How it appears; `None` shows it from the start.
- `exit: Option<ExitAnim> = None`: How it leaves at the end of its container; `None` stays.
- `emphasis: Option<Emphasis> = None`: An emphasis animation (`Indicate`, `Wiggle`, ..) played while it is shown.
- `fn shape(&self) -> Shape`: The path and paint as a `Shape`.

## CallStack

The call stack of a recursion: a frame for each open call, `height` pixels tall and wide enough for the longest label, piled up from the bottom of a column `capacity` frames tall (or as tall as the trace needs), centred on `center` (units of `ui.space`). It plays a `CallTrace`, one step every `step_time` seconds from `delay`: a call drops a frame on top, the innermost frame lights up, a returning frame shows its result in `colors.found` and then rises out. The whole figure fades with `enter` and `exit`.

Page: https://fframes-kit.pages.dev/docs/computer-science/call-trace-call-stack-and-recursion-tree.md · feature `cs`

- `trace: Option<&CallTrace> = None`: The recorded calls to play (`CallTrace`); `None` draws nothing.
- `delay: f32 = 0.0`: Seconds after the container's start before the first step.
- `step_time: f32 = 0.6`: Seconds each step of the trace takes.
- `center: (f64, f64) = (0.0, 0.0)`: The middle of the column, in units of `ui.space`.
- `height: f32 = 64.0`: Height of a frame in pixels.
- `gap: f32 = 10.0`: Space between neighbouring frames in pixels.
- `capacity: usize = 0`: How many frames tall the column is; 0 uses the deepest the trace gets.
- `notes: bool = true`: Whether the step's note is written under the stack.
- `colors: CellColors = CellColors::themed(theme)`: Colours of the frames in each state (`colors.found` for a returning call).
- `frame_color: Color = theme.colors.muted`: Colour of the column's outline.
- `value_style: TextStyle = value_style`: The font of the call labels.
- `small_style: TextStyle = theme.typography.caption`: The font of the notes.
- `enter: Option<FadeIn> = None`: Fade in at the start; `None` for none.
- `exit: Option<FadeOut> = None`: Fade out before the end; `None` for none.

## CameraMotionBlur

Motion blur as a film camera records it, like Remotion's `<CameraMotionBlur>`: the children are averaged over the time the shutter is open before each frame. `shutter_angle` is in degrees, 360 for the whole frame interval; `samples` (at most `MAX_SAMPLES`) are the moments averaged. Each is drawn over the earlier ones with opacity `1 / k` for the `k`-th, so all count the same where the children are opaque.

Page: https://fframes-kit.pages.dev/docs/motion/effects.md

- `shutter_angle: f32 = 180.0`: Degrees the shutter stays open per frame: 360 is the whole frame interval, 180 half of it (Remotion's default).
- `samples: usize = 10`: Moments averaged over the open shutter, at most `MAX_SAMPLES`; more is smoother and costs more renders.
- `children: Children = no_children()`: The content that is blurred by its own motion (a closure taking the `Ui`).
- `fn offsets(&self, fps: usize) -> Vec<f32>`: Seconds before the frame of each sample at `fps`, the earliest first and the frame itself last.

## Canvas

Content drawn in another coordinate system: its children see `space` as `ui.space` (Manim's frame, moved and scaled), for a graph in one half of the screen or a figure in a card.

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/coordinate-systems.md

- `space: Space = Space::FULL_HD`: The coordinate system the children see as `ui.space`: units, origin and canvas box.
- `children: Children = no_children()`: What it draws in that space (a closure taking the `Ui`).

## Captions

The cue of a subtitle (`.vtt`) file that plays now, wrapped into `width` pixels. Cue times are seconds of the video, or of the container with `video_time: false`. A missing file draws nothing (and `inspect` reports it).

Page: https://fframes-kit.pages.dev/docs/media-and-overlays/overlays.md

- `file: &str = ""`: A subtitle file of the video's media.
- `x: f32 = 160.0`: Left edge of the caption box, in pixels of the canvas.
- `y: f32 = 900.0`: Baseline of the first line, in pixels of the canvas; later lines go below.
- `width: f32 = 1600.0`: Width in pixels the cue wraps into; it is aligned inside this width.
- `style: TextStyle = theme.typography.heading`: The font: family, size in pixels and weight.
- `fill: Color = theme.colors.caption`: Colour of the text.
- `align: TextAlign = TextAlign::Center`: How the lines sit inside `width`: left, center or right.
- `video_time: bool = true`: `true` reads cue times as seconds of the whole video; `false` as seconds of the container.

## CaptionStack

Timed captions without a subtitle file: each `Caption` rises `rise` units into place at its `at` seconds and leaves upward while the next one comes in. The last stays. `(x, y)` is the baseline of the tag; the line is `gap` pixels below it.

Page: https://fframes-kit.pages.dev/docs/media-and-overlays/overlays.md

- `items: Vec<Caption> = Vec::new()`: The cards, in order of `at`; each shows from its `at` seconds.
- `x: f32 = 96.0`: Left edge of the tag and line, in pixels of the canvas.
- `y: f32 = 860.0`: Baseline of the tag in pixels of the canvas; the line sits `gap` below.
- `gap: f32 = 88.0`: Pixels from the tag's baseline to the line's baseline.
- `tag_style: TextStyle = theme.typography.caption`: The font of the small tag: family, size in pixels and weight.
- `line_style: TextStyle = theme.typography.heading`: The font of the line: family, size in pixels and weight.
- `tag_fill: Color = theme.colors.accent`: Colour of the tag.
- `line_fill: Color = theme.colors.title`: Colour of the line.
- `tag_spacing: f32 = 4.0`: Extra space between letters of the tag, in pixels.
- `rise: f32 = 40.0`: Pixels a card rises into place as it enters (and about three quarters of that as it leaves).
- `enter: f32 = theme.motion.duration.enter`: Seconds a card takes to fade and rise in.
- `leave: f32 = theme.motion.duration.exit`: Seconds before the next caption's `at` that this one starts to leave.
- `rate_func: RateFunc = theme.motion.easing.enter`: Easing of a card rising into place.

## Cell

A cell, `size` pixels from its centre to its side, centred on `center` (units of `ui.space`). From `delay` its `organelles` (all of `kind`'s, `Organelle::of`, when empty) appear one every `stagger` seconds in the order given: each fades in and grows into place, the membrane and wall draw their outline first. With `labels` a leader line then draws from each to its name, in columns left and right of the cell. Free ribosomes are placed at random from `seed`. The whole figure fades with `enter` and `exit`.

Page: https://fframes-kit.pages.dev/docs/biology/cell.md · feature `biology`

- `kind: CellKind = CellKind::Animal`: Animal or plant cell: picks which organelles exist and the cell outline (rounded blob or walled rectangle).
- `organelles: Vec<Organelle> = Vec::new()`: Organelles to show, in the order they appear; empty shows all of `kind`'s (`Organelle::of`).
- `delay: f32 = 0.0`: Seconds after the container's start before the first organelle appears.
- `stagger: f32 = 0.5`: Seconds between one organelle starting to appear and the next.
- `center: (f64, f64) = (0.0, 0.0)`: The middle of the cell, in units of `ui.space`.
- `size: f32 = 330.0`: Pixels from the cell's centre to its side (half the width).
- `labels: bool = true`: Draws a leader line and name for each organelle when `true`; `false` for the bare cell.
- `seed: u64 = 7`: Seed for the random placement of the free ribosomes; the same seed gives the same dots.
- `palette: CellPalette = CellPalette::default()`: Colours of the cytoplasm, membrane and each organelle.
- `leader_color: Color = theme.colors.muted`: Colour of the leader lines.
- `label_color: Color = theme.colors.text`: Colour of the organelle names.
- `label_style: TextStyle = theme.typography.caption`: The font of the organelle names: family, size in pixels and weight.
- `enter: Option<FadeIn> = None`: Fade in at the start; `None` for none.
- `exit: Option<FadeOut> = None`: Fade out before the end; `None` for none.

## ChangeDecimalToValue

Counts a `DecimalNumber` from the value of its tracker to `target` (Manim's `ChangeDecimalToValue`).

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/geometry-animations.md

- `number: DecimalNumber`: The number to change; its current value is the start.
- `target: f32`: The value it counts to by the end.
- `delay: f32`: Seconds after the container's start before it begins.
- `run_time: f32`: Seconds the animation takes.
- `rate_func: RateFunc`: Easing of the animation over its run time.
- `fn new(number: DecimalNumber, target: f32) -> Self`: In Manim's 1 second, smooth.

## ChangeSpeed

Plays its children faster or slower over the first `run_time` seconds (Manim's `ChangeSpeed`). `speed` is a curve of `(fraction of run_time, speed)` points, straight between them and flat beyond them; no points is speed 1. The children see their time `t` as `run_time · S(t / run_time) / S(1)`, `S` the area under the curve, so they start and end where they would anyway and only the pace in between changes. After `run_time` their time is the real one again.

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/geometry-animations.md

- `run_time: f32`: Seconds over which the pace changes; after that the children run at real time.
- `speed: Vec<(f32, f32)>`: Curve of `(fraction of run_time, speed)` points, straight between them and flat beyond; empty for speed 1.
- `children: Children`: What it plays at the changed pace (a closure taking the `Ui`).
- `fn remap(&self, t: f32) -> f32`: The time the children see at local second `t`.

## ChangingDecimal

Shows `number_update_func(alpha)` in a `DecimalNumber` while the animation's progress runs from 0 to 1 (Manim's `ChangingDecimal`).

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/geometry-animations.md

- `number: DecimalNumber`: The number to show; its `value` is replaced while the animation runs.
- `number_update_func: fn(f32) -> f32`: Gives the value to show from the progress, 0 to 1.
- `delay: f32`: Seconds after the container's start before it begins.
- `run_time: f32`: Seconds the animation takes.
- `rate_func: RateFunc`: Easing of the animation over its run time.
- `fn new(number: DecimalNumber, number_update_func: fn(f32) -> f32) -> Self`: In Manim's 1 second, smooth.

## ChapterList

A list of chapters with a highlight that springs to the chapter playing now (an agenda, the steps of a tutorial). Each chapter is `(start seconds, title)`, in order; before the first start the highlight is on the first row. `(x, y)` is the top left of the list.

Page: https://fframes-kit.pages.dev/docs/media-and-overlays/overlays.md

- `chapters: Vec<(f32, Cow<str>)> = Vec::new()`: Each chapter as `(start in seconds, title)`, in order; the highlight moves to a chapter when it starts.
- `x: f32 = 96.0`: Left edge of the list, in pixels of the canvas.
- `y: f32 = 240.0`: Top of the first row, in pixels of the canvas.
- `width: f32 = 720.0`: Width of the highlight bar in pixels.
- `row_height: f32 = 72.0`: Height of one row, and of the highlight, in pixels.
- `gap: f32 = 12.0`: Pixels between two rows.
- `style: TextStyle = theme.typography.body`: The font: family, size in pixels and weight.
- `fill: Color = theme.colors.muted`: Colour of the titles that are not playing.
- `active_fill: Color = theme.colors.title`: Colour of the title of the chapter playing now.
- `highlight: Color = theme.colors.surface`: Colour of the bar behind the current chapter.
- `radius: f32 = theme.radius.md`: Corner radius of the highlight bar in pixels.
- `spring: (f32, f32) = (130.0 / 0.45, 20.0 / 0.45)`: `(stiffness, damping)` of the highlight's mass-1 spring.
- `fn active(&self, t: f32) -> usize`: The chapter playing at `t`.
- `fn highlight_row(&self, t: f32) -> f32`: The top of the highlight at `t`, in rows from the first (between two rows while it moves).

## ChargeGlow

Manim-physics' `Charge` drawn: a disc at the charge with its sign, `radius` pixels for a charge of 1 and growing with the square root of `|q|` (half to twice that), in a soft glow with `glow`. Positive charges are `positive_color`, negative ones `negative_color`. The data is a `Charge`, which `Field` and `ElectricField` take as well.

Page: https://fframes-kit.pages.dev/docs/physics/electric-field-and-magnetic-field.md · feature `physics`

- `charge: Charge = Charge::new(0.0, 0.0, 1.0)`: The charge to draw: position in units of `ui.space` and its signed strength `q`.
- `radius: f32 = 26.0`: Disc radius in pixels for a charge of 1; it grows with the square root of `|q|`.
- `glow: bool = true`: Draws a soft glow of rings around the disc.
- `positive_color: Color = theme.colors.highlight`: Colour of a positive charge.
- `negative_color: Color = theme.colors.accent`: Colour of a negative charge.
- `sign_color: Color = theme.colors.background`: Colour of the `+` or `−` sign on the disc.
- `enter: Option<FadeIn> = None`: Fade in at the start; `None` for none.
- `exit: Option<FadeOut> = None`: Fade out before the end; `None` for none.
- `fn disc_radius(&self) -> f32`: The disc's radius in pixels.

## Check

A check mark that draws itself on from `delay` seconds over `run_time`. `(x, y)` is the start of the short stroke; the mark is 27 by 20 units times `size`.

Page: https://fframes-kit.pages.dev/docs/media-and-overlays/overlays.md

- `x: f32 = 0.0`: Start of the short stroke, in pixels of the canvas.
- `y: f32 = 0.0`: Start of the short stroke, in pixels of the canvas.
- `size: f32 = 1.0`: Scale of the mark, which is 27 by 20 pixels at 1.
- `color: Color = theme.colors.accent`: Colour of the mark.
- `stroke_width: f32 = 5.0`: Width of the mark's line in pixels.
- `delay: f32 = 0.0`: Seconds after the container's start before it begins.
- `run_time: f32 = theme.motion.duration.base`: Seconds the animation takes.
- `rate_func: RateFunc = theme.motion.easing.standard`: Easing of the drawing over its run time.

## Checkerboard

A checkerboard over its children (Remotion's `checkerboard()`): square cells `cell_size` units wide in `colors` taken in turn along each row and column, `gap` units of the children showing between them. `angle` turns the board about the middle of the area in degrees and `offset_x`, `offset_y` move it; with `mask_to_source_alpha` it covers only the opaque parts of the children (which then render twice).

Page: https://fframes-kit.pages.dev/docs/motion/effects.md

- `colors: Vec<Color> = PALE_BLUES.to_vec()`: Colours of the cells, taken in turn along every row and column; empty draws no board.
- `cell_size: f32 = 80.0`: Side of one square cell in the children's user units.
- `gap: f32 = 0.0`: Width in user units of the children showing between cells.
- `angle: f32 = 0.0`: Degrees the board is turned about the middle of the area.
- `offset_x: f32 = 0.0`: Horizontal shift of the board in user units.
- `offset_y: f32 = 0.0`: Vertical shift of the board in user units.
- `mask_to_source_alpha: bool = false`: `true` covers only the opaque parts of the children, which then render twice.
- `area: (f32, f32) = (1920.0, 1080.0)`: Width and height of the area the board covers from the top left, in the children's user units.
- `key: Option<&str> = None`: Names the clip and mask ids when two boards share a frame.
- `children: Children = no_children()`: The content the board is laid over (a closure taking the `Ui`).

## Circle

A circle (Manim `Circle`, Remotion `Circle`).

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/shapes.md

- `cx: f32 = 0.0`: Center x in pixels of the canvas.
- `cy: f32 = 0.0`: Center y in pixels of the canvas (y down).
- `radius: f32 = 100.0`: Radius in pixels.
- `fill: Option<Color> = Paint::outline(theme).fill`: `None` leaves the inside empty.
- `stroke: Option<Color> = Paint::outline(theme).stroke`: `None` draws no outline.
- `stroke_width: f32 = Paint::outline(theme).stroke_width`: Outline width in pixels.
- `dash: Option<(f32, f32)> = None`: Dash and gap lengths of the outline.
- `opacity: f32 = 1.0`: 0 transparent to 1 opaque.
- `enter: Option<EnterAnim> = None`: How it appears; `None` shows it from the start.
- `exit: Option<ExitAnim> = None`: How it leaves at the end of its container; `None` stays.
- `emphasis: Option<Emphasis> = None`: An emphasis animation (`Indicate`, `Wiggle`, ..) played while it is shown.
- `fn shape(&self) -> Shape`: The path and paint as a `Shape`.

## Circuit

A series circuit on a rectangular loop centered on `center`, `width` by `height` units of `ui.space`: a battery on the left side, a switch on the top, a bulb on the right and a resistor on the bottom, each left out when its flag is off (the wire runs on). The switch closes `on_at` seconds after the local start; then the current flows as dots, clockwise out of the battery's long plate (+) at `current_speed` pixels a second, and the bulb glows. Without a switch the current starts at `on_at`. A label left empty is not drawn. The wire and the parts draw with `enter`, the labels, dots and glow fade with `parts_enter`.

Page: https://fframes-kit.pages.dev/docs/physics/circuit.md · feature `physics`

- `center: (f64, f64) = (0.0, 0.0)`: The middle of the loop, in units of `ui.space`.
- `width: f64 = 8.0`: Width of the loop in units of `ui.space`.
- `height: f64 = 4.5`: Height of the loop in units of `ui.space`.
- `battery: bool = true`: Draws the battery on the left side; off leaves the wire running on.
- `switch: bool = true`: Draws the switch on the top side; off leaves the wire running on and the current starts at `on_at`.
- `bulb: bool = true`: Draws the bulb on the right side; off leaves the wire running on.
- `resistor: bool = true`: Draws the resistor on the bottom side; off leaves the wire running on.
- `on_at: f32 = 1.0`: Seconds after the local start when the switch begins to close and the current starts.
- `current_speed: f32 = 160.0`: Speed of the current dots along the wire, in pixels per second.
- `dots: usize = 28`: Number of dots that make up the current, spread evenly around the loop.
- `battery_label: &str = "9 V"`: Text beside the battery; empty for none.
- `switch_label: &str = ""`: Text above the switch; empty for none.
- `bulb_label: &str = ""`: Text beside the bulb; empty for none.
- `resistor_label: &str = "R"`: Text below the resistor; empty for none.
- `wire_color: Color = theme.colors.text`: Colour of the wire and the parts.
- `dot_color: Color = theme.colors.accent`: Colour of the current dots.
- `glow_color: Color = theme.colors.highlight`: Colour of the bulb's glow once current flows.
- `label_color: Color = theme.colors.text`: Colour of the labels.
- `stroke_width: f32 = theme.stroke.regular`: Wire width in pixels; the battery's short plate is 2.5 times as thick.
- `enter: Option<EnterAnim> = None`: How the wire and the parts draw in; `None` shows them from the start.
- `exit: Option<ExitAnim> = None`: How the wire and the parts leave at the end of the container; `None` stays.
- `parts_enter: Option<FadeIn> = None`: How the labels, dots and glow fade in; `None` for none.
- `parts_exit: Option<FadeOut> = None`: How the labels, dots and glow fade out before the end; `None` for none.
- `fn lever_angle(&self, now: f32) -> f64`: The angle of the switch's lever, from open (35°) to closed (0).
- `fn flowing(&self, now: f32) -> f32`: Seconds the current has flowed at `now` seconds of local time, 0 before it starts.

## Circulation

Double circulation: the heart's four chambers (right atrium and ventricle on the viewer's left, left atrium and ventricle on the right) with the lungs above and the body below, `scale` times its normal size (about 860 by 820 pixels) around `center` (units of `ui.space`). From `delay` the chambers appear and the vessels draw along the way the blood goes: right ventricle, pulmonary artery, lungs, pulmonary vein, left atrium, left ventricle, aorta, body, vena cava, right atrium. Then blood cells run round the loop at `speed` pixels a second, turning from `deoxygenated` to `oxygenated` in the lungs and back in the body, while the heart beats `bpm` times a minute, atria first. With `labels` the lungs, the body and the vessels are named.

Page: https://fframes-kit.pages.dev/docs/biology/circulation.md · feature `biology`

- `delay: f32 = 0.0`: Seconds after the container's start before the chambers appear and the vessels begin to draw.
- `center: (f64, f64) = (0.0, -0.15)`: The middle of the heart, in units of `ui.space`.
- `scale: f64 = 1.0`: Size factor on the figure; `1.0` is about 860 by 820 pixels.
- `speed: f32 = 260.0`: Speed of the blood cells along the loop, in pixels per second.
- `bpm: f32 = 70.0`: Heartbeats per minute; the atria contract first, then the ventricles.
- `labels: bool = true`: Names the lungs, the body and the vessels when `true`.
- `oxygenated: Color = Color::hex("#ff6b6b")`: Colour of oxygen-rich blood (left side, aorta, pulmonary vein).
- `deoxygenated: Color = Color::hex("#4dabf7")`: Colour of oxygen-poor blood (right side, vena cava, pulmonary artery).
- `chamber_color: Color = Color::hex("#2a1c2e")`: Fill of the four heart chambers.
- `bed_color: Color = Color::hex("#1b2735")`: Fill of the capillary beds in the lungs and the body.
- `gap_color: Color = theme.colors.background`: Colour of the gap cut into a vessel where another crosses it; match the background.
- `label_style: TextStyle = theme.typography.caption`: The font of the lung, body and vessel names: family, size in pixels and weight.
- `chamber_style: TextStyle = chamber_style`: The font of the chamber names (`RA`, `RV`, `LA`, `LV`): family, size in pixels and weight.
- `text_color: Color = theme.colors.text`: Colour of all the text.
- `enter: Option<FadeIn> = None`: Fade in at the start; `None` for none.
- `exit: Option<FadeOut> = None`: Fade out before the end; `None` for none.

## Click

A cursor at `(x, y)` that clicks at `at` seconds: it presses, then a ring goes out. It fades in over `fade` seconds from the start of its container.

Page: https://fframes-kit.pages.dev/docs/media-and-overlays/cursors-emoji-sound-effects-and-gi-fs.md

- `x: f32 = 960.0`: Horizontal position of the cursor in pixels of the canvas.
- `y: f32 = 540.0`: Vertical position of the cursor in pixels of the canvas, down.
- `at: f32 = 0.5`: Second of the click, local to the parent container.
- `shape: CursorShape = CursorShape::Pointer`: Which cursor is drawn: arrow, pointer, I-beam, grab, grabbing or crosshair.
- `style: CursorStyle = CursorStyle::Dark`: Colours of the cursor: `Dark` (black with a white outline) or `Light` (white with a black outline).
- `size: f32 = 40.0`: Height in pixels of the 24 unit design.
- `fade: f32 = theme.motion.duration.fast`: Seconds the cursor takes to fade in from the start of its container.
- `look: ClickLook = ClickLook::themed(theme)`: How the click looks: the press depth and duration and the ring that goes out.

## ClockwiseTransform

A morph whose points travel clockwise on arcs of `path_arc` radians (Manim's `ClockwiseTransform`, a half turn).

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/geometry-animations.md

- `from: Shape`: The shape it starts as; drawn until `delay` has passed.
- `to: Shape`: The shape it ends as.
- `path_arc: f32`: Negative turns clockwise.
- `delay: f32`: Seconds after the container's start before it begins.
- `run_time: f32`: Seconds the animation takes.
- `rate_func: RateFunc`: Easing of the animation over its run time.
- `fn new(from: Shape, to: Shape) -> Self`: From `from` to `to` on half turns in Manim's 1 second, smooth.

## CodeBlock

Source code on a panel, coloured by `tokenize` for `language`, in a monospaced `style`, with line numbers, centred on `center` (units of `ui.space`). The panel is as wide as the longest line, or `width` pixels when set, and longer lines end with `…`. Tabs count as four spaces. `lines` lights one line (counted from 1, 0 for none) a step, one step every `step_time` seconds from `delay`, so it can follow another figure's trace with the same timing: the bar slides to the line and the other lines dim to `dim`. The whole figure fades with `enter` and `exit`.

Page: https://fframes-kit.pages.dev/docs/computer-science/code-block.md · feature `cs`

- `code: Cow<str> = Cow::Borrowed("")`: The source text, one line per line; tabs count as four spaces.
- `language: Language = Language::Rust`: The language, for keyword and comment colours.
- `lines: Vec<usize> = Vec::new()`: The line lit at each step, counted from 1; 0 lights none. One step every `step_time` seconds.
- `delay: f32 = 0.0`: Seconds after the container's start before the first step.
- `step_time: f32 = 0.8`: Seconds each step takes; the bar slides to the next line within it.
- `center: (f64, f64) = (0.0, 0.0)`: The middle of the panel, in units of `ui.space`.
- `width: f32 = 0.0`: Width of the panel in pixels; 0 fits the longest line, and longer lines end with an ellipsis.
- `padding: f32 = 28.0`: Space between the panel's edge and the text in pixels.
- `line_numbers: bool = true`: Whether each line is numbered.
- `dim: f32 = 0.55`: Opacity of the lines that are not lit while a line is lit.
- `style: TextStyle`: The font: a monospaced family, size in pixels and weight.
- `colors: CodeColors = CodeColors::themed(theme)`: Colours of the panel, the bar and each kind of token.
- `enter: Option<FadeIn> = None`: Fade in at the start; `None` for none.
- `exit: Option<FadeOut> = None`: Fade out before the end; `None` for none.

## Collision1D

Two carts, A and B, on a straight track that collide head on, in closed form: masses `m1` and `m2` kg, velocities `u1` and `u2` m/s before (positive to the right), centers `x1` and `x2` meters from the track's left end. `restitution` is 1 for an elastic collision and 0 for one where they stick together. The track starts at `track` (units of `ui.space`, `scale` units per meter) and is `track_length` meters long; a cart stops at its end. With `vectors` each cart carries its velocity, and with `momentum` bars under the track show both momenta and their sum, which stays the same through the collision. The track draws with `enter`, the carts and bars with `parts_enter`.

Page: https://fframes-kit.pages.dev/docs/physics/collision-1d.md · feature `physics`

- `m1: f64 = 2.0`: Mass of cart A in kg.
- `m2: f64 = 1.0`: Mass of cart B in kg.
- `u1: f64 = 3.0`: Velocity of cart A before the collision in m/s; positive moves right.
- `u2: f64 = -1.0`: Velocity of cart B before the collision in m/s; positive moves right.
- `x1: f64 = 2.0`: Center of cart A in meters from the track's left end at the start.
- `x2: f64 = 8.0`: Center of cart B in meters from the track's left end at the start.
- `restitution: f64 = 1.0`: Bounciness: 1 is an elastic collision, 0 makes the carts stick together.
- `track: (f64, f64) = (-6.0, 0.0)`: Left end of the track, in units of `ui.space`.
- `track_length: f64 = 12.0`: Length of the track in meters; a cart stops at its end.
- `scale: f64 = 1.0`: Units of `ui.space` per meter.
- `delay: f32 = 0.0`: Seconds after the container's start before the carts start moving.
- `time_scale: f32 = 1.0`: Speed of the motion over local time; 2 runs twice as fast, 1 is real time.
- `vectors: bool = true`: Shows each cart's velocity as an arrow with its value in m/s.
- `momentum: bool = true`: Shows bars under the track for both momenta and their sum.
- `bar_scale: f32 = 40.0`: Pixels of bar per kg·m/s.
- `color_a: Color = theme.colors.accent`: Colour of cart A, its velocity and its momentum bar.
- `color_b: Color = theme.colors.highlight`: Colour of cart B, its velocity and its momentum bar.
- `total_color: Color = theme.colors.text`: Colour of the total momentum label.
- `track_color: Color = theme.colors.muted`: Colour of the track, the wheels and the momentum axis.
- `stroke_width: f32 = theme.stroke.regular`: Width of the track and the velocity arrows in pixels.
- `enter: Option<EnterAnim> = None`: How the track draws in; `None` shows it from the start.
- `exit: Option<ExitAnim> = None`: How the track leaves at the end of the container; `None` stays.
- `parts_enter: Option<FadeIn> = None`: How the carts and bars fade in; `None` for none.
- `parts_exit: Option<FadeOut> = None`: How the carts and bars fade out before the end; `None` for none.
- `fn cart_length(mass: f64) -> f64`: Meters long, a cart of `mass` kg: heavier carts are longer.
- `fn collision_time(&self) -> Option<f64>`: Seconds until the carts touch, or `None` when they never close in.
- `fn final_velocities(&self) -> (f64, f64)`: The velocities after the collision, from momentum and the restitution.
- `fn state(&self, t: f64) -> [(f64, f64); 2]`: Each cart's center in meters and velocity in m/s after `t` seconds.
- `fn momenta(&self, t: f64) -> (f64, f64)`: The momenta of A and B in kg·m/s after `t` seconds.

## ColorCorrection

A basic colour correction in one matrix: `brightness`, then `contrast`, then `saturation` (1 leaves each unchanged), then the hues turned by `hue` degrees.

Page: https://fframes-kit.pages.dev/docs/motion/effects.md

- `brightness: f32 = 1.0`: Brightness factor applied first; 1 unchanged.
- `contrast: f32 = 1.1`: Contrast factor applied second, about mid grey; 1 unchanged.
- `saturation: f32 = 1.2`: Saturation factor applied third; 1 unchanged, 0 grey.
- `hue: f32 = 0.0`: Degrees the hues are turned last.
- `key: Option<&str> = None`: Names the filter when two effects of this kind share a frame.
- `children: Children = ui::no_children()`: The content the filter is applied to (a closure taking the `Ui`).

## ColorKey

A chroma key: what has the hue of `color` (a green or blue screen) turns transparent. Colours whose share of that hue is within `tolerance` of the key's vanish, and `softness` is the width of the fade into opaque. Linear in the colour, so it works best on saturated screens; a grey `color` keys nothing.

Page: https://fframes-kit.pages.dev/docs/motion/effects.md

- `color: Color = Color::rgb(0, 255, 0)`: Colour of the screen to remove; a grey colour keys nothing.
- `tolerance: f32 = 0.4`: 0 to 1: how far from the key hue still turns fully transparent; larger removes more.
- `softness: f32 = 0.2`: 0 to 1: width of the fade from transparent to opaque at the edge of the key.
- `key: Option<&str> = None`: Names the filter when two effects of this kind share a frame.
- `children: Children = ui::no_children()`: The content the filter is applied to (a closure taking the `Ui`).

## ColorStack

Several colour matrices drawn as one: `matrices` in order, chained with `ColorMatrix::then` into one `feColorMatrix`, so the stack costs one filter. Nested colour effects clamp between steps and a stack does not; see `then`. The table effects (`Levels`, `Curves`, `Lut`, `ShadowsHighlights`, `ThermalVision`, `ColorKey`) do not reduce to a matrix: nest them around or inside the stack.

Page: https://fframes-kit.pages.dev/docs/motion/effects.md

- `matrices: Vec<ColorMatrix> = Vec::new()`: The colour matrices, applied in order and drawn as one filter.
- `key: Option<&str> = None`: Names the filter when two effects of this kind share a frame.
- `children: Children = ui::no_children()`: The content the filter is applied to (a closure taking the `Ui`).

## ComplexHomotopy

`Homotopy` on complex numbers: `homotopy((re, im), t)` gives where the point `re + i im` is at `t` (Manim's `ComplexHomotopy`), in the units of `ui.space`.

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/geometry-animations.md

- `shape: Shape`: The shape whose points move; drawn unchanged before `delay`.
- `homotopy: fn((f64, f64), f64) -> (f64, f64)`: Maps the point `(re, im)` in units of `ui.space` and the progress `t` from 0 to 1 to its new position.
- `delay: f32`: Seconds after the container's start before it begins.
- `run_time: f32`: Seconds the animation takes.
- `rate_func: RateFunc`: Easing of the animation over its run time.
- `fn new(shape: Shape, homotopy: fn((f64, f64), f64) -> (f64, f64)) -> Self`: Manim's 3 seconds, smooth.

## ComplexityPlot

Growth rates racing: the curves of `growths` drawn on axes `x_length` by `y_length` (units of `ui.space`) around `center`, `n` along `n_range` and the steps along `steps`. From `delay`, `n` sweeps from the start of its range to the end in `duration` seconds and every curve grows with it, a dot at its head; a curve that leaves the top stops there. A legend beside the axes lists each rate in its colour from `palette` (one colour per `Growth`, slowest first) with its steps at the current `n`. The whole figure fades with `enter` and `exit`.

Page: https://fframes-kit.pages.dev/docs/computer-science/complexity-plot.md · feature `cs`

- `growths: Vec<Growth>`: The growth rates to race, slowest first; each gets the palette colour of its position.
- `delay: f32 = 0.0`: Seconds after the container's start before `n` begins to sweep.
- `duration: f32 = 4.0`: Seconds `n` takes to sweep from the start of `n_range` to its end.
- `center: (f64, f64) = (-1.2, 0.0)`: The middle of the axes, in units of `ui.space`.
- `x_length: f64 = 8.0`: Width of the x axis, in units of `ui.space`.
- `y_length: f64 = 5.0`: Height of the y axis, in units of `ui.space`.
- `n_range: Range = Range::new(0.0, 20.0, 5.0)`: The input size `n` along the x axis: minimum, maximum and tick step.
- `steps: Range = Range::new(0.0, 100.0, 25.0)`: The number of steps along the y axis: minimum, maximum and tick step; a curve that passes the maximum stops at the top.
- `legend: bool = true`: Whether each rate is listed beside the axes with its steps at the current `n`.
- `palette: [Color; 8]`: One colour per curve, used in the order of `growths`.
- `axis_color: Color = theme.colors.muted`: Colour of the axes and their ticks.
- `label_style: TextStyle = label_style`: The font of the axis labels and the rate names in the legend.
- `value_style: TextStyle = theme.typography.caption`: The font of the step counts in the legend.
- `text_color: Color = theme.colors.text`: Colour of the legend text.
- `enter: Option<FadeIn> = None`: Fade in at the start; `None` for none.
- `exit: Option<FadeOut> = None`: Fade out before the end; `None` for none.
- `fn n_at(&self, seconds: f32) -> f64`: `n` at `seconds` into the race.

## ComplexPlane

A `NumberPlane` of complex numbers (Manim `ComplexPlane`): the real part along x, the imaginary part along y, whose numbers are written `i`, `2i`, `-i`. Complex numbers are `(re, im)` pairs; `ComplexValueTracker` animates one.

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/coordinate-systems.md

- `plane: NumberPlane = NumberPlane::themed(theme)`: The plane it draws; its axes give the ranges, size and center, with the real part along x and the imaginary part along y.
- `fn n2p_in(&self, space: Space, z: (f64, f64)) -> Point`: The pixel of `z` in `space`.
- `fn n2p(&self, ui: &Ui, z: (f64, f64)) -> (f32, f32)`: The pixel of the complex number `z` (Manim `number_to_point`, `n2p`).
- `fn p2n_in(&self, space: Space, p: Point) -> (f64, f64)`: The complex number at a pixel in `space`.
- `fn p2n(&self, ui: &Ui, x: f32, y: f32) -> (f64, f64)`: The complex number at a pixel (Manim `point_to_number`, `p2n`).
- `fn label(&self, ui: &Ui, z: (f64, f64), decimals: usize) -> Label`: `z` written as `a+bi` up and right of its point, with `decimals` decimals.

## Contrast

Its children with more or less contrast (CSS `contrast()`): `amount` 1 unchanged, 0 flat grey.

Page: https://fframes-kit.pages.dev/docs/motion/effects.md

- `amount: Anim<f32> = Anim::Fixed(1.4)`: Contrast factor about mid grey: 1 unchanged, 0 flat grey, above 1 stronger.
- `key: Option<&str> = None`: Names the filter when two effects of this kind share a frame.
- `children: Children = ui::no_children()`: The content the filter is applied to (a closure taking the `Ui`).

## ConvexHull

The smallest convex polygon around `points` (Manim `ConvexHull`).

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/shapes.md

- `points: Vec<(f32, f32)> = vec![(0.0, 0.0), (100.0, 20.0), (60.0, 90.0), (20.0, 40.0)]`: The points to wrap, `(x, y)` in pixels of the canvas.
- `fill: Option<Color> = Paint::outline(theme).fill`: `None` leaves the inside empty.
- `stroke: Option<Color> = Paint::outline(theme).stroke`: `None` draws no outline.
- `stroke_width: f32 = Paint::outline(theme).stroke_width`: Outline width in pixels.
- `dash: Option<(f32, f32)> = None`: Dash and gap lengths of the outline.
- `opacity: f32 = 1.0`: 0 transparent to 1 opaque.
- `enter: Option<EnterAnim> = None`: How it appears; `None` shows it from the start.
- `exit: Option<ExitAnim> = None`: How it leaves at the end of its container; `None` stays.
- `emphasis: Option<Emphasis> = None`: An emphasis animation (`Indicate`, `Wiggle`, ..) played while it is shown.
- `fn shape(&self) -> Shape`: The path and paint as a `Shape`.

## CornerMarks

Crop-mark corners around the rectangle `(x, y, width, height)`: an L of `arm` pixels at each corner, like the brackets around a viewfinder. With `enter` (such as `Create`) the marks draw on; without, they are one static path.

Page: https://fframes-kit.pages.dev/docs/media-and-overlays/data-audio-decoration-and-media.md

- `x: f32 = 0.0`: Left edge of the rectangle in pixels of the canvas.
- `y: f32 = 0.0`: Top edge of the rectangle in pixels of the canvas.
- `width: f32 = 0.0`: Width of the rectangle in pixels.
- `height: f32 = 0.0`: Height of the rectangle in pixels.
- `arm: f32 = 24.0`: Length of each leg of a corner mark in pixels.
- `color: Color = theme.colors.muted`: Colour of the marks.
- `stroke_width: f32 = theme.stroke.thin`: Line width of the marks in pixels.
- `enter: Option<EnterAnim> = None`: How the marks draw on (such as `Create`); `None` shows them from the start.
- `fn d(&self) -> String`: The four marks as SVG path data, clockwise from the top left.
- `fn draw(&self) -> Svgr`: The static marks (`enter` is ignored), as one `<path>`; it needs no `Ui`.

## Counter

A number that counts from `from` to `to` over `run_time` seconds, starting `delay` seconds into the container: `"0" -> "12,480"`. It is right aligned by default, so the digits stay in place while the number grows.

Page: https://fframes-kit.pages.dev/docs/text-and-formulas/text.md

- `from: f64 = 0.0`: The value shown before `delay`.
- `to: f64 = 0.0`: The value reached after `run_time`.
- `x: f32 = 0.0`: Position of the number's anchor, in pixels of the canvas.
- `y: f32 = 0.0`: Baseline of the text, in pixels of the canvas.
- `style: TextStyle = theme.typography.title`: The font: family, size in pixels and weight.
- `fill: Color = theme.colors.title`: Colour of the text.
- `anchor: TextAnchor = TextAnchor::End`: Which point of the text sits at `x`: start, middle or end.
- `decimals: usize = 0`: Digits after the decimal point.
- `thousands: bool = true`: Groups the digits by three with commas.
- `prefix: Cow<str> = Cow::Borrowed("")`: Text written before the number, such as a currency sign; empty for none.
- `suffix: Cow<str> = Cow::Borrowed("")`: Text written after the number, such as a unit; empty for none.
- `delay: f32 = 0.0`: Seconds after the container's start before it begins to count.
- `run_time: f32 = theme.motion.duration.slow * 2.0`: Seconds the count takes.
- `rate_func: RateFunc = theme.motion.easing.standard`: Easing of the count over its run time.
- `fn value(&self, t: f32) -> f64`: The value `t` seconds into the container.
- `fn format(&self, value: f64) -> String`: The text shown for `value`.

## CounterclockwiseTransform

A morph whose points travel counterclockwise on arcs of `path_arc` radians (Manim's `CounterclockwiseTransform`, a half turn).

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/geometry-animations.md

- `from: Shape`: The shape it starts as; drawn until `delay` has passed.
- `to: Shape`: The shape it ends as.
- `path_arc: f32`: Positive turns counterclockwise.
- `delay: f32`: Seconds after the container's start before it begins.
- `run_time: f32`: Seconds the animation takes.
- `rate_func: RateFunc`: Easing of the animation over its run time.
- `fn new(from: Shape, to: Shape) -> Self`: From `from` to `to` on half turns in Manim's 1 second, smooth.

## Cross

Two lines from corner to corner of a box, scaled by `scale_factor` about its center (Manim `Cross`): red and thick.

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/shapes.md

- `around: Rect = Rect::ZERO`: The box the lines run across, in pixels of the canvas.
- `scale_factor: f32 = 1.0`: Scales the lines about the box's center; 1 reaches the corners.
- `fill: Option<Color>`: `None` leaves the inside empty.
- `stroke: Option<Color>`: `None` draws no outline.
- `stroke_width: f32`: Outline width in pixels.
- `dash: Option<(f32, f32)> = None`: Dash and gap lengths of the outline.
- `opacity: f32 = 1.0`: 0 transparent to 1 opaque.
- `enter: Option<EnterAnim> = None`: How it appears; `None` shows it from the start.
- `exit: Option<ExitAnim> = None`: How it leaves at the end of its container; `None` stays.
- `emphasis: Option<Emphasis> = None`: An emphasis animation (`Indicate`, `Wiggle`, ..) played while it is shown.
- `fn shape(&self) -> Shape`: The path and paint as a `Shape`.

## CubicBezier

A cubic Bézier curve from `start` to `end` pulled by two handles (Manim `CubicBezier`).

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/shapes.md

- `start: (f32, f32) = (0.0, 0.0)`: Where the curve starts, `(x, y)` in pixels of the canvas.
- `start_handle: (f32, f32) = (60.0, -100.0)`: Control point pulling the curve away from `start`, in pixels.
- `end_handle: (f32, f32) = (140.0, -100.0)`: Control point pulling the curve toward `end`, in pixels.
- `end: (f32, f32) = (200.0, 0.0)`: Where the curve ends, `(x, y)` in pixels of the canvas.
- `fill: Option<Color> = Paint::outline(theme).fill`: `None` leaves the inside empty.
- `stroke: Option<Color> = Paint::outline(theme).stroke`: `None` draws no outline.
- `stroke_width: f32 = Paint::outline(theme).stroke_width`: Outline width in pixels.
- `dash: Option<(f32, f32)> = None`: Dash and gap lengths of the outline.
- `opacity: f32 = 1.0`: 0 transparent to 1 opaque.
- `enter: Option<EnterAnim> = None`: How it appears; `None` shows it from the start.
- `exit: Option<ExitAnim> = None`: How it leaves at the end of its container; `None` stays.
- `emphasis: Option<Emphasis> = None`: An emphasis animation (`Indicate`, `Wiggle`, ..) played while it is shown.
- `fn shape(&self) -> Shape`: The path and paint as a `Shape`.

## Cursor

A mouse cursor with its hotspot at `(x, y)` (the tip of the arrow, the middle of the I-beam). `size` is the height in pixels of the 24 unit design, `scale` grows or shrinks it about the hotspot (a press), `shadow` adds a soft shadow below it. The kit draws its own shapes; they are not the artwork of any operating system.

Page: https://fframes-kit.pages.dev/docs/media-and-overlays/cursors-emoji-sound-effects-and-gi-fs.md

- `shape: CursorShape = CursorShape::Arrow`: Which cursor is drawn: arrow, pointer, I-beam, grab, grabbing or crosshair.
- `style: CursorStyle = CursorStyle::Dark`: Colours of the cursor: `Dark` (black with a white outline) or `Light` (white with a black outline).
- `x: f32 = 960.0`: Horizontal position of the hotspot in pixels of the canvas.
- `y: f32 = 540.0`: Vertical position of the hotspot in pixels of the canvas, down.
- `size: f32 = 40.0`: Height in pixels of the 24 unit design.
- `scale: f32 = 1.0`: Grows or shrinks the cursor about its hotspot; 1 is normal, below 1 is a press, 0 or less draws nothing.
- `opacity: f32 = 1.0`: 0 transparent to 1 opaque.
- `shadow: bool = true`: Adds a soft shadow below the cursor.
- `fn draw(&self) -> Svgr`: The cursor without a `Ui`; nothing when it is invisible.

## CursorPath

A cursor that moves through timed points, in the order of their times. It leaves a point `travel` seconds before the next one is due (or at once when they are closer) and arrives on time, with `motion`. A point with `click` presses the cursor and sends out a ring when it arrives; `sfx::on_clicks` gives the sounds. The cursor fades in over `fade` seconds from the first point's time.

Page: https://fframes-kit.pages.dev/docs/media-and-overlays/cursors-emoji-sound-effects-and-gi-fs.md

- `points: Vec<CursorPoint> = Vec::new()`: The timed points the cursor passes through, in the order of their times; empty draws nothing.
- `shape: CursorShape = CursorShape::Arrow`: Which cursor is drawn: arrow, pointer, I-beam, grab, grabbing or crosshair.
- `style: CursorStyle = CursorStyle::Dark`: Colours of the cursor: `Dark` (black with a white outline) or `Light` (white with a black outline).
- `size: f32 = 40.0`: Height in pixels of the 24 unit design.
- `travel: f32 = 0.6`: Seconds a move takes, ending when the next point is due (shorter when the points are closer in time).
- `motion: CursorMotion = CursorMotion::default()`: How the cursor travels to the next point: a smooth ease or a spring, both arriving on time.
- `fade: f32 = theme.motion.duration.fast`: Seconds the cursor takes to fade in from the first point's time.
- `click: ClickLook = ClickLook::themed(theme)`: How a click looks: the press depth and duration and the ring that goes out.
- `fn position(&self, t: f32) -> (f32, f32)`: Where the hotspot is at `t` seconds: the first point before it, the last after.
- `fn clicks(&self) -> impl Iterator<Item = f32>`: The times of the clicks, in seconds.

## CurvedArrow

An arrow along a circular arc that turns by `angle` from `(x1, y1)` to `(x2, y2)`, counterclockwise on screen for a positive angle (Manim `CurvedArrow`).

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/shapes.md

- `x1: f32 = 0.0`: Start x in pixels of the canvas.
- `y1: f32 = 0.0`: Start y in pixels of the canvas (y down).
- `x2: f32 = 200.0`: End x in pixels of the canvas.
- `y2: f32 = 0.0`: End y in pixels of the canvas (y down).
- `angle: f32 = std::f32::consts::FRAC_PI_2`: Turn in radians of the arc from the start to the end, counterclockwise on screen for a positive value.
- `tip_length: f32 = 24.0`: Length in pixels of each tip from its point back along the shaft; shortened to fit a short arrow.
- `tip_width: f32 = 20.0`: Width in pixels of each tip across the shaft.
- `tip_start: Option<ArrowTip> = None`: The tip at the start; `None` for none.
- `tip_end: Option<ArrowTip> = Some(ArrowTip::TriangleFilled)`: The tip at the end; `None` for none.
- `fill: Option<Color> = Paint::arrow(theme).fill`: `None` leaves the inside empty.
- `stroke: Option<Color> = Paint::arrow(theme).stroke`: `None` draws no outline.
- `stroke_width: f32 = Paint::arrow(theme).stroke_width`: Outline width in pixels.
- `dash: Option<(f32, f32)> = None`: Dash and gap lengths of the outline.
- `opacity: f32 = 1.0`: 0 transparent to 1 opaque.
- `enter: Option<EnterAnim> = None`: How it appears; `None` shows it from the start.
- `exit: Option<ExitAnim> = None`: How it leaves at the end of its container; `None` stays.
- `emphasis: Option<Emphasis> = None`: An emphasis animation (`Indicate`, `Wiggle`, ..) played while it is shown.
- `fn shape(&self) -> Shape`: The path and paint as a `Shape`.

## CurvedDoubleArrow

An arrow along an arc with a tip at both ends (Manim `CurvedDoubleArrow`).

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/shapes.md

- `x1: f32 = 0.0`: Start x in pixels of the canvas.
- `y1: f32 = 0.0`: Start y in pixels of the canvas (y down).
- `x2: f32 = 200.0`: End x in pixels of the canvas.
- `y2: f32 = 0.0`: End y in pixels of the canvas (y down).
- `angle: f32 = std::f32::consts::FRAC_PI_2`: Turn in radians of the arc from the start to the end, counterclockwise on screen for a positive value.
- `tip_length: f32 = 24.0`: Length in pixels of each tip from its point back along the shaft; shortened to fit a short arrow.
- `tip_width: f32 = 20.0`: Width in pixels of each tip across the shaft.
- `tip_start: Option<ArrowTip> = Some(ArrowTip::TriangleFilled)`: The tip at the start; `None` for none.
- `tip_end: Option<ArrowTip> = Some(ArrowTip::TriangleFilled)`: The tip at the end; `None` for none.
- `fill: Option<Color> = Paint::arrow(theme).fill`: `None` leaves the inside empty.
- `stroke: Option<Color> = Paint::arrow(theme).stroke`: `None` draws no outline.
- `stroke_width: f32 = Paint::arrow(theme).stroke_width`: Outline width in pixels.
- `dash: Option<(f32, f32)> = None`: Dash and gap lengths of the outline.
- `opacity: f32 = 1.0`: 0 transparent to 1 opaque.
- `enter: Option<EnterAnim> = None`: How it appears; `None` shows it from the start.
- `exit: Option<ExitAnim> = None`: How it leaves at the end of its container; `None` stays.
- `emphasis: Option<Emphasis> = None`: An emphasis animation (`Indicate`, `Wiggle`, ..) played while it is shown.
- `fn shape(&self) -> Shape`: The path and paint as a `Shape`.

## Curves

Tone curves: a smooth curve through `points` (input, output, both 0 to 1, sorted by input) on every colour channel, then the optional per-channel curves `red`, `green` and `blue`. The default is a gentle S curve that adds contrast.

Page: https://fframes-kit.pages.dev/docs/motion/effects.md

- `points: &[(f32, f32)] = &[(0.0, 0.0), (0.25, 0.2), (0.75, 0.82), (1.0, 1.0)]`: `(input, output)` pairs of the curve on every channel, both 0 to 1 and sorted by input; the default is a gentle S curve.
- `red: Option<&[(f32, f32)]>`: An extra curve applied to the red channel after `points`; `None` for none.
- `green: Option<&[(f32, f32)]>`: An extra curve applied to the green channel after `points`; `None` for none.
- `blue: Option<&[(f32, f32)]>`: An extra curve applied to the blue channel after `points`; `None` for none.
- `key: Option<&str> = None`: Names the filter when two effects of this kind share a frame.
- `children: Children = ui::no_children()`: The content the filter is applied to (a closure taking the `Ui`).

## CurvesAsSubmobjects

A path split into its curves (Manim `CurvesAsSubmobjects`), each drawn on its own so `Write` draws them one after another. The stroke runs from the first to the last of `colors` along the curves, like Manim's `set_color_by_gradient`.

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/shapes.md

- `path: BezPath = BezPath::new()`: The path to split into its curves, in pixels of the canvas.
- `colors: Vec<Color> = vec![theme.colors.accent]`: The gradient along the curves; one colour paints them all.
- `stroke_width: f32 = theme.stroke.regular`: Outline width in pixels.
- `opacity: f32 = 1.0`: 0 transparent to 1 opaque.
- `enter: Option<EnterAnim> = None`: How it appears; `None` shows it from the start.
- `exit: Option<ExitAnim> = None`: How it leaves at the end of its container; `None` stays.
- `emphasis: Option<Emphasis> = None`: An emphasis animation (`Indicate`, `Wiggle`, ..) played while it is shown.
- `fn shapes(&self) -> Vec<Shape>`: One shape per curve, in path order.

## Cutout

A filled shape with holes (Manim `Cutout`): `outer` with every path of `holes` cut out. The holes are turned against the outline, so they stay empty however they were drawn.

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/shapes.md

- `outer: BezPath = kurbo::Rect::new(-100.0, -100.0, 100.0, 100.0).to_path(TOLERANCE)`: The outline of the filled shape, in pixels of the canvas.
- `holes: Vec<BezPath> = Vec::new()`: Paths cut out of `outer`; they stay empty however they were drawn.
- `fill: Option<Color> = Paint::solid(theme).fill`: `None` leaves the inside empty.
- `stroke: Option<Color> = Paint::solid(theme).stroke`: `None` draws no outline.
- `stroke_width: f32 = Paint::solid(theme).stroke_width`: Outline width in pixels.
- `dash: Option<(f32, f32)> = None`: Dash and gap lengths of the outline.
- `opacity: f32 = 1.0`: 0 transparent to 1 opaque.
- `enter: Option<EnterAnim> = None`: How it appears; `None` shows it from the start.
- `exit: Option<ExitAnim> = None`: How it leaves at the end of its container; `None` stays.
- `emphasis: Option<Emphasis> = None`: An emphasis animation (`Indicate`, `Wiggle`, ..) played while it is shown.
- `fn shape(&self) -> Shape`: The path and paint as a `Shape`.

## CyclicReplace

Every shape moves on an arc to where the next one is, the last to the first (Manim's `CyclicReplace`, arcs of a quarter turn). The shapes keep their own paths.

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/geometry-animations.md

- `shapes: Vec<Shape>`: The shapes; each moves to where the next one is, the last to the first.
- `path_arc: f32`: Radians of the arc each shape travels on; positive turns counterclockwise, 0 is a straight line.
- `delay: f32`: Seconds after the container's start before it begins.
- `run_time: f32`: Seconds the animation takes.
- `rate_func: RateFunc`: Easing of the animation over its run time.
- `fn new(shapes: Vec<Shape>) -> Self`: Manim's quarter turns in 1 second, smooth.
- `fn offset(&self, i: usize, p: f32) -> Vec2`: How far shape `i` has moved at progress `p`.

## DashedLine

A dashed straight line (Manim `DashedLine`); `dash` is the dash and gap length.

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/shapes.md

- `x1: f32 = 0.0`: Start x in pixels of the canvas.
- `y1: f32 = 0.0`: Start y in pixels of the canvas (y down).
- `x2: f32 = 200.0`: End x in pixels of the canvas.
- `y2: f32 = 0.0`: End y in pixels of the canvas (y down).
- `fill: Option<Color> = Paint::outline(theme).fill`: `None` leaves the inside empty.
- `stroke: Option<Color> = Paint::outline(theme).stroke`: `None` draws no outline.
- `stroke_width: f32 = Paint::outline(theme).stroke_width`: Outline width in pixels.
- `dash: Option<(f32, f32)> = Some((12.0, 12.0))`: Dash and gap lengths of the outline.
- `opacity: f32 = 1.0`: 0 transparent to 1 opaque.
- `enter: Option<EnterAnim> = None`: How it appears; `None` shows it from the start.
- `exit: Option<ExitAnim> = None`: How it leaves at the end of its container; `None` stays.
- `emphasis: Option<Emphasis> = None`: An emphasis animation (`Indicate`, `Wiggle`, ..) played while it is shown.
- `fn shape(&self) -> Shape`: The path and paint as a `Shape`.

## DashedVMobject

Dashes along any path, spaced by arc length (Manim `DashedVMobject`). See `dash_path`.

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/shapes.md

- `path: BezPath = BezPath::new()`: The path to dash, in pixels of the canvas.
- `num_dashes: usize = 15`: Number of dashes along the path.
- `dashed_ratio: f32 = 0.5`: Share of the path's length (0 to 1) that is dashes; the rest is gaps.
- `dash_offset: f32 = 0.0`: Moves the pattern along the path, in dash-plus-gap lengths (0 to 1 wraps around).
- `fill: Option<Color> = Paint::outline(theme).fill`: `None` leaves the inside empty.
- `stroke: Option<Color> = Paint::outline(theme).stroke`: `None` draws no outline.
- `stroke_width: f32 = Paint::outline(theme).stroke_width`: Outline width in pixels.
- `dash: Option<(f32, f32)> = None`: Dash and gap lengths of the outline.
- `opacity: f32 = 1.0`: 0 transparent to 1 opaque.
- `enter: Option<EnterAnim> = None`: How it appears; `None` shows it from the start.
- `exit: Option<ExitAnim> = None`: How it leaves at the end of its container; `None` stays.
- `emphasis: Option<Emphasis> = None`: An emphasis animation (`Indicate`, `Wiggle`, ..) played while it is shown.
- `fn shape(&self) -> Shape`: The path and paint as a `Shape`.

## DecimalMatrix

A `Matrix` of numbers written with `num_decimal_places` places (Manim `DecimalMatrix`, one place by default). `matrix` gives the place and look; its `entries` are replaced.

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/coordinate-systems.md

- `values: Vec<Vec<f64>> = Vec::new()`: The numbers row by row; they replace the entries of `matrix`.
- `num_decimal_places: usize = 1`: Digits after the decimal point of each number.
- `include_sign: bool = false`: Writes a `+` before positive numbers.
- `matrix: Matrix = Matrix::themed(theme)`: The matrix that gives the place, gaps, font, brackets and animations; its `entries` are replaced by `values`.
- `fn to_matrix(&self) -> Matrix`: The `Matrix` it draws, with the numbers written.

## DecimalNumber

Manim's `DecimalNumber`: a number that follows a `ValueTracker`, drawn so its digits do not jitter while it changes. Every digit gets a slot as wide as the widest digit of the font, so a number keeps its width while its digit count stays the same, and with `anchor: End` the digits stay in place across a carry (`9.99 -> 10.00`). The value is an `f32`, exact to about seven significant digits.

Page: https://fframes-kit.pages.dev/docs/text-and-formulas/text.md

- `value: ValueTracker = 0.0.into()`: The `ValueTracker` whose value is written; it is read at every frame.
- `x: f32 = 0.0`: Position of the number's anchor, in pixels of the canvas.
- `y: f32 = 0.0`: Baseline of the text, in pixels of the canvas.
- `style: TextStyle = theme.typography.title`: The font: family, size in pixels and weight.
- `fill: Color = theme.colors.title`: Colour of the text.
- `anchor: TextAnchor = TextAnchor::Start`: Which point of the number (with its unit) sits at `x`: start, middle or end.
- `num_decimal_places: usize = 2`: Digits after the decimal point.
- `include_sign: bool = false`: A `+` before positive numbers.
- `group_with_commas: bool = true`: `true` groups the digits by three with commas.
- `unit: &str = ""`: Text written after the number, such as `" kg"`; empty for none.
- `opacity: f32 = 1.0`: 0 transparent to 1 opaque.
- `fn format(&self, value: f64) -> String`: The text shown for `value`, with the unit.

## DecimalTable

A `Table` of numbers written with `num_decimal_places` places (Manim `DecimalTable`, one place by default). `table` gives the labels, place and look; its `rows` are replaced.

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/coordinate-systems.md

- `values: Vec<Vec<f64>> = Vec::new()`: The numbers row by row; they replace the `rows` of `table`.
- `num_decimal_places: usize = 1`: Digits after the decimal point of each number.
- `include_sign: bool = false`: Writes a `+` before positive numbers.
- `table: Table = Table::themed(theme)`: The table that gives the labels, place, font, lines and animations; its `rows` are replaced by `values`.
- `fn to_table(&self) -> Table`: The `Table` it draws, with the numbers written.

## DecisionSurface

The partition of a 2D feature space by a decision tree (`ManimML`'s `DecisionTreeSurface`): every leaf's region of the box of `axes` filled in its class's colour at `opacity`, and the cuts of the splits drawn in `line_color`. `x_feature` and `y_feature` are the features along the axes; the tree should split on these two only. With the `reveal` of a `DecisionTreeDiagram` a cut appears with its split and a region with its leaf. Draw the `Axes` after it to keep their lines on top.

Page: https://fframes-kit.pages.dev/docs/machine-learning/decision-trees.md · feature `ml`

- `tree: DecisionTree = DecisionTree::default()`: The splits and leaves whose partition is drawn.
- `axes: AxesMap = AxesMap::default()`: The axes of the feature space to fill, mapping feature values to the canvas.
- `x_feature: usize = 0`: Index of the feature along the x-axis.
- `y_feature: usize = 1`: Index of the feature along the y-axis.
- `reveal: Option<TreeReveal> = None`: A cut appears with its split and a region with its leaf; `None` shows everything.
- `class_colors: Vec<Color> = class_colors(theme)`: Colour of each class, by class index, for the regions; a class past the end uses `line_color`.
- `opacity: f32 = 0.35`: 0 transparent to 1 opaque, of the filled regions.
- `line_color: Color = theme.colors.text`: Colour of the cuts drawn for the splits.
- `stroke_width: f32 = 2.5`: Width in pixels of the cut lines.
- `enter: Option<FadeIn> = None`: Fade in at the start; `None` for none.
- `exit: Option<FadeOut> = None`: Fade out before the end; `None` for none.

## DecisionTreeDiagram

A decision tree as `ManimML` draws it (`DecisionTreeDiagram`): each split a box with its test (`feature ≤ threshold`), each leaf a box with its class in that class's colour from `class_colors`, the root at the top, `level` pixels between levels and `gap` pixels between neighbouring leaves. The edge to the left child, the samples that pass the test, is labelled yes. The boxes are as wide as the longest text and at least `node_width`. With `reveal` the tree grows a level or a node at a time.

Page: https://fframes-kit.pages.dev/docs/machine-learning/decision-trees.md · feature `ml`

- `tree: DecisionTree = DecisionTree::default()`: The splits and leaves to draw, with the feature and class names.
- `center: (f64, f64) = (0.0, 0.0)`: The middle of the tree, in units of `ui.space`.
- `node_width: f32 = 190.0`: Minimum width in pixels of a node box; boxes grow to fit the longest text.
- `node_height: f32 = 54.0`: Height in pixels of a node box.
- `gap: f32 = 24.0`: Pixels between neighbouring node boxes.
- `level: f32 = 110.0`: Pixels between one level of the tree and the next.
- `reveal: Option<TreeReveal> = None`: Grows the tree a level or a node at a time; `None` shows it whole.
- `class_colors: Vec<Color> = class_colors(theme)`: Colour of each class, by class index, for the leaf boxes; a class past the end uses `node_color`.
- `node_color: Color = theme.colors.text`: Colour of the split boxes' outline and of all node text.
- `node_fill: Color = theme.colors.surface`: Fill colour of the node boxes (leaves mix in their class colour).
- `edge_color: Color = theme.colors.muted`: Colour of the edges and their yes/no labels.
- `text_style: TextStyle = theme.typography.caption`: The font of the node text and edge labels: family, size in pixels and weight.
- `stroke_width: f32 = 2.5`: Width in pixels of the node outlines and edges.
- `enter: Option<FadeIn> = None`: Fade in at the start; `None` for none.
- `exit: Option<FadeOut> = None`: Fade out before the end; `None` for none.
- `fn layout_at(&self, middle: Point) -> Vec<Option<Rect>>`: The box of every node with the middle of the tree at `middle`, `node_width` pixels wide; `None` for the nodes not reached from the root.
- `fn layout(&self, ui: &Ui) -> Vec<Option<Rect>>`: The box of every node, in pixels, all as wide as the longest text needs and at least `node_width`.

## Difference

The area of `subject` outside `clip` (Manim `Difference`).

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/shapes.md

- `subject: BezPath = BezPath::new()`: The path to cut from, in pixels of the canvas.
- `clip: BezPath = BezPath::new()`: The path cut out of `subject`.
- `fill: Option<Color> = Paint::solid(theme).fill`: `None` leaves the inside empty.
- `stroke: Option<Color> = Paint::solid(theme).stroke`: `None` draws no outline.
- `stroke_width: f32 = Paint::solid(theme).stroke_width`: Outline width in pixels.
- `dash: Option<(f32, f32)> = None`: Dash and gap lengths of the outline.
- `opacity: f32 = 1.0`: 0 transparent to 1 opaque.
- `enter: Option<EnterAnim> = None`: How it appears; `None` shows it from the start.
- `exit: Option<ExitAnim> = None`: How it leaves at the end of its container; `None` stays.
- `emphasis: Option<Emphasis> = None`: An emphasis animation (`Indicate`, `Wiggle`, ..) played while it is shown.
- `fn shape(&self) -> Shape`: The path and paint as a `Shape`.

## DiGraph

A `Graph` whose edges point from their first vertex to their second (Manim `DiGraph`): each edge ends in a tip at the edge of its target, and the two edges of a pair that point both ways bend apart.

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/coordinate-systems.md

- `graph: Graph = Graph::themed(theme)`: The graph it draws; its edges point from their first vertex to their second.
- `fn new(ui: &Ui, vertices: &[&str], edges: &[(usize, usize)]) -> Self`: A directed graph of these vertices and edges with the theme's look.

## DnaHelix

A DNA double helix seen from the side, the first base of `sequence` at the left, centred on `center` (units of `ui.space`). Each turn is `pitch` pixels long and ten base pairs; the strands are `radius` pixels from the axis and twist `spin` turns a second. The back of each strand is dimmer than its front.

Page: https://fframes-kit.pages.dev/docs/biology/dna-helix.md · feature `biology`

- `sequence: String = "ATGCGTACCTGAATCGGATCCATGCAGTTA".into()`: Bases read from the left, one pair per letter (`A`, `T`, `G`, `C`); the partner base is the complement.
- `delay: f32 = 0.0`: Seconds after the container's start before the scan and unzip timings begin.
- `center: (f64, f64) = (0.0, 0.0)`: The middle of the helix, in units of `ui.space`.
- `pitch: f32 = 340.0`: Pixels along the axis for one full turn (ten base pairs).
- `radius: f32 = 80.0`: Pixels from the axis to each strand.
- `spin: f32 = 0.12`: Twist of the helix, in turns per second.
- `scan: bool = true`: A reading light passes along the pairs and writes the lit pair's letters when `true`.
- `step_time: f32 = 0.18`: Seconds the reading light spends on each pair.
- `unzip_at: Option<f32> = None`: Seconds after `delay` when the strands start to come apart; `None` keeps the helix closed.
- `unzip_time: f32 = 3.0`: Seconds the unzipping takes to travel from the left to the right end.
- `replicate: bool = true`: A new partner strand grows along each separated strand behind the fork when `true`.
- `bases: BaseColors = BaseColors::default()`: Colour of each base letter's rung half.
- `strand_color: Color = theme.colors.text`: Colour of the two backbones.
- `new_color: Color = theme.colors.highlight`: Colour of the newly built strands while replicating.
- `lit_color: Color = theme.colors.title`: Colour the pair under the reading light is mixed toward.
- `letter_style: TextStyle = letter_style`: The font of the lit pair's letters: family, size in pixels and weight.
- `enter: Option<FadeIn> = None`: Fade in at the start; `None` for none.
- `exit: Option<FadeOut> = None`: Fade out before the end; `None` for none.

## DnaHelix3D

A DNA double helix in 3D, its axis across the image: `sequence` read from the left, each pair a rung of its two bases in `bases` colours between the two backbones in `strand_color`. It is rendered into a `width` x `height` pixel image around `center` (units of `ui.space`), seen from `elevation` degrees above, and turns `spin` degrees a second about its own axis. From `delay` the pairs build up from the left, one every `pair_time` seconds. The image fades with `enter` and `exit`.

Page: https://fframes-kit.pages.dev/docs/biology/dna-helix-3d.md · feature `biology`

- `sequence: String = "ATGCGTACCTGAATCGGATCCATG".into()`: Bases read from the left, one pair per letter (`A`, `T`, `G`, `C`); the partner base is the complement.
- `delay: f32 = 0.0`: Seconds after the container's start before the first pair appears.
- `center: (f64, f64) = (0.0, 0.0)`: The middle of the image, in units of `ui.space`.
- `width: f32 = 1500.0`: Width of the rendered image in pixels.
- `height: f32 = 560.0`: Height of the rendered image in pixels.
- `spin: f32 = 40.0`: Rotation about the helix axis, in degrees per second.
- `elevation: f32 = 12.0`: Angle of the camera above the helix, in degrees.
- `pair_time: f32 = 0.12`: Seconds between one pair appearing and the next.
- `bases: BaseColors = BaseColors::default()`: Colour of each base letter's rung half.
- `strand_color: Color = theme.colors.text`: Colour of the two sugar-phosphate backbones.
- `enter: Option<FadeIn> = None`: Fade in at the start; `None` for none.
- `exit: Option<FadeOut> = None`: Fade out before the end; `None` for none.

## Doppler

A source moving right from `start` (units of `ui.space`, `scale` units per meter) at `source_speed` m/s, sending out a wavefront every `period` seconds that spreads at `wave_speed` m/s. The fronts bunch up ahead of the source and spread out behind it; at or above the wave speed they pile into a cone. A front fades as it grows and is gone at `max_radius` meters. Listeners `ahead` and `behind` (meters from `start`) are marked, and with `labels` each shows the frequency it hears once the first front has reached it, with the source's own frequency above the source. The listeners draw with `enter`, the source and the fronts with `parts_enter`.

Page: https://fframes-kit.pages.dev/docs/physics/doppler.md · feature `physics`

- `start: (f64, f64) = (-4.0, 0.0)`: Where the source starts, in units of `ui.space`; meters below are measured from it.
- `scale: f64 = 1.0`: Units of `ui.space` per meter.
- `source_speed: f64 = 1.0`: Speed of the source to the right in m/s; at or above `wave_speed` the fronts pile into a cone.
- `wave_speed: f64 = 3.0`: Speed the wavefronts spread at in m/s.
- `period: f64 = 0.4`: Seconds between two wavefronts; the source's own frequency is its inverse.
- `max_radius: f64 = 6.0`: Radius in meters where a front is gone; it fades out on the way.
- `ahead: Option<f64> = Some(10.0)`: Listener in meters from `start`, to the right of the source; `None` for none.
- `behind: Option<f64> = Some(-2.5)`: Listener in meters from `start`, to the left of the source; `None` for none.
- `labels: bool = true`: Writes the source's frequency above it and the frequency each listener hears once the first front reaches it.
- `delay: f32 = 0.0`: Seconds after the container's start before the source starts moving.
- `time_scale: f32 = 1.0`: Speed of the motion over local time; 2 runs twice as fast, 1 is real time.
- `source_color: Color = theme.colors.accent`: Colour of the source and its frequency label.
- `wave_color: Color = theme.colors.text`: Colour of the wavefronts.
- `listener_color: Color = theme.colors.highlight`: Colour of the listener marks.
- `stroke_width: f32 = theme.stroke.thin`: Width of the wavefronts in pixels.
- `enter: Option<EnterAnim> = None`: How the listener marks draw in; `None` shows them from the start.
- `exit: Option<ExitAnim> = None`: How the listener marks leave at the end of the container; `None` stays.
- `parts_enter: Option<FadeIn> = None`: How the source and the fronts fade in; `None` for none.
- `parts_exit: Option<FadeOut> = None`: How the source and the fronts fade out before the end; `None` for none.
- `fn source(&self, t: f64) -> f64`: Meters from `start`, the source after `t` seconds.
- `fn heard(&self, x: f64, t: f64) -> Option<f64>`: The frequency in Hz a listener at `x` meters from `start` hears while the source is where it is after `t` seconds: `f c / (c - v)` ahead of it, `f c / (c + v)` behind. `None` ahead of a source at or above the wave speed, where no front has come.
- `fn fronts(&self, t: f64) -> Vec<(f64, f64)>`: The emission time and the radius in meters of every front alive after `t` seconds, oldest first.

## Dot

A small filled circle that marks a point (Manim `Dot`).

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/shapes.md

- `cx: f32 = 0.0`: Center x in pixels of the canvas.
- `cy: f32 = 0.0`: Center y in pixels of the canvas (y down).
- `radius: f32 = 8.0`: Radius in pixels.
- `fill: Option<Color> = Paint::solid(theme).fill`: `None` leaves the inside empty.
- `stroke: Option<Color> = Paint::solid(theme).stroke`: `None` draws no outline.
- `stroke_width: f32 = Paint::solid(theme).stroke_width`: Outline width in pixels.
- `dash: Option<(f32, f32)> = None`: Dash and gap lengths of the outline.
- `opacity: f32 = 1.0`: 0 transparent to 1 opaque.
- `enter: Option<EnterAnim> = None`: How it appears; `None` shows it from the start.
- `exit: Option<ExitAnim> = None`: How it leaves at the end of its container; `None` stays.
- `emphasis: Option<Emphasis> = None`: An emphasis animation (`Indicate`, `Wiggle`, ..) played while it is shown.
- `fn shape(&self) -> Shape`: The path and paint as a `Shape`.

## DotGrid

Its children seen through a grid of round holes (Remotion's `dotGrid()`): dots `dot_size` units across, `grid_size` units apart, the first centred half a cell from the origin. With `invert` the dots are cut out of the children instead.

Page: https://fframes-kit.pages.dev/docs/motion/effects.md

- `dot_size: f32 = 16.0`: Diameter of each dot in the children's user units.
- `grid_size: f32 = 20.0`: Distance between dot centers in user units; the first dot is half a cell from the origin.
- `invert: bool = false`: `false` shows the children only through the dots; `true` cuts the dots out of them.
- `area: (f32, f32) = (1920.0, 1080.0)`: Width and height of the area the grid covers from the top left, in the children's user units.
- `key: Option<&str> = None`: Names the mask id when two grids share a frame.
- `children: Children = no_children()`: The content seen through the dots (a closure taking the `Ui`).

## DoubleArrow

An arrow with a tip at both ends (Manim `DoubleArrow`).

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/shapes.md

- `x1: f32 = 0.0`: Start x in pixels of the canvas.
- `y1: f32 = 0.0`: Start y in pixels of the canvas (y down).
- `x2: f32 = 200.0`: End x in pixels of the canvas.
- `y2: f32 = 0.0`: End y in pixels of the canvas (y down).
- `tip_length: f32 = 24.0`: Length in pixels of each tip from its point back along the shaft; shortened to fit a short arrow.
- `tip_width: f32 = 20.0`: Width in pixels of each tip across the shaft.
- `tip_start: Option<ArrowTip> = Some(ArrowTip::TriangleFilled)`: The tip at the start; `None` for none.
- `tip_end: Option<ArrowTip> = Some(ArrowTip::TriangleFilled)`: The tip at the end; `None` for none.
- `fill: Option<Color> = Paint::arrow(theme).fill`: `None` leaves the inside empty.
- `stroke: Option<Color> = Paint::arrow(theme).stroke`: `None` draws no outline.
- `stroke_width: f32 = Paint::arrow(theme).stroke_width`: Outline width in pixels.
- `dash: Option<(f32, f32)> = None`: Dash and gap lengths of the outline.
- `opacity: f32 = 1.0`: 0 transparent to 1 opaque.
- `enter: Option<EnterAnim> = None`: How it appears; `None` shows it from the start.
- `exit: Option<ExitAnim> = None`: How it leaves at the end of its container; `None` stays.
- `emphasis: Option<Emphasis> = None`: An emphasis animation (`Indicate`, `Wiggle`, ..) played while it is shown.
- `fn shape(&self) -> Shape`: The path and paint as a `Shape`.

## Drag

The grabbing hand picks up its children at `from` at `start` seconds and carries them to `to` in `run_time` seconds. The open hand closes over `swap` seconds before the move and opens again after it; the children move with the cursor. The cursor fades in over `fade` seconds from the start of the container.

Page: https://fframes-kit.pages.dev/docs/media-and-overlays/cursors-emoji-sound-effects-and-gi-fs.md

- `from: (f32, f32) = (760.0, 540.0)`: Where the cursor picks the children up, in pixels of the canvas; the children keep their own place there.
- `to: (f32, f32) = (1160.0, 540.0)`: Where the cursor drops the children, in pixels of the canvas.
- `start: f32 = 0.6`: Second the carry starts, local to the parent container; the hand closes just before.
- `run_time: f32 = 0.9`: Seconds the carry takes.
- `motion: CursorMotion = CursorMotion::default()`: How the cursor travels from `from` to `to`: a smooth ease or a spring, arriving on time.
- `style: CursorStyle = CursorStyle::Dark`: Colours of the cursor: `Dark` (black with a white outline) or `Light` (white with a black outline).
- `size: f32 = 40.0`: Height in pixels of the 24 unit design.
- `swap: f32 = 0.12`: Seconds the hand takes to close before the move and to open after it.
- `fade: f32 = theme.motion.duration.fast`: Seconds the cursor takes to fade in from the start of its container.
- `children: Children = Box::new(|_| Svgr::empty())`: What is carried, drawn at its own place and moved by the cursor's offset (a closure taking the `Ui`).
- `fn position(&self, t: f32) -> (f32, f32)`: Where the cursor, and the offset of the children from where they were, is at `t`.
- `fn grip(&self, t: f32) -> f32`: How closed the hand is at `t`, from 0 (open) to 1.

## DrawOn

Any `Shape` drawn on from the start of its path, the stroke reveal of an underline, a tick or a hand-drawn arrow. It is `Create` on a shape you built: give the shape a `stroke` (and no `fill` for a line).

Page: https://fframes-kit.pages.dev/docs/media-and-overlays/data-audio-decoration-and-media.md

- `shape: Shape`: The shape to draw; give it a `stroke` (and no `fill` for a line).
- `delay: f32`: Seconds after the container's start before it begins.
- `run_time: f32`: Seconds the drawing takes.
- `rate_func: RateFunc`: Easing of the drawing over its run time.
- `fn new(ui: &Ui, shape: Shape) -> Self`: `shape` with the theme's `Create` timing.

## DropShadow

The theme's `shadow.card` as a filter definition: the drop shadow under a card. Draw it once, then use `filter={shadow.url()}` on the card.

Page: https://fframes-kit.pages.dev/docs/media-and-overlays/data-audio-decoration-and-media.md

- `id: Cow<str>`: The filter's id, unique in the frame.
- `shadow: Shadow`: The shadow the filter draws: colour (its alpha is the opacity), offset and blur.
- `fn url(&self) -> String`: `url(#id)`, the value of a `filter` attribute.

## Duotone

Its children in two colours: dark tones turn `dark` and light tones `light`, mixed with the original by `amount`.

Page: https://fframes-kit.pages.dev/docs/motion/effects.md

- `dark: Color = theme.colors.background`: Colour the dark tones turn.
- `light: Color = theme.colors.accent`: Colour the light tones turn.
- `amount: Anim<f32> = Anim::Fixed(1.0)`: 0 the original to 1 fully two-coloured.
- `key: Option<&str> = None`: Names the filter when two effects of this kind share a frame.
- `children: Children = ui::no_children()`: The content the filter is applied to (a closure taking the `Ui`).

## Editable

A component with an editor key, see the module docs.

Page: https://fframes-kit.pages.dev/docs/advanced/editable-props-fframes-studio.md

- `key: Cow<str>`: The key the editor stores this component's values under.
- `component: C`: The component whose props the key makes editable.
- `fn new(key: impl Into<Cow<str>>, component: C) -> Self`

## Elbow

Two lines that meet at a right angle, an L of `width` with its corner up and to the right of `(x, y)`, turned by `angle` about it (Manim `Elbow`).

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/shapes.md

- `x: f32 = 0.0`: X in pixels of the point the elbow is drawn from; its corner lies `width` up and to the right of it.
- `y: f32 = 0.0`: Y in pixels of the point the elbow is drawn from.
- `width: f32 = 27.0`: Length in pixels of each of the two lines.
- `angle: f32 = 0.0`: Rotation in radians about `(x, y)`, counterclockwise on screen.
- `fill: Option<Color> = Paint::outline(theme).fill`: `None` leaves the inside empty.
- `stroke: Option<Color> = Paint::outline(theme).stroke`: `None` draws no outline.
- `stroke_width: f32 = Paint::outline(theme).stroke_width`: Outline width in pixels.
- `dash: Option<(f32, f32)> = None`: Dash and gap lengths of the outline.
- `opacity: f32 = 1.0`: 0 transparent to 1 opaque.
- `enter: Option<EnterAnim> = None`: How it appears; `None` shows it from the start.
- `exit: Option<ExitAnim> = None`: How it leaves at the end of its container; `None` stays.
- `emphasis: Option<Emphasis> = None`: An emphasis animation (`Indicate`, `Wiggle`, ..) played while it is shown.
- `fn shape(&self) -> Shape`: The path and paint as a `Shape`.

## ElectricField

Manim-physics' `ElectricField`: an arrow at every grid point of `x_range` by `y_range` (units of `ui.space`) along the field of `charges`, `length(|E|)` units long and coloured by `|E|` from `colors[0]` at `min_magnitude` to the last colour at `max_magnitude`, like `ArrowVectorField`. Grid points closer than `clearance` units to a charge get no arrow. With `lines_per_charge` above 0 the field lines of `Field` are drawn too, and with `show_charges` every charge as a `ChargeGlow`.

Page: https://fframes-kit.pages.dev/docs/physics/electric-field-and-magnetic-field.md · feature `physics`

- `charges: Vec<Charge> = Vec::new()`: The charges that make the field; each has a position in units of `ui.space` and a signed strength.
- `x_range: Range = Range::new(-7.0, 7.0, 0.5)`: Grid columns of the arrows: `x` from min to max in steps, in units of `ui.space`; the field lines run half a unit beyond.
- `y_range: Range = Range::new(-4.0, 4.0, 0.5)`: Grid rows of the arrows: `y` from min to max in steps, in units of `ui.space`; the field lines run half a unit beyond.
- `arrows: bool = true`: Draws the arrow at every grid point.
- `length: fn(f64) -> f64 = sigmoid_length`: Length in units of `ui.space` of an arrow for a field of magnitude `|E|`.
- `colors: Vec<Color> = vec![theme.colors.muted, theme.colors.accent, theme.colors.highlight]`: Colour ramp of the arrows: the first colour at `min_magnitude`, the last at `max_magnitude`.
- `min_magnitude: f64 = 0.0`: Field magnitude that gets the first colour of `colors`.
- `max_magnitude: f64 = 2.0`: Field magnitude that gets the last colour of `colors`.
- `clearance: f64 = 0.3`: Grid points closer than this to a charge, in units of `ui.space`, get no arrow.
- `lines_per_charge: usize = 0`: Field lines traced out of each charge; 0 draws none.
- `line_color: Color = theme.colors.muted`: Colour of the field lines.
- `show_charges: bool = true`: Draws every charge as a `ChargeGlow`.
- `glow: bool = true`: Gives the charges a soft glow.
- `charge_radius: f32 = 26.0`: Charge disc radius in pixels for a charge of 1.
- `positive_color: Color = theme.colors.highlight`: Colour of positive charges.
- `negative_color: Color = theme.colors.accent`: Colour of negative charges.
- `stroke_width: f32 = theme.stroke.thin`: Width of the arrows and the field lines in pixels.
- `enter: Option<FadeIn> = None`: Fade in at the start; `None` for none.
- `exit: Option<FadeOut> = None`: Fade out before the end; `None` for none.
- `fn at(&self, x: f64, y: f64) -> (f64, f64)`: The field at `(x, y)`: the sum of `q r̂ / r²` over `charges`.

## ElementCard

One element as a card `size` pixels high centred at `center` (units of `ui.space`): its atomic number, symbol, name, atomic mass, electron configuration and Pauling electronegativity, arranged by `layout` and tinted with the colour of its `Category` (or `color` without `category_colors`). manim-chemistry's `MElementObject`.

Page: https://fframes-kit.pages.dev/docs/chemistry/element-card.md · feature `chemistry`

- `element: u32 = 6`: Atomic number of the element shown.
- `center: (f64, f64) = (0.0, 0.0)`: The middle of the card, in units of `ui.space`.
- `size: f32 = 320.0`: Height of the card in pixels; the `Square` layout is as wide, `Wide` is 2.2 times as wide, and the text scales with it.
- `layout: CardLayout = CardLayout::Square`: How the facts are arranged: `Square` (stacked) or `Wide` (tile with a list beside it).
- `category_colors: bool = true`: Tints the card with the colour of the element's category; `false` uses `color`.
- `color: Color = theme.colors.accent`: Tint of the card's background and border when `category_colors` is `false`.
- `text_color: Color = theme.colors.text`: Colour of the name, mass, configuration and number.
- `enter: Option<FadeIn> = None`: Fade in at the start; `None` for none.
- `exit: Option<FadeOut> = None`: Fade out before the end; `None` for none.

## ElementTile

One element as a tile `size` pixels wide centred at `center` (units of `ui.space`): its atomic number, symbol, name and atomic weight, tinted with the colour of its `Category` (or `color` without `category_colors`).

Page: https://fframes-kit.pages.dev/docs/chemistry/element-tile-and-periodic-table.md · feature `chemistry`

- `element: u32 = 6`: Atomic number of the element shown.
- `center: (f64, f64) = (0.0, 0.0)`: The middle of the tile, in units of `ui.space`.
- `size: f32 = 220.0`: Width and height of the tile in pixels; the text scales with it.
- `details: bool = true`: Writes the name and atomic weight under the symbol; `false` for the number and symbol only.
- `category_colors: bool = true`: Tints the tile with the colour of the element's category; `false` uses `color`.
- `color: Color = theme.colors.accent`: Tint of the tile's background and border when `category_colors` is `false`.
- `text_color: Color = theme.colors.text`: Colour of the number, name and weight.
- `enter: Option<FadeIn> = None`: Fade in at the start; `None` for none.
- `exit: Option<FadeOut> = None`: Fade out before the end; `None` for none.

## Ellipse

An ellipse in a `width` by `height` box (Manim `Ellipse`, Remotion `Ellipse`).

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/shapes.md

- `cx: f32 = 0.0`: Center x in pixels of the canvas.
- `cy: f32 = 0.0`: Center y in pixels of the canvas (y down).
- `width: f32 = 200.0`: Full width in pixels.
- `height: f32 = 100.0`: Full height in pixels.
- `fill: Option<Color> = Paint::outline(theme).fill`: `None` leaves the inside empty.
- `stroke: Option<Color> = Paint::outline(theme).stroke`: `None` draws no outline.
- `stroke_width: f32 = Paint::outline(theme).stroke_width`: Outline width in pixels.
- `dash: Option<(f32, f32)> = None`: Dash and gap lengths of the outline.
- `opacity: f32 = 1.0`: 0 transparent to 1 opaque.
- `enter: Option<EnterAnim> = None`: How it appears; `None` shows it from the start.
- `exit: Option<ExitAnim> = None`: How it leaves at the end of its container; `None` stays.
- `emphasis: Option<Emphasis> = None`: An emphasis animation (`Indicate`, `Wiggle`, ..) played while it is shown.
- `fn shape(&self) -> Shape`: The path and paint as a `Shape`.

## Emboss

A raised relief of repeated dashes pressed into its children (Remotion's `emboss()`): cells `size` units square, each holding a dash `line_width` wide, lit from `light_angle` (degrees counter-clockwise from the right, 135 the top left) so one side of each dash catches the light and the other falls into shadow. `depth` (0 to 1) is the height of the relief, `amount` (0 to 1) its strength, `angle` turns the pattern and `offset` scrolls it (animate it to move the relief). The source colours and transparency stay: the relief is a pattern over the `area` from the origin, masked by the children's alpha, so the children render twice.

Page: https://fframes-kit.pages.dev/docs/motion/effects.md

- `amount: Anim<f32> = Anim::Fixed(0.7)`: 0 to 1 strength of the relief. Animatable.
- `size: f32 = 26.0`: Side of one dash cell in the children's user units.
- `line_width: f32 = 7.0`: Width of each dash in the children's user units.
- `depth: f32 = 0.75`: 0 to 1 height of the relief; deeper dashes catch more light and shade.
- `angle: f32 = 0.0`: Degrees the dash pattern is turned.
- `light_angle: f32 = 135.0`: Degrees counter-clockwise from the right that the light comes from: 135 is the top left.
- `offset: f32 = 0.0`: Scrolls the pattern along its own horizontal axis, in user units; animate it to move the relief.
- `area: (f32, f32) = (1920.0, 1080.0)`: Width and height of the area the relief covers from the top left, in the children's user units.
- `key: Option<&str> = None`: Names the mask and pattern ids when two of these effects share a frame.
- `children: Children = no_children()`: The content that is embossed, by its alpha (a closure taking the `Ui`).
- `fn facing(&self) -> [f32; 4]`: How much each side of a dash faces the light, -1 to 1: top, bottom, left and right in the pattern's own turned frame.

## EnergyBars

Bars of kinetic energy, potential energy and their sum, standing on `(x, y)` (pixels, the bottom left corner) and `height` pixels tall at `max` joules. Give them the values of the current frame, for example from `PendulumMotion::energy` at the same clock as the figure, and the exchange shows as one bar shrinking while the other grows with the total level. The frames draw with `enter`, the bars and labels fade with `parts_enter`.

Page: https://fframes-kit.pages.dev/docs/physics/pendulum-and-energy-bars.md · feature `physics`

- `kinetic: f64 = 0.0`: Kinetic energy in joules shown by the first bar.
- `potential: f64 = 0.0`: Potential energy in joules shown by the second bar.
- `max: f64 = 1.0`: Joules at which a bar is `height` pixels tall; larger values are clamped.
- `x: f32 = 1400.0`: Left edge of the first bar, in pixels of the canvas.
- `y: f32 = 820.0`: Bottom edge of the bars (their baseline), in pixels of the canvas.
- `bar_width: f32 = 80.0`: Width of each bar in pixels.
- `gap: f32 = 40.0`: Pixels between one bar and the next.
- `height: f32 = 420.0`: Height in pixels of a full bar and its frame.
- `labels: bool = true`: Writes `KE`, `PE` and `E` at the foot of the three bars.
- `kinetic_color: Color = theme.colors.accent`: Colour of the kinetic bar and its share of the total.
- `potential_color: Color = theme.colors.highlight`: Colour of the potential bar and its share of the total.
- `total_color: Color = theme.colors.text`: Colour of the labels.
- `frame_color: Color = theme.colors.muted`: Colour of the outline frames of the bars.
- `enter: Option<EnterAnim> = None`: How the frames draw in; `None` shows them from the start.
- `exit: Option<ExitAnim> = None`: How the frames leave at the end of the container; `None` stays.
- `parts_enter: Option<FadeIn> = None`: How the bars and labels fade in; `None` for none.
- `parts_exit: Option<FadeOut> = None`: How the bars and labels fade out before the end; `None` for none.

## EnergyProfile

A reaction's energy along its progress: a flat start at `reactants`, a hump up to `transition`, a flat end at `products` (energies in `unit`), drawn `width` by `height` pixels around `center` (units of `ui.space`) with an energy axis and a progress axis. With `labels` the levels are named and arrows mark the activation energy and the enthalpy change. A `catalyst` peak adds a lower, dashed path that draws at `catalyst_at` seconds. The axes and the path draw with `enter`; the arrows and labels with `parts_enter`.

Page: https://fframes-kit.pages.dev/docs/chemistry/energy-profile.md · feature `chemistry`

- `reactants: f64 = 50.0`: Energy of the reactants, the flat start of the path, in `unit`.
- `transition: f64 = 150.0`: Energy at the top of the hump (the transition state), in `unit`; the activation energy is this less `reactants`.
- `products: f64 = 10.0`: Energy of the products, the flat end of the path, in `unit`; the enthalpy change is this less `reactants`.
- `catalyst: Option<f64> = None`: Energy at the top of a lower catalysed path, drawn dashed; `None` for no catalyst.
- `catalyst_at: f32 = 0.0`: Seconds after the container's start when the catalysed path draws.
- `unit: Cow<str> = Cow::Borrowed("kJ/mol")`: Energy unit written after the `Ea` and `∆H` values.
- `center: (f64, f64) = (0.0, 0.0)`: The middle of the plot, in units of `ui.space`.
- `width: f32 = 1100.0`: Width of the plot in pixels, axes included.
- `height: f32 = 620.0`: Height of the plot in pixels, axes included.
- `labels: bool = true`: Draws the `Ea` and `∆H` arrows and the level and axis names; `false` for the bare path.
- `axis_color: Color = theme.colors.muted`: Colour of the axes and the dashed level guide.
- `path_color: Color = theme.colors.accent`: Colour of the energy path.
- `catalyst_color: Color = Color::hex("#69db7c")`: Colour of the catalysed path.
- `arrow_color: Color = theme.colors.highlight`: Colour of the `Ea` and `∆H` arrows.
- `text_color: Color = theme.colors.text`: Colour of the labels.
- `stroke_width: f32 = theme.stroke.regular`: Width in pixels of the energy path lines.
- `enter: Option<EnterAnim> = None`: How the axes and the path draw; `None` shows them from the start.
- `exit: Option<ExitAnim> = None`: How the axes and the path leave at the end of the container; `None` stays.
- `parts_enter: Option<FadeIn> = None`: Fade in of the arrows and labels; `None` for none.
- `parts_exit: Option<FadeOut> = None`: Fade out of the arrows and labels before the end; `None` for none.
- `fn activation(&self) -> f64`: The activation energy: the transition state over the reactants.
- `fn enthalpy(&self) -> f64`: The enthalpy change: the products less the reactants, negative when it releases heat.

## EnzymeFit

An enzyme meeting its substrate: the substrate drifts in and settles into the active site on top of the enzyme (`scale` times about 300 by 300 pixels, around `center` in units of `ui.space`). With `induced` the site starts wider and closes round the substrate as it binds (induced fit); without it the site already has the substrate's shape (lock and key). Then the bond between the substrate's two halves flashes and breaks, the two products leave, and an induced-fit site opens again. From `delay`: the substrate arrives over 0.6..1.8 s, binds over 2..2.8 s, its bond glows from 3.4 s and breaks at 4.8 s, and the products are gone by 6.2 s. With `labels` the parts are named, and `captions` tells each step underneath.

Page: https://fframes-kit.pages.dev/docs/biology/enzyme-fit.md · feature `biology`

- `delay: f32 = 0.0`: Seconds after the container's start before the substrate starts to arrive.
- `center: (f64, f64) = (0.0, 0.0)`: The middle of the enzyme, in units of `ui.space`.
- `scale: f64 = 1.0`: Size factor on the figure; `1.0` is about 300 by 300 pixels.
- `induced: bool = true`: `true` for induced fit (the site starts wide and closes round the substrate); `false` for lock and key.
- `labels: bool = true`: Names the enzyme, active site, substrate and products when `true`.
- `captions: bool = true`: Tells each step in a line underneath when `true`.
- `enzyme_color: Color = Color::hex("#7950f2")`: Fill of the enzyme body.
- `site_color: Color = Color::hex("#b197fc")`: Colour the active site mixes toward while the substrate is bound.
- `product_colors: [Color; 2] = [Color::hex("#ffa94d"), Color::hex("#38d9a9")]`: Colours of the two substrate halves, which become the two products.
- `bond_color: Color = Color::hex("#ffe066")`: Colour the bond between the halves glows before it breaks.
- `label_style: TextStyle = theme.typography.caption`: The font of the part names: family, size in pixels and weight.
- `caption_style: TextStyle = theme.typography.body`: The font of the step captions: family, size in pixels and weight.
- `text_color: Color = theme.colors.text`: Colour of the names and captions.
- `muted_color: Color = theme.colors.muted`: Colour of the secondary text (the model name and the leader lines).
- `enter: Option<FadeIn> = None`: Fade in at the start; `None` for none.
- `exit: Option<FadeOut> = None`: Fade out before the end; `None` for none.

## Epicycles

A chain of turning circles whose end draws a closed path (Manim's `FourierCirclesScene`, the 3Blue1Brown Fourier series). `terms` come from `fourier`, largest first, and are placed with the series' center at `center` (units of `ui.space`, y up), `scale` units for one unit of the series. `turns` (a tracker) is how far the series has turned; the trace is what the end drew in the last `trace_length` turns (1 keeps one full turn, the whole drawing). The circles and vectors draw with `enter` and leave with `exit`; the trace stays, so wrap the figure in a fade to take it away too.

Page: https://fframes-kit.pages.dev/docs/math/epicycles.md · feature `math`

- `terms: &[Term] = &[]`: The circles, largest first, from `fourier`; each has a frequency, an amplitude and a phase.
- `center: (f64, f64) = (0.0, 0.0)`: Where the series' origin sits, in units of `ui.space` (y up).
- `scale: f64 = 1.0`: Units of `ui.space` for one unit of the series.
- `turns: ValueTracker = 0.0.into()`: How far the series has turned, in full turns of its slowest circle; a tracker to animate.
- `circles: bool = true`: Draws the outline of each circle when `true`.
- `vectors: bool = true`: Draws the arm of each circle, from its centre to its rim, when `true`.
- `circle_color: Color = theme.colors.muted`: Colour of the circle outlines.
- `vector_color: Color = theme.colors.text`: Colour of the arms.
- `trace_color: Color = theme.colors.highlight`: Colour of the path the end of the chain draws and of the dot at its head.
- `stroke_width: f32 = theme.stroke.thin`: Line width in pixels of the circles and arms.
- `trace_width: f32 = theme.stroke.thick`: Line width in pixels of the trace.
- `trace_length: f64 = 1.0`: How many turns of the end's path stay drawn; `1.0` keeps one full turn, the whole drawing.
- `enter: Option<EnterAnim> = None`: How the circles and arms appear; `None` shows them from the start.
- `exit: Option<ExitAnim> = None`: How the circles and arms leave at the end of its container; `None` stays (the trace stays regardless).

## Equilibrium

The concentrations of an `EquilibriumModel` as bars, `width` by `height` pixels around `center` (units of `ui.space`), reactants in `reactant_color` and products in `product_color`. The model's clock starts at `delay`. With `labels` each bar has its name under it and its concentration over it, and a line above compares `Q` with `K`: which way the reaction runs, or that it is at equilibrium. Up to `max` mol/L fits the height (the model's peak without one). The baseline draws with `enter`, the rest fades with `parts_enter`.

Page: https://fframes-kit.pages.dev/docs/chemistry/equilibrium.md · feature `chemistry`

- `model: Option<&EquilibriumModel> = None`: The `EquilibriumModel` whose concentrations are drawn; `None` draws nothing.
- `delay: f32 = 0.0`: Seconds after the container's start when the model's clock starts.
- `center: (f64, f64) = (0.0, 0.0)`: The middle of the bar area, in units of `ui.space`.
- `width: f32 = 900.0`: Width in pixels of the bar area, shared equally between the species.
- `height: f32 = 420.0`: Height in pixels of the bar area, the bar height at `max` mol/L.
- `max: Option<f64> = None`: Concentration in mol/L that fills the full height; `None` uses the model's highest concentration.
- `labels: bool = true`: Writes each species name and concentration and the `Q` against `K` line; `false` for bare bars.
- `reactant_color: Color = theme.colors.accent`: Colour of the bars of reactants (negative coefficient).
- `product_color: Color = theme.colors.highlight`: Colour of the bars of products (positive coefficient).
- `axis_color: Color = theme.colors.muted`: Colour of the baseline under the bars.
- `text_color: Color = theme.colors.text`: Colour of the names, concentrations and the `Q`/`K` line.
- `equal_color: Color = Color::hex("#69db7c")`: Colour of the `Q`/`K` line once the mixture is at equilibrium.
- `stroke_width: f32 = theme.stroke.regular`: Width in pixels of the baseline.
- `enter: Option<EnterAnim> = None`: How the baseline draws; `None` shows it from the start.
- `exit: Option<ExitAnim> = None`: How the baseline leaves at the end of the container; `None` stays.
- `parts_enter: Option<FadeIn> = None`: Fade in of the bars and labels; `None` for none.
- `parts_exit: Option<FadeOut> = None`: Fade out of the bars and labels before the end; `None` for none.

## Evolve

Its children revealed by an edge sweeping across the area (Remotion's `evolve()`): from the `direction` side, `progress` (0 hidden to 1 shown) of the way across, the edge softened over `feather` (0 to 1) of the area behind it.

Page: https://fframes-kit.pages.dev/docs/motion/effects.md

- `progress: Anim<f32> = Anim::Fixed(0.5)`: 0 hidden to 1 fully shown: how far the edge has swept across the area. Animatable.
- `direction: EvolveDirection = EvolveDirection::Left`: The side of the area the reveal starts from.
- `feather: f32 = 0.1`: 0 to 1 share of the area over which the edge softens behind `progress`; 0 for a hard edge.
- `area: (f32, f32) = (1920.0, 1080.0)`: Width and height of the area the sweep covers from the top left, in the children's user units.
- `key: Option<&str> = None`: Names the mask when two of these effects share a frame.
- `children: Children = no_children()`: The content that is revealed (a closure taking the `Ui`).
- `fn stops(&self, progress: f32) -> Vec<(f32, f32)>`: The mask along the sweep as `(offset, opacity)` stops at `progress`: shown up to `progress`, then a smoothstep down to hidden over `feather`.

## Exclusion

The area inside exactly one of `subject` and `clip` (Manim `Exclusion`).

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/shapes.md

- `subject: BezPath = BezPath::new()`: The first path, in pixels of the canvas.
- `clip: BezPath = BezPath::new()`: The second path; the overlap with `subject` is left empty.
- `fill: Option<Color> = Paint::solid(theme).fill`: `None` leaves the inside empty.
- `stroke: Option<Color> = Paint::solid(theme).stroke`: `None` draws no outline.
- `stroke_width: f32 = Paint::solid(theme).stroke_width`: Outline width in pixels.
- `dash: Option<(f32, f32)> = None`: Dash and gap lengths of the outline.
- `opacity: f32 = 1.0`: 0 transparent to 1 opaque.
- `enter: Option<EnterAnim> = None`: How it appears; `None` shows it from the start.
- `exit: Option<ExitAnim> = None`: How it leaves at the end of its container; `None` stays.
- `emphasis: Option<Emphasis> = None`: An emphasis animation (`Indicate`, `Wiggle`, ..) played while it is shown.
- `fn shape(&self) -> Shape`: The path and paint as a `Shape`.

## Exposure

Its children exposed brighter or darker by `stops`: every stop doubles the light.

Page: https://fframes-kit.pages.dev/docs/motion/effects.md

- `stops: Anim<f32> = Anim::Fixed(0.5)`: Photographic stops to brighten (positive) or darken (negative); each stop doubles the light.
- `key: Option<&str> = None`: Names the filter when two effects of this kind share a frame.
- `children: Children = ui::no_children()`: The content the filter is applied to (a closure taking the `Ui`).

## FadeTransform

`from` fades out while it moves onto `to`, and `to` fades in from where `from` was (Manim's `FadeTransform`). With `stretch` each takes the other's box exactly; without, its height.

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/geometry-animations.md

- `from: Shape`: The shape it starts as; drawn until `delay` has passed.
- `to: Shape`: The shape it ends as.
- `stretch: bool`: `true` stretches each shape to the other's box exactly; `false` scales by the height only.
- `delay: f32`: Seconds after the container's start before it begins.
- `run_time: f32`: Seconds the animation takes.
- `rate_func: RateFunc`: Easing of the animation over its run time.
- `fn new(from: Shape, to: Shape) -> Self`: Stretched, in Manim's 1 second, smooth.

## FadeTransformPieces

`FadeTransform` piece by piece (Manim's `FadeTransformPieces`): piece `i` of `from` goes to piece `i` of `to`. Manim splits pieces until the counts match; here the pieces over the shorter list fade out or in where they are.

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/geometry-animations.md

- `from: Vec<Shape>`: The pieces it starts as; piece `i` goes to piece `i` of `to`.
- `to: Vec<Shape>`: The pieces it ends as; extra pieces beyond the length of `from` fade in where they are.
- `stretch: bool`: `true` stretches each shape to the other's box exactly; `false` scales by the height only.
- `delay: f32`: Seconds after the container's start before it begins.
- `run_time: f32`: Seconds the animation takes.
- `rate_func: RateFunc`: Easing of the animation over its run time.
- `fn new(from: Vec<Shape>, to: Vec<Shape>) -> Self`: Stretched, in Manim's 1 second, smooth.

## FieldLines

The field lines of `field`, drawing on together over `draw` seconds from `delay` seconds after the local start, each with an arrowhead at its middle. Then, with `test_charge`, a small positive charge follows that line at `speed` units a second. The charges are drawn as circles with their sign and draw with `enter`; the lines and the test charge fade with `parts_enter`. Without `field` nothing is drawn.

Page: https://fframes-kit.pages.dev/docs/physics/field-lines.md · feature `physics`

- `field: Option<&Field> = None`: The traced field to draw, built once in the video's constructor; `None` draws nothing.
- `delay: f32 = 0.0`: Seconds after the local start before the lines begin to draw.
- `draw: f32 = 1.5`: Seconds the lines take to draw on, all together.
- `arrows: bool = true`: Draws an arrowhead at the middle of each line.
- `test_charge: Option<usize> = None`: Index of the line the small test charge follows after the lines are drawn; `None` for no test charge.
- `speed: f64 = 1.5`: Speed of the test charge along its line in units of `ui.space` per second.
- `charge_radius: f32 = 30.0`: Radius of the charge discs in pixels; the test charge is 0.4 times as big.
- `positive_color: Color = theme.colors.highlight`: Colour of positive charges.
- `negative_color: Color = theme.colors.accent`: Colour of negative charges.
- `line_color: Color = theme.colors.muted`: Colour of the field lines and their arrowheads.
- `test_color: Color = theme.colors.title`: Colour of the test charge.
- `stroke_width: f32 = theme.stroke.thin`: Width of the field lines in pixels.
- `enter: Option<EnterAnim> = None`: How the charges draw in; `None` shows them from the start.
- `exit: Option<ExitAnim> = None`: How the charges leave at the end of the container; `None` stays.
- `parts_enter: Option<FadeIn> = None`: How the lines, signs and the test charge fade in; `None` for none.
- `parts_exit: Option<FadeOut> = None`: How the lines and the test charge fade out before the end; `None` for none.

## Fill

A group covering the whole canvas, optionally on a background colour (Remotion's `AbsoluteFill`).

Page: https://fframes-kit.pages.dev/docs/basics/time-containers-and-fades.md

- `background: Option<Color> = None`: Colour painted behind the children; `None` for none.
- `children: Children = no_children()`: What it draws over the background, a closure taking the `Ui`.

## FitText

One line of text at the largest size, up to `style.size`, that fits into `max_width` pixels. It shrinks by `step` pixels down to `min_size`, where it stays even if it is still too wide. Without a measurable font it keeps `style.size`.

Page: https://fframes-kit.pages.dev/docs/text-and-formulas/text.md

- `text: Cow<str> = Cow::Borrowed("")`: The words, on one line.
- `x: f32 = 0.0`: The anchor point on the baseline.
- `y: f32 = 0.0`: Baseline of the text, in pixels of the canvas.
- `style: TextStyle = theme.typography.title`: The font: its size in pixels is the largest size tried; family and weight are kept.
- `max_width: f32 = 1600.0`: Widest the line may be, in pixels.
- `min_size: usize = 24`: Smallest font size in pixels it shrinks to, even if the text is still too wide.
- `step: usize = 4`: Pixels the font size shrinks by at each try (at least 1).
- `fill: Color = theme.colors.title`: Colour of the text.
- `anchor: TextAnchor = TextAnchor::Start`: Which point of the text sits at `x`: start, middle or end.
- `opacity: f32 = 1.0`: 0 transparent to 1 opaque.
- `fn size(&self, ui: &Ui) -> usize`: The font size the text is drawn at.

## Flannel

Plaid cloth printed on its children (Remotion's `flannel()`): wide and fine stripes of `stripe_color` across and down a `base_color` cloth, a check `size` units wide, shaded by the children's brightness and mixed in by `amount`. `softness` blurs the stripe edges. The children's alpha stays. Remotion's thread-level weave (a pixel-sized ripple) is left out. Drawn with an `feImage` of the plaid in a filter over the area.

Page: https://fframes-kit.pages.dev/docs/motion/effects.md

- `amount: Anim<f32> = Anim::Fixed(0.7)`: 0 the children unchanged to 1 fully plaid, shaded by their brightness. Animatable.
- `size: f32 = 96.0`: Width in the children's user units of one wide check; the fine stripes repeat at half of it.
- `softness: f32 = 0.18`: 0 to 1 blur of the stripe edges; 0 is crisp.
- `base_color: Color = Color::hex("#c92f3d")`: Colour of the cloth between the stripes.
- `stripe_color: Color = Color::hex("#241015")`: Colour of the stripes; crossings are drawn darker.
- `area: (f32, f32) = (1920.0, 1080.0)`: Width and height of the area the plaid covers from the top left, in the children's user units.
- `key: Option<&str> = None`: Names the filter ids when two of these effects share a frame.
- `children: Children = no_children()`: The content that is printed with plaid (a closure taking the `Ui`).

## FoodWeb

A food web of `species` and the arrows of `eats` (`(prey, predator)` by name, pointing the way energy flows), laid out in trophic levels with the producers at the bottom (the longest chain of food sets each level), `level_gap` pixels between levels and `slot` pixels between neighbours, centred on `center` (units of `ui.space`). Each species is a pill coloured by its level from `level_colors`, and the levels are named at the left from `level_names`. From `delay` the levels appear from the bottom one every `level_time` seconds, the arrows into each level drawing as it does; with `flow` dots of energy then run along every arrow. Names in `eats` that are not in `species` are left out.

Page: https://fframes-kit.pages.dev/docs/biology/food-web.md · feature `biology`

- `species: Vec<String>`: Names of the species, each drawn as a pill.
- `eats: Vec<(String, String)> = pairs .iter() .map(|&(a, b)| (a.to_owned(), b.to_owned())) .collect()`: `(prey, predator)` pairs by species name; each draws an arrow from prey to predator, the way energy flows.
- `delay: f32 = 0.0`: Seconds after the container's start before the bottom level appears.
- `level_time: f32 = 0.8`: Seconds between one trophic level appearing and the next above it.
- `center: (f64, f64) = (0.4, -0.35)`: The middle of the web, in units of `ui.space`.
- `level_gap: f32 = 150.0`: Pixels between neighbouring trophic levels.
- `slot: f32 = 230.0`: Pixels between neighbouring species on one level.
- `flow: bool = true`: Dots of energy run along every arrow once it is drawn when `true`.
- `level_colors: Vec<Color>`: Fill of the species pills by trophic level, producers first; the last colour repeats for higher levels.
- `level_names: Vec<String>`: Names written at the left of each level, producers first; a level past the end has no name.
- `arrow_color: Color = theme.colors.muted`: Colour of the arrows.
- `flow_color: Color = Color::hex("#ffe066")`: Colour of the energy dots.
- `name_style: TextStyle = name_style`: The font of the species names: family, size in pixels and weight.
- `level_style: TextStyle = theme.typography.caption`: The font of the level names: family, size in pixels and weight.
- `text_color: Color = Color::WHITE`: Colour of the species names.
- `level_color: Color = theme.colors.muted`: Colour of the level names.
- `enter: Option<FadeIn> = None`: Fade in at the start; `None` for none.
- `exit: Option<FadeOut> = None`: Fade out before the end; `None` for none.
- `fn levels(&self) -> Vec<usize>`: The trophic level of each of `species`: 0 for producers (they eat nothing here), otherwise one above the highest of their prey, so the longest food chain sets it. Feeding cycles stop climbing after one level per species.

## FormulaView

Draws a `Formula` (Manim's `MathTex` on screen).

Page: https://fframes-kit.pages.dev/docs/text-and-formulas/formulas.md · feature `latex`

- `of: &Formula`: The typeset formula to draw. A formula that was not typeset is drawn as plain `<text>` of its source.
- `size: f32`: Height in pixels of 10 pt text (the TeX default size).
- `x: f32`: Position of the `anchor` point of the formula in pixels of the canvas.
- `y: f32`: Position of the `anchor` point of the formula in pixels of the canvas.
- `anchor: Anchor`: The point of the formula's box at `(x, y)`.
- `color: Color`: Replaces black, the color of everything the source does not color itself.
- `color_map: &[(Part, Color)]`: Colors of single parts, over `color` and the source's colors.
- `opacity: f32`: 0 transparent to 1 opaque.
- `enter: Option<EnterAnim>`: How it appears; `None` shows it from the start.
- `exit: Option<ExitAnim>`: How it leaves at the end of its container; `None` stays.
- `emphasis: Option<Emphasis>`: An emphasis animation (`Indicate`, `Wiggle`, ..) played while it is shown.
- `emphasize: Option<Part>`: The part `emphasis` applies to; the whole formula when `None`.
- `key: Option<&str>`: Names it when two of the same kind share a frame.
- `fn new(of: &Formula) -> Self`
- `fn themed(self, t: &Theme) -> Self`: The same view with the theme's colors.
- `fn scale(&self) -> f64`: Pixels per TeX point.
- `fn transform(&self) -> Affine`: From TeX points to the canvas.
- `fn bounds(&self) -> Rect`: The box of the whole formula on the canvas, for a matcher around it.
- `fn part_bbox(&self, part: Part) -> Option<Rect>`: The box of a part on the canvas.
- `fn shapes(&self) -> Vec<Shape>`: One shape per glyph on the canvas, in drawing order.

## FractalNoise

Layered grey noise for clouds, smoke and organic textures (Remotion's `fractalNoise()`), drawn over its children where they are opaque and mixed in by `amount` (1 replaces the colours).

Page: https://fframes-kit.pages.dev/docs/motion/effects.md

- `fractal_type: FractalType = FractalType::Basic`: `Basic` for soft layered clouds, `Turbulent` for sharp ridges like smoke or marble veins.
- `scale: f32 = 100.0`: Size of the largest cells in the children's user units; bigger is broader clouds.
- `complexity: u32 = 6`: Number of layers of detail, 1 to 10; each is half the size and half the strength of the one before.
- `evolution: Anim<f32> = Anim::Fixed(0.0)`: Degrees that morph the texture in place; each full turn moves on to the next seed, cross-fading on the way. Animatable.
- `cycle_evolution: bool = false`: `true` repeats the seeds after `cycle` turns of `evolution` so the texture loops.
- `cycle: u32 = 1`: Turns of `evolution` after which the seeds repeat when `cycle_evolution` is on; at least 1.
- `contrast: f32 = 1.0`: Stretches the greys about mid grey: 1 unchanged, 0 flat grey, above 1 harder.
- `brightness: f32 = 0.0`: Added to the greys after `contrast`: 0 unchanged, positive lighter, negative darker (about -0.5 to 0.5).
- `offset_x: f32 = 0.0`: Horizontal shift of the texture in the children's user units.
- `offset_y: f32 = 0.0`: Vertical shift of the texture in the children's user units.
- `seed: u32 = 0`: Picks the texture; the same seed draws the same one.
- `invert: bool = false`: `true` flips the greys, light for dark.
- `amount: Anim<f32> = Anim::Fixed(1.0)`: 0 the children unchanged to 1 the opaque pixels fully replaced by the noise. Animatable.
- `area: (f32, f32) = (1920.0, 1080.0)`: Width and height of the area the noise covers from the top left, in the children's user units.
- `key: Option<&str> = None`: Names the filter and mask ids when two of these effects share a frame.
- `children: Children = no_children()`: The content the noise is drawn over, only where it is opaque (a closure taking the `Ui`).
- `fn seeds(&self, evolution: f32) -> (u32, u32, f32)`: The two seeds `evolution` degrees cross-fades between, and how far it is from the first to the second.

## FractionBar

A bar of `width` x `height` pixels at `(x, y)` (top left) cut into `denominator` equal parts, of which the first `numerator` fill one after another. Bars of the same width stacked under each other show equal fractions lining up (`1/2`, `2/4`, `4/8`). The outline and the cuts draw with `enter`; with `label` the fraction is written left of the bar.

Page: https://fframes-kit.pages.dev/docs/math/fraction-bar-and-fraction-pie.md · feature `math`

- `numerator: usize = 1`: Number of parts that fill.
- `denominator: usize = 2`: Number of equal parts the bar is cut into; `0` draws nothing.
- `x: f32 = 560.0`: Left edge of the bar, in pixels of the canvas.
- `y: f32 = 500.0`: Top edge of the bar, in pixels of the canvas.
- `width: f32 = 800.0`: Width of the whole bar in pixels.
- `height: f32 = 80.0`: Height of the bar in pixels.
- `color: Color = theme.colors.accent`: Fill of the filled parts.
- `stroke: Color = theme.colors.text`: Colour of the outline and the cuts.
- `stroke_width: f32 = theme.stroke.regular`: Outline width in pixels.
- `delay: f32 = 0.0`: Seconds after the container's start before the first part fills.
- `stagger: f32 = 0.15`: Seconds between one part starting to fill and the next.
- `run_time: f32 = theme.motion.duration.base`: Seconds each part takes to fill.
- `rate_func: RateFunc = RateFunc::default()`: Easing of each part's fill over its run time.
- `label: bool = true`: Writes the fraction left of the bar when `true`.
- `label_style: TextStyle = theme.typography.body`: The font of the fraction: family, size in pixels and weight.
- `enter: Option<EnterAnim> = None`: How the outline and the cuts appear; `None` shows them from the start.

## FractionPie

A circle of `radius` pixels around `(cx, cy)` cut into `denominator` equal slices from the top, clockwise, of which the first `numerator` fill one after another. With `label` the fraction is written under the circle.

Page: https://fframes-kit.pages.dev/docs/math/fraction-bar-and-fraction-pie.md · feature `math`

- `numerator: usize = 1`: Number of slices that fill.
- `denominator: usize = 4`: Number of equal slices the circle is cut into; `0` draws nothing.
- `cx: f32 = 960.0`: Centre of the circle, x in pixels of the canvas.
- `cy: f32 = 540.0`: Centre of the circle, y in pixels of the canvas.
- `radius: f32 = 200.0`: Radius of the circle in pixels.
- `color: Color = theme.colors.highlight`: Fill of the filled slices.
- `stroke: Color = theme.colors.text`: Colour of the outline and the cuts.
- `stroke_width: f32 = theme.stroke.regular`: Outline width in pixels.
- `delay: f32 = 0.0`: Seconds after the container's start before the first slice fills.
- `stagger: f32 = 0.15`: Seconds between one slice starting to fill and the next.
- `run_time: f32 = theme.motion.duration.base`: Seconds each slice takes to fill.
- `rate_func: RateFunc = RateFunc::default()`: Easing of each slice's fill over its run time.
- `label: bool = true`: Writes the fraction under the circle when `true`.
- `label_style: TextStyle = theme.typography.body`: The font of the fraction: family, size in pixels and weight.
- `enter: Option<EnterAnim> = None`: How the outline and the cuts appear; `None` shows them from the start.

## FreeBody

A free-body diagram: a block at `center` (units of `ui.space`) with its `forces` drawn from its middle, `scale` units per newton. The arrows grow one after another from `delay` seconds after the local start, each over `grow` seconds and `stagger` seconds after the one before, with their names (and magnitudes, with `magnitudes`) at the tips. With `net` the sum of the forces follows as a dashed arrow, or `net = 0` under the block when they balance; `net_name` names it. The block draws with `enter`, the arrows and labels with `parts_enter`.

Page: https://fframes-kit.pages.dev/docs/physics/free-body.md · feature `physics`

- `forces: Vec<Force> = Vec::new()`: The forces on the block, each with a name and components in newtons (`y` up).
- `center: (f64, f64) = (0.0, 0.0)`: The middle of the block, where the arrows start, in units of `ui.space`.
- `scale: f64 = 0.5`: Units of `ui.space` per newton.
- `size: f32 = 160.0`: Side of the square block in pixels.
- `delay: f32 = 0.0`: Seconds after the local start before the first arrow starts to grow.
- `grow: f32 = 0.6`: Seconds each arrow takes to grow.
- `stagger: f32 = 0.5`: Seconds between the start of one arrow and the next.
- `net: bool = true`: Draws the sum of the forces as a dashed arrow after the others, or `net = 0` under the block when they balance.
- `net_name: &str = "net"`: The name in the net force's label, "net = 4 N".
- `labels: bool = true`: Writes each force's name at its tip.
- `magnitudes: bool = true`: Adds the magnitude in newtons to each label.
- `block_color: Color = theme.colors.muted`: Colour of the block.
- `force_color: Color = theme.colors.accent`: Colour of the force arrows that have no colour of their own.
- `net_color: Color = theme.colors.highlight`: Colour of the net force arrow and its label.
- `text_color: Color = theme.colors.text`: Colour of the force labels; the net force's label takes `net_color`.
- `stroke_width: f32 = theme.stroke.regular`: Width of the arrow shafts in pixels.
- `enter: Option<EnterAnim> = None`: How the block draws in; `None` shows it from the start.
- `exit: Option<ExitAnim> = None`: How the block leaves at the end of the container; `None` stays.
- `parts_enter: Option<FadeIn> = None`: How the arrows and labels fade in; `None` for none.
- `parts_exit: Option<FadeOut> = None`: How the arrows and labels fade out before the end; `None` for none.
- `fn net_force(&self) -> (f64, f64)`: The sum of the forces in newtons.
- `fn start_of(&self, i: usize) -> f32`: Seconds after the local start when force `i` starts to grow; `forces.len()` gives the start of the net force.

## Freeze

Shows its children frozen at `at` seconds of their local time.

Page: https://fframes-kit.pages.dev/docs/basics/time-containers-and-fades.md

- `at: f32 = 0.0`: Seconds of the children's local time to show, whatever the frame.
- `children: Children = no_children()`: What it draws, frozen at `at`; a closure taking the `Ui`.

## FullScreenRectangle

A rectangle over the whole 1920 x 1080 canvas (Manim `FullScreenRectangle`).

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/shapes.md

- `cx: f32 = 960.0`: Center x in pixels of the canvas.
- `cy: f32 = 540.0`: Center y in pixels of the canvas (y down).
- `height: f32 = 1080.0`: Height in pixels; the width is `height * aspect_ratio`.
- `aspect_ratio: f32 = 16.0 / 9.0`: Width divided by height.
- `fill: Option<Color> = Paint::outline(theme).fill`: `None` leaves the inside empty.
- `stroke: Option<Color> = Paint::outline(theme).stroke`: `None` draws no outline.
- `stroke_width: f32 = Paint::outline(theme).stroke_width`: Outline width in pixels.
- `dash: Option<(f32, f32)> = None`: Dash and gap lengths of the outline.
- `opacity: f32 = 1.0`: 0 transparent to 1 opaque.
- `enter: Option<EnterAnim> = None`: How it appears; `None` shows it from the start.
- `exit: Option<ExitAnim> = None`: How it leaves at the end of its container; `None` stays.
- `emphasis: Option<Emphasis> = None`: An emphasis animation (`Indicate`, `Wiggle`, ..) played while it is shown.
- `fn shape(&self) -> Shape`: The path and paint as a `Shape`.

## FunctionGraph

The graph of `f` from `x_range.0` to `x_range.1` on axes (Manim `axes.plot(f)`), usually built with `Axes::plot`. Its samples are cached; a function that is not finite somewhere leaves a gap there.

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/coordinate-systems.md

- `f: Func = |x| x`: The function `y = f(x)` in data units; a plain `fn`, so its samples can be cached. Where it is not finite the graph has a gap.
- `x_range: (f64, f64) = (-1.0, 1.0)`: The first and last `x` plotted, in data units.
- `axes: AxesMap = AxesMap::default()`: The mapping of the axes the graph sits on (`axes.map(ui)`, or built by `Axes::plot`).
- `samples: usize = 256`: Straight pieces of the sampled curve before smoothing.
- `fill: Option<Color> = Paint::outline(theme).fill`: `None` leaves the inside empty.
- `stroke: Option<Color> = Paint::outline(theme).stroke`: `None` draws no outline.
- `stroke_width: f32 = Paint::outline(theme).stroke_width`: Outline width in pixels.
- `dash: Option<(f32, f32)> = None`: Dash and gap lengths of the outline.
- `opacity: f32 = 1.0`: 0 transparent to 1 opaque.
- `enter: Option<EnterAnim> = None`: How it appears; `None` shows it from the start.
- `exit: Option<ExitAnim> = None`: How it leaves at the end of its container; `None` stays.
- `emphasis: Option<Emphasis> = None`: An emphasis animation (`Indicate`, `Wiggle`, ..) played while it is shown.
- `fn shape(&self) -> Shape`: The path and paint as a `Shape`.
- `fn point(&self, x: f64) -> (f32, f32)`: The pixel on the graph above `x` (Manim `input_to_graph_point`, `i2gp`).

## FunctionPlot

Axes with a graph, its label and a tracer: a dot that follows a `ValueTracker` along the graph, a dashed line down to the x-axis and the point's coordinates (Manim's plot with an `always_redraw` dot). Build `graph` with `Axes::plot` on the same axes.

Page: https://fframes-kit.pages.dev/docs/math/function-plot.md · feature `math`

- `axes: Axes = Axes::themed(theme)`: The axes the graph is drawn on.
- `graph: FunctionGraph = FunctionGraph::themed(theme)`: The curve, built with `Axes::plot` on the same axes.
- `label: Cow<str> = Cow::Borrowed("")`: Written next to the graph at `label_at`, empty for none.
- `label_at: f64 = 0.0`: The x, in the axes' coordinates, where the label sits on the graph.
- `label_direction: Anchor = Anchor::TopRight`: Which side of that point the label is placed on.
- `label_enter: Option<FadeIn> = None`: How the label appears; `None` shows it from the start.
- `tracer: Option<ValueTracker> = None`: `x` of the tracer, `None` for no tracer.
- `decimals: usize = 2`: Decimals of the coordinates written at the tracer.
- `tracer_color: Color = theme.colors.highlight`: Colour of the tracer dot, its dashed line and its coordinates.
- `tracer_enter: Option<FadeIn> = None`: Fade in of the tracer at the start; `None` for none.
- `tracer_exit: Option<FadeOut> = None`: Fade out of the tracer before the end; `None` for none.

## GasBox

A box of gas: the particles of `motion` in a box whose middle is at `center` (units of `ui.space`, `scale` units per meter), drawn slow in `slow_color` and faster than the start's root mean square speed in `fast_color`, so heating turns the box to the fast colour. With `thermometer` a bar right of the box shows the temperature against the highest one, and with `labels` its factor over the start. The box and the thermometer's frame draw with `enter`, the particles and the level with `parts_enter`. Without `motion` nothing is drawn.

Page: https://fframes-kit.pages.dev/docs/physics/gas-box.md · feature `physics`

- `motion: Option<&GasMotion> = None`: The simulated particles to draw, built once in the video's constructor; `None` draws nothing.
- `center: (f64, f64) = (0.0, 0.0)`: The middle of the box, in units of `ui.space`.
- `scale: f64 = 1.0`: Units of `ui.space` per meter.
- `delay: f32 = 0.0`: Seconds after the container's start before the particles start to move.
- `time_scale: f32 = 1.0`: Speed of the motion over local time; 2 runs twice as fast, 1 is real time.
- `thermometer: bool = true`: Draws a bar right of the box that fills with the temperature, up to the highest one the motion reaches.
- `labels: bool = true`: Writes the temperature factor over the start (`T × 1.5`) above the thermometer.
- `box_color: Color = theme.colors.text`: Colour of the box walls and the thermometer frame and label.
- `slow_color: Color = theme.colors.accent`: Colour of particles at or below the start's root mean square speed.
- `fast_color: Color = theme.colors.highlight`: Colour of faster particles and of the thermometer's level.
- `stroke_width: f32 = theme.stroke.regular`: Width of the box walls in pixels.
- `enter: Option<EnterAnim> = None`: How the box and the thermometer frame draw in; `None` shows them from the start.
- `exit: Option<ExitAnim> = None`: How the box and the thermometer frame leave at the end of the container; `None` stays.
- `parts_enter: Option<FadeIn> = None`: How the particles and the level fade in; `None` for none.
- `parts_exit: Option<FadeOut> = None`: How the particles and the level fade out before the end; `None` for none.

## GaussianEllipse

A 2D normal distribution drawn as its ellipses of equal density (`ManimML`'s `GaussianDistribution`): a ring `sigmas` standard deviations from the mean for each entry, in `color`, each filled at `fill_opacity` (the inner rings stack up darker), the mean as a dot and, with `show_axes`, the principal axes out to the outer ring. On `axes`; draw the `Axes` after it. With `stagger` the rings appear one after the other from `start`, the innermost first.

Page: https://fframes-kit.pages.dev/docs/machine-learning/normal-distributions-and-mcmc.md · feature `ml`

- `gaussian: Gaussian2D = Gaussian2D::default()`: The 2D normal distribution (mean and covariance) whose ellipses are drawn.
- `axes: AxesMap = AxesMap::default()`: The axes to draw on, mapping data values to the canvas.
- `sigmas: Vec<f64> = vec![1.0, 2.0, 3.0]`: Standard deviations from the mean at which a ring is drawn, one ring per entry.
- `color: Color = theme.colors.accent`: Colour of the rings, their fill, the mean dot and the principal axes.
- `fill_opacity: f32 = 0.12`: 0 transparent to 1 opaque, of each ring's fill; inner rings stack up darker.
- `stroke_width: f32 = 2.5`: Width in pixels of the ring outlines; the mean dot scales with it.
- `show_axes: bool = false`: Draws the principal axes of the distribution out to the outer ring.
- `start: f32 = 0.0`: Seconds after the container's start when the first ring begins to appear.
- `stagger: f32 = 0.0`: Seconds between one ring appearing and the next, innermost first; 0 shows all rings from the start.
- `enter: Option<FadeIn> = None`: Fade in at the start; `None` for none.
- `exit: Option<FadeOut> = None`: Fade out before the end; `None` for none.

## Gif

An animated GIF in the box `(x, y, width, height)`, playing from `start` seconds of its container at `speed`. Each frame shows for its own delay (a delay under 20 ms is 100 ms, as in browsers); with `looping` it starts again, otherwise the last frame stays. It fades in over `fade` seconds. Decode the file once with `Gif::decode` and keep the `GifData` in the video. The editor (wasm32) draws a `placeholder` rectangle of the same size.

Page: https://fframes-kit.pages.dev/docs/media-and-overlays/cursors-emoji-sound-effects-and-gi-fs.md

- `gif: &GifData = &NO_GIF`: The decoded GIF from `Gif::decode`; the default one draws nothing.
- `x: f32 = 0.0`: Left edge of the box in pixels of the canvas.
- `y: f32 = 0.0`: Top edge of the box in pixels of the canvas.
- `width: f32 = 320.0`: Width of the box in pixels.
- `height: f32 = 320.0`: Height of the box in pixels.
- `fit: GifFit = GifFit::Fill`: How the GIF fills the box: stretched, contained or covering.
- `start: f32 = 0.0`: Second it starts playing, local to the parent container.
- `speed: f32 = 1.0`: Playback speed; 1 is normal, 2 twice as fast.
- `looping: bool = true`: Plays again and again; `false` keeps the last frame.
- `fade: f32 = theme.motion.duration.fast`: Seconds it takes to fade in from `start`.
- `placeholder: Color = theme.colors.surface`: Colour of the rectangle the editor draws in place of the GIF.
- `fn decode(bytes: &[u8]) -> Result<GifData, GifError>`: Decodes every frame of a GIF file, composited onto the frames before it, and turns each into an image once. Call it in the video's constructor, not per frame.
- `fn frame_at(&self, t: f32) -> usize`: The frame shown at `t` seconds of the container.

## Glow

The theme's `shadow.glow` as a filter definition: a soft halo in the accent colour. Draw it once, then use `filter={glow.url()}` on what should glow.

Page: https://fframes-kit.pages.dev/docs/media-and-overlays/data-audio-decoration-and-media.md

- `id: Cow<str>`: The filter's id, unique in the frame.
- `shadow: Shadow`: The shadow the filter draws: colour (its alpha is the opacity), offset and blur.
- `fn url(&self) -> String`: `url(#id)`, the value of a `filter` attribute.

## Graph

Vertices joined by edges (Manim `Graph`), placed by `layout` within `layout_scale` units of `center` (the layout is computed once and cached). Vertices are dots `radius` units wide; with `labels` they carry their names and grow to hold them. Edges are straight, or bent by `edge_bend` pixels. `vertex_styles` and `edge_styles` change single vertices and edges. `DiGraph` draws the same with tips on the edges.

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/coordinate-systems.md

- `vertices: Vec<Cow<str>> = Vec::new()`: The vertex names; edges refer to a vertex by its index here, and `labels` writes the names inside the dots.
- `edges: Vec<(usize, usize)> = Vec::new()`: Pairs of vertex indices `(from, to)`; an edge to the same vertex or to a missing one is skipped.
- `layout: GraphLayout = GraphLayout::default()`: How the vertices are placed: circular, spring, tree, shell and so on.
- `layout_scale: f64 = 2.0`: How far from `center` the layout reaches, in units of `ui.space`.
- `center: (f64, f64) = (0.0, 0.0)`: The middle of the layout, in units of `ui.space`.
- `labels: bool = false`: Writes each vertex's name inside its dot, which grows to hold it.
- `radius: f64 = 0.1`: Radius of a vertex dot in units of `ui.space`.
- `vertex_fill: Color = theme.colors.text`: Colour of the vertex dots.
- `vertex_stroke: Option<Color> = None`: Outline colour of the vertex dots; `None` draws no outline.
- `label_style: TextStyle = theme.typography.body`: The font of the vertex names: family, size in pixels and weight.
- `label_fill: Color = theme.colors.background`: Colour of the vertex names.
- `edge_color: Color = theme.colors.text`: Colour of the edges and their tips.
- `edge_width: f32 = theme.stroke.regular`: Width of the edges in pixels.
- `edge_bend: f64 = 0.0`: Pixels the middle of an edge bows to its left; 0 is straight.
- `tip_length: f64 = 16.0`: Length of the arrow tip of a `DiGraph` edge in pixels.
- `vertex_styles: Vec<VertexStyle> = Vec::new()`: Looks that replace the graph's for single vertices.
- `edge_styles: Vec<EdgeStyle> = Vec::new()`: Looks that replace the graph's for single edges, and their labels.
- `enter: Option<EnterAnim> = None`: How the vertices and edges appear (`Create`, `GrowFromCenter`, ..); `None` shows them from the start.
- `exit: Option<ExitAnim> = None`: How the vertices and edges leave at the end of their container; `None` stays.
- `labels_enter: Option<FadeIn> = None`: Fade the vertex names and edge labels in at the start; `None` for none.
- `labels_exit: Option<FadeOut> = None`: Fade the vertex names and edge labels out before the end; `None` for none.
- `fn new(ui: &Ui, vertices: &[&str], edges: &[(usize, usize)]) -> Self`: A graph of these vertices and edges with the theme's look and the spring layout.
- `fn layout_positions(&self) -> Arc<[(f64, f64)]>`: The layout's positions in units around the origin, computed once per layout, vertex count, edges and scale.
- `fn vertex_point(&self, space: Space, v: usize) -> Option<Point>`: Where vertex `v` is, in pixels of `space` (Manim `graphv.get_center()`).

## GraphMolecule

Manim-chemistry's `GraphMolecule` with the animations of its `GMAnimationBuilder`: every atom of `structure` as a ring with its symbol, carbons too, and the bonds as lines (doubles and triples as two and three), around `center` (units of `ui.space`) with `bond_length` pixels between bonded atoms.

Page: https://fframes-kit.pages.dev/docs/chemistry/graph-molecule.md · feature `chemistry`

- `structure: Option<&Structure> = None`: The molecule to draw (from SMILES, a molfile or built by hand); `None` draws nothing.
- `center: (f64, f64) = (0.0, 0.0)`: The middle of the molecule's coordinates, in units of `ui.space`.
- `bond_length: f32 = 110.0`: Pixels per bond length of the structure's coordinates.
- `atom_radius: f32 = 24.0`: Radius in pixels of an atom ring, before the depth scaling of a turn.
- `elevation: f32 = 15.0`: Degrees the view looks down from above the page: 0 is straight on, where atoms in line hide each other.
- `rotations: Vec<BondRotation> = Vec::new()`: Turns of the part of the molecule beyond a bond; empty for none.
- `recolors: Vec<Recolor> = Vec::new()`: Colour changes of atoms and bonds over time; empty for none.
- `highlights: Vec<GroupHighlight> = Vec::new()`: Soft colour bands behind groups of atoms, fading in over time; empty for none.
- `color_atoms: bool = true`: Colours each ring and symbol by its element; `false` uses `bond_color` for all.
- `bond_color: Color = theme.colors.text`: Colour of the bonds, and of the atoms when `color_atoms` is `false`.
- `atom_fill: Color = theme.colors.surface`: Fill colour inside the atom rings.
- `stroke_width: f32 = theme.stroke.regular`: Width in pixels of the bonds and atom rings.
- `enter: Option<FadeIn> = None`: Fade in at the start; `None` for none.
- `exit: Option<FadeOut> = None`: Fade out before the end; `None` for none.

## GraphView

A graph search: round nodes `radius` pixels with their names, `spacing` pixels between slots and `level` pixels between layers, centred on `center` (units of `ui.space`). It plays a `GraphTrace`, one step every `step_time` seconds from `delay`: the current node lights up, nodes waiting in the frontier take `colors.moved`, finished ones `colors.sorted`, the edge followed lights up and the search tree's edges thicken. A long edge bends round the nodes in its way, and the two edges of a pair that point both ways bend apart. With `curved` every edge is an arc. A backward edge of a directed graph (one that points up against the layers, or left within a layer) always curves, wide enough to pass beside the forward edges instead of over them. Weights sit on the middle of their edge, on a small `weight_fill` plate. Distances (Dijkstra) are written above the nodes, the frontier (`queue: A, B`) and the note under the graph. The whole figure fades with `enter` and `exit`.

Page: https://fframes-kit.pages.dev/docs/computer-science/graph-graph-trace-and-graph-view.md · feature `cs`

- `trace: Option<&GraphTrace> = None`: The recorded search steps to play (`GraphTrace`); `None` draws nothing.
- `delay: f32 = 0.0`: Seconds after the container's start before the first step.
- `step_time: f32 = 0.8`: Seconds each step of the trace takes.
- `center: (f64, f64) = (0.0, 0.0)`: The middle of the graph, in units of `ui.space`.
- `spacing: f32 = 170.0`: Pixels between neighbouring node slots in a layer.
- `level: f32 = 150.0`: Pixels between layers.
- `radius: f32 = 34.0`: Radius of a node in pixels.
- `frontier: bool = true`: Whether the frontier (`queue: A, B`) is written under the graph.
- `notes: bool = true`: Whether the step's note is written under the graph.
- `curved: bool = false`: Every edge an arc, not only the backward ones and the pairs.
- `colors: CellColors = CellColors::themed(theme)`: Colours of the nodes in each state (current, waiting, finished).
- `edge_color: Color = theme.colors.muted`: Colour of the edges.
- `tree_color: Color = theme.colors.accent`: Colour of the edges of the search tree built so far.
- `active_color: Color = theme.colors.highlight`: Colour of the edge being followed.
- `dist_color: Color = theme.colors.highlight`: Colour of the distances written above the nodes.
- `weight_fill: Color = theme.colors.background`: The plate behind a weight, so the edge does not run through the digits.
- `value_style: TextStyle = value_style`: The font of the node names and weights.
- `small_style: TextStyle = theme.typography.caption`: The font of the distances, frontier and notes.
- `enter: Option<FadeIn> = None`: Fade in at the start; `None` for none.
- `exit: Option<FadeOut> = None`: Fade out before the end; `None` for none.

## Grayscale

Its children in grey (CSS `grayscale()`): `amount` 1 fully grey.

Page: https://fframes-kit.pages.dev/docs/motion/effects.md

- `amount: Anim<f32> = Anim::Fixed(1.0)`: 0 unchanged to 1 fully grey.
- `key: Option<&str> = None`: Names the filter when two effects of this kind share a frame.
- `children: Children = ui::no_children()`: The content the filter is applied to (a closure taking the `Ui`).

## Gridlines

A square grid of lines over its children (Remotion's `gridlines()`): lines `line_width` units wide in `line_color`, `grid_size` units apart, over a `background_color` (transparent by default). `rotation` turns the grid about the middle of the area in degrees and `offset_x`, `offset_y` move it; with `mask_to_source_alpha` it covers only the opaque parts of the children (which then render twice). Remotion's `rotationX`, `rotationY` and `perspective` tilt the grid in 3D, which SVG cannot draw; they are not available.

Page: https://fframes-kit.pages.dev/docs/motion/effects.md

- `grid_size: f32 = 64.0`: Distance between line middles in the children's user units.
- `line_width: f32 = 2.0`: Width of each line in user units; 0 draws none.
- `line_color: Color = Color::WHITE`: Colour of the lines.
- `background_color: Color = Color::TRANSPARENT`: Colour filled between the lines; transparent shows the children.
- `rotation: f32 = 0.0`: Degrees the grid is turned about the middle of the area.
- `offset_x: f32 = 0.0`: Horizontal shift of the grid in user units.
- `offset_y: f32 = 0.0`: Vertical shift of the grid in user units.
- `mask_to_source_alpha: bool = false`: `true` covers only the opaque parts of the children, which then render twice.
- `area: (f32, f32) = (1920.0, 1080.0)`: Width and height of the area the grid covers from the top left, in the children's user units.
- `key: Option<&str> = None`: Names the clip and mask ids when two grids share a frame.
- `children: Children = no_children()`: The content the grid is laid over (a closure taking the `Ui`).

## Halftone

Its children printed as a grid of dots (Remotion's `halftone()`): a dot every `dot_spacing` units (`dot_size` when `None`), as large as `dot_size` where the children are black and shrinking to nothing where they are white or transparent (the other way round with `invert`). The grid is centred on the area, turned by `rotation` degrees clockwise and moved by `offset`. Dots are `dot_color` or, with `HalftoneColor::Source`, the children's colours; they replace the children.

Page: https://fframes-kit.pages.dev/docs/motion/effects.md

- `shape: HalftoneShape = HalftoneShape::Circle`: `Circle`, `Square`, or `Line` stripes as long as the area and as thick as a dot.
- `dot_size: f32 = 20.0`: Width of the largest dot in the children's user units, reached where the children are black.
- `dot_spacing: Option<f32> = None`: Distance between dot centers in user units; `None` uses `dot_size`. Below `dot_size` later dots overdraw earlier ones.
- `rotation: f32 = 0.0`: Degrees the grid is turned clockwise about the middle of the area.
- `offset: (f32, f32) = (0.0, 0.0)`: `(x, y)` shift of the grid in user units; it is taken off the centered position, so positive values move the dots left and up.
- `color: HalftoneColor = HalftoneColor::Solid`: `Solid` paints the dots `dot_color`; `Source` takes the children's colours under each dot.
- `dot_color: Color = Color::rgb(0xff, 0, 0)`: Colour of the dots when `color` is `Solid`; its alpha is kept.
- `invert: bool = false`: `true` makes dots grow where the children are white instead of black.
- `area: (f32, f32) = (1920.0, 1080.0)`: Width and height of the area the grid covers from the top left, in the children's user units.
- `key: Option<&str> = None`: Names the filter and gradient ids when two halftones share a frame.
- `children: Children = no_children()`: The content that is printed as dots (a closure taking the `Ui`).

## HalftoneLinearGradient

Dots growing along a gradient over its children (Remotion's `halftoneLinearGradient()`): a dot every `grid_size` units, centred on the area, `first_dot_size` wide at `first_stop` growing to `second_dot_size` at `second_stop` (0 to 1 across the area). Solid dots in `dot_color` are laid over the children, only over their opaque parts with `mask_to_source_alpha`; `HalftoneColor::Source` keeps the children only inside the dots.

Page: https://fframes-kit.pages.dev/docs/motion/effects.md

- `first_dot_size: f32 = 0.0`: Dot width in user units at `first_stop`; 0 draws no dot there.
- `second_dot_size: f32 = 40.0`: Dot width in user units at `second_stop`.
- `first_stop: (f32, f32) = (0.0, 0.5)`: Where the gradient starts, as 0 to 1 fractions of `area` (x, y).
- `second_stop: (f32, f32) = (1.0, 0.5)`: Where the gradient ends, as 0 to 1 fractions of `area` (x, y).
- `grid_size: f32 = 24.0`: Distance between dot centers in user units; the grid is centered on the area.
- `color: HalftoneColor = HalftoneColor::Solid`: `Solid` lays dots of `dot_color` over the children; `Source` keeps the children only inside the dots.
- `dot_color: Color = Color::BLACK`: Colour of the dots when `color` is `Solid`.
- `mask_to_source_alpha: bool = false`: `true` draws solid dots only over the opaque parts of the children.
- `area: (f32, f32) = (1920.0, 1080.0)`: Width and height of the area the grid covers from the top left, in the children's user units.
- `key: Option<&str> = None`: Names the mask ids when two of these effects share a frame.
- `children: Children = no_children()`: The content the dots are laid over (a closure taking the `Ui`).
- `fn dots(&self) -> Vec<(f32, f32, f32)>`: The dots `(x, y, radius)`; a grid finer than `MAX_PATTERN_SHAPES` dots is drawn coarser.

## HashTable

A hash table: a column of numbered buckets, each `height` pixels tall and `gap` apart, with its chain of entries (`cell` pixels wide, `link` pixels apart) linked to its right, centred on `center` (units of `ui.space`). It plays a `HashTrace`, one step every `step_time` seconds from `delay`: the bucket a key hashes to lights up, the entries walked light up one by one, a found entry turns green, new entries slide in at the end of their chain and removed ones leave as the chain closes. The whole figure fades with `enter` and `exit`.

Page: https://fframes-kit.pages.dev/docs/computer-science/hash-trace-and-hash-table.md · feature `cs`

- `trace: Option<&HashTrace> = None`: The recorded steps to play (`HashTrace`); `None` draws nothing.
- `delay: f32 = 0.0`: Seconds after the container's start before the first step.
- `step_time: f32 = 0.7`: Seconds each step of the trace takes.
- `center: (f64, f64) = (0.0, 0.0)`: The middle of the table, in units of `ui.space`.
- `bucket: f32 = 64.0`: Width of a bucket in pixels.
- `cell: f32 = 96.0`: Width of an entry in a chain in pixels.
- `height: f32 = 56.0`: Height of a bucket and of its entries in pixels.
- `gap: f32 = 14.0`: Space between neighbouring buckets in pixels.
- `link: f32 = 48.0`: Length of the arrow between a bucket and its first entry, and between entries, in pixels.
- `notes: bool = true`: Whether the step's note is written under the table.
- `colors: CellColors = CellColors::themed(theme)`: Colours of the entries in each state (walked, found, moved).
- `bucket_color: Color = theme.colors.surface`: Colour of a bucket at rest; the bucket a key hashes to takes `colors.compare`.
- `link_color: Color = theme.colors.text`: Colour of the arrows that link a chain.
- `index_color: Color = theme.colors.muted`: Colour of the bucket numbers.
- `value_style: TextStyle = value_style`: The font of the keys in the entries.
- `small_style: TextStyle = theme.typography.caption`: The font of the bucket numbers and notes.
- `enter: Option<FadeIn> = None`: Fade in at the start; `None` for none.
- `exit: Option<FadeOut> = None`: Fade out before the end; `None` for none.

## Heart

A heart `height` tall and 1.1 times as wide (Remotion `Heart`).

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/shapes.md

- `cx: f32 = 0.0`: Center x in pixels of the canvas.
- `cy: f32 = 0.0`: Center y in pixels of the canvas (y down).
- `height: f32 = 200.0`: Height in pixels; the width is 1.1 times it.
- `fill: Option<Color> = Paint::solid(theme).fill`: `None` leaves the inside empty.
- `stroke: Option<Color> = Paint::solid(theme).stroke`: `None` draws no outline.
- `stroke_width: f32 = Paint::solid(theme).stroke_width`: Outline width in pixels.
- `dash: Option<(f32, f32)> = None`: Dash and gap lengths of the outline.
- `opacity: f32 = 1.0`: 0 transparent to 1 opaque.
- `enter: Option<EnterAnim> = None`: How it appears; `None` shows it from the start.
- `exit: Option<ExitAnim> = None`: How it leaves at the end of its container; `None` stays.
- `emphasis: Option<Emphasis> = None`: An emphasis animation (`Indicate`, `Wiggle`, ..) played while it is shown.
- `fn shape(&self) -> Shape`: The path and paint as a `Shape`.

## Heatmap

A grid of coloured cells on axes: `values` row by row, the first row at the top, covering `x_range` and `y_range` in data units. A cell's colour runs from `low` at `min` to `high` at `max` (the smallest and largest value when `None`). From `delay` the cells fade in as a wave from the top left corner, `stagger` seconds per step along the diagonal. Values that are not finite leave their cell empty.

Page: https://fframes-kit.pages.dev/docs/math/plots.md

- `values: Vec<Vec<f64>> = Vec::new()`: The cell values row by row, the first row at the top; a value that is not finite leaves its cell empty.
- `x_range: (f64, f64) = (0.0, 1.0)`: Left and right edge of the grid in data units of the x-axis.
- `y_range: (f64, f64) = (0.0, 1.0)`: Bottom and top edge of the grid in data units of the y-axis.
- `axes: AxesMap = AxesMap::default()`: The mapping of the axes the grid sits on (`axes.map(ui)`).
- `low: Color = theme.colors.surface`: Colour of a cell at `min`.
- `high: Color = theme.colors.highlight`: Colour of a cell at `max`.
- `min: Option<f64> = None`: Value drawn in `low`; `None` takes the smallest value.
- `max: Option<f64> = None`: Value drawn in `high`; `None` takes the largest value.
- `gap: f32 = 2.0`: Pixels between the cells.
- `delay: f32 = 0.0`: Seconds after the container's start before the first cell begins to fade in.
- `stagger: f32 = 0.05`: Seconds each step along the diagonal waits after the one before it.
- `run_time: f32 = theme.motion.duration.base`: Seconds each cell takes to fade in.
- `rate_func: RateFunc = RateFunc::default()`: Easing of each cell's fade over its run time.
- `fn color_at(&self, v: f64) -> Color`: The colour of value `v`.

## Histogram

Bars of `values` (one per bin, usually from `bin`) side by side from `range.0` to `range.1` on axes, standing on the x-axis. From `delay` they grow one after another, `stagger` seconds apart; `stagger: 0.0` grows them together. `gap` is the pixels between bars.

Page: https://fframes-kit.pages.dev/docs/math/plots.md

- `values: Vec<f64> = Vec::new()`: The height of each bar in data units of the y-axis, one per bin (usually from `bin`); 0 or not finite draws no bar.
- `range: (f64, f64) = (0.0, 1.0)`: Left and right edge of the first and last bin in data units of the x-axis.
- `axes: AxesMap = AxesMap::default()`: The mapping of the axes the bars stand on (`axes.map(ui)`).
- `gap: f32 = 2.0`: Pixels between neighbouring bars.
- `fill: Color = theme.colors.accent`: Colour of the bars.
- `stroke: Option<Color> = None`: Outline colour of the bars; `None` draws no outline.
- `stroke_width: f32 = theme.stroke.thin`: Outline width in pixels.
- `delay: f32 = 0.0`: Seconds after the container's start before the first bar begins to grow.
- `stagger: f32 = 0.04`: Seconds each bar waits after the one before it; 0 grows them together.
- `run_time: f32 = theme.motion.duration.base`: Seconds each bar takes to grow.
- `rate_func: RateFunc = theme.motion.easing.enter`: Easing of each bar's growth over its run time.
- `enter: Option<EnterAnim> = None`: How the bars appear once grown; `None` shows them as they are.
- `exit: Option<ExitAnim> = None`: How the bars leave at the end of their container; `None` stays.
- `fn grown(&self, i: usize, t: f32) -> f32`: How far bar `i` has grown at `t`, from 0 to 1.

## Homotopy

Moves every point of the shape through `homotopy(x, y, t)` while `t` runs from 0 to 1 (Manim's `Homotopy`). Points are in the units of `ui.space`, `y` up; before the start the shape is at `t = 0`, after the end at `t = 1`. The path is cut into about `HOMOTOPY_SEGMENTS` pieces first, so straight lines bend.

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/geometry-animations.md

- `shape: Shape`: The shape whose points move; drawn unchanged before `delay`.
- `homotopy: fn(f64, f64, f64) -> (f64, f64)`: Maps a point `(x, y)` in units of `ui.space` (y up) and the progress `t` from 0 to 1 to its new position.
- `delay: f32`: Seconds after the container's start before it begins.
- `run_time: f32`: Seconds the animation takes.
- `rate_func: RateFunc`: Easing of the animation over its run time.
- `fn new(shape: Shape, homotopy: fn(f64, f64, f64) -> (f64, f64)) -> Self`: Manim's 3 seconds, smooth.
- `fn path_at(&self, space: Space, t: f32) -> BezPath`: The path at progress `t`.

## HudLabel

A small tracked label, like the annotations of an engineering drawing ("01 / RENDER"). `uppercase` turns the text to capitals.

Page: https://fframes-kit.pages.dev/docs/text-and-formulas/text.md

- `text: Cow<str> = Cow::Borrowed("")`: The words; shown in capitals when `uppercase` is set.
- `x: f32 = 0.0`: Position of the text's anchor point, in pixels of the canvas.
- `y: f32 = 0.0`: Baseline of the text, in pixels of the canvas.
- `style: TextStyle = theme.typography.caption`: The font: family, size in pixels and weight.
- `fill: Color = theme.colors.muted`: Colour of the text.
- `anchor: TextAnchor = TextAnchor::Start`: Which point of the text sits at `x`: start, middle or end.
- `letter_spacing: f32 = 2.5`: Pixels between letters.
- `uppercase: bool = true`: `true` writes the text in capitals.
- `opacity: f32 = 1.0`: 0 transparent to 1 opaque.
- `fn draw(self) -> Svgr`: The label as a `<text>` element; it needs no `Ui`, so it can be drawn anywhere.

## HueRotate

Its children with their hues turned round the colour wheel by `degrees` (SVG `hueRotate`), Remotion's hue effect.

Page: https://fframes-kit.pages.dev/docs/motion/effects.md

- `degrees: Anim<f32> = Anim::Fixed(90.0)`: Angle in degrees the hues are turned round the colour wheel.
- `key: Option<&str> = None`: Names the filter when two effects of this kind share a frame.
- `children: Children = ui::no_children()`: The content the filter is applied to (a closure taking the `Ui`).

## ImplicitFunction

The curve where `f(x, y) = 0` (Manim `ImplicitFunction`, `axes.plot_implicit_curve`), traced by marching squares on a grid `resolution` cells wide over `x_range` by `y_range`. Its points are in data units of `axes` when set, otherwise in units of `space`; build one with `ImplicitFunction::new` to take `ui.space`, or with `Axes::plot_implicit_curve`. The curve is traced once and cached.

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/coordinate-systems.md

- `f: Implicit = |x`: The function of `(x, y)` whose zeros make the curve; a plain `fn`.
- `x_range: (f64, f64) = (-7.1, 7.1)`: The left and right edge of the box searched, in data units of `axes` when set, otherwise in units of `space`.
- `y_range: (f64, f64) = (-4.0, 4.0)`: The bottom and top edge of the box searched, in data units of `axes` when set, otherwise in units of `space`.
- `resolution: usize = 128`: Grid cells across `x_range`; a finer grid follows tighter turns.
- `axes: Option<AxesMap> = None`: Axes whose data units the curve is in; `None` takes units of `space`.
- `space: Space = Space::FULL_HD`: The coordinate system in units of which the curve is drawn when `axes` is `None`.
- `fill: Option<Color> = Paint::outline(theme).fill`: `None` leaves the inside empty.
- `stroke: Option<Color> = Paint::outline(theme).stroke`: `None` draws no outline.
- `stroke_width: f32 = Paint::outline(theme).stroke_width`: Outline width in pixels.
- `dash: Option<(f32, f32)> = None`: Dash and gap lengths of the outline.
- `opacity: f32 = 1.0`: 0 transparent to 1 opaque.
- `enter: Option<EnterAnim> = None`: How it appears; `None` shows it from the start.
- `exit: Option<ExitAnim> = None`: How it leaves at the end of its container; `None` stays.
- `emphasis: Option<Emphasis> = None`: An emphasis animation (`Indicate`, `Wiggle`, ..) played while it is shown.
- `fn shape(&self) -> Shape`: The path and paint as a `Shape`.
- `fn new(ui: &Ui, f: Implicit) -> Self`: The curve of `f` over Manim's frame, in `ui.space`, with the theme's paint.

## Integer

Manim's `Integer`: a `DecimalNumber` without decimals, rounded to the nearest whole number.

Page: https://fframes-kit.pages.dev/docs/text-and-formulas/text.md

- `value: ValueTracker = d.value`: The `ValueTracker` whose value is written; it is read at every frame.
- `x: f32 = d.x`: Position of the number's anchor, in pixels of the canvas.
- `y: f32 = d.y`: Baseline of the text, in pixels of the canvas.
- `style: TextStyle = d.style`: The font: family, size in pixels and weight.
- `fill: Color = d.fill`: Colour of the text.
- `anchor: TextAnchor = d.anchor`: Which point of the number (with its unit) sits at `x`: start, middle or end.
- `include_sign: bool = d.include_sign`: `true` writes a `+` before positive numbers.
- `group_with_commas: bool = d.group_with_commas`: `true` groups the digits by three with commas.
- `unit: &str = d.unit`: Text written after the number, such as `" kg"`; empty for none.
- `opacity: f32 = d.opacity`: 0 transparent to 1 opaque.

## IntegerMatrix

A `Matrix` of whole numbers (Manim `IntegerMatrix`). `matrix` gives the place and look; its `entries` are replaced.

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/coordinate-systems.md

- `values: Vec<Vec<i64>> = Vec::new()`: The whole numbers row by row; they replace the entries of `matrix`.
- `matrix: Matrix = Matrix::themed(theme)`: The matrix that gives the place, gaps, font, brackets and animations; its `entries` are replaced by `values`.
- `fn to_matrix(&self) -> Matrix`: The `Matrix` it draws, with the numbers written.

## IntegerTable

A `Table` of whole numbers (Manim `IntegerTable`). `table` gives the labels, place and look; its `rows` are replaced.

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/coordinate-systems.md

- `values: Vec<Vec<i64>> = Vec::new()`: The whole numbers row by row; they replace the `rows` of `table`.
- `table: Table = Table::themed(theme)`: The table that gives the labels, place, font, lines and animations; its `rows` are replaced by `values`.
- `fn to_table(&self) -> Table`: The `Table` it draws, with the numbers written.

## Intersection

The area inside all of `paths` (Manim `Intersection`).

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/shapes.md

- `paths: Vec<BezPath> = Vec::new()`: The paths to intersect, in pixels of the canvas.
- `fill: Option<Color> = Paint::solid(theme).fill`: `None` leaves the inside empty.
- `stroke: Option<Color> = Paint::solid(theme).stroke`: `None` draws no outline.
- `stroke_width: f32 = Paint::solid(theme).stroke_width`: Outline width in pixels.
- `dash: Option<(f32, f32)> = None`: Dash and gap lengths of the outline.
- `opacity: f32 = 1.0`: 0 transparent to 1 opaque.
- `enter: Option<EnterAnim> = None`: How it appears; `None` shows it from the start.
- `exit: Option<ExitAnim> = None`: How it leaves at the end of its container; `None` stays.
- `emphasis: Option<Emphasis> = None`: An emphasis animation (`Indicate`, `Wiggle`, ..) played while it is shown.
- `fn shape(&self) -> Shape`: The path and paint as a `Shape`.

## Interval

The numbers from `from` to `to` marked on a number line: a thick segment with a filled dot at a closed end and a ring at an open one (`[a, b)` is `closed: (true, false)`). The line is drawn separately.

Page: https://fframes-kit.pages.dev/docs/math/number-point-and-interval.md · feature `math`

- `line: NumberLine = NumberLine::themed(theme)`: The number line the interval sits on; it only maps numbers to points and is not drawn by this component.
- `from: f64 = 0.0`: The first end, as a number on `line`.
- `to: f64 = 1.0`: The second end, as a number on `line`.
- `closed: (bool, bool) = (true, true)`: Whether the `from` end and the `to` end are included: a filled dot when `true`, a ring when `false`.
- `color: Color = theme.colors.accent`: Colour of the segment and the end dots.
- `stroke_width: f32 = theme.stroke.thick`: Segment width in pixels; a ring's outline is half of it.
- `radius: f32 = 12.0`: Radius of the end dots and rings.
- `enter: Option<EnterAnim> = None`: How it appears; `None` shows it from the start.
- `exit: Option<ExitAnim> = None`: How it leaves at the end of its container; `None` stays.

## Invert

Its children as a negative (CSS `invert()`): `amount` 1 fully inverted.

Page: https://fframes-kit.pages.dev/docs/motion/effects.md

- `amount: Anim<f32> = Anim::Fixed(1.0)`: 0 unchanged to 1 fully inverted (0.5 is flat grey).
- `key: Option<&str> = None`: Names the filter when two effects of this kind share a frame.
- `children: Children = ui::no_children()`: The content the filter is applied to (a closure taking the `Ui`).

## KenBurns

An image of the video's media slowly pushed in from `from` seconds and drifted sideways, clipped to the box `(x, y, width, height)`, which it covers (`xMidYMid slice`). It fades in over `fade` seconds. The scale is `zoom + zoom_per_second * t` and the center moves `drift / 4` pixels a second, `t` seconds after `from`. A missing image draws nothing; `key` names the clip path when two are drawn in one frame.

Page: https://fframes-kit.pages.dev/docs/media-and-overlays/data-audio-decoration-and-media.md

- `image: &str = ""`: Name of the image in the video's media; a missing image draws nothing.
- `key: Option<&str> = None`: Names the clip path when two are drawn in one frame; `None` for none.
- `x: f32 = 0.0`: Left edge of the box in pixels of the canvas.
- `y: f32 = 0.0`: Top edge of the box in pixels of the canvas.
- `width: f32 = 1920.0`: Width of the box in pixels.
- `height: f32 = 1080.0`: Height of the box in pixels.
- `from: f32 = 0.0`: Seconds after the container's start the image appears and begins to push in.
- `zoom: f32 = 1.06`: Scale of the image at `from`; 1 covers the box exactly.
- `zoom_per_second: f32 = 0.02`: How much the scale grows each second after `from`.
- `drift: f32 = 0.0`: Sideways drift: a quarter of it in pixels per second to the right, 0 stays; negative goes left.
- `fade: f32 = theme.motion.duration.base`: Seconds the image fades in over from `from`.
- `fn at(&self, t: f32) -> (f32, f32)`: `(scale, center x)` at `t` seconds of the container.

## Label

One line of text whose box sits `buff` pixels from `(x, y)` in `direction`: `Top` puts it above the point, `TopRight` up and to the right, `Center` on it.

Page: https://fframes-kit.pages.dev/docs/text-and-formulas/text.md

- `text: Cow<str> = Cow::Borrowed("")`: The text, one line.
- `x: f32 = 0.0`: X in pixels of the canvas of the point the text sits next to.
- `y: f32 = 0.0`: Y in pixels of the canvas of the point the text sits next to (y down).
- `direction: Anchor = Anchor::Right`: Which side of the point the text box sits on (`Top` above it, `TopRight` up and right, `Center` on it).
- `buff: f32 = theme.spacing.sm`: Pixels between the point and the text's box.
- `style: TextStyle = theme.typography.body`: The font: family, size in pixels and weight.
- `fill: Color = theme.colors.title`: Colour of the text.
- `enter: Option<FadeIn> = None`: Fade in at the start; `None` for none.
- `exit: Option<FadeOut> = None`: Fade out before the end; `None` for none.
- `fn size(&self, ui: &Ui) -> (f32, f32)`: Width and height of the text's box, see `text_size`.
- `fn bounds(&self, ui: &Ui) -> Rect`: The box the text is drawn in, in pixels.

## LabeledArrow

An arrow with a label on it (Manim `LabeledArrow`).

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/shapes.md

- `label: ShapeLabel = ShapeLabel::None`: Text or formula written with it; `ShapeLabel::None` for none.
- `x1: f32 = 0.0`: Start x in pixels of the canvas.
- `y1: f32 = 0.0`: Start y in pixels of the canvas (y down).
- `x2: f32 = 200.0`: End x in pixels of the canvas.
- `y2: f32 = 0.0`: End y in pixels of the canvas (y down).
- `tip_length: f32 = 24.0`: Length in pixels of each tip from its point back along the shaft; shortened to fit a short arrow.
- `tip_width: f32 = 20.0`: Width in pixels of each tip across the shaft.
- `tip_start: Option<ArrowTip> = None`: The tip at the start; `None` for none.
- `tip_end: Option<ArrowTip> = Some(ArrowTip::TriangleFilled)`: The tip at the end; `None` for none.
- `label_position: f32 = 0.5`: Where along the line the label sits, 0 at the start to 1 at the end.
- `label_style: TextStyle`: The label's font: family, size in pixels and weight.
- `label_color: Color`: Colour of the label text.
- `label_box: bool = true`: A box in the background colour behind the label, so the line does not cross it.
- `fill: Option<Color> = Paint::arrow(theme).fill`: `None` leaves the inside empty.
- `stroke: Option<Color> = Paint::arrow(theme).stroke`: `None` draws no outline.
- `stroke_width: f32 = Paint::arrow(theme).stroke_width`: Outline width in pixels.
- `opacity: f32 = 1.0`: 0 transparent to 1 opaque.
- `enter: Option<EnterAnim> = None`: How it appears; `None` shows it from the start.
- `exit: Option<ExitAnim> = None`: How it leaves at the end of its container; `None` stays.
- `emphasis: Option<Emphasis> = None`: An emphasis animation (`Indicate`, `Wiggle`, ..) played while it is shown.
- `fn path(&self) -> BezPath`: The line or arrow without its label.

## LabeledDot

A dot with a label inside (Manim `LabeledDot`). Without a `radius` it is `SMALL_BUFF` larger than half the label's longer side, as in Manim.

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/shapes.md

- `label: ShapeLabel = ShapeLabel::None`: The text or formula inside the dot; `ShapeLabel::None` for none.
- `cx: f32 = 0.0`: Center x in pixels of the canvas.
- `cy: f32 = 0.0`: Center y in pixels of the canvas (y down).
- `radius: Option<f32> = None`: Radius in pixels; `None` fits the label (half its longer side plus `SMALL_BUFF`).
- `label_style: TextStyle = theme.typography.body`: The label's font: family, size in pixels and weight.
- `label_color: Color = theme.colors.title`: Colour of the label text.
- `fill: Option<Color> = Some(theme.colors.accent)`: `None` leaves the inside empty.
- `stroke: Option<Color> = None`: `None` draws no outline.
- `stroke_width: f32 = theme.stroke.regular`: Outline width in pixels.
- `opacity: f32 = 1.0`: 0 transparent to 1 opaque.
- `enter: Option<EnterAnim> = None`: How it appears; `None` shows it from the start.
- `exit: Option<ExitAnim> = None`: How it leaves at the end of its container; `None` stays.
- `emphasis: Option<Emphasis> = None`: An emphasis animation (`Indicate`, `Wiggle`, ..) played while it is shown.

## LabeledLine

A line with a label on it (Manim `LabeledLine`).

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/shapes.md

- `label: ShapeLabel = ShapeLabel::None`: Text or formula written with it; `ShapeLabel::None` for none.
- `x1: f32 = 0.0`: Start x in pixels of the canvas.
- `y1: f32 = 0.0`: Start y in pixels of the canvas (y down).
- `x2: f32 = 200.0`: End x in pixels of the canvas.
- `y2: f32 = 0.0`: End y in pixels of the canvas (y down).
- `label_position: f32 = 0.5`: Where along the line the label sits, 0 at the start to 1 at the end.
- `label_style: TextStyle`: The label's font: family, size in pixels and weight.
- `label_color: Color`: Colour of the label text.
- `label_box: bool = true`: A box in the background colour behind the label, so the line does not cross it.
- `fill: Option<Color> = Paint::outline(theme).fill`: `None` leaves the inside empty.
- `stroke: Option<Color> = Paint::outline(theme).stroke`: `None` draws no outline.
- `stroke_width: f32 = Paint::outline(theme).stroke_width`: Outline width in pixels.
- `opacity: f32 = 1.0`: 0 transparent to 1 opaque.
- `enter: Option<EnterAnim> = None`: How it appears; `None` shows it from the start.
- `exit: Option<ExitAnim> = None`: How it leaves at the end of its container; `None` stays.
- `emphasis: Option<Emphasis> = None`: An emphasis animation (`Indicate`, `Wiggle`, ..) played while it is shown.
- `fn path(&self) -> BezPath`: The line or arrow without its label.

## LabeledPolygram

Closed polygons with a label where it fits best (Manim `LabeledPolygram`): at the point inside furthest from every edge, found to within `precision` pixels.

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/shapes.md

- `vertex_groups: Vec<Vec<(f32, f32)>> = Vec::new()`: One list of corner points `(x, y)` in pixels of the canvas per closed polygon.
- `label: ShapeLabel = ShapeLabel::None`: The text or formula placed inside; `ShapeLabel::None` for none.
- `precision: f32 = 1.0`: How closely in pixels the label point is found; smaller is exact but slower.
- `label_style: TextStyle = theme.typography.body`: The label's font: family, size in pixels and weight.
- `label_color: Color = theme.colors.title`: Colour of the label text.
- `fill: Option<Color> = paint.fill`: `None` leaves the inside empty.
- `stroke: Option<Color> = paint.stroke`: `None` draws no outline.
- `stroke_width: f32 = paint.stroke_width`: Outline width in pixels.
- `opacity: f32 = 1.0`: 0 transparent to 1 opaque.
- `enter: Option<EnterAnim> = None`: How it appears; `None` shows it from the start.
- `exit: Option<ExitAnim> = None`: How it leaves at the end of its container; `None` stays.
- `emphasis: Option<Emphasis> = None`: An emphasis animation (`Indicate`, `Wiggle`, ..) played while it is shown.
- `fn label_point(&self) -> Option<(f32, f32)>`: Where the label goes: the inside point furthest from the edges.

## LaggedStart

Starts each child `lag_ratio * run_time` seconds after the one before it (Manim's `LaggedStart`). Each child's time starts at its own start, so its enter animations run then; every child stays until the parent ends.

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/geometry-animations.md

- `lag_ratio: f32`: Fraction of `run_time` between two starts.
- `run_time: f32`: The run time of one child's animation.
- `children: Vec<Children>`: One entry per child; each is a closure taking the `Ui`, started in order.
- `fn map<T>(items: impl IntoIterator<Item = T>, f: impl Fn(&mut Ui, &T) -> Svgr) -> Self`: One child per item, drawn by `f` (Manim's `LaggedStartMap`), with Manim's lag ratio of 0.05 and children that run 1 second.

## Leader

A line from `from` to `to` with text at its end, on the side the line points to, and a dot on `from` when `dot` is above 0. The line draws with `enter` (`Create` from `from`), the text fades with `label_enter`.

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/coordinate-systems.md

- `from: (f32, f32) = (0.0, 0.0)`: Where the line starts, `(x, y)` in pixels of the canvas; the dot sits here.
- `to: (f32, f32) = (100.0, -60.0)`: Where the line ends and the text sits, `(x, y)` in pixels of the canvas.
- `text: Cow<str> = Cow::Borrowed("")`: The text at the end of the line.
- `style: TextStyle = theme.typography.caption`: The font: family, size in pixels and weight.
- `fill: Color = theme.colors.title`: Colour of the text.
- `color: Color = theme.colors.muted`: Colour of the line and the dot.
- `stroke_width: f32 = theme.stroke.thin`: Outline width in pixels.
- `dot: f32 = 6.0`: Radius of the dot on `from`, 0 for none.
- `buff: f32 = theme.spacing.xs`: Pixels between `to` and the text's box.
- `enter: Option<EnterAnim> = None`: How the line and dot appear; `None` shows them from the start.
- `exit: Option<ExitAnim> = None`: How the line and dot leave at the end of the container; `None` stays.
- `label_enter: Option<FadeIn> = None`: How the text fades in; `None` shows it from the start.
- `label_exit: Option<FadeOut> = None`: How the text fades out before the end; `None` for none.
- `fn label(&self) -> Label`: The label at the end, placed on the side the line points to.

## Letters

A line of text drawn letter by letter, each letter with its own `LetterLook` from `look(index)`. `(x, y)` is the start of the baseline and `tracking` adds pixels after every letter. Letters at opacity 0 are left out. Without a measurable font the line is one `<text>` with the look of letter 0.

Page: https://fframes-kit.pages.dev/docs/text-and-formulas/text.md

- `text: Cow<str> = Cow::Borrowed("")`: The line of text; each character is drawn on its own.
- `x: f32 = 0.0`: Left of the first letter, in pixels of the canvas.
- `y: f32 = 0.0`: Baseline of the text, in pixels of the canvas.
- `style: TextStyle = theme.typography.title`: The font: family, size in pixels and weight.
- `fill: Color = theme.colors.title`: Colour of the letters.
- `tracking: f32 = 0.0`: Extra pixels after every letter.
- `look: Box<dyn Fn(usize) -> LetterLook> = Box::new(|_| LetterLook::default())`: Gives the `LetterLook` of letter `index`, counting from 0; letters at opacity 0 are not drawn.

## Levels

Photoshop's levels on every colour channel: the `input` black and white points stretch to 0 and 1, `gamma` bends the mid tones (above 1 brighter), and the result lands between the `output` black and white points.

Page: https://fframes-kit.pages.dev/docs/motion/effects.md

- `input: (f32, f32) = (0.08, 0.92)`: Black and white points of the input, 0 to 1; they stretch to 0 and 1.
- `gamma: Anim<f32> = Anim::Fixed(1.2)`: Mid-tone curve: above 1 brighter, below 1 darker, 1 unchanged.
- `output: (f32, f32) = (0.0, 1.0)`: Black and white points of the result, 0 to 1; 0 and 1 stretch to them.
- `key: Option<&str> = None`: Names the filter when two effects of this kind share a frame.
- `children: Children = ui::no_children()`: The content the filter is applied to (a closure taking the `Ui`).

## LightLeak

Light leaking into the camera, like Remotion's `<LightLeak>`: warm blobs of light flare up over the picture and fade out again within `length` seconds (the enclosing container's length when `None`), brightest at `opacity` in the middle. `seed` picks where the blobs are and how they drift, and `hue_shift` turns their colours round the colour wheel in degrees (180 for blue light). Drawn with radial gradients in screen blending, so it works on every backend; `size` is the area from the top left and `key` names the gradients when two leaks share a frame.

Page: https://fframes-kit.pages.dev/docs/motion/effects.md

- `seed: u64 = 0`: Picks where the blobs sit and how they drift; the same seed gives the same leak.
- `hue_shift: f32 = 0.0`: Degrees the blob colours are turned round the colour wheel; 180 turns the warm light blue.
- `length: Option<f32> = None`: Seconds the leak takes to flare up and fade out, local to the parent container; `None` uses the container's length.
- `opacity: f32 = 0.85`: Peak opacity of the blobs, 0 transparent to 1 opaque, reached in the middle of the leak.
- `size: (f32, f32) = (1920.0, 1080.0)`: Width and height of the area the leak covers from the top left, in pixels of the canvas.
- `key: Option<&str> = None`: Names the gradients when two leaks share a frame.
- `fn flares(&self, progress: f32) -> Vec<Flare>`: The blobs at `progress` through the leak, 0 to 1. Each flares up and fades along a half sine from its own start, so they peak one after another.

## LightTrail

A streak of light trailing its children (Remotion's `lightTrail()`): copies of their silhouette in `color`, `distance` units long towards `direction` (degrees clockwise from the right, 180 to the left), each copy `decay` (0 to 1) as bright as the one before, added to the children at `intensity`. `samples` (1 to 64) sets how Remotion spaces the copies, so the falloff and brightness follow it; `threshold` (0 to 1) leaves out pixels less opaque than it. Drawn inside the `area` from the origin.

Page: https://fframes-kit.pages.dev/docs/motion/effects.md

- `direction: f32 = 180.0`: Degrees clockwise from the right the trail points: 180 trails to the left.
- `distance: Anim<f32> = Anim::Fixed(80.0)`: Length of the trail in the children's user units; 0 or less draws none. Animatable.
- `intensity: f32 = 1.0`: Brightness of the trail added to the children; 1 is Remotion's default, 0 draws none.
- `decay: f32 = 0.9`: 0 to 1: how bright each copy is compared with the one before it; lower fades faster.
- `threshold: f32 = 0.0`: 0 to 1: pixels less opaque than this leave no trail; 0 trails every pixel.
- `samples: u32 = 32`: 1 to 64: how Remotion spaces the copies; the falloff and brightness follow it.
- `color: Color = Color::WHITE`: Colour of the trail; its alpha scales the brightness.
- `area: (f32, f32) = (1920.0, 1080.0)`: Width and height of the area the trail is drawn in from the top left, in the children's user units.
- `key: Option<&str> = None`: Names the filter when two of these effects share a frame.
- `children: Children = no_children()`: The content that leaves the trail (a closure taking the `Ui`).
- `fn gain(&self) -> f32`: How bright the trail of a solid silhouette is, before the colour's alpha: Remotion's sum of the sample weights over their count, times `intensity`.

## Line

A straight line from `(x1, y1)` to `(x2, y2)` (Manim `Line`).

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/shapes.md

- `x1: f32 = 0.0`: Start x in pixels of the canvas.
- `y1: f32 = 0.0`: Start y in pixels of the canvas (y down).
- `x2: f32 = 200.0`: End x in pixels of the canvas.
- `y2: f32 = 0.0`: End y in pixels of the canvas (y down).
- `fill: Option<Color> = Paint::outline(theme).fill`: `None` leaves the inside empty.
- `stroke: Option<Color> = Paint::outline(theme).stroke`: `None` draws no outline.
- `stroke_width: f32 = Paint::outline(theme).stroke_width`: Outline width in pixels.
- `dash: Option<(f32, f32)> = None`: Dash and gap lengths of the outline.
- `opacity: f32 = 1.0`: 0 transparent to 1 opaque.
- `enter: Option<EnterAnim> = None`: How it appears; `None` shows it from the start.
- `exit: Option<ExitAnim> = None`: How it leaves at the end of its container; `None` stays.
- `emphasis: Option<Emphasis> = None`: An emphasis animation (`Indicate`, `Wiggle`, ..) played while it is shown.
- `fn shape(&self) -> Shape`: The path and paint as a `Shape`.

## LinearGradient

A gradient filling the area (Remotion's `linearGradient()`), from `start_color` at `start` to `end_color` at `end` (0 to 1 across the area). It replaces the layer, so it takes no children: put it inside a group with the layers it covers.

Page: https://fframes-kit.pages.dev/docs/motion/effects.md

- `start: (f32, f32) = (0.0, 0.5)`: Where the gradient starts, as 0 to 1 fractions of `area` (x, y).
- `end: (f32, f32) = (1.0, 0.5)`: Where the gradient ends, as 0 to 1 fractions of `area` (x, y).
- `start_color: Color = Color::BLACK`: Colour of the gradient at `start`, held before it.
- `end_color: Color = Color::WHITE`: Colour of the gradient at `end`, held after it.
- `area: (f32, f32) = (1920.0, 1080.0)`: Width and height of the rectangle the gradient fills from the top left, in user units.
- `key: Option<&str> = None`: Names the gradient id when two gradients share a frame.

## LinearGradientTint

Its children's colours pulled towards a gradient (Remotion's `linearGradientTint()`): the tint runs from `start_color` at `start` to `end_color` at `end` (0 to 1 across the area) and `amount` mixes it in, 0 unchanged and 1 the gradient's colours. The alpha stays. Drawn with an `feImage` of the gradient in a filter over the area.

Page: https://fframes-kit.pages.dev/docs/motion/effects.md

- `start: (f32, f32) = (0.0, 0.5)`: Where the gradient starts, as 0 to 1 fractions of `area` (x, y).
- `end: (f32, f32) = (1.0, 0.5)`: Where the gradient ends, as 0 to 1 fractions of `area` (x, y).
- `start_color: Color = Color::BLACK`: Colour of the gradient at `start`, held before it.
- `end_color: Color = Color::WHITE`: Colour of the gradient at `end`, held after it.
- `amount: Anim<f32> = Anim::Fixed(0.5)`: 0 the children unchanged to 1 fully the gradient's colours; their alpha stays. Animatable.
- `area: (f32, f32) = (1920.0, 1080.0)`: Width and height of the area the gradient covers from the top left, in the children's user units.
- `key: Option<&str> = None`: Names the filter ids when two of these effects share a frame.
- `children: Children = no_children()`: The content that is tinted (a closure taking the `Ui`).

## LinearProgressiveBlur

Its children blurred more and more along a line (Remotion's `linearProgressiveBlur()`): `start_blur` at `start`, growing to `end_blur` at `end` (both 0 to 1 across the area), radii like Remotion's (a Gaussian of a third of them). Drawn as blurred copies under graded masks, one for every 6 units of radius and at most `MAX_BLUR_LEVELS`, so the children render up to nine times.

Page: https://fframes-kit.pages.dev/docs/motion/effects.md

- `start: (f32, f32) = (0.0, 0.5)`: Where the blur starts, as 0 to 1 fractions of `area` (x, y); it has `start_blur` there.
- `end: (f32, f32) = (1.0, 0.5)`: Where the blur ends, as 0 to 1 fractions of `area` (x, y); it has `end_blur` there.
- `start_blur: f32 = 0.0`: Blur radius at `start`, like Remotion's (a Gaussian of a third of it); 0 is sharp.
- `end_blur: f32 = 50.0`: Blur radius at `end`, like Remotion's (a Gaussian of a third of it).
- `area: (f32, f32) = (1920.0, 1080.0)`: Width and height of the area the effect covers from the top left, in the children's user units.
- `key: Option<&str> = None`: Names the filters when two of these effects share a frame.
- `children: Children = no_children()`: The content that is blurred (a closure taking the `Ui`).

## LinearTransform

A grid of lines and the two basis vectors moved by `matrix` (Manim's `LinearTransformationScene` with `ApplyMatrix`): from the identity to the matrix over `run_time` seconds after `delay`, over the untransformed grid drawn faintly. The grid has a line at every integer of `x_range` and `y_range`, in units of `ui.space` around `center`, and the moved grid is clipped to its box; `key` tells the clip paths of two transforms apart. With `show_matrix` the matrix is written at `matrix_at` (pixels).

Page: https://fframes-kit.pages.dev/docs/math/linear-transform-and-vector-sum.md · feature `math`

- `matrix: Mat2 = [[1.0, 1.0], [0.0, 1.0]]`: The 2x2 matrix to apply, row by row; its columns are where the basis vectors `i` and `j` end up.
- `x_range: Range = Range::new(-4.0, 4.0, 1.0)`: The grid's x extent in units of `ui.space` from `center`, with a vertical line at every tick.
- `y_range: Range = Range::new(-3.0, 3.0, 1.0)`: The grid's y extent in units of `ui.space` from `center`, with a horizontal line at every tick.
- `center: (f64, f64) = (0.0, 0.0)`: Where the grid's origin sits, in units of `ui.space` (y up).
- `delay: f32 = 0.0`: Seconds after the container's start before the transformation begins.
- `run_time: f32 = 2.0`: Seconds the grid takes to move from the identity to `matrix`.
- `rate_func: RateFunc = RateFunc::default()`: Easing of the movement over its run time.
- `line_color: Color = theme.colors.accent`: Colour of the moving grid lines; the untransformed grid is drawn faintly in the muted colour.
- `stroke_width: f32 = theme.stroke.thin`: Grid line width in pixels.
- `i_color: Color = theme.colors.highlight`: Colour of the basis vector `i` (to `(1, 0)`).
- `j_color: Color = theme.colors.caption`: Colour of the basis vector `j` (to `(0, 1)`).
- `show_matrix: bool = true`: Writes `matrix` at `matrix_at` when `true`.
- `matrix_at: (f32, f32) = (1600.0, 200.0)`: Where the written matrix sits, in pixels of the canvas.
- `enter: Option<EnterAnim> = None`: How the grids and the vectors appear.
- `matrix_enter: Option<FadeIn> = Some(FadeIn::themed(theme))`: Fade in of the written matrix's entries; `None` shows them from the start.
- `key: Option<&str> = None`: Names the clip path when two transforms share a frame; `None` for the default.

## LinePlot

A line through data points on axes (Manim `axes.plot_line_graph` without its dots; add a `ScatterPlot` for them). Straight segments, or a smooth curve with `smooth`. A point that is not finite breaks the line.

Page: https://fframes-kit.pages.dev/docs/math/plots.md

- `points: Vec<(f64, f64)> = Vec::new()`: The `(x, y)` data points in data units of the axes; a point that is not finite breaks the line.
- `axes: AxesMap = AxesMap::default()`: The mapping of the axes the line is drawn on (`axes.map(ui)`).
- `smooth: bool = false`: Draws a smooth curve through the points instead of straight segments.
- `fill: Option<Color> = Paint::outline(theme).fill`: `None` leaves the inside empty.
- `stroke: Option<Color> = Paint::outline(theme).stroke`: `None` draws no outline.
- `stroke_width: f32 = Paint::outline(theme).stroke_width`: Outline width in pixels.
- `dash: Option<(f32, f32)> = None`: Dash and gap lengths of the outline.
- `opacity: f32 = 1.0`: 0 transparent to 1 opaque.
- `enter: Option<EnterAnim> = None`: How it appears; `None` shows it from the start.
- `exit: Option<ExitAnim> = None`: How it leaves at the end of its container; `None` stays.
- `emphasis: Option<Emphasis> = None`: An emphasis animation (`Indicate`, `Wiggle`, ..) played while it is shown.
- `fn shape(&self) -> Shape`: The path and paint as a `Shape`.

## Lines

Stripes over its children (Remotion's `lines()`): bands `thickness` units wide in `colors` taken in turn, `gap` units of the children showing between them, running `direction`. `angle` turns them about the middle of the area in degrees and `offset` moves them across; with `mask_to_source_alpha` they cover only the opaque parts of the children (which then render twice).

Page: https://fframes-kit.pages.dev/docs/motion/effects.md

- `colors: Vec<Color> = PALE_BLUES.to_vec()`: Colours of the stripes, taken in turn; empty draws none.
- `direction: LineDirection = LineDirection::Horizontal`: `Horizontal` stripes run left to right and stack downwards; `Vertical` ones run top to bottom.
- `thickness: f32 = 40.0`: Width of each stripe in the children's user units; 0 draws none.
- `gap: f32 = 0.0`: Width in user units of the children showing between stripes.
- `angle: f32 = 0.0`: Degrees the stripes are turned about the middle of the area.
- `offset: f32 = 0.0`: Moves the stripes across their direction, in user units.
- `mask_to_source_alpha: bool = false`: `true` covers only the opaque parts of the children, which then render twice.
- `area: (f32, f32) = (1920.0, 1080.0)`: Width and height of the area the stripes cover from the top left, in the children's user units.
- `key: Option<&str> = None`: Names the clip and mask ids when two of these effects share a frame.
- `children: Children = no_children()`: The content the stripes are laid over (a closure taking the `Ui`).

## LinkedList

A linked list: each node a box with its value and a link cell, `node` by `height` pixels and `gap` apart, centred on `center` (units of `ui.space`). Links are arrows from the link cell to the next node; a link that points back to a node on the left dips under the nodes, and a node without a link shows a slash. It plays a `ListTrace`, one step every `step_time` seconds from `delay`: nodes slide to their places, new ones drop in, removed ones drop out, links fade as they change, and the pointers (`cur`, and `head` with `head`) sit above the nodes. The whole figure fades with `enter` and `exit`.

Page: https://fframes-kit.pages.dev/docs/computer-science/linked-list-stack-and-queue.md · feature `cs`

- `trace: Option<&ListTrace> = None`: The recorded steps to play (`ListTrace`); `None` draws nothing.
- `delay: f32 = 0.0`: Seconds after the container's start before the first step.
- `step_time: f32 = 0.8`: Seconds each step of the trace takes.
- `center: (f64, f64) = (0.0, 0.0)`: The middle of the list, in units of `ui.space`.
- `node: f32 = 120.0`: Width of a node in pixels.
- `height: f32 = 64.0`: Height of a node in pixels.
- `gap: f32 = 60.0`: Space between neighbouring nodes in pixels, where the link arrows run.
- `head: bool = true`: Whether the `head` pointer is shown above the first node.
- `notes: bool = true`: Whether the step's note is written under the list.
- `colors: CellColors = CellColors::themed(theme)`: Colours of the nodes in each state (visited, moved, found).
- `link_color: Color = theme.colors.text`: Colour of the link arrows and the slash of a node without a link.
- `pointer_color: Color = theme.colors.highlight`: Colour of the pointer names (`cur`, `head`) above the nodes.
- `value_style: TextStyle = value_style`: The font of the values in the nodes.
- `small_style: TextStyle = theme.typography.caption`: The font of the pointer names and notes.
- `enter: Option<FadeIn> = None`: Fade in at the start; `None` for none.
- `exit: Option<FadeOut> = None`: Fade out before the end; `None` for none.

## LongShadows

The alpha silhouette of its children turned into a solid shadow `length` units long towards `angle` (degrees clockwise from the right, 45 down and right), in `color` at `opacity` (Remotion's `longShadows()`): text and logos with long shadows, or a flat 3D extrusion. Drawn inside the `area` from the origin, so like Remotion the shadow stops at the canvas edge.

Page: https://fframes-kit.pages.dev/docs/motion/effects.md

- `length: Anim<f32> = Anim::Fixed(240.0)`: Length of the shadow in the children's user units; under 1 draws none, 255 or more is the practical limit. Animatable.
- `angle: f32 = 45.0`: Degrees clockwise from the right the shadow points: 45 is down and right.
- `color: Color = Color::rgb(0x77, 0x77, 0x77)`: Colour of the shadow; its alpha multiplies `opacity`.
- `opacity: f32 = 1.0`: 0 transparent to 1 opaque.
- `area: (f32, f32) = (1920.0, 1080.0)`: Width and height of the area the shadow is drawn in from the top left, in the children's user units; it stops at the edge.
- `key: Option<&str> = None`: Names the filter when two of these effects share a frame.
- `children: Children = no_children()`: The content that casts the shadow, drawn on top of it (a closure taking the `Ui`).

## Loop

Repeats its children every `duration` seconds, `times` times or forever (`None`).

Page: https://fframes-kit.pages.dev/docs/basics/time-containers-and-fades.md

- `duration: f32 = 1.0`: Seconds one repeat lasts.
- `times: Option<usize> = None`: How many repeats before it stops showing; `None` for forever.
- `children: Children = no_children()`: What it repeats; a closure taking the `Ui` whose time restarts at 0 each repeat.

## LowerThird

A name and a role next to an accent bar, the caption of a speaker. The bar grows first, then the name and the role slide in from behind it, `stagger` seconds apart, and all of it leaves in reverse order before the end of the container. `(x, y)` is the top left of the bar. With `background`, a plate as wide as the longer line sits behind the text (without a measurable font it is `min_width` wide).

Page: https://fframes-kit.pages.dev/docs/media-and-overlays/overlays.md

- `name: Cow<str> = Cow::Borrowed("")`: The speaker's name, the larger first line.
- `role: Cow<str> = Cow::Borrowed("")`: The role or subtitle under the name; empty for none.
- `x: f32 = 96.0`: Left edge of the bar, in pixels of the canvas.
- `y: f32 = 820.0`: Top of the bar, in pixels of the canvas.
- `name_style: TextStyle = theme.typography.heading`: The font of the name: family, size in pixels and weight.
- `role_style: TextStyle = theme.typography.body`: The font of the role: family, size in pixels and weight.
- `name_fill: Color = theme.colors.title`: Colour of the name.
- `role_fill: Color = theme.colors.muted`: Colour of the role.
- `bar: Color = theme.colors.accent`: Colour of the accent bar.
- `bar_width: f32 = 6.0`: Width of the accent bar in pixels.
- `background: Option<Color> = None`: Colour of the plate behind the text; `None` for no plate.
- `min_width: f32 = 400.0`: Least width in pixels of the text area on the plate, and its width when the font cannot be measured.
- `padding: f32 = theme.spacing.md`: Space between the bar and the text, and around the text on the plate.
- `delay: f32 = 0.0`: Seconds after the container's start before the bar begins to grow.
- `stagger: f32 = theme.motion.stagger.loose`: Seconds between the starts of the bar, the name and the role.
- `run_time: f32 = theme.motion.duration.enter`: Seconds each part takes to come in.
- `exit: f32 = theme.motion.duration.exit`: Seconds of the exit, which ends with the container; 0 never leaves.
- `rate_func: RateFunc = theme.motion.easing.enter`: Easing of each part coming in.
- `fn height(&self) -> f32`: Height of the bar: the two lines and the padding around them.

## Lut

A look-up table per colour channel: `red`, `green` and `blue` list the outputs for evenly spaced inputs from 0 to 1 (an empty list leaves the channel unchanged). An approximation of a LUT file: a `.cube` LUT maps colours in 3D, these tables map each channel on its own, so they hold curves and colour casts but not hue-dependent looks.

Page: https://fframes-kit.pages.dev/docs/motion/effects.md

- `red: &[f32] = &[0.05, 0.3, 0.62, 0.86, 1.0]`: Red outputs for evenly spaced inputs from 0 to 1; empty leaves red unchanged.
- `green: &[f32] = &[0.02, 0.27, 0.56, 0.82, 0.97]`: Green outputs for evenly spaced inputs from 0 to 1; empty leaves green unchanged.
- `blue: &[f32] = &[0.12, 0.3, 0.5, 0.72, 0.88]`: Blue outputs for evenly spaced inputs from 0 to 1; empty leaves blue unchanged.
- `key: Option<&str> = None`: Names the filter when two effects of this kind share a frame.
- `children: Children = ui::no_children()`: The content the filter is applied to (a closure taking the `Ui`).

## MagneticField

Manim-physics' `MagneticField` in the page: on every grid point of `x_range` by `y_range` (units of `ui.space`) the field of `wires`. Where it lies mostly in the page it is an arrow `length(|B|)` units long, otherwise a circle `length(|B|)` units across with a dot (out of the page) or a cross (into it). Both are coloured by `|B|` from `colors[0]` at `min_magnitude` to the last colour at `max_magnitude`. Grid points closer than `clearance` units to a wire are left out. With `show_wires` a wire through the page is a disc with a dot or a cross, a segment is a thick line with an arrow along its current. `wires` is a plain prop, so the field follows wires computed from `ui.seconds()`. Everything fades with `enter` and `exit`.

Page: https://fframes-kit.pages.dev/docs/physics/electric-field-and-magnetic-field.md · feature `physics`

- `wires: Vec<Wire> = Vec::new()`: The wires that make the field: a long wire through the page or a segment in it, each with a current.
- `x_range: Range = Range::new(-7.0, 7.0, 0.5)`: Grid columns: `x` from min to max in steps, in units of `ui.space`.
- `y_range: Range = Range::new(-4.0, 4.0, 0.5)`: Grid rows: `y` from min to max in steps, in units of `ui.space`.
- `length: fn(f64) -> f64 = sigmoid_length`: Size in units of `ui.space` of an arrow, or of the circle for a field out of or into the page, for a field of magnitude `|B|`.
- `colors: Vec<Color> = vec![theme.colors.muted, theme.colors.accent, theme.colors.highlight]`: Colour ramp: the first colour at `min_magnitude`, the last at `max_magnitude`.
- `min_magnitude: f64 = 0.0`: Field magnitude that gets the first colour of `colors`.
- `max_magnitude: f64 = 0.5`: Field magnitude that gets the last colour of `colors`.
- `clearance: f64 = 0.3`: Grid points closer than this to a wire, in units of `ui.space`, get no mark.
- `show_wires: bool = true`: Draws the wires: a disc with a dot or a cross for a wire through the page, a thick line with an arrow for a segment.
- `wire_color: Color = theme.colors.title`: Colour of the wires.
- `wire_radius: f32 = 22.0`: Radius in pixels of the disc of a wire through the page.
- `stroke_width: f32 = theme.stroke.thin`: Width of the arrows and rings in pixels; wires are drawn three times as thick.
- `enter: Option<FadeIn> = None`: Fade in at the start; `None` for none.
- `exit: Option<FadeOut> = None`: Fade out before the end; `None` for none.
- `fn at(&self, x: f64, y: f64) -> (f64, f64, f64)`: The field at `(x, y)`, see `magnetic_field`.

## MarkupText

Manim's `MarkupText`: one line with Pango-style tags, `"a <b>bold</b> <span foreground='#ff5500'>word</span>"`.

Page: https://fframes-kit.pages.dev/docs/text-and-formulas/text.md

- `markup: Cow<str> = Cow::Borrowed("")`: The text with Pango-style tags: `<b>`, `<i>`, `<u>` and `<span>`.
- `x: f32 = 0.0`: Position of the text's anchor point, in pixels of the canvas.
- `y: f32 = 0.0`: Baseline of the text, in pixels of the canvas.
- `style: TextStyle = theme.typography.heading`: The font: family, size in pixels and weight.
- `fill: Color = theme.colors.text`: Colour of the text outside any `<span>` colour.
- `anchor: TextAnchor = TextAnchor::Start`: Which point of the text sits at `x`: start, middle or end.
- `opacity: f32 = 1.0`: 0 transparent to 1 opaque.

## MathTable

A `Table` of typeset formulas (Manim `MathTable`), typeset beforehand with a `latex::TexEngine` like any `MathTex`. `size` is the height in pixels of 10 pt text, as in `FormulaView`; `table` gives the labels, place, lines and animations.

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/coordinate-systems.md

- `formulas: Vec<Vec<&Formula>> = Vec::new()`: The typeset formulas row by row, each centered in its cell.
- `size: f32 = 40.0`: Height in pixels of 10 pt text, as in `FormulaView`.
- `color: Color = theme.colors.title`: Colour of the formulas.
- `table: Table = Table::themed(theme)`: The table that gives the labels, place, lines and animations.
- `fn to_mobject_table(&self, ui: &mut Ui) -> MobjectTable`: The `MobjectTable` it draws: every formula centered on the origin.

## Matrix

Entries in rows and columns between square brackets (Manim `Matrix`), centered on `(x, y)`. The brackets draw with `enter` (`Create`), the entries fade with `entries_enter`.

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/coordinate-systems.md

- `entries: Vec<Vec<Cow<str>>> = Vec::new()`: Row by row; a shorter row is padded with empty entries.
- `x: f32 = 960.0`: Horizontal middle of the matrix in pixels of the canvas.
- `y: f32 = 540.0`: Vertical middle of the matrix in pixels of the canvas.
- `buff: (f32, f32) = (theme.spacing.xl, theme.spacing.lg + theme.spacing.md)`: Pixels between the columns and between the rows (Manim `h_buff`, `v_buff`).
- `bracket_buff: f32 = theme.spacing.lg`: Pixels between the entries and the brackets (Manim `bracket_h_buff`).
- `style: TextStyle = theme.typography.body`: The font of the entries: family, size in pixels and weight.
- `fill: Color = theme.colors.text`: Colour of the entries.
- `color: Color = theme.colors.title`: The brackets' colour.
- `stroke_width: f32 = theme.stroke.regular`: Width of the brackets in pixels.
- `enter: Option<EnterAnim> = None`: How the brackets appear (`Create`, ..); `None` shows them from the start.
- `exit: Option<ExitAnim> = None`: How the brackets leave at the end of their container; `None` stays.
- `entries_enter: Option<FadeIn> = Some(FadeIn::themed(theme))`: Fade the entries in at the start; `None` shows them from the start.
- `entries_exit: Option<FadeOut> = None`: Fade the entries out before the end; `None` for none.
- `fn cell(&self, ui: &Ui, row: usize, column: usize) -> Option<Rect>`: The area of entry `(row, column)`, half the gaps around it (Manim `get_entries`), to put a highlight behind it. `None` outside the matrix.
- `fn bounds(&self, ui: &Ui) -> Option<Rect>`: The box around the brackets, to place what comes next to the matrix. `None` for a matrix without entries.

## MatrixView

The product of two matrices worked out entry by entry: `a`, `b` and `a b` side by side around `(x, y)`, with `×` and `=` between them. From `delay`, every `step` seconds the next entry of the product is written, row by row, while its row of `a` and column of `b` are highlighted; entries and highlights fade in over a third of a step. After the last entry the highlights fade out. Entries are written with at most `decimals` decimals.

Page: https://fframes-kit.pages.dev/docs/math/matrix-view.md · feature `math`

- `a: Vec<Vec<f64>> = vec![vec![1.0, 2.0], vec![3.0, 4.0]]`: The left matrix, as rows of entries.
- `b: Vec<Vec<f64>> = vec![vec![5.0, 6.0], vec![7.0, 8.0]]`: The right matrix, as rows of entries; its row count must equal the column count of `a`, otherwise nothing is drawn.
- `x: f32 = 960.0`: Horizontal middle of the three matrices, in pixels of the canvas.
- `y: f32 = 540.0`: Vertical middle of the matrices, in pixels of the canvas.
- `gap: f32 = theme.spacing.lg`: Pixels between the matrices and the signs.
- `delay: f32 = 0.5`: Seconds after the container's start before the first entry is worked out.
- `step: f32 = 0.8`: Seconds each entry of the product takes; its row and column highlight meanwhile.
- `decimals: usize = 2`: Most digits after the decimal point of the written entries.
- `highlight: Color = theme.colors.highlight`: Colour of the highlight on the current row of `a` and column of `b`.
- `result_color: Color = theme.colors.accent`: Colour of the entries of the product.
- `matrices_enter: Option<FadeIn> = Some(FadeIn::themed(theme))`: Fade in of the matrices; `None` shows them from the start.

## McmcChain

A random-walk Metropolis-Hastings chain sampling the equal mixture of the normal distributions in `target` (`ManimML`'s MCMC scenes). It starts at `origin` and proposes steps drawn from a normal distribution `proposal` wide; a step is accepted with the probability `min(1, p(to) / p(from))`. The chain is the same for the same `seed`. With `run` it plays one step after another over the run's duration from its start: accepted moves extend the path in `accepted_color`, rejected proposals inside the axes stay as hollow marks in `rejected_color`, and the current state is a dot. On `axes`.

Page: https://fframes-kit.pages.dev/docs/machine-learning/normal-distributions-and-mcmc.md · feature `ml`

- `target: Vec<Gaussian2D> = vec![Gaussian2D::default()]`: The normal distributions whose equal mixture the chain samples.
- `origin: (f64, f64) = (0.0, 0.0)`: The state the chain starts at, in data units of `axes`.
- `proposal: f64 = 0.6`: Standard deviation of the random step proposed each time, in data units.
- `steps: usize = 60`: Number of steps (proposals) in the whole chain.
- `seed: u64 = 1`: Seed of the chain; the same seed gives the same chain on every frame and machine.
- `axes: AxesMap = AxesMap::default()`: The axes to draw on, mapping data values to the canvas.
- `run: Option<ChainRun> = None`: When the steps play, and over how long; `None` shows the whole chain at once.
- `accepted_color: Color = theme.colors.highlight`: Colour of the path of accepted moves and of the current state dot.
- `rejected_color: Color = Color::hex("#ff6b6b")`: Colour of the hollow marks for rejected proposals.
- `stroke_width: f32 = 2.5`: Width in pixels of the path and the rejected marks.
- `point_radius: f32 = 6.0`: Radius in pixels of the current state dot.
- `enter: Option<FadeIn> = None`: Fade in at the start; `None` for none.
- `exit: Option<FadeOut> = None`: Fade out before the end; `None` for none.
- `fn chain(&self) -> Vec<McmcStep>`: The steps of the chain.

## Mirror

Its children reflected about a line (Remotion's `mirror()`): the part past `position` (0 to 1 across the area; the right, or the bottom with `MirrorDirection::Vertical`) shows the other side mirrored, or the other way round with `invert`. Where the mirrored side reaches past the area, Remotion stretches the edge pixels; here it stays transparent. The children render twice.

Page: https://fframes-kit.pages.dev/docs/motion/effects.md

- `direction: MirrorDirection = MirrorDirection::Horizontal`: `Horizontal` reflects about a vertical line (left and right match), `Vertical` about a horizontal line.
- `position: Anim<f32> = Anim::Fixed(0.5)`: Where the mirror line is, 0 to 1 across the area (from the left, or from the top for `Vertical`). Animatable.
- `invert: bool = false`: `false` keeps the near side and mirrors it onto the far side; `true` does the opposite.
- `area: (f32, f32) = (1920.0, 1080.0)`: Width and height of the area the effect covers from the top left, in the children's user units.
- `key: Option<&str> = None`: Names the mask and clip ids when two mirrors share a frame.
- `children: Children = no_children()`: The content that is mirrored (a closure taking the `Ui`).

## MitosisStages

Mitosis: a cell `size` pixels from its centre to its side, centred on `center` (units of `ui.space`), going through the stages of `MitosisStage::ALL` from `delay`, each `stage_time` seconds long. In interphase its `chromosomes` lie loose in the nucleus; in prophase they condense into sister chromatids joined at the centromere, the nuclear envelope breaks down and the centrosomes move to the poles; in metaphase spindle fibres line them up in the middle; in anaphase the sisters are pulled to opposite poles; in telophase two nuclei form around them; in cytokinesis the cell pinches into two. Chromosomes come in homologous pairs of one length, coloured from `colors` by parent; where each lies in interphase comes from `seed`. With `label` the stage is named above.

Page: https://fframes-kit.pages.dev/docs/biology/mitosis-stages.md · feature `biology`

- `delay: f32 = 0.0`: Seconds after the container's start before interphase begins.
- `stage_time: f32 = 1.6`: Seconds each stage lasts.
- `center: (f64, f64) = (0.0, -0.3)`: The middle of the cell, in units of `ui.space`.
- `size: f32 = 300.0`: Pixels from the cell's centre to its side (half the width).
- `chromosomes: usize = 4`: Number of chromosomes in the cell; they come in homologous pairs of one length.
- `arm: f32 = 30.0`: Pixels of the longest chromatid arm; the other pairs are shorter.
- `colors: Vec<Color> = vec![Color::hex("#ff8787"), Color::hex("#74c0fc")]`: Colours of the chromosomes by parent, alternating along the list; empty uses the palette's membrane colour.
- `seed: u64 = 3`: Seed for where the chromosomes lie loose in interphase; the same seed gives the same layout.
- `palette: CellPalette = CellPalette::default()`: Colours of the cytoplasm, membrane, nucleus and the other cell parts.
- `spindle_color: Color = Color::hex("#ced4da")`: Colour of the spindle fibres, asters and centrosomes.
- `label: bool = true`: Names the current stage above the cell when `true`.
- `label_style: TextStyle = theme.typography.body`: The font of the stage name: family, size in pixels and weight.
- `label_color: Color = theme.colors.text`: Colour of the stage name.
- `enter: Option<FadeIn> = None`: Fade in at the start; `None` for none.
- `exit: Option<FadeOut> = None`: Fade out before the end; `None` for none.
- `fn stage_at(&self, seconds: f32) -> MitosisStage`: The stage shown `seconds` into the video.

## MobjectMatrix

A `Matrix` whose entries are drawn `Mobject`s (Manim `MobjectMatrix`), each in the middle of its cell; a column is as wide as its widest entry. `matrix` gives the place, gaps, brackets and animations; its `entries` are not used.

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/coordinate-systems.md

- `entries: Vec<Vec<Mobject>> = Vec::new()`: The drawn entries row by row, each in the middle of its cell; a shorter row is padded with empty ones.
- `matrix: Matrix = Matrix::themed(theme)`: The matrix that gives the place, gaps, brackets and animations; its `entries` are not used.
- `fn cell(&self, row: usize, column: usize) -> Option<Rect>`: The area of entry `(row, column)`, half the gaps around it. `None` outside the matrix.

## MobjectTable

A `Table` whose body cells are drawn `Mobject`s (Manim `MobjectTable`), each in the middle of its cell; the labels stay text. `table` gives the labels, place, lines and animations; its `rows` are not used.

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/coordinate-systems.md

- `entries: Vec<Vec<Mobject>> = Vec::new()`: The drawn body cells row by row, each in the middle of its cell.
- `table: Table = Table::themed(theme)`: The table that gives the labels, place, lines and animations; its `rows` are not used.
- `fn cell(&self, ui: &Ui, row: usize, column: usize) -> Option<Rect>`: The area of body cell `(row, column)` between its lines. `None` outside the table.

## Molecule

A skeletal formula from a SMILES string (`"CC(=O)O"`), laid out by `chematic` and drawn like `Molecule2D`. The layout is computed once per string and kept for the rest of the process; an invalid string draws nothing (check it with `Structure::from_smiles`).

Page: https://fframes-kit.pages.dev/docs/chemistry/molecule-2d-and-molecule.md · feature `chemistry`

- `smiles: Cow<str> = Cow::Borrowed("c1ccccc1")`: The molecule as a SMILES string (`"CC(=O)O"`); an invalid string draws nothing.
- `center: (f64, f64) = m.center`: The middle of the molecule's coordinates, in units of `ui.space`.
- `bond_length: f32 = m.bond_length`: Pixels per bond length of the laid-out structure.
- `show_hydrogens: bool = m.show_hydrogens`: Writes the hydrogens and charge after a heteroatom's symbol (`OH`, `NH2`); `false` writes the symbol alone.
- `color_atoms: bool = m.color_atoms`: Colours the labels of oxygen, nitrogen, sulfur, phosphorus and the halogens; `false` uses `bond_color` for all.
- `bond_color: Color = m.bond_color`: Colour of the bonds, and of the labels of carbon and of every atom when `color_atoms` is `false`.
- `stroke_width: f32 = m.stroke_width`: Width in pixels of the bond lines.
- `enter: Option<EnterAnim> = None`: How the bonds draw on; `None` shows them from the start.
- `exit: Option<ExitAnim> = None`: How the bonds leave at the end of the container; `None` stays.
- `parts_enter: Option<FadeIn> = None`: Fade in of the atom labels; `None` for none.
- `parts_exit: Option<FadeOut> = None`: Fade out of the atom labels before the end; `None` for none.

## Molecule2D

A skeletal formula: the bonds of `structure` `bond_length` pixels long around `center` (units of `ui.space`), double bonds in rings drawn inside the ring, and the labels of the atoms that are not carbons, with their hydrogens and charges (`show_hydrogens`). The bonds draw on in order with `enter` (`Create` draws them one after the other), the labels with `parts_enter`. With `color_atoms` oxygen, nitrogen, sulfur, phosphorus and the halogens get their own colours. Without `structure` nothing is drawn.

Page: https://fframes-kit.pages.dev/docs/chemistry/molecule-2d-and-molecule.md · feature `chemistry`

- `structure: Option<&Structure> = None`: The molecule to draw (from SMILES, a molfile or built by hand); `None` draws nothing.
- `center: (f64, f64) = (0.0, 0.0)`: The middle of the molecule's coordinates, in units of `ui.space`.
- `bond_length: f32 = 70.0`: Pixels per bond length of the structure's coordinates.
- `show_hydrogens: bool = true`: Writes the hydrogens and charge after a heteroatom's symbol (`OH`, `NH2`); `false` writes the symbol alone.
- `color_atoms: bool = true`: Colours the labels of oxygen, nitrogen, sulfur, phosphorus and the halogens; `false` uses `bond_color` for all.
- `bond_color: Color = theme.colors.text`: Colour of the bonds, and of the labels of carbon and of every atom when `color_atoms` is `false`.
- `stroke_width: f32 = theme.stroke.regular`: Width in pixels of the bond lines.
- `enter: Option<EnterAnim> = None`: How the bonds draw on; `None` shows them from the start.
- `exit: Option<ExitAnim> = None`: How the bonds leave at the end of the container; `None` stays.
- `parts_enter: Option<FadeIn> = None`: Fade in of the atom labels; `None` for none.
- `parts_exit: Option<FadeOut> = None`: Fade out of the atom labels before the end; `None` for none.

## Molecule3D

A `Structure3D` as balls and sticks in CPK colours, rendered in 3D into a `width` x `height` pixel image around `center` (units of `ui.space`). The molecule turns `spin` degrees a second around the vertical axis, seen from `elevation` degrees above. The bonds listed in `highlight` (indices into `bonds`) turn `highlight_color` and glow over half a second from `highlight_at`. The image fades with `enter` and `exit`.

Page: https://fframes-kit.pages.dev/docs/chemistry/molecule-3d-and-orbital.md · feature `chemistry`

- `structure: Option<&Structure3D> = None`: The atoms and bonds to draw, in ångström; `None` draws nothing.
- `center: (f64, f64) = (0.0, 0.0)`: The middle of the image, in units of `ui.space`.
- `width: f32 = 900.0`: Width in pixels of the rendered image.
- `height: f32 = 640.0`: Height in pixels of the rendered image.
- `spin: f32 = 30.0`: Degrees per second the molecule turns around the vertical axis; 0 holds it still.
- `azimuth: f32 = 0.0`: Degrees the view starts turned around the vertical axis, before `spin` adds to it.
- `elevation: f32 = 20.0`: Degrees the view looks down from above the molecule; 0 is level with it.
- `highlight: Vec<usize> = Vec::new()`: Indices into the structure's `bonds` that turn `highlight_color` and glow; empty for none.
- `highlight_at: f32 = 0.0`: Seconds after the container's start when the highlight begins (it takes half a second).
- `bond_color: Color = Color::hex("#bfbfbf")`: Colour of the bond sticks.
- `highlight_color: Color = theme.colors.highlight`: Colour the highlighted bonds turn to and glow in.
- `enter: Option<FadeIn> = None`: Fade in at the start; `None` for none.
- `exit: Option<FadeOut> = None`: Fade out before the end; `None` for none.

## MovingCamera

The canvas seen through a camera frame (Manim's `MovingCameraScene`): `center` and `width` in units of `ui.space` say which part of the canvas fills the picture, `width` of `full_frame_width` showing it all. Both follow an `Anim`, so the camera can pan and zoom; `auto_zoom` gives the frame around some boxes. The children draw in canvas pixels as always.

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/coordinate-systems.md

- `center: Anim<(f32, f32)>`: The point of the canvas at the middle of the picture, in units of `ui.space`; an `Anim` pans the camera.
- `width: Anim<f32>`: Width of the canvas shown, in units of `ui.space`; smaller zooms in, `full_frame_width` shows it all. An `Anim` zooms the camera.
- `children: Children`: What the camera looks at (a closure taking the `Ui`), drawn in canvas pixels.
- `fn view(space: Space, center: (f32, f32), width: f32) -> Affine`: The map from canvas pixels to the picture for a frame at `center` `width` units wide.

## MultiPendulum

Manim-physics' `MultiPendulum` drawn: the chain of `motion` hanging from `pivot` (units of `ui.space`, `scale` units per meter), swinging from `delay` seconds after the local start. With `trail` the last bob leaves a trail like `TracedPath`, the last `trail_time` seconds of it (all of it with `None`). The ceiling draws with `enter`; the rods, bobs and trail fade with `parts_enter`. Without `motion` nothing is drawn.

Page: https://fframes-kit.pages.dev/docs/physics/multi-pendulum.md · feature `physics`

- `motion: Option<&MultiPendulumMotion> = None`: The simulated chain to draw, built once in the video's constructor; `None` draws nothing.
- `pivot: (f64, f64) = (0.0, 2.5)`: Where the first rod hangs from, in units of `ui.space`.
- `scale: f64 = 1.0`: Units of `ui.space` per meter.
- `delay: f32 = 0.0`: Seconds after the local start before the chain is released.
- `time_scale: f32 = 1.0`: Speed of the motion over local time; 2 runs twice as fast, 1 is real time.
- `bob_radius: f32 = 18.0`: Radius of the bobs in pixels.
- `trail: bool = true`: Leaves a trail behind the last bob.
- `trail_time: Option<f32> = Some(3.0)`: Seconds of the trail that stay visible; `None` keeps all of it.
- `color: Color = theme.colors.text`: Colour of the rods, the pivot and the ceiling.
- `bob_color: Color = theme.colors.accent`: Colour of the bobs.
- `trail_color: Color = theme.colors.highlight`: Colour of the trail.
- `stroke_width: f32 = theme.stroke.regular`: Width of the rods, the ceiling and the trail in pixels.
- `enter: Option<EnterAnim> = None`: How the ceiling draws in; `None` shows it from the start.
- `exit: Option<ExitAnim> = None`: How the ceiling leaves at the end of the container; `None` stays.
- `parts_enter: Option<FadeIn> = None`: How the rods, bobs and trail fade in; `None` for none.
- `parts_exit: Option<FadeOut> = None`: How the rods, bobs and trail fade out before the end; `None` for none.

## NamedMolecule

A molecule by its common name (manim-chemistry's `NamedMolecule`), looked up in a table of about a hundred common molecules (`named_molecules`) and drawn like `Molecule`. Nothing is looked up over the network. A name that is not in the table draws nothing, and `inspect` warns about it.

Page: https://fframes-kit.pages.dev/docs/chemistry/named-molecule.md · feature `chemistry`

- `name: Cow<str> = Cow::Borrowed("caffeine")`: Common name of the molecule (`"caffeine"`, `"glucose"`); case, hyphens and underscores do not matter. A name not in the table draws nothing.
- `center: (f64, f64) = m.center`: The middle of the molecule's coordinates, in units of `ui.space`.
- `bond_length: f32 = m.bond_length`: Pixels per bond length of the laid-out structure.
- `show_hydrogens: bool = m.show_hydrogens`: Writes the hydrogens and charge after a heteroatom's symbol (`OH`, `NH2`); `false` writes the symbol alone.
- `color_atoms: bool = m.color_atoms`: Colours the labels of oxygen, nitrogen, sulfur, phosphorus and the halogens; `false` uses `bond_color` for all.
- `bond_color: Color = m.bond_color`: Colour of the bonds, and of the labels of carbon and of every atom when `color_atoms` is `false`.
- `stroke_width: f32 = m.stroke_width`: Width in pixels of the bond lines.
- `enter: Option<EnterAnim> = None`: How the bonds draw on; `None` shows them from the start.
- `exit: Option<ExitAnim> = None`: How the bonds leave at the end of the container; `None` stays.
- `parts_enter: Option<FadeIn> = None`: Fade in of the atom labels; `None` for none.
- `parts_exit: Option<FadeOut> = None`: Fade out of the atom labels before the end; `None` for none.

## NeuralNetwork

A neural network as `ManimML` draws it: `layers` from left to right around `center` (units of `ui.space`), `spacing` pixels between neighbouring layers, each pair joined by the connection of its kind. Feed-forward layers are columns of neurons `node_radius` pixels round and `node_spacing` apart, with their activation function plotted above them. With `forward_pass` pulses run through the connections layer by layer and light the neurons as they arrive. `dropout` crosses out some hidden neurons for a while, and `changes` insert, remove and replace layers one after the other; a forward pass and a change should not run at the same time.

Page: https://fframes-kit.pages.dev/docs/machine-learning/neural-network.md · feature `ml`

- `layers: Vec<Layer>`: The layers from left to right; each neighbouring pair is joined by the connection of its kind.
- `center: (f64, f64) = (0.0, 0.0)`: The middle of the network, in units of `ui.space`.
- `spacing: f32 = 160.0`: Pixels between neighbouring layers.
- `node_radius: f32 = 16.0`: Radius in pixels of a neuron.
- `node_spacing: f32 = 52.0`: Pixels between neighbouring neurons of a feed-forward layer.
- `cell: f32 = 14.0`: Size in pixels of one cell of a feature map or image.
- `forward_pass: Option<ForwardPass> = None`: Pulses that run through the connections layer by layer and light the neurons; `None` for none.
- `dropout: Option<Dropout> = None`: Crosses out some hidden neurons for a while; `None` for none.
- `changes: Vec<TimedChange> = Vec::new()`: Layers inserted, removed or replaced one after the other over time; empty for none.
- `node_color: Color = theme.colors.text`: Colour of the neuron and layer outlines and of the text.
- `node_fill: Color = theme.colors.surface`: Fill colour inside the neurons and boxes.
- `edge_color: Color = theme.colors.muted`: Colour of the connection lines.
- `pulse_color: Color = theme.colors.highlight`: Colour of the forward pass pulses and the neurons they light.
- `positive_color: Color = Color::hex("#69db7c")`: The outline of a positive example of a paired query or a triplet.
- `negative_color: Color = Color::hex("#ff6b6b")`: The outline of a negative example.
- `stroke_width: f32 = 2.5`: Width in pixels of the outlines and connection lines.
- `enter: Option<FadeIn> = None`: Fade in at the start; `None` for none.
- `exit: Option<FadeOut> = None`: Fade out before the end; `None` for none.
- `fn layout_at(&self, middle: Point) -> Vec<LayerGeometry>`: Where every layer goes with the middle of the network at `middle`, in pixels: the layers as given, before any of `changes`.
- `fn layout(&self, ui: &Ui) -> Vec<LayerGeometry>`: Where every layer goes, in pixels, before any of `changes`.

## Neuron

A neuron lying across the frame, `length` pixels from its dendrites to its axon terminals, centred on `center` (units of `ui.space`): dendrites branching from the cell body, the axon wrapped in myelin with nodes of Ranvier between the segments, and the axon terminals. It grows in from `delay`, soma first; with `labels` each part is then named above or below it. At each time in `impulses` the cell body fires and the impulse jumps from node to node along the axon (`speed` pixels a second) to the terminals, which release neurotransmitter. The dendrites are placed from `seed`.

Page: https://fframes-kit.pages.dev/docs/biology/neuron.md · feature `biology`

- `delay: f32 = 0.0`: Seconds after the container's start before the neuron begins to grow; `impulses` are not shifted by it.
- `center: (f64, f64) = (0.0, -0.2)`: The middle of the neuron, in units of `ui.space`.
- `length: f32 = 1320.0`: Pixels from the dendrite tips to the axon terminals.
- `impulses: Vec<f32> = vec![4.6, 6.6]`: Times in seconds, from the container's start, when the cell body fires an impulse; empty for none.
- `speed: f32 = 700.0`: Speed of the impulse along the axon, in pixels per second.
- `labels: bool = true`: Names each part above or below it when `true`.
- `seed: u64 = 5`: Seed for the shape of the dendrites and terminals; the same seed gives the same neuron.
- `body_color: Color = Color::hex("#4dabf7")`: Fill of the cell body, dendrites and axon.
- `nucleus_color: Color = Color::hex("#1c4a7a")`: Fill of the nucleus in the cell body.
- `myelin_color: Color = Color::hex("#ffd8a8")`: Fill of the myelin sheath segments.
- `impulse_color: Color = Color::hex("#ffe066")`: Colour of the travelling impulse and the released neurotransmitter.
- `leader_color: Color = theme.colors.muted`: Colour of the leader lines and the dots that mark each named part.
- `label_color: Color = theme.colors.text`: Colour of the part names.
- `label_style: TextStyle = theme.typography.caption`: The font of the part names: family, size in pixels and weight.
- `enter: Option<FadeIn> = None`: Fade in at the start; `None` for none.
- `exit: Option<FadeOut> = None`: Fade out before the end; `None` for none.

## Noise

Film grain over a `size` area from the top left: grey `feTurbulence` noise at `opacity`, drawn by every backend. `frequency` is the noise's base frequency (higher is finer) and `octaves` its detail. The same `seed` gives the same grain; with `animated` the seed moves on every frame so the grain flickers like film. `key` names the filter when two noises share a frame.

Page: https://fframes-kit.pages.dev/docs/motion/effects.md

- `seed: u32 = 0`: Seeds the grain; the same seed draws the same grain.
- `opacity: f32 = 0.12`: 0 transparent to 1 opaque.
- `frequency: f32 = 0.8`: Base frequency of the noise: higher is finer grain.
- `octaves: u32 = 2`: Layers of detail added to the noise; more is richer and slower.
- `animated: bool = true`: `true` moves the seed on every frame so the grain flickers like film; `false` keeps it still.
- `size: (f32, f32) = (1920.0, 1080.0)`: Width and height of the grain area from the top left, in pixels of the canvas.
- `key: Option<&str> = None`: Names the filter when two noises share a frame.
- `fn seed_at(&self, index: usize) -> u32`: The turbulence seed at local frame `index`.

## NormalFit

Samples stacking up into a histogram, then the normal curve that fits them (Manim's central limit theorem scenes). The first `shown` samples (a `ValueTracker`, so they can pour in) are binned into `bins` bars over `range` as a density, no taller than the top of the y range. The curve has the mean and spread of the samples shown so far and draws with `curve_enter` (a delayed `Create`); with `stats` the mean and standard deviation are written at `stats_at` (pixels).

Page: https://fframes-kit.pages.dev/docs/math/normal-fit.md · feature `math`

- `samples: &[f64] = &[]`: The sample values to bin; only the first `shown` of them count.
- `shown: ValueTracker = 0.0.into()`: How many of the samples are shown so far; a tracker, so they can pour in over time.
- `axes: AxesMap = AxesMap::default()`: The axes (an `AxesMap`) the bars and the curve sit on; the bars are no taller than the top of its y range.
- `range: (f64, f64) = (-3.0, 3.0)`: The values `(min, max)` the bars cover, in the axes' x units.
- `bins: usize = 24`: Number of bars the range is cut into; the bar heights are a density.
- `fill: Color = theme.colors.accent`: Fill of the bars.
- `curve_color: Color = theme.colors.highlight`: Colour of the fitted normal curve.
- `curve_width: f32 = theme.stroke.thick`: Width of the curve in pixels.
- `curve_enter: Option<EnterAnim> = None`: How the curve appears; `None` shows it from the start.
- `stats: bool = true`: Writes the mean and standard deviation of the samples shown at `stats_at` when `true`.
- `stats_at: (f32, f32) = (1500.0, 300.0)`: Where the statistics are written, in pixels of the canvas.
- `stats_enter: Option<FadeIn> = None`: Fade in of the statistics; `None` shows them from the start.

## NumberLine

A horizontal number line (Manim `NumberLine`): `range` spread over `length` units centered on `center`, with ticks at every step and the `numbers` written below them. `NumberLine::unit_interval` is Manim's `UnitInterval`.

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/coordinate-systems.md

- `range: Range = Range::new(-8.0, 8.0, 1.0)`: In axis units, see `Scaling`.
- `scaling: Scaling = Scaling::Linear`: How values are spread along the line: `Linear` or `LogBase`; `range` is then in axis units (exponents).
- `length: f64 = 12.0`: Length in units of `ui.space`.
- `center: (f64, f64) = (0.0, 0.0)`: The middle of the line, in units of `ui.space`.
- `color: Color = theme.colors.text`: Colour of the line, its tip and its ticks.
- `stroke_width: f32 = theme.stroke.thin`: Width of the line and the ticks in pixels.
- `tips: bool = false`: Arrow tip at the right end.
- `tip_length: f32 = 24.0`: Length of the arrow tip in pixels.
- `tip_width: f32 = 20.0`: Width of the arrow tip in pixels.
- `include_ticks: bool = true`: Draws a tick at every step of `range`.
- `tick_size: f32 = 10.0`: Half the length of a tick, in pixels.
- `numbers: Vec<f64> = Vec::new()`: Values written below their ticks (Manim `numbers_to_include`).
- `decimals: usize = 0`: Digits after the decimal point of the written numbers.
- `number_style: TextStyle = theme.typography.caption`: The font of the numbers: family, size in pixels and weight.
- `number_fill: Color = theme.colors.text`: Colour of the numbers.
- `enter: Option<EnterAnim> = None`: How the line and its ticks appear; `None` shows them from the start.
- `exit: Option<ExitAnim> = None`: How the line and its ticks leave at the end of their container; `None` stays.
- `emphasis: Option<Emphasis> = None`: An emphasis animation (`Indicate`, `Wiggle`, ..) played on the line while it is shown.
- `numbers_enter: Option<FadeIn> = None`: How the numbers appear and go; the line itself uses `enter` and `exit`.
- `numbers_exit: Option<FadeOut> = None`: Fade the numbers out before the end of the container; `None` for none.
- `fn unit_interval(t: &Theme) -> Self`: Manim's `UnitInterval`: 0 to 1 in tenths, 10 units long, 0, 0.5 and 1 written.
- `fn n2p_in(&self, space: Space, x: f64) -> Point`: The pixel of the number `x` in `space` (Manim `number_to_point`, `n2p`).
- `fn n2p(&self, ui: &Ui, x: f64) -> (f32, f32)`: The pixel of the number `x` in `ui.space`.
- `fn p2n(&self, ui: &Ui, px: f32) -> f64`: The number at the pixel column `px` (Manim `point_to_number`, `p2n`).
- `fn p2n_in(&self, space: Space, px: f64) -> f64`: The number at the pixel column `px` in `space`.

## NumberPlane

Axes over a grid of lines at every tick (Manim `NumberPlane`), filling Manim's whole frame by default. `faded_line_ratio` 2 adds a fainter line between two grid lines, 3 two of them.

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/coordinate-systems.md

- `axes: Axes`: The axes drawn over the grid; they set the ranges, size, numbers and labels, and the grid lines follow their ticks.
- `line_color: Color = theme.colors.accent`: Colour of the grid lines.
- `line_width: f32 = theme.stroke.thin`: Width of the grid lines in pixels.
- `line_opacity: f32 = 0.45`: 0 transparent to 1 opaque, for the grid lines at the ticks.
- `faded_line_ratio: usize = 1`: Grid lines per tick step: 1 draws none between ticks, 2 adds one fainter line between two ticks, 3 adds two.
- `faded_opacity: f32 = 0.18`: 0 transparent to 1 opaque, for the fainter lines between ticks.
- `enter: Option<EnterAnim> = None`: How the grid appears and goes; the axes use their own `enter` and `exit`.
- `exit: Option<ExitAnim> = None`: How the grid leaves at the end of its container; `None` stays.

## NumberPoint

A dot on a number line at `value`, with `label` above it (Manim's `Dot(line.n2p(x))` with a `ValueTracker`). With `decimals` the value is written after the label: `label: "x = "` and `decimals: Some(1)` write `x = 2.5`. The line is drawn separately.

Page: https://fframes-kit.pages.dev/docs/math/number-point-and-interval.md · feature `math`

- `line: NumberLine = NumberLine::themed(theme)`: The number line the dot sits on; it only maps numbers to points and is not drawn by this component.
- `value: ValueTracker = 0.0.into()`: The number on `line` the dot marks; a tracker, so it can slide along the line.
- `label: Cow<str> = Cow::Borrowed("")`: Text written above the dot; empty for none.
- `decimals: Option<usize> = None`: Digits after the decimal point of the value written after the label; `None` writes the label only.
- `radius: f32 = 12.0`: Radius of the dot in pixels.
- `color: Color = theme.colors.highlight`: Fill of the dot.
- `label_style: TextStyle = theme.typography.caption`: The font of the label: family, size in pixels and weight.
- `label_fill: Color = theme.colors.title`: Colour of the label.
- `buff: f32 = theme.spacing.md`: Pixels between the dot and the label.
- `enter: Option<FadeIn> = None`: Fade in at the start; `None` for none.
- `exit: Option<FadeOut> = None`: Fade out before the end; `None` for none.

## OpticalBench

Manim-physics' `Lens` and `Ray` on one axis: `lenses` on a horizontal axis at height `axis_y` from `x_range.0` to `x_range.1` (units of `ui.space`), and `rays` traced through them to `x_range.1`. With `focal_points` each lens's front and back focal points are dots labelled `F` and `F'`, found by tracing a parallel ray through the lens, so for a thick lens they sit at its focal distances from its surfaces, not from its middle. The rays draw on one after another from `delay` seconds after the local start (`ray_time` each, `stagger` apart). The axis and lenses draw with `enter`, the rays and labels with `parts_enter`.

Page: https://fframes-kit.pages.dev/docs/physics/optical-bench-lens-and-ray.md · feature `physics`

- `lenses: Vec<Lens> = Vec::new()`: The lenses on the axis, each with its position and shape.
- `rays: Vec<Ray> = Vec::new()`: The rays traced through the lenses to the right end of `x_range`.
- `axis_y: f64 = 0.0`: Height of the horizontal axis, in units of `ui.space`.
- `x_range: (f64, f64) = (-7.0, 7.0)`: Left and right ends of the axis in units of `ui.space`; rays are traced up to the right end.
- `focal_points: bool = true`: Marks each lens's front and back focal points with a dot.
- `labels: bool = true`: Writes `F` and `F'` under the focal points.
- `delay: f32 = 0.0`: Seconds after the local start before the first ray begins to draw.
- `ray_time: f32 = 0.8`: Seconds each ray takes to draw.
- `stagger: f32 = 0.25`: Seconds between the start of one ray and the next.
- `lens_color: Color = theme.colors.text`: Colour of the lenses, the focal points and their labels.
- `ray_color: Color = theme.colors.highlight`: Colour of the rays.
- `guide_color: Color = theme.colors.muted`: Colour of the dashed axis.
- `stroke_width: f32 = theme.stroke.regular`: Width of the lens outlines in pixels; rays use the theme's thin width.
- `enter: Option<EnterAnim> = None`: How the axis and lenses draw in; `None` shows them from the start.
- `exit: Option<ExitAnim> = None`: How the axis and lenses leave at the end of the container; `None` stays.
- `parts_enter: Option<FadeIn> = None`: How the rays and labels fade in; `None` for none.
- `parts_exit: Option<FadeOut> = None`: How the rays and labels fade out before the end; `None` for none.

## Orbit

A planet on a Kepler orbit around a star at `focus` (units of `ui.space`): an ellipse of `semi_major` units and `eccentricity` with its closest point (perihelion) to the right of the star, gone around counterclockwise once every `period` seconds. `start` is where the planet is when its clock starts, as a fraction of the period after the perihelion. The planet is fast near the star and slow far from it. With `sweeps`, the first orbit shades that many sectors from the star, each swept in the same `sweep` fraction of the period, at even times around the orbit: Kepler's second law, equal areas in equal times. The orbit and the star draw with `enter`, the planet and the sectors with `parts_enter`.

Page: https://fframes-kit.pages.dev/docs/physics/orbit.md · feature `physics`

- `focus: (f64, f64) = (1.5, 0.0)`: Where the star sits, one focus of the ellipse, in units of `ui.space`.
- `semi_major: f64 = 3.5`: Half the long axis of the ellipse in units of `ui.space`.
- `eccentricity: f64 = 0.6`: How stretched the ellipse is: 0 is a circle, close to 1 a thin ellipse.
- `period: f64 = 5.0`: Seconds the planet takes for one orbit.
- `start: f64 = 0.0`: Where the planet is when its clock starts, as a fraction of the period after the closest point to the star.
- `delay: f32 = 0.0`: Seconds after the container's start before the planet starts to move.
- `time_scale: f32 = 1.0`: Speed of the motion over local time; 2 runs twice as fast, 1 is real time.
- `sweeps: usize = 3`: Number of shaded sectors, swept at even times around the first orbit; 0 for none.
- `sweep: f64 = 0.1`: Fraction of the period each sector takes to sweep, so each covers the same area.
- `star_radius: f32 = 24.0`: Radius of the star in pixels.
- `planet_radius: f32 = 13.0`: Radius of the planet in pixels.
- `orbit_color: Color = theme.colors.muted`: Colour of the dashed orbit ellipse.
- `star_color: Color = theme.colors.highlight`: Colour of the star.
- `planet_color: Color = theme.colors.accent`: Colour of the planet.
- `sweep_color: Color = theme.colors.accent`: Colour of the shaded sectors.
- `stroke_width: f32 = theme.stroke.thin`: Width of the orbit ellipse in pixels.
- `enter: Option<EnterAnim> = None`: How the orbit and the star draw in; `None` shows them from the start.
- `exit: Option<ExitAnim> = None`: How the orbit and the star leave at the end of the container; `None` stays.
- `parts_enter: Option<FadeIn> = None`: How the planet and the sectors fade in; `None` for none.
- `parts_exit: Option<FadeOut> = None`: How the planet and the sectors fade out before the end; `None` for none.
- `fn semi_minor(&self) -> f64`: The semi-minor axis, `a √(1 - e²)`.
- `fn position(&self, t: f64) -> (f64, f64)`: The planet's offset from the star in units after `t` seconds of its clock.
- `fn sweep_start(&self, i: usize) -> f64`: Seconds of the planet's clock when sector `i` of `Orbit::sweeps` starts.

## Orbital

An atomic orbital in 3D, rendered into a `width` x `height` pixel image around `center` (units of `ui.space`): lobes of `size` (scene units, the axes reach 1.3 times as far) in `positive` and `negative` for the sign of the wave function, `d_z²` with its ring. The lobes grow and fade in over `grow` seconds from `delay`, then the view turns `spin` degrees a second seen from `elevation` degrees above. `axes` draws and labels x, y and z, and `label` names the orbital under the image.

Page: https://fframes-kit.pages.dev/docs/chemistry/molecule-3d-and-orbital.md · feature `chemistry`

- `kind: OrbitalKind = OrbitalKind::default()`: Which orbital: the `s`, `p` or `d` shape drawn.
- `center: (f64, f64) = (0.0, 0.0)`: The middle of the image, in units of `ui.space`.
- `width: f32 = 420.0`: Width in pixels of the rendered image.
- `height: f32 = 420.0`: Height in pixels of the rendered image.
- `size: f32 = 1.0`: Length of a lobe in scene units; the axes reach 1.3 times as far.
- `positive: Color = Color::hex("#4dabf7")`: Colour of the lobes where the wave function is positive.
- `negative: Color = Color::hex("#ff6b6b")`: Colour of the lobes where the wave function is negative.
- `opacity: f32 = 0.85`: 0 transparent to 1 opaque, of the lobes once grown.
- `delay: f32 = 0.0`: Seconds after the container's start before the lobes begin to grow and the view begins to turn.
- `grow: f32 = 1.0`: Seconds the lobes take to grow and fade in.
- `spin: f32 = 20.0`: Degrees per second the view turns around the vertical axis once `delay` has passed; 0 holds it still.
- `azimuth: f32 = 30.0`: Degrees the view starts turned around the vertical axis, before `spin` adds to it.
- `elevation: f32 = 20.0`: Degrees the view looks down from above the orbital; 0 is level with it.
- `axes: bool = true`: Draws and labels the x, y and z axes; `false` for none.
- `axis_color: Color = theme.colors.muted`: Colour of the axes and their letters.
- `label: bool = true`: Writes the orbital's name under the image; `false` for none.
- `label_color: Color = theme.colors.text`: Colour of the name under the image.
- `enter: Option<FadeIn> = None`: Fade in at the start; `None` for none.
- `exit: Option<FadeOut> = None`: Fade out before the end; `None` for none.

## Outline

A solid outline `width` units wide around the opaque parts of its children (Remotion's `outline()`), in `color` at `opacity`. With `outline_only` the children are replaced by the filled silhouette in the outline colour. The filter region grows a tenth of the children's box on every side; wider outlines are cut there.

Page: https://fframes-kit.pages.dev/docs/motion/effects.md

- `width: Anim<f32> = Anim::Fixed(8.0)`: Outline width in the children's user units. Animatable; the region grows a tenth of the box, so wider outlines are cut.
- `color: Color = Color::WHITE`: Colour of the outline; its alpha multiplies `opacity`.
- `opacity: f32 = 1.0`: 0 transparent to 1 opaque.
- `outline_only: bool = false`: `true` replaces the children with their silhouette filled in the outline colour; `false` draws the outline behind them.
- `key: Option<&str> = None`: Names the filter when two effects of this kind share a frame.
- `children: Children = ui::no_children()`: The content the filter is applied to (a closure taking the `Ui`).

## Paper

Paper texture on its children (Remotion's `paper()`): fibres, crumples, fine roughness and `fold_count` creases make a relief lit from the top right, which shades the picture and tints it between `color_back` (in the shade) and `color_front`, mixed in by `amount`. `contrast` is the strength of the light, `fiber`, `crumples`, `roughness` and `folds` the strength of each part and `fiber_size`, `crumple_size` their sizes, all relative to `scale` (the texture is `scale` times the area's height across five units). `seed` picks the texture and the creases.

Page: https://fframes-kit.pages.dev/docs/motion/effects.md

- `amount: Anim<f32> = Anim::Fixed(1.0)`: 0 the children unchanged to 1 fully paper. Animatable.
- `color_front: Color = Color::hex("#9fadbc")`: Tint of the lit parts of the paper.
- `color_back: Color = Color::WHITE`: Tint of the shaded parts of the paper.
- `contrast: f32 = 0.3`: 0 to 1 strength of the light that shades the relief.
- `roughness: f32 = 0.4`: 0 to 1 strength of the fine grain.
- `fiber: f32 = 0.3`: 0 to 1 strength of the fibres.
- `fiber_size: f32 = 0.2`: Size of the fibres relative to `scale`.
- `crumples: f32 = 0.3`: 0 to 1 strength of the crumples.
- `crumple_size: f32 = 0.35`: Size of the crumples relative to `scale`.
- `folds: f32 = 0.65`: 0 to 1 strength of the creases.
- `fold_count: u32 = 5`: Number of creases; at most 64.
- `seed: u32 = 6`: Picks the texture and where the creases lie.
- `scale: f32 = 0.6`: Size of the texture: `scale` times the area's height spans five units.
- `area: (f32, f32) = (1920.0, 1080.0)`: Width and height of the area the paper covers from the top left, in the children's user units.
- `key: Option<&str> = None`: Names the filter and gradient ids when two papers share a frame.
- `children: Children = no_children()`: The content that is printed on paper (a closure taking the `Ui`).

## Paragraph

Text wrapped into lines of at most `width` pixels (`Frame::text_break_lines`), aligned inside that width. `(x, y)` is the start of the first baseline; lines are `style.line_height` apart and `\n` starts a new one. Without a measurable font it is one unwrapped line.

Page: https://fframes-kit.pages.dev/docs/text-and-formulas/text.md

- `text: Cow<str> = Cow::Borrowed("")`: The words; `\n` starts a new line.
- `x: f32 = 0.0`: Left edge of the wrap box in pixels of the canvas.
- `y: f32 = 0.0`: Baseline of the first line in pixels of the canvas; later lines go below by the line height.
- `width: f32 = 800.0`: Width in pixels the text wraps into; lines are aligned inside it.
- `style: TextStyle = theme.typography.body`: The font: family, size in pixels, weight and line height.
- `fill: Color = theme.colors.text`: Colour of the text.
- `align: TextAlign = TextAlign::Left`: How the lines sit inside `width`: left, center or right.
- `opacity: f32 = 1.0`: 0 transparent to 1 opaque.

## ParametricFunction

The curve `t -> f(t)` for `t` from `t_range.0` to `t_range.1` (Manim `ParametricFunction`), in data units of `axes` when set, otherwise in units of `space`. Build one with `ParametricFunction::new` to take `ui.space`, or with `Axes::plot_parametric`. Its samples are cached.

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/coordinate-systems.md

- `f: Curve = |t| (theme.cos(), theme.sin())`: The curve `t -> (x, y)`; a plain `fn`. Its points are in data units of `axes` when set, otherwise in units of `space`.
- `t_range: (f64, f64) = (0.0, std::f64::consts::TAU)`: The first and last `t` plotted.
- `axes: Option<AxesMap> = None`: Axes whose data units the curve is in; `None` takes units of `space`.
- `space: Space = Space::FULL_HD`: The coordinate system in units of which the curve is drawn when `axes` is `None`.
- `samples: usize = 256`: Number of straight pieces the sampled curve has before smoothing.
- `fill: Option<Color> = Paint::outline(theme).fill`: `None` leaves the inside empty.
- `stroke: Option<Color> = Paint::outline(theme).stroke`: `None` draws no outline.
- `stroke_width: f32 = Paint::outline(theme).stroke_width`: Outline width in pixels.
- `dash: Option<(f32, f32)> = None`: Dash and gap lengths of the outline.
- `opacity: f32 = 1.0`: 0 transparent to 1 opaque.
- `enter: Option<EnterAnim> = None`: How it appears; `None` shows it from the start.
- `exit: Option<ExitAnim> = None`: How it leaves at the end of its container; `None` stays.
- `emphasis: Option<Emphasis> = None`: An emphasis animation (`Indicate`, `Wiggle`, ..) played while it is shown.
- `fn shape(&self) -> Shape`: The path and paint as a `Shape`.
- `fn new(ui: &Ui, f: Curve, t_range: (f64, f64)) -> Self`: The curve of `f` over `t_range` in `ui.space`, with the theme's paint.
- `fn point(&self, t: f64) -> (f32, f32)`: The pixel of the curve at `t`.

## Pattern

Its children repeated in a grid of small copies (Remotion's `pattern()`). The copies are the children cut to `crop` (left, top, right and bottom insets in units) and scaled by `scale`, `gap_x` and `gap_y` units apart. The grid starts at `origin` moved by `offset_u`, `offset_v` (0 to 1 across the area). Each row is moved right by `row_offset` units more than the one above, starting over every `row_offset_every` rows (0 never), and each column down by `column_offset` units the same way; without `wrap` only the tiles right of and below the origin are drawn. It replaces the children, transparent between the tiles. The children render once and are reused with `<use>`, at most `MAX_TILES` times.

Page: https://fframes-kit.pages.dev/docs/motion/effects.md

- `scale: f32 = 0.1`: Size of each copy as a share of the cropped children; 0.1 makes copies a tenth as wide and tall. Smaller scales are drawn larger once they would pass `MAX_TILES` copies.
- `crop: (f32, f32, f32, f32) = (0.0, 0.0, 0.0, 0.0)`: `(left, top, right, bottom)` insets in the children's user units that are cut off before copying.
- `gap_x: f32 = 0.0`: Width in user units between copies side by side.
- `gap_y: f32 = 0.0`: Height in user units between copies above each other.
- `offset_u: f32 = 0.0`: Horizontal shift of the grid start as a 0 to 1 fraction of the area's width, added to `origin`.
- `offset_v: f32 = 0.0`: Vertical shift of the grid start as a 0 to 1 fraction of the area's height, added to `origin`.
- `row_offset: f32 = 0.0`: User units each row moves right more than the one above, restarting every `row_offset_every` rows.
- `row_offset_every: u32 = 0`: Rows after which `row_offset` starts over; 0 never restarts it.
- `column_offset: f32 = 0.0`: User units each column moves down more than the one before, restarting every `column_offset_every` columns.
- `column_offset_every: u32 = 0`: Columns after which `column_offset` starts over; 0 never restarts it.
- `origin: (f32, f32) = (0.0, 0.0)`: Where the grid starts, as 0 to 1 fractions of `area` (x, y).
- `wrap: bool = true`: `true` fills the whole area; `false` draws only the copies right of and below the origin.
- `area: (f32, f32) = (1920.0, 1080.0)`: Width and height of the area the copies fill from the top left, in the children's user units.
- `key: Option<&str> = None`: Names the clip and tile ids when two patterns share a frame.
- `children: Children = no_children()`: The content that is copied (a closure taking the `Ui`).
- `fn tiles(&self) -> (f32, Vec<(f32, f32)>)`: The scale the tiles are drawn at and the top left corner of every tile that reaches into the area.

## Pendulum

A pendulum hanging from `pivot` (units of `ui.space`, `scale` units per meter) that swings as `motion` says, from `delay` seconds after the local start. With `arc` the swing's reach is a dashed arc, with `angle_label` the angle from the vertical is written next to the pivot. The ceiling and the arc draw with `enter`, the rod and bob fade with `parts_enter`. Without `motion` nothing is drawn.

Page: https://fframes-kit.pages.dev/docs/physics/pendulum-and-energy-bars.md · feature `physics`

- `motion: Option<&PendulumMotion> = None`: The simulated swing to draw, built once in the video's constructor; `None` draws nothing.
- `pivot: (f64, f64) = (0.0, 2.5)`: Where the rod hangs from, in units of `ui.space`.
- `scale: f64 = 1.0`: Units of `ui.space` per meter.
- `delay: f32 = 0.0`: Seconds after the local start before the pendulum is released.
- `time_scale: f32 = 1.0`: Speed of the motion over local time; 2 runs twice as fast, 1 is real time.
- `bob_radius: f32 = 28.0`: Radius of the bob in pixels.
- `arc: bool = true`: Draws the reach of the swing as a dashed arc.
- `angle_label: bool = true`: Writes the angle from the vertical, in degrees, beside the pivot.
- `color: Color = theme.colors.text`: Colour of the rod, the pivot, the ceiling and the angle label.
- `bob_color: Color = theme.colors.accent`: Colour of the bob.
- `guide_color: Color = theme.colors.muted`: Colour of the dashed arc, the rest line and the angle arc.
- `stroke_width: f32 = theme.stroke.regular`: Width of the rod and the ceiling in pixels.
- `enter: Option<EnterAnim> = None`: How the ceiling and the arc draw in; `None` shows them from the start.
- `exit: Option<ExitAnim> = None`: How the ceiling and the arc leave at the end of the container; `None` stays.
- `parts_enter: Option<FadeIn> = None`: How the rod and bob fade in; `None` for none.
- `parts_exit: Option<FadeOut> = None`: How the rod and bob fade out before the end; `None` for none.

## PeriodicTable

The periodic table: 118 tiles `cell` pixels wide, `gap` apart, centred at `center` (units of `ui.space`), the lanthanides and actinides in two rows under it. After `delay` the tiles rise in by atomic number, `stagger` seconds apart. From `highlight_at` the tiles outside group `highlight_group` (1 to 18) and outside `highlight_category` dim to `dim`. From `trend_at` a sweep runs left to right over `sweep` seconds and recolours the tiles by `trend`, from `low_color` to `high_color` (tiles without a value turn `muted`), and with `labels` a legend under the table gives the range.

Page: https://fframes-kit.pages.dev/docs/chemistry/element-tile-and-periodic-table.md · feature `chemistry`

- `center: (f64, f64) = (0.0, 0.0)`: The middle of the table, in units of `ui.space`.
- `cell: f32 = 78.0`: Width and height in pixels of one tile.
- `gap: f32 = 6.0`: Pixels between neighbouring tiles.
- `delay: f32 = 0.0`: Seconds after the container's start before the first tile rises in.
- `stagger: f32 = 0.01`: Seconds between one tile's rise and the next, by atomic number.
- `highlight_group: Option<u32> = None`: Group (1 to 18) whose tiles stay bright while the others dim; `None` for no group.
- `highlight_category: Option<Category> = None`: Category whose tiles stay bright while the others dim; `None` for no category.
- `highlight_at: f32 = 0.0`: Seconds after the container's start when the dimming begins.
- `dim: f32 = 0.2`: Opacity from 0 to 1 that tiles outside the highlight fall to.
- `trend: Option<Trend> = None`: Property the sweep recolours the tiles by, such as electronegativity; `None` for no sweep.
- `trend_at: f32 = 0.0`: Seconds after the container's start when the sweep begins.
- `sweep: f32 = 1.2`: Seconds the recolouring takes to cross the table from left to right.
- `labels: bool = true`: Draws a legend under the table giving the trend's range; `false` for none.
- `low_color: Color = Color::hex("#4dabf7")`: Colour of the lowest trend value.
- `high_color: Color = Color::hex("#ff6b6b")`: Colour of the highest trend value.
- `muted: Color = theme.colors.muted`: Colour of tiles that have no value for the trend.
- `text_color: Color = theme.colors.text`: Colour of the numbers, names and weights on the tiles.
- `enter: Option<FadeIn> = None`: Fade in at the start; `None` for none.
- `exit: Option<FadeOut> = None`: Fade out before the end; `None` for none.
- `fn tile_center(&self, ui: &Ui, number: u32) -> Option<Point>`: The middle of element `number`'s tile, in pixels.

## PhaseFlow

Lets every point of the shape flow along the field `function(x, y) -> (dx, dy)` for `virtual_time` time units by the end (Manim's `PhaseFlow`), in the units of `ui.space`. The flow takes at most `PHASE_FLOW_STEPS` Runge-Kutta steps per point and frame.

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/geometry-animations.md

- `shape: Shape`: The shape whose points move; drawn unchanged before `delay`.
- `function: fn(f64, f64) -> (f64, f64)`: The vector field: gives the velocity `(dx, dy)` at `(x, y)`, in units of `ui.space` per time unit.
- `virtual_time: f32`: Time units of flow reached by the end of the run (1.0 is one unit of the field's time).
- `delay: f32`: Seconds after the container's start before it begins.
- `run_time: f32`: Seconds the animation takes.
- `rate_func: RateFunc`: Easing of the animation over its run time.
- `fn new(shape: Shape, function: fn(f64, f64) -> (f64, f64)) -> Self`: One time unit in 1 second, linear, like Manim.
- `fn flow(&self, x: f64, y: f64, time: f64) -> (f64, f64)`: Where the point `(x, y)` has flowed after `time` time units.

## PhotoFrame

An image of the video's media in a stroked frame with rounded corners; the image is clipped to the frame and covers it (`xMidYMid slice`). A missing image draws the frame alone. `key` names the clip path when two frames are drawn in one frame.

Page: https://fframes-kit.pages.dev/docs/media-and-overlays/data-audio-decoration-and-media.md

- `image: &str = ""`: Name of the image in the video's media; empty or missing draws the frame alone.
- `key: Option<&str> = None`: Names the clip path when two frames share a frame; `None` for none.
- `x: f32 = 0.0`: Left edge of the frame in pixels of the canvas.
- `y: f32 = 0.0`: Top edge of the frame in pixels of the canvas.
- `width: f32 = 480.0`: Width of the frame in pixels.
- `height: f32 = 320.0`: Height of the frame in pixels.
- `radius: f32 = theme.radius.card`: Corner radius of the frame and the image clip in pixels.
- `stroke: Color = theme.colors.title`: Colour of the frame outline.
- `stroke_width: f32 = 12.0`: Outline width in pixels.
- `opacity: f32 = 1.0`: 0 transparent to 1 opaque.

## PhScale

The pH scale as a bar of 15 cells in the colours of universal indicator, `width` by `height` pixels around `center` (units of `ui.space`). With `labels` the values sit under the cells and "acidic", "neutral" and "basic" under them. Each of `markers` (a name and its pH) points at its place above the bar; after `delay` they appear `stagger` seconds apart, in two rows so neighbours do not collide. A `pointer` marks a pH on the bar, for a value that changes. The cells draw with `enter`, the rest fades with `parts_enter`.

Page: https://fframes-kit.pages.dev/docs/chemistry/titration-curve-and-ph-scale.md · feature `chemistry`

- `center: (f64, f64) = (0.0, 0.0)`: The middle of the bar, in units of `ui.space`.
- `width: f32 = 1350.0`: Width of the bar in pixels, shared equally between the 15 cells.
- `height: f32 = 70.0`: Height of the bar in pixels.
- `markers: Vec<(Cow<str>, f64)> = Vec::new()`: Names and their pH, each pointing at its place above the bar; empty for none.
- `pointer: Option<f64> = None`: A pH to point at on the bar, for a value that changes; `None` for no pointer.
- `delay: f32 = 0.0`: Seconds after the container's start before the first marker appears.
- `stagger: f32 = 0.4`: Seconds between one marker appearing and the next.
- `labels: bool = true`: Writes the pH values under the cells and "acidic", "neutral" and "basic" under them; `false` for none.
- `text_color: Color = theme.colors.text`: Colour of the labels and marker names.
- `pointer_color: Color = theme.colors.title`: Colour of the pointer.
- `enter: Option<EnterAnim> = None`: How the cells draw; `None` shows them from the start.
- `exit: Option<ExitAnim> = None`: How the cells leave at the end of the container; `None` stays.
- `parts_enter: Option<FadeIn> = None`: Fade in of the labels, markers and pointer; `None` for none.
- `parts_exit: Option<FadeOut> = None`: Fade out of the labels, markers and pointer before the end; `None` for none.
- `fn point(&self, ui: &Ui, ph: f64) -> Point`: The pixel on the middle line of the bar at `ph`, the whole values at the cells' middles.

## PhyloTree

A phylogenetic tree from `newick`, growing from the root at the left, `width` pixels from the root to the leaves and `row` pixels between leaves, centred on `center` (units of `ui.space`). With branch lengths for every branch it is drawn to scale; without, as a cladogram with the leaves in a column. From `delay` the branches draw outward one level every `step` seconds, and each leaf's name appears when its branch arrives. Named inner nodes are traits shared by everything after them, written on the branch that leads to them. With `highlight` naming a node, its clade turns `highlight_color` at `highlight_at`.

Page: https://fframes-kit.pages.dev/docs/biology/phylo-tree.md · feature `biology`

- `newick: String`: The tree in Newick notation, e.g. `((a:1,b:1)c:2,d:3);`; branch lengths are optional.
- `delay: f32 = 0.0`: Seconds after the container's start before the first branches draw.
- `step: f32 = 0.55`: Seconds each level of branches takes to draw outward.
- `center: (f64, f64) = (-0.7, -0.4)`: The middle of the tree, in units of `ui.space`.
- `width: f32 = 1000.0`: Pixels from the root to the leaves.
- `row: f32 = 66.0`: Pixels between neighbouring leaves.
- `highlight: Option<String> = None`: Name of a node whose clade is highlighted; `None` for none.
- `highlight_at: f32 = 0.0`: Seconds after `delay` when the highlighted clade starts to turn `highlight_color`.
- `branch_color: Color = theme.colors.muted`: Colour of the branches.
- `highlight_color: Color = theme.colors.accent`: Colour the highlighted clade turns.
- `trait_color: Color = Color::hex("#ffd43b")`: Colour of the trait marks and names on the branches.
- `name_style: TextStyle = theme.typography.caption`: The font of the leaf names: family, size in pixels and weight.
- `trait_style: TextStyle = trait_style`: The font of the trait names: family, size in pixels and weight.
- `text_color: Color = theme.colors.text`: Colour of the leaf names.
- `enter: Option<FadeIn> = None`: Fade in at the start; `None` for none.
- `exit: Option<FadeOut> = None`: Fade out before the end; `None` for none.

## Pie

The `progress` (0 to 1) part of a disc, clockwise from the top turned by `rotation` radians clockwise (Remotion `Pie`). With `closed` false only the arc is drawn.

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/shapes.md

- `cx: f32 = 0.0`: Center x in pixels of the canvas.
- `cy: f32 = 0.0`: Center y in pixels of the canvas (y down).
- `radius: f32 = 100.0`: Radius in pixels.
- `progress: f32 = 0.5`: Share of the disc drawn, 0 to 1 (clamped); 1 is the full circle.
- `rotation: f32 = 0.0`: Radians the start turns clockwise from the top.
- `closed: bool = true`: Joins the arc to the center with straight edges; `false` draws only the arc.
- `fill: Option<Color> = Paint::solid(theme).fill`: `None` leaves the inside empty.
- `stroke: Option<Color> = Paint::solid(theme).stroke`: `None` draws no outline.
- `stroke_width: f32 = Paint::solid(theme).stroke_width`: Outline width in pixels.
- `dash: Option<(f32, f32)> = None`: Dash and gap lengths of the outline.
- `opacity: f32 = 1.0`: 0 transparent to 1 opaque.
- `enter: Option<EnterAnim> = None`: How it appears; `None` shows it from the start.
- `exit: Option<ExitAnim> = None`: How it leaves at the end of its container; `None` stays.
- `emphasis: Option<Emphasis> = None`: An emphasis animation (`Indicate`, `Wiggle`, ..) played while it is shown.
- `fn shape(&self) -> Shape`: The path and paint as a `Shape`.

## PolarPlane

A polar grid (Manim `PolarPlane`): circles every `radius_step` up to `radius_max` and `azimuth_step` spokes, `size` units across, with the radii written along the first spoke and the azimuths around the outside. Points are `(r, θ)`, θ in radians.

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/coordinate-systems.md

- `center: (f64, f64) = (0.0, 0.0)`: The middle, in units of `ui.space`.
- `size: f64 = 7.0`: The diameter of the outer circle, in units of `ui.space`.
- `radius_max: f64 = 4.0`: The radius of the outer circle in units of radius; the grid is `size` units across, so this sets the scale of `(r, θ)` points.
- `radius_step: f64 = 1.0`: Radius between two circles, in units of radius; also the step of the written radii.
- `azimuth_step: usize = 12`: Number of spokes.
- `azimuth_units: AzimuthUnits = AzimuthUnits::PiRadians`: How the azimuths around the outside are written: in π or τ radians, degrees, gradians, or not at all.
- `azimuth_offset: f64 = 0.0`: The angle of θ = 0 from the positive x-axis, in radians.
- `azimuth_direction: AzimuthDirection = AzimuthDirection::Ccw`: Which way θ grows from `azimuth_offset`: counterclockwise or clockwise.
- `line_color: Color = theme.colors.accent`: Colour of the circles and spokes.
- `line_width: f32 = theme.stroke.thin`: Width of the circles, spokes and axis lines in pixels.
- `line_opacity: f32 = 0.45`: 0 transparent to 1 opaque, for the circles and spokes; the outer circle and first spoke are always opaque.
- `axis_color: Color = theme.colors.text`: The circle at `radius_max` and the spoke at θ = 0.
- `radius_numbers: bool = true`: Writes the radii along the first spoke.
- `decimals: usize = 0`: Digits after the decimal point of the written radii, and of degrees and gradians.
- `number_style: TextStyle = theme.typography.caption`: The font of the radii and azimuths: family, size in pixels and weight.
- `number_fill: Color = theme.colors.text`: Colour of the radii and azimuths.
- `enter: Option<EnterAnim> = None`: How the circles and spokes appear; `None` shows them from the start.
- `exit: Option<ExitAnim> = None`: How the circles and spokes leave at the end of their container; `None` stays.
- `labels_enter: Option<FadeIn> = None`: How the numbers appear and go; the grid uses `enter` and `exit`.
- `labels_exit: Option<FadeOut> = None`: Fade the numbers out before the end of the container; `None` for none.
- `fn pr2pt_in(&self, space: Space, (r, theta): (f64, f64)) -> Point`: The pixel of the polar point `(r, θ)` in `space`.
- `fn pr2pt(&self, ui: &Ui, rt: (f64, f64)) -> (f32, f32)`: The pixel of the polar point `(r, θ)` (Manim `polar_to_point`, `pr2pt`).
- `fn pt2pr_in(&self, space: Space, p: Point) -> (f64, f64)`: The polar point `(r, θ)` at a pixel in `space`, θ in `0..τ`.
- `fn pt2pr(&self, ui: &Ui, x: f32, y: f32) -> (f64, f64)`: The polar point at a pixel (Manim `point_to_polar`, `pt2pr`).
- `fn azimuth_label(&self, k: usize) -> Option<String>`: The azimuth of spoke `k` written in `azimuth_units`, `None` without numbers.

## Polygon

A closed polygon through `points` (Manim `Polygon`, Remotion `Polygon`).

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/shapes.md

- `points: Vec<(f32, f32)> = vec![(0.0, -100.0), (100.0, 100.0), (-100.0, 100.0)]`: Corner points `(x, y)` in pixels of the canvas, joined in order and closed.
- `fill: Option<Color> = Paint::outline(theme).fill`: `None` leaves the inside empty.
- `stroke: Option<Color> = Paint::outline(theme).stroke`: `None` draws no outline.
- `stroke_width: f32 = Paint::outline(theme).stroke_width`: Outline width in pixels.
- `dash: Option<(f32, f32)> = None`: Dash and gap lengths of the outline.
- `opacity: f32 = 1.0`: 0 transparent to 1 opaque.
- `enter: Option<EnterAnim> = None`: How it appears; `None` shows it from the start.
- `exit: Option<ExitAnim> = None`: How it leaves at the end of its container; `None` stays.
- `emphasis: Option<Emphasis> = None`: An emphasis animation (`Indicate`, `Wiggle`, ..) played while it is shown.
- `fn shape(&self) -> Shape`: The path and paint as a `Shape`.

## Polygram

Several closed polygons in one shape (Manim `Polygram`), one per group of vertices.

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/shapes.md

- `vertex_groups: Vec<Vec<(f32, f32)>>`: One list of corner points `(x, y)` in pixels of the canvas per closed polygon.
- `fill: Option<Color> = Paint::outline(theme).fill`: `None` leaves the inside empty.
- `stroke: Option<Color> = Paint::outline(theme).stroke`: `None` draws no outline.
- `stroke_width: f32 = Paint::outline(theme).stroke_width`: Outline width in pixels.
- `dash: Option<(f32, f32)> = None`: Dash and gap lengths of the outline.
- `opacity: f32 = 1.0`: 0 transparent to 1 opaque.
- `enter: Option<EnterAnim> = None`: How it appears; `None` shows it from the start.
- `exit: Option<ExitAnim> = None`: How it leaves at the end of its container; `None` stays.
- `emphasis: Option<Emphasis> = None`: An emphasis animation (`Indicate`, `Wiggle`, ..) played while it is shown.
- `fn shape(&self) -> Shape`: The path and paint as a `Shape`.

## PopulationCurve

Population growth on axes of time against population, `x_length` by `y_length` (units of `ui.space`) around `center`. From `delay` the curves draw from 0 to `years` in `duration` seconds, a dot at each head; curves that leave the top stop there.

Page: https://fframes-kit.pages.dev/docs/biology/population-curve.md · feature `biology`

- `model: PopulationModel = PopulationModel::Logistic`: Which curves: `Logistic`, `Exponential` or `PredatorPrey`.
- `r: f64 = 0.8`: Growth rate per year (per unit of the time axis).
- `k: f64 = 1000.0`: Carrying capacity, the population a logistic curve levels off at; it also sets the height of the vertical axis.
- `n0: f64 = 10.0`: Starting population at time 0.
- `years: f64 = 15.0`: Length of the time axis; the curves run from 0 to `years`.
- `compare: bool = true`: Draws the faded exponential curve beside a logistic one when `true`.
- `delay: f32 = 0.0`: Seconds after the container's start before the curves begin to draw.
- `duration: f32 = 5.0`: Seconds the curves take to draw from 0 to `years`.
- `center: (f64, f64) = (-0.8, -0.3)`: The middle of the axes, in units of `ui.space`.
- `x_length: f64 = 8.5`: Width of the axes, in units of `ui.space`.
- `y_length: f64 = 5.2`: Height of the axes, in units of `ui.space`.
- `colors: [Color; 2] = [Color::hex("#69db7c"), Color::hex("#ff8787")]`: Colours of the first and the second curve; a faded comparison curve uses the second.
- `axis_color: Color = theme.colors.muted`: Colour of the axes.
- `label_style: TextStyle = label_style`: The font of the axis labels, numbers and legend: family, size in pixels and weight.
- `text_color: Color = theme.colors.text`: Colour of the legend and the carrying-capacity label.
- `enter: Option<FadeIn> = None`: Fade in at the start; `None` for none.
- `exit: Option<FadeOut> = None`: Fade out before the end; `None` for none.
- `fn series(&self, count: usize) -> Vec<Vec<f64>>`: The populations at `count + 1` evenly spaced times from 0 to `years`: one series, or prey and then predators.

## ProgressBar

A bar that fills from the left: with `progress: None` it shows how far the container is through `ui.duration` (a video progress bar), otherwise the given value from 0 to 1. The filled part is never thinner than half a pixel, so it is visible from the start.

Page: https://fframes-kit.pages.dev/docs/media-and-overlays/overlays.md

- `x: f32 = 96.0`: Left edge of the bar in pixels of the canvas.
- `y: f32 = 1000.0`: Top of the bar in pixels of the canvas.
- `width: f32 = 1728.0`: Full width of the track in pixels.
- `height: f32 = 8.0`: Height of the bar in pixels.
- `radius: f32 = 0.0`: Corner radius of the track and the filled part in pixels; 0 for square corners.
- `track: Color = theme.colors.surface`: Colour of the unfilled track behind the bar.
- `fill: Color = theme.colors.accent`: Colour of the filled part.
- `progress: Option<f32> = None`: How full the bar is, 0 to 1; `None` follows how far the container is through `ui.duration`.

## Projectile

A ball launched at `speed` m/s and `angle` radians above the horizontal from `origin` (units of `ui.space`, `scale` units per meter), without drag, landing at the launch height. With `trace` its path draws behind it, with `vectors` it carries its velocity and the velocity's two components (`vector_scale` units per m/s), and with `peak` and `labels` the top of the arc and the landing point are marked with the height and the range. The flight starts `delay` seconds after the local start and the ball stays where it landed. The ground draws with `enter`, the rest fades with `parts_enter`.

Page: https://fframes-kit.pages.dev/docs/physics/projectile.md · feature `physics`

- `origin: (f64, f64) = (-6.0, -2.5)`: Where the ball is launched from, in units of `ui.space`.
- `speed: f64 = 10.0`: Launch speed in m/s.
- `angle: f64 = std::f64::consts::FRAC_PI_4`: Launch angle above the horizontal in radians.
- `gravity: f64 = GRAVITY`: Downward acceleration in m/s²; 0 or less gives no flight.
- `scale: f64 = 1.0`: Units of `ui.space` per meter.
- `delay: f32 = 0.0`: Seconds after the local start before the ball is launched.
- `time_scale: f32 = 1.0`: Speed of the flight over local time; 2 runs twice as fast, 1 is real time.
- `trace: bool = true`: Draws the path flown so far as a dashed line behind the ball.
- `vectors: bool = true`: Draws the ball's velocity and its horizontal and vertical components as arrows until it lands.
- `peak: bool = true`: Marks the top of the arc with a dot and a dashed drop line once the ball has passed it.
- `labels: bool = true`: Writes the height of the top and the range at the landing point (with `peak`).
- `vector_scale: f64 = 0.12`: Units of `ui.space` per m/s for the velocity arrows.
- `radius: f32 = 14.0`: Radius of the ball in pixels.
- `color: Color = theme.colors.title`: Colour of the ball.
- `velocity_color: Color = theme.colors.accent`: Colour of the velocity arrow.
- `component_color: Color = theme.colors.highlight`: Colour of the horizontal and vertical component arrows and the marks.
- `trace_color: Color = theme.colors.muted`: Colour of the dashed path.
- `ground_color: Color = theme.colors.muted`: Colour of the ground line and the dashed drop line.
- `stroke_width: f32 = theme.stroke.regular`: Width of the velocity arrow in pixels; the other arrows and lines use the theme's thin width.
- `enter: Option<EnterAnim> = None`: How the ground draws in; `None` shows it from the start.
- `exit: Option<ExitAnim> = None`: How the ground leaves at the end of the container; `None` stays.
- `parts_enter: Option<FadeIn> = None`: How the ball, path, arrows and labels fade in; `None` for none.
- `parts_exit: Option<FadeOut> = None`: How the ball, path, arrows and labels fade out before the end; `None` for none.
- `fn flight_time(&self) -> f64`: Seconds from the launch until the ball is back at the launch height; 0 when it is not thrown upward or there is no gravity.
- `fn position(&self, t: f64) -> (f64, f64)`: Meters from the launch point after `t` seconds of flight (`y` up), stopping at the landing.
- `fn velocity(&self, t: f64) -> (f64, f64)`: Velocity in m/s after `t` seconds of flight.
- `fn apex(&self) -> (f64, f64, f64)`: The time, horizontal distance and height of the top of the arc.
- `fn range(&self) -> f64`: Meters from the launch point to the landing point.

## PunnettSquare

A Punnett square crossing `parents` (genotypes such as `"Pp"` or `"YyRr"`, one to three genes), `scale` times its normal size around `center` (units of `ui.space`). The first parent's gametes run across the top and the second's down the side, each in a circle. Every cell is coloured by its phenotype from `phenotype_colors` (dominant first, as in `Punnett::phenotype_ratio`) and shows its genotype. Below, the genotype and phenotype ratios count up as the cells fill. Phenotypes are named from `traits`, one (dominant, recessive) pair of names per gene, or written as `P_` and `pp` without them.

Page: https://fframes-kit.pages.dev/docs/biology/punnett-square.md · feature `biology`

- `delay: f32 = 0.0`: Seconds after the container's start before the square appears.
- `center: (f64, f64) = (0.0, 0.0)`: The middle of the square, in units of `ui.space`.
- `scale: f64 = 1.0`: Size factor on the figure; `1.0` is its normal size.
- `parents: (String, String) = ("Pp".into(), "Pp".into())`: Genotypes of the first and second parent, e.g. `("Pp", "Pp")` or `("YyRr", "YyRr")`; the first runs across the top.
- `traits: Vec<(String, String)> = vec![("purple".into(), "white".into())]`: One `(dominant, recessive)` pair of phenotype names per gene; empty writes `P_` and `pp` instead.
- `fill_time: f32 = 2.4`: Seconds the cells take to fill in, row by row.
- `ratios: bool = true`: Counts up the genotype and phenotype ratios under the square when `true`.
- `phenotype_colors: Vec<Color>`: Cell colour by phenotype, dominant first; a phenotype past the end uses `muted_color`.
- `grid_color: Color = theme.colors.muted`: Colour of the square's grid lines and gamete circle outlines.
- `gamete_color: Color = theme.colors.surface`: Fill of the gamete circles.
- `highlight_color: Color = theme.colors.accent`: Colour the outline of a cell flashes as it fills.
- `cell_style: TextStyle = cell_style`: The font of the genotypes in the cells: family, size in pixels and weight.
- `parent_style: TextStyle = theme.typography.body`: The font of the parent genotypes and gametes: family, size in pixels and weight.
- `ratio_style: TextStyle = theme.typography.caption`: The font of the ratio lines below the square: family, size in pixels and weight.
- `text_color: Color = theme.colors.text`: Colour of the genotypes and ratio text.
- `muted_color: Color = theme.colors.muted`: Colour of the secondary text and of phenotypes without a colour in `phenotype_colors`.
- `enter: Option<FadeIn> = None`: Fade in at the start; `None` for none.
- `exit: Option<FadeOut> = None`: Fade out before the end; `None` for none.

## Pythagoras

The Pythagorean theorem: a right triangle with legs `a` (along x) and `b` (up), and a square on each side, outward. `corner` is the right angle in units of `ui.space`. Each square draws with its own `squares_enter` (stagger them with delays) and, with `labels`, shows its area at its center (`a² = 9`, `b² = 16`, `c² = 25`).

Page: https://fframes-kit.pages.dev/docs/math/pythagoras.md · feature `math`

- `a: f64 = 3.0`: Length of the leg along the x-axis, in units of `ui.space`.
- `b: f64 = 4.0`: Length of the leg going up, in units of `ui.space`.
- `corner: (f64, f64) = (0.0, 0.0)`: The right angle's position, in units of `ui.space` (y up).
- `labels: bool = true`: Shows each square's area at its centre when `true`.
- `triangle_color: Color = theme.colors.title`: Colour of the triangle.
- `colors: [Color; 3] = [theme.colors.accent, theme.colors.highlight, theme.colors.caption]`: The squares on `a`, `b` and the hypotenuse.
- `stroke_width: f32 = theme.stroke.regular`: Outline width in pixels of the triangle and squares.
- `enter: Option<EnterAnim> = None`: How the triangle appears; `None` shows it from the start.
- `squares_enter: [Option<EnterAnim>; 3] = [None, None, None]`: How each of the squares on `a`, `b` and the hypotenuse appears; `None` shows it from the start.
- `labels_enter: Option<FadeIn> = None`: Fade in of the area labels; `None` for none.
- `fn areas(&self) -> [f64; 3]`: The squares' areas: `a²`, `b²` and `c²`.

## Queue

A queue: boxes `width` by `height` pixels in a channel `capacity` boxes long, centred on `center` (units of `ui.space`), the front at the left, with `front` and `back` markers under the boxes. It plays a `ListTrace` (the first item is the front), one step every `step_time` seconds from `delay`: enqueued boxes slide in from the right, dequeued ones leave to the left and the rest move up. The whole figure fades with `enter` and `exit`.

Page: https://fframes-kit.pages.dev/docs/computer-science/linked-list-stack-and-queue.md · feature `cs`

- `trace: Option<&ListTrace> = None`: The recorded steps to play (`ListTrace`, the first item is the front); `None` draws nothing.
- `delay: f32 = 0.0`: Seconds after the container's start before the first step.
- `step_time: f32 = 0.7`: Seconds each step of the trace takes.
- `center: (f64, f64) = (0.0, 0.0)`: The middle of the channel, in units of `ui.space`.
- `width: f32 = 110.0`: Width of a box in pixels.
- `height: f32 = 80.0`: Height of a box in pixels.
- `gap: f32 = 12.0`: Space between neighbouring boxes in pixels.
- `capacity: usize = 6`: How many boxes the channel holds; sets its length.
- `notes: bool = true`: Whether the step's note is written under the queue.
- `colors: CellColors = CellColors::themed(theme)`: Colours of the boxes in each state (visited, moved, found).
- `frame_color: Color = theme.colors.muted`: Colour of the channel's outline.
- `marker_color: Color = theme.colors.highlight`: Colour of the `front` and `back` markers.
- `value_style: TextStyle = value_style`: The font of the values in the boxes.
- `small_style: TextStyle = theme.typography.caption`: The font of the markers and notes.
- `enter: Option<FadeIn> = None`: Fade in at the start; `None` for none.
- `exit: Option<FadeOut> = None`: Fade out before the end; `None` for none.

## RadialProgressiveBlur

Its children blurred more and more away from a point (Remotion's `radialProgressiveBlur()`): `start_blur` inside `start` (0 the centre to 1 the ellipse), growing to `end_blur` on and outside an ellipse round `center`, `width` by `height` (shares of the area) and turned `rotation` degrees. Radii are like Remotion's (a Gaussian of a third of them). Drawn as blurred copies under graded masks, one for every 6 units of radius and at most `MAX_BLUR_LEVELS`, so the children render up to nine times.

Page: https://fframes-kit.pages.dev/docs/motion/effects.md

- `center: (f32, f32) = (0.5, 0.5)`: Center of the ellipse as 0 to 1 fractions of `area` (x, y).
- `width: f32 = 1.0`: Width of the ellipse as a share of the area's width, 1 spanning it.
- `height: f32 = 1.0`: Height of the ellipse as a share of the area's height, 1 spanning it.
- `rotation: f32 = 0.0`: Degrees the ellipse is turned.
- `start: f32 = 0.0`: 0 to 1 share of the ellipse inside which the blur stays `start_blur`: 0 only at the centre, 1 all the way to the ellipse.
- `start_blur: f32 = 0.0`: Blur radius inside `start`, like Remotion's (a Gaussian of a third of it); 0 is sharp.
- `end_blur: f32 = 50.0`: Blur radius on and outside the ellipse, like Remotion's (a Gaussian of a third of it).
- `area: (f32, f32) = (1920.0, 1080.0)`: Width and height of the area the effect covers from the top left, in the children's user units.
- `key: Option<&str> = None`: Names the filters when two of these effects share a frame.
- `children: Children = no_children()`: The content that is blurred (a closure taking the `Ui`).

## RadialWave

Manim-physics' `RadialWave`: circular waves from every point of `sources` (units of `ui.space`), `amplitude sin(k r - ω t)` each, summed where they meet. `wavelength` and `speed` are in units and units per second. In 2D the crests are rings in `color` and the troughs dashed rings in `trough_color` (with `troughs`), drawn inside `x_range` by `y_range`; where the rings of two sources cross the waves add up. With `front` (the default) the water is at rest at the start and the rings leave the sources on the figure's clock (`delay`, `time_scale`); without it they fill the area from the start.

Page: https://fframes-kit.pages.dev/docs/physics/radial-wave.md · feature `physics`

- `sources: Vec<(f64, f64)> = vec![(0.0, 0.0)]`: The points the waves spread from, in units of `ui.space`.
- `wavelength: f64 = 1.0`: Units of `ui.space` between two crests.
- `speed: f64 = 1.0`: Speed of the rings in units of `ui.space` per second.
- `amplitude: f64 = 0.3`: Largest height of one wave in units of `ui.space`; it sets the height of the 3D surface.
- `front: bool = true`: The water is at rest at the start and the rings leave the sources on the clock; off fills the area from the start.
- `x_range: (f64, f64) = (-7.0, 7.0)`: Left and right edges of the area the rings are drawn in, in units of `ui.space`.
- `y_range: (f64, f64) = (-4.0, 4.0)`: Bottom and top edges of the area the rings are drawn in, in units of `ui.space`.
- `troughs: bool = true`: Draws the troughs as dashed rings, a quarter wavelength from the crests.
- `show_sources: bool = true`: Draws a dot at each source.
- `resolution: usize = 96`: Pieces along each side of the 3D surface; ignored in 2D.
- `delay: f32 = 0.0`: Seconds after the container's start before the waves begin.
- `time_scale: f32 = 1.0`: Speed of the motion over local time; 2 runs twice as fast, 1 is real time.
- `color: Color = theme.colors.accent`: Colour of the crest rings.
- `trough_color: Color = theme.colors.muted`: Colour of the trough rings.
- `source_color: Color = theme.colors.highlight`: Colour of the source dots.
- `stroke_width: f32 = theme.stroke.regular`: Width of the crest rings in pixels; troughs use the theme's thin width.
- `enter: Option<FadeIn> = None`: Fade in at the start; `None` for none.
- `exit: Option<FadeOut> = None`: Fade out before the end; `None` for none.
- `fn displacement(&self, x: f64, y: f64, t: f64) -> f64`: The height of the water at `(x, y)` after `t` seconds: the sum over the sources of `amplitude sin(k r - ω t)`, without the sources the front has not reached yet.

## RayDiagram

The principal rays of a thin lens or a mirror at `center` (units of `ui.space`) on a horizontal axis, from the tip of an object arrow `object_distance` units to its left and `object_height` tall: parallel to the axis then through the focal point, through the middle, and through the focal point then parallel. They draw on one after another from `delay` seconds after the local start (`ray_time` each, `stagger` apart) and run `reach` units past the optic; then the image forms where they meet, dashed with the rays' backward extensions when it is virtual. Lengths are units of `ui.space` (`focal` is the focal length). The axis, optic, focal points and object draw with `enter`, the rays and the image and the labels with `parts_enter`.

Page: https://fframes-kit.pages.dev/docs/physics/ray-diagram-and-refraction.md · feature `physics`

- `optic: Optic = Optic::Lens`: Whether the element is a thin lens or a spherical mirror.
- `center: (f64, f64) = (0.0, 0.0)`: The middle of the optic, where the axis crosses it, in units of `ui.space`.
- `focal: f64 = 1.8`: Focal length in units of `ui.space`; negative for a diverging lens or a convex mirror.
- `object_distance: f64 = 4.0`: Distance of the object from the optic, to its left, in units of `ui.space`.
- `object_height: f64 = 1.2`: Height of the object arrow in units of `ui.space`.
- `reach: f64 = 6.0`: How far the rays run past the optic, in units of `ui.space`.
- `optic_height: f64 = 4.0`: Height of the drawn lens or mirror in units of `ui.space`.
- `delay: f32 = 0.0`: Seconds after the local start before the first ray begins to draw.
- `ray_time: f32 = 0.8`: Seconds each ray takes to draw.
- `stagger: f32 = 0.6`: Seconds between the start of one ray and the next.
- `labels: bool = true`: Writes `F` under the focal points.
- `optic_color: Color = theme.colors.text`: Colour of the optic, the focal points and their labels.
- `object_color: Color = theme.colors.title`: Colour of the object arrow.
- `image_color: Color = theme.colors.highlight`: Colour of the image arrow.
- `ray_color: Color = theme.colors.accent`: Colour of the rays.
- `guide_color: Color = theme.colors.muted`: Colour of the dashed axis and the mirror's hatching.
- `stroke_width: f32 = theme.stroke.regular`: Width of the optic and the object and image arrows in pixels; rays use the theme's thin width.
- `enter: Option<EnterAnim> = None`: How the axis, optic, focal points and object draw in; `None` shows them from the start.
- `exit: Option<ExitAnim> = None`: How those parts leave at the end of the container; `None` stays.
- `parts_enter: Option<FadeIn> = None`: How the rays, image and labels fade in; `None` for none.
- `parts_exit: Option<FadeOut> = None`: How the rays, image and labels fade out before the end; `None` for none.
- `fn image_distance(&self) -> Option<f64>`: The image distance from `1/d_o + 1/d_i = 1/f`: positive for a real image (right of a lens, left of a mirror), negative for a virtual one, `None` when the object is at the focal point and the rays leave parallel.
- `fn magnification(&self) -> Option<f64>`: The image's height over the object's, `-d_i / d_o`; negative when it is upside down.
- `fn image(&self) -> Option<(f64, f64)>`: The image's tip, in units from the optic, `y` up.

## ReactionEquation

A reaction being balanced: `unbalanced` (typeset from `Reaction::tex` without coefficients) turns into `balanced` (with them) at `delay` over `run_time`, the species sliding apart and the coefficients fading in. With `tally` and a `reaction` a line under it counts the atoms of each element on both sides, in `unequal_color` until they balance and `equal_color` after. The formulas are centred at `center` (units of `ui.space`), 10 pt as `size` pixels. The tally fades with `parts_enter`.

Page: https://fframes-kit.pages.dev/docs/chemistry/reaction-equation.md · feature `chemistry`

- `reaction: Option<&Reaction> = None`: The `Reaction` the atom tally counts and balances; `None` for no tally.
- `unbalanced: Option<&Formula> = None`: The typeset equation before balancing (from `Reaction::typeset` with `false`); `None` shows only `balanced`.
- `balanced: Option<&Formula> = None`: The typeset equation after balancing (from `Reaction::typeset` with `true`); `None` shows only `unbalanced`.
- `center: (f64, f64) = (0.0, 0.0)`: The middle of the equation, in units of `ui.space`.
- `size: f32 = 110.0`: Size of the equation: pixels for a 10 pt font, the tally sits `0.9 * size` pixels under the middle.
- `delay: f32 = 0.0`: Seconds after the container's start before the equation turns into its balanced form.
- `run_time: f32 = 1.2`: Seconds the turn into the balanced equation takes; the tally switches halfway through.
- `tally: bool = true`: Writes a line counting each element's atoms on both sides (`H  4 | 4`); `false` for none.
- `color: Color = theme.colors.text`: Colour of the equation.
- `equal_color: Color = Color::hex("#69db7c")`: Colour of an element's tally when both sides have the same count.
- `unequal_color: Color = Color::hex("#ff6b6b")`: Colour of an element's tally when the two sides differ.
- `parts_enter: Option<FadeIn> = None`: Fade in of the tally; `None` for none.
- `parts_exit: Option<FadeOut> = None`: Fade out of the tally before the end; `None` for none.

## Rect

A rectangle, square corners unless `corner_radius` is set (Remotion `Rect`).

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/shapes.md

- `cx: f32 = 0.0`: Center x in pixels of the canvas.
- `cy: f32 = 0.0`: Center y in pixels of the canvas (y down).
- `width: f32 = 200.0`: Width in pixels.
- `height: f32 = 200.0`: Height in pixels.
- `corner_radius: f32 = 0.0`: Radius of the rounded corners in pixels; 0 for square corners.
- `fill: Option<Color> = Paint::solid(theme).fill`: `None` leaves the inside empty.
- `stroke: Option<Color> = Paint::solid(theme).stroke`: `None` draws no outline.
- `stroke_width: f32 = Paint::solid(theme).stroke_width`: Outline width in pixels.
- `dash: Option<(f32, f32)> = None`: Dash and gap lengths of the outline.
- `opacity: f32 = 1.0`: 0 transparent to 1 opaque.
- `enter: Option<EnterAnim> = None`: How it appears; `None` shows it from the start.
- `exit: Option<ExitAnim> = None`: How it leaves at the end of its container; `None` stays.
- `emphasis: Option<Emphasis> = None`: An emphasis animation (`Indicate`, `Wiggle`, ..) played while it is shown.
- `fn shape(&self) -> Shape`: The path and paint as a `Shape`.

## Rectangle

A `width` by `height` rectangle (Manim `Rectangle`).

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/shapes.md

- `cx: f32 = 0.0`: Center x in pixels of the canvas.
- `cy: f32 = 0.0`: Center y in pixels of the canvas (y down).
- `width: f32 = 400.0`: Full width in pixels.
- `height: f32 = 200.0`: Full height in pixels.
- `fill: Option<Color> = Paint::outline(theme).fill`: `None` leaves the inside empty.
- `stroke: Option<Color> = Paint::outline(theme).stroke`: `None` draws no outline.
- `stroke_width: f32 = Paint::outline(theme).stroke_width`: Outline width in pixels.
- `dash: Option<(f32, f32)> = None`: Dash and gap lengths of the outline.
- `opacity: f32 = 1.0`: 0 transparent to 1 opaque.
- `enter: Option<EnterAnim> = None`: How it appears; `None` shows it from the start.
- `exit: Option<ExitAnim> = None`: How it leaves at the end of its container; `None` stays.
- `emphasis: Option<Emphasis> = None`: An emphasis animation (`Indicate`, `Wiggle`, ..) played while it is shown.
- `fn shape(&self) -> Shape`: The path and paint as a `Shape`.

## RecursionTree

The tree of a recursion's calls: a node for each call, wide enough for the longest label and `height` pixels tall, `spacing` pixels between slots and `level` pixels between depths, centred on `center` (units of `ui.space`). It plays a `CallTrace`, one step every `step_time` seconds from `delay`: each call's node drops in under its caller, the open calls are outlined in `path_color` with the innermost lit, a returning call shows its result beside it in `colors.found`, and finished calls keep their result in `colors.sorted`. The whole figure fades with `enter` and `exit`.

Page: https://fframes-kit.pages.dev/docs/computer-science/call-trace-call-stack-and-recursion-tree.md · feature `cs`

- `trace: Option<&CallTrace> = None`: The recorded calls to play (`CallTrace`); `None` draws nothing.
- `delay: f32 = 0.0`: Seconds after the container's start before the first step.
- `step_time: f32 = 0.6`: Seconds each step of the trace takes.
- `center: (f64, f64) = (0.0, 0.0)`: The middle of the tree, in units of `ui.space`.
- `spacing: f32 = 190.0`: Pixels between neighbouring node slots in a depth.
- `level: f32 = 130.0`: Pixels between depths.
- `height: f32 = 60.0`: Height of a node in pixels.
- `notes: bool = true`: Whether the step's note is written under the tree.
- `colors: CellColors = CellColors::themed(theme)`: Colours of the nodes in each state (`colors.found` for a returning call, `colors.sorted` for a finished one).
- `edge_color: Color = theme.colors.muted`: Colour of the edges between a call and its callees.
- `path_color: Color = theme.colors.accent`: Colour of the outline of the open calls.
- `value_style: TextStyle = value_style`: The font of the call labels.
- `small_style: TextStyle = theme.typography.caption`: The font of the results and notes.
- `enter: Option<FadeIn> = None`: Fade in at the start; `None` for none.
- `exit: Option<FadeOut> = None`: Fade out before the end; `None` for none.

## Refraction

A ray meeting the flat boundary between two media at `point` (units of `ui.space`): it comes in from the upper left at `angle` radians from the normal through the upper medium (index `n1`) and bends into the lower one (`n2`) by Snell's law, `n1 sin θ1 = n2 sin θ2`. Past the critical angle it is reflected whole instead. With `reflection` the weak reflected ray is drawn as well. The rays draw on from `delay` seconds after the local start, the incoming one over `ray_time` seconds and then the others; with `labels` the angles and indices are written. Rays are `length` units long. The boundary, the normal and the media draw with `enter`, the rays and labels with `parts_enter`.

Page: https://fframes-kit.pages.dev/docs/physics/ray-diagram-and-refraction.md · feature `physics`

- `point: (f64, f64) = (0.0, 0.0)`: Where the ray meets the boundary, in units of `ui.space`.
- `n1: f64 = 1.0`: Refractive index of the upper medium, where the ray comes from.
- `n2: f64 = 1.5`: Refractive index of the lower medium; the ray bends toward the normal when it is higher.
- `angle: f64 = 0.7`: Angle of incidence in radians from the normal; past the critical angle the ray is reflected whole.
- `length: f64 = 3.0`: Length of the rays in units of `ui.space`; the lower medium is that deep.
- `reflection: bool = true`: Draws the weak reflected ray as well, when the ray is refracted.
- `labels: bool = true`: Writes the angles and the indices of the two media.
- `delay: f32 = 0.0`: Seconds after the local start before the incoming ray begins to draw.
- `ray_time: f32 = 0.8`: Seconds each ray takes to draw; the outgoing rays start when the incoming one is done.
- `ray_color: Color = theme.colors.accent`: Colour of the rays.
- `medium_color: Color = theme.colors.surface`: Colour of the lower medium.
- `guide_color: Color = theme.colors.muted`: Colour of the boundary, the dashed normal and the angle arcs.
- `text_color: Color = theme.colors.text`: Colour of the index and angle labels.
- `stroke_width: f32 = theme.stroke.regular`: Width of the incoming and outgoing rays and the boundary in pixels.
- `enter: Option<EnterAnim> = None`: How the boundary, normal and media draw in; `None` shows them from the start.
- `exit: Option<ExitAnim> = None`: How the boundary, normal and media leave at the end of the container; `None` stays.
- `parts_enter: Option<FadeIn> = None`: How the rays, angles and labels fade in; `None` for none.
- `parts_exit: Option<FadeOut> = None`: How the rays, angles and labels fade out before the end; `None` for none.
- `fn refraction_angle(&self) -> Option<f64>`: The angle of the refracted ray from the normal, or `None` past the critical angle.
- `fn critical_angle(&self) -> Option<f64>`: The angle of incidence past which the ray is reflected whole; only when `n1 > n2`.

## RegionBlur

Its children blurred inside a rectangle (Remotion's `regionBlur()`): from `top_left` to `bottom_right` (0 to 1 across the area), blurred by `radius` like Remotion's (a Gaussian of a third of it), the edge softened over `feather` units and the corners rounded by `roundness` (0 square to 1 fully round). The blurred copy is laid over the sharp children, so the children render twice.

Page: https://fframes-kit.pages.dev/docs/motion/effects.md

- `top_left: (f32, f32) = (0.25, 0.25)`: Top left corner of the blurred rectangle, as 0 to 1 fractions of `area`.
- `bottom_right: (f32, f32) = (0.75, 0.75)`: Bottom right corner of the blurred rectangle, as 0 to 1 fractions of `area`.
- `radius: Anim<f32> = Anim::Fixed(40.0)`: Blur radius like Remotion's (a Gaussian of a third of it); 0 or less shows the children unblurred. Animatable.
- `feather: f32 = 0.0`: Width in `area` units over which the rectangle's edge softens; 0 for a hard edge.
- `roundness: f32 = 0.0`: Corner rounding: 0 square to 1 fully round.
- `area: (f32, f32) = (1920.0, 1080.0)`: Width and height of the area the effect covers from the top left, in the children's user units.
- `key: Option<&str> = None`: Names the filters when two of these effects share a frame.
- `children: Children = no_children()`: The content that is blurred inside the rectangle (a closure taking the `Ui`).

## RegularPolygon

A regular polygon with `n` corners on a circle of `radius` (Manim `RegularPolygon`). `start_angle` is the first corner; `None` is Manim's default (right for an even `n`, top for an odd one).

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/shapes.md

- `cx: f32 = 0.0`: Center x in pixels of the canvas.
- `cy: f32 = 0.0`: Center y in pixels of the canvas (y down).
- `radius: f32 = 100.0`: Radius in pixels of the circle the corners lie on.
- `n: usize = 6`: Number of corners (at least 3).
- `start_angle: Option<f32> = None`: Radians of the first corner, counterclockwise on screen from the right; `None` puts it on the right for an even `n`, at the top for an odd one.
- `fill: Option<Color> = Paint::outline(theme).fill`: `None` leaves the inside empty.
- `stroke: Option<Color> = Paint::outline(theme).stroke`: `None` draws no outline.
- `stroke_width: f32 = Paint::outline(theme).stroke_width`: Outline width in pixels.
- `dash: Option<(f32, f32)> = None`: Dash and gap lengths of the outline.
- `opacity: f32 = 1.0`: 0 transparent to 1 opaque.
- `enter: Option<EnterAnim> = None`: How it appears; `None` shows it from the start.
- `exit: Option<ExitAnim> = None`: How it leaves at the end of its container; `None` stays.
- `emphasis: Option<Emphasis> = None`: An emphasis animation (`Indicate`, `Wiggle`, ..) played while it is shown.
- `fn shape(&self) -> Shape`: The path and paint as a `Shape`.

## RegularPolygram

A regular star polygon (Manim `RegularPolygram`): `num_vertices` corners on a circle of `radius`, each joined to the one `density` steps on. `start_angle` is the first corner; `None` is Manim's default (right for an even count, top for an odd one).

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/shapes.md

- `cx: f32 = 0.0`: Center x in pixels of the canvas.
- `cy: f32 = 0.0`: Center y in pixels of the canvas (y down).
- `radius: f32 = 100.0`: Radius in pixels.
- `num_vertices: usize = 5`: Number of corners on the circle (at least 3).
- `density: usize = 2`: How many corners on each corner joins to; 2 on 5 corners draws a pentagram.
- `start_angle: Option<f32> = None`: Radians of the first corner, counterclockwise on screen from the right; `None` puts it on the right for an even count, at the top for an odd one.
- `fill: Option<Color> = Paint::outline(theme).fill`: `None` leaves the inside empty.
- `stroke: Option<Color> = Paint::outline(theme).stroke`: `None` draws no outline.
- `stroke_width: f32 = Paint::outline(theme).stroke_width`: Outline width in pixels.
- `dash: Option<(f32, f32)> = None`: Dash and gap lengths of the outline.
- `opacity: f32 = 1.0`: 0 transparent to 1 opaque.
- `enter: Option<EnterAnim> = None`: How it appears; `None` shows it from the start.
- `exit: Option<ExitAnim> = None`: How it leaves at the end of its container; `None` stays.
- `emphasis: Option<Emphasis> = None`: An emphasis animation (`Indicate`, `Wiggle`, ..) played while it is shown.
- `fn shape(&self) -> Shape`: The path and paint as a `Shape`.

## ReplacementTransform

`Transform` that draws `to` itself once the morph has finished (Manim's `ReplacementTransform`).

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/geometry-animations.md

- `from: Shape`: The shape it starts as; drawn until `delay` has passed.
- `to: Shape`: The shape it ends as.
- `delay: f32`: Seconds after the container's start before it begins.
- `run_time: f32`: Seconds the animation takes.
- `rate_func: RateFunc`: Easing of the animation over its run time.
- `fn new(from: Shape, to: Shape) -> Self`: From `from` to `to` in Manim's 1 second, smooth.

## RiemannRectangles

Rectangles of width `dx` from `x_range.0` to `x_range.1`, each as high as `f` at its left edge, center or right edge (Manim `get_riemann_rectangles`). Below the x-axis for negative values.

Page: https://fframes-kit.pages.dev/docs/math/riemann-sum-and-area-under.md

- `f: Func = |x| x`: The function whose value at the left edge, center or right edge gives each rectangle's height, in data units.
- `x_range: (f64, f64) = (0.0, 1.0)`: The first and last `x` the rectangles cover, in data units.
- `dx: f64 = 0.1`: Width of each rectangle in data units.
- `sample_at: SampleAt = SampleAt::Left`: Where `f` is read for a rectangle's height: its left edge, center or right edge.
- `axes: AxesMap = AxesMap::default()`: The mapping of the axes the rectangles stand on (`axes.map(ui)`).
- `fill: Option<Color> = paint.fill`: `None` leaves the inside empty.
- `stroke: Option<Color> = paint.stroke`: `None` draws no outline.
- `stroke_width: f32 = paint.stroke_width`: Outline width in pixels.
- `dash: Option<(f32, f32)> = None`: Dash and gap lengths of the outline.
- `opacity: f32 = 1.0`: 0 transparent to 1 opaque.
- `enter: Option<EnterAnim> = None`: How it appears; `None` shows it from the start.
- `exit: Option<ExitAnim> = None`: How it leaves at the end of its container; `None` stays.
- `emphasis: Option<Emphasis> = None`: An emphasis animation (`Indicate`, `Wiggle`, ..) played while it is shown.
- `fn shape(&self) -> Shape`: The path and paint as a `Shape`.
- `fn sum(&self) -> f64`: The Riemann sum: the signed area of the rectangles, in data units.

## RiemannSum

Riemann rectangles that get finer: `rects` is drawn with each width of `dxs` in turn, `hold` seconds each, cross-fading to the next over `crossfade` seconds, from `delay`. `sum` writes the Riemann sum after its text with `decimals`, fading with the rectangles. Build `rects` with `Axes::riemann_rectangles`.

Page: https://fframes-kit.pages.dev/docs/math/riemann-sum-and-area-under.md · feature `math`

- `rects: RiemannRectangles = RiemannRectangles::themed(theme)`: The rectangles, built with `Axes::riemann_rectangles`; their width is replaced by each of `dxs` in turn.
- `dxs: Vec<f64> = vec![0.5, 0.25, 0.1]`: Rectangle widths, in the x units of the axes, shown one after the other (finer each time).
- `delay: f32 = 0.0`: Seconds after the container's start before the first set of rectangles appears.
- `hold: f32 = 1.0`: Seconds each set of rectangles stays before the next begins to replace it.
- `crossfade: f32 = theme.motion.duration.base`: Seconds one set takes to fade into the next.
- `sum: Option<Label> = None`: Text written beside the rectangles followed by the Riemann sum; `None` for no number.
- `decimals: usize = 3`: Digits after the decimal point of the sum.

## RightAngle

The square mark of a right angle between two lines (Manim `RightAngle`).

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/shapes.md

- `line1: Segment = ((0.0, 0.0), (200.0, 0.0))`: The first line as two points `((x1, y1), (x2, y2))` in pixels of the canvas; the mark starts from it.
- `line2: Segment = ((0.0, 0.0), (0.0, -200.0))`: The second line, in the same form; the mark turns to it.
- `radius: f32 = ANGLE_RADIUS`: Radius of the mark in pixels, about where the lines cross.
- `quadrant: (f32, f32) = (1.0, 1.0)`: Which half of each line the mark sits on: `1` along its direction, `-1` against.
- `other_angle: bool = false`: Marks the other angle, clockwise from the first line to the second.
- `elbow: bool`: A square corner instead of an arc.
- `dot: bool = false`: A dot inside the mark, `dot_distance` of the way out from the corner.
- `dot_radius: f32 = 5.0`: Radius of the dot in pixels.
- `dot_distance: f32 = 0.55`: How far out the dot sits, as a fraction of the mark's radius (0 at the corner, 1 on the mark).
- `dot_color: Color = theme.colors.title`: Colour of the dot.
- `label: ShapeLabel = ShapeLabel::None`: A label beside the mark, `label_buff` beyond its radius.
- `label_buff: f32 = 3.0 * SMALL_BUFF`: Pixels between the mark's radius and the label.
- `label_style: TextStyle = theme.typography.body`: The label's font: family, size in pixels and weight.
- `label_color: Color = theme.colors.title`: Colour of the label text.
- `stroke: Option<Color> = Some(theme.colors.accent)`: `None` draws no outline.
- `stroke_width: f32 = theme.stroke.regular`: Outline width in pixels.
- `opacity: f32 = 1.0`: 0 transparent to 1 opaque.
- `enter: Option<EnterAnim> = None`: How it appears; `None` shows it from the start.
- `exit: Option<ExitAnim> = None`: How it leaves at the end of its container; `None` stays.
- `emphasis: Option<Emphasis> = None`: An emphasis animation (`Indicate`, `Wiggle`, ..) played while it is shown.
- `fn value(&self) -> f32`: The angle the mark spans in radians, always positive (Manim `get_value`).
- `fn path(&self) -> BezPath`: The mark alone: an arc, or a square corner.

## RigidWorld

The bodies of `motion` where they are `delay` seconds after the local start (times `time_scale`), Manim-physics' `SpaceScene`. Each body is its own shape, filled with `fill_color` (its own `color` if it has one, `fixed_color` when fixed) and outlined, a circle with a radius that shows it turning. `draw` replaces that for the bodies it returns something for. Everything fades with `enter` and `exit`. Without `motion` nothing is drawn.

Page: https://fframes-kit.pages.dev/docs/physics/rigid-world.md · feature `physics`

- `motion: Option<&RigidMotion> = None`: The simulated bodies to draw, built once in the video's constructor; `None` draws nothing.
- `delay: f32 = 0.0`: Seconds after the local start before the simulation starts to play.
- `time_scale: f32 = 1.0`: Speed of the motion over local time; 2 runs twice as fast, 1 is real time.
- `draw: Option<DrawBody> = None`: Draws a body in your own way: a closure given its `BodyView` that returns the picture, or `None` to leave it to the default shape.
- `fill_color: Color = theme.colors.accent`: Fill of a body that has no colour of its own.
- `fixed_color: Color = theme.colors.muted`: Fill of fixed bodies such as walls.
- `stroke_color: Color = theme.colors.text`: Colour of the outline, and of the radius that shows a circle turning.
- `stroke_width: f32 = theme.stroke.thin`: Outline width in pixels.
- `enter: Option<FadeIn> = None`: Fade in at the start; `None` for none.
- `exit: Option<FadeOut> = None`: Fade out before the end; `None` for none.

## Rings

Concentric rings over its children (Remotion's `rings()`): rings `thickness` units wide in `colors` taken in turn, `gap` units of the children showing between them, round `center` (0 to 1 across the area). `offset` moves the rings outwards (animate it to make them expand); with `mask_to_source_alpha` they cover only the opaque parts of the children (which then render twice). Draws at most `MAX_RINGS` rings.

Page: https://fframes-kit.pages.dev/docs/motion/effects.md

- `colors: Vec<Color> = PALE_BLUES.to_vec()`: Colours of the rings, taken in turn from the middle outwards; empty draws none.
- `center: (f32, f32) = (0.5, 0.5)`: Middle of the rings as 0 to 1 fractions of `area` (x, y).
- `thickness: f32 = 40.0`: Width of each ring in the children's user units; 0 draws none.
- `gap: f32 = 0.0`: Width in user units of the children showing between rings.
- `offset: f32 = 0.0`: Moves the rings outwards in user units; animate it to make them expand.
- `mask_to_source_alpha: bool = false`: `true` covers only the opaque parts of the children, which then render twice.
- `area: (f32, f32) = (1920.0, 1080.0)`: Width and height of the area the rings cover from the top left, in the children's user units.
- `key: Option<&str> = None`: Names the clip and mask ids when two of these effects share a frame.
- `children: Children = no_children()`: The content the rings are laid over (a closure taking the `Ui`).
- `fn bands(&self) -> Vec<(i64, f32, f32)>`: The rings that reach into the area: their index in the colour cycle and their inner and outer radius, from the middle outwards.

## RoughenEdges

The edge of its children roughened like torn paper (Remotion's `roughenEdges()`): `amount` 0 to 1, `border` how far the edge moves in and out, `scale` the size of the noise (smaller is finer) and `seed` the pattern; derive the seed from the frame to animate the edge. The alpha is blurred, shifted by `feTurbulence` noise and cut at a threshold, so the edge stays smooth at any scale.

Page: https://fframes-kit.pages.dev/docs/motion/effects.md

- `amount: Anim<f32> = Anim::Fixed(1.0)`: 0 unchanged to 1 fully roughened. Animatable.
- `border: f32 = 26.5`: How far the edge moves in and out, in the children's user units; 0 or less leaves it unchanged.
- `scale: f32 = 0.07`: Size of the noise that tears the edge, 0.01 to 4: smaller is finer.
- `seed: f32 = 231.2`: Picks the tear pattern (rounded to a whole number); derive it from the frame to animate the edge.
- `key: Option<&str> = None`: Names the filter when two effects of this kind share a frame.
- `children: Children = ui::no_children()`: The content the filter is applied to (a closure taking the `Ui`).

## RoundedRectangle

A rectangle with round corners (Manim `RoundedRectangle`).

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/shapes.md

- `cx: f32 = 0.0`: Center x in pixels of the canvas.
- `cy: f32 = 0.0`: Center y in pixels of the canvas (y down).
- `width: f32 = 400.0`: Full width in pixels.
- `height: f32 = 200.0`: Full height in pixels.
- `corner_radius: f32 = theme.radius.md`: Radius of the rounded corners in pixels; 0 for square corners.
- `fill: Option<Color> = Paint::outline(theme).fill`: `None` leaves the inside empty.
- `stroke: Option<Color> = Paint::outline(theme).stroke`: `None` draws no outline.
- `stroke_width: f32 = Paint::outline(theme).stroke_width`: Outline width in pixels.
- `dash: Option<(f32, f32)> = None`: Dash and gap lengths of the outline.
- `opacity: f32 = 1.0`: 0 transparent to 1 opaque.
- `enter: Option<EnterAnim> = None`: How it appears; `None` shows it from the start.
- `exit: Option<ExitAnim> = None`: How it leaves at the end of its container; `None` stays.
- `emphasis: Option<Emphasis> = None`: An emphasis animation (`Indicate`, `Wiggle`, ..) played while it is shown.
- `fn shape(&self) -> Shape`: The path and paint as a `Shape`.

## SampleSpace

A rectangle of probabilities (Manim `SampleSpace`): `columns` split it left to right by their `p`, and each column's `rows` split it top to bottom, so the area of a cell is the probability of both. Probabilities that do not add up to 1 are scaled so they fill the rectangle. A row is coloured by its index in `colors`, a column without rows by its own.

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/coordinate-systems.md

- `columns: Vec<SampleColumn> = Vec::new()`: The strips from left to right, each as wide as its probability and divided into rows from the top.
- `center: (f64, f64) = (0.0, 0.0)`: The middle, in units of `ui.space`.
- `width: f64 = 6.0`: In units of `ui.space`.
- `height: f64 = 4.0`: Height of the rectangle in units of `ui.space`.
- `colors: Vec<Color> = vec![theme.colors.accent, theme.colors.highlight, theme.colors.muted]`: Fill colours of the rows by their index (a column without rows uses its own index); repeats when there are fewer than rows, and an empty list uses `stroke`.
- `fill_opacity: f32 = 0.75`: 0 transparent to 1 opaque, for the cell fills.
- `stroke: Color = theme.colors.text`: Colour of the cell outlines and the braces.
- `stroke_width: f32 = theme.stroke.thin`: Width of the cell outlines in pixels.
- `label_style: TextStyle = theme.typography.body`: The font of the row and column labels: family, size in pixels and weight.
- `label_fill: Color = theme.colors.title`: Colour of the row and column labels.
- `brace_depth: f32 = 18.0`: How far the brace under a column bulges, in pixels.
- `enter: Option<EnterAnim> = None`: How the cells appear; `None` shows them from the start.
- `exit: Option<ExitAnim> = None`: How the cells leave at the end of their container; `None` stays.
- `labels_enter: Option<FadeIn> = None`: How the labels and braces appear and go; the cells use `enter` and `exit`.
- `labels_exit: Option<FadeOut> = None`: Fade the labels and braces out before the end of the container; `None` for none.
- `fn bounds_in(&self, space: Space) -> Rect`: The whole rectangle in pixels of `space`.
- `fn cells_in(&self, space: Space) -> Vec<(Rect, Vec<Rect>)>`: The pixel rectangle of every column and of every cell in it, `(column, cells)`.

## Saturation

Its children more or less saturated (SVG `saturate`): `amount` 1 unchanged, 0 grey.

Page: https://fframes-kit.pages.dev/docs/motion/effects.md

- `amount: Anim<f32> = Anim::Fixed(1.6)`: Saturation factor: 1 unchanged, 0 grey, above 1 more saturated.
- `key: Option<&str> = None`: Names the filter when two effects of this kind share a frame.
- `children: Children = ui::no_children()`: The content the filter is applied to (a closure taking the `Ui`).

## Scale

Its children scaled by `scale` about the middle of the area (Remotion's `scale()`), only across with `vertical` off and only up and down with `horizontal` off. Cut to the area.

Page: https://fframes-kit.pages.dev/docs/motion/effects.md

- `scale: Anim<f32> = Anim::Fixed(1.0)`: Scale factor about the middle of the area: 1 unchanged, 2 twice as big. Animatable; negative values count as 0.
- `horizontal: bool = true`: `false` leaves the width unscaled.
- `vertical: bool = true`: `false` leaves the height unscaled.
- `area: (f32, f32) = (1920.0, 1080.0)`: Width and height of the area the result is cut to from the top left, in the children's user units.
- `key: Option<&str> = None`: Names the clip id when two scales share a frame.
- `children: Children = no_children()`: The content that is scaled (a closure taking the `Ui`).

## Scanlines

Horizontal CRT lines over its children (Remotion's `scanlines()`). Each line `thickness` units tall, one every `spacing` units, lights the picture and the gaps darken it, so the average brightness stays: `amount` is the strength, 0 unchanged. The light is added to every channel, or with `premultiply` scales the colours, which follows the picture's brightness more closely. `offset` scrolls the lines (animate it for a rolling screen). Keep the lines at least two output pixels apart, finer lines alias. The children render twice, their alpha stays.

Page: https://fframes-kit.pages.dev/docs/motion/effects.md

- `amount: Anim<f32> = Anim::Fixed(0.15)`: 0 unchanged to 1 full strength of the lines. Animatable.
- `spacing: f32 = 4.0`: Distance between the middles of two lines in the children's user units; keep it at least 2 output pixels or it aliases.
- `thickness: f32 = 1.0`: Height of each lit line in user units; at most `spacing`.
- `offset: f32 = 0.0`: Scrolls the lines down by this many user units; animate it for a rolling screen.
- `premultiply: bool = false`: `true` scales the colours instead of adding light to every channel, which follows the picture's brightness more closely.
- `area: (f32, f32) = (1920.0, 1080.0)`: Width and height of the area the lines cover from the top left, in the children's user units.
- `key: Option<&str> = None`: Names the filter and mask ids when two of these effects share a frame.
- `children: Children = no_children()`: The content the lines are laid over (a closure taking the `Ui`).

## ScatterPlot

Dots at data points on axes. From `delay` they grow in one after another, `stagger` seconds apart, each over `run_time`. Points that are not finite are left out.

Page: https://fframes-kit.pages.dev/docs/math/plots.md

- `points: Vec<(f64, f64)> = Vec::new()`: The `(x, y)` data points in data units of the axes; a point that is not finite is left out.
- `axes: AxesMap = AxesMap::default()`: The mapping of the axes the dots sit on (`axes.map(ui)`).
- `radius: f32 = 9.0`: Radius of a grown dot in pixels.
- `color: Color = theme.colors.accent`: Fill colour of the dots.
- `delay: f32 = 0.0`: Seconds after the container's start before the first dot begins to grow.
- `stagger: f32 = 0.03`: Seconds each dot waits after the one before it.
- `run_time: f32 = theme.motion.duration.fast`: Seconds each dot takes to grow.
- `rate_func: RateFunc = theme.motion.easing.enter`: Easing of each dot's growth over its run time.
- `enter: Option<EnterAnim> = None`: Applied to all the dots once they have grown.
- `exit: Option<ExitAnim> = None`: How the dots leave at the end of their container; `None` stays.
- `fn grown(&self, i: usize, t: f32) -> f32`: How far dot `i` has grown at `t`, from 0 to 1.

## SceneFade

Fades its children in at the start and out at the end of the enclosing `Sequence` or scene (`ui.duration`). Without a known end only the fade in runs. A 0 length skips that fade.

Page: https://fframes-kit.pages.dev/docs/motion/transitions.md

- `fade_in: f32 = theme.motion.duration.fast`: Seconds of the fade in.
- `fade_out: f32 = theme.motion.duration.fast`: Seconds of the fade out, ending with `ui.duration`.
- `rate_func: RateFunc = theme.motion.easing.standard`: Easing of the fades over their lengths.
- `children: Children = no_children()`: What it fades; a closure taking the `Ui`.
- `fn new(ui: &Ui, children: Children) -> Self`: Fades of the theme's `motion.duration.fast` with its standard easing.
- `fn opacity(&self, t: f32, length: Option<f32>) -> f32`: Opacity at `t` seconds of a container that lasts `length` seconds.

## Schematic

Symbols wired together. `symbols` are drawn as they are (their `enter` and `exit` aside) and `wires` connect their terminals at right angles through the corners each one gives; there is no automatic routing. Where three or more conductors meet (a terminal with two wires, or a wire ending on another) a junction dot is drawn with `junctions`.

Page: https://fframes-kit.pages.dev/docs/physics/symbol-and-schematic.md · feature `physics`

- `symbols: Vec<Symbol> = Vec::new()`: The parts of the circuit, each placed with its own position, rotation and label.
- `wires: Vec<Connection> = Vec::new()`: The wires between terminals or points, in order; a wire with a missing terminal is left out.
- `current_at: Option<f32> = None`: Seconds of local time when the current starts to flow and bulbs light up; `None` for no current.
- `current_speed: f32 = 160.0`: Speed of the current dots in pixels per second, before each wire's own `current` factor.
- `dot_spacing: f32 = 56.0`: Pixels between two current dots along a wire.
- `junctions: bool = true`: Draws a dot where three or more conductors meet.
- `wire_color: Color = theme.colors.text`: Colour of the wires and junction dots.
- `dot_color: Color = theme.colors.accent`: Colour of the current dots.
- `stroke_width: f32 = theme.stroke.regular`: Width of the wires in pixels.
- `enter: Option<EnterAnim> = None`: How the wires and symbols draw in; `None` shows them from the start.
- `exit: Option<ExitAnim> = None`: How the wires and symbols leave at the end of the container; `None` stays.
- `parts_enter: Option<FadeIn> = None`: How the labels, current dots and glow fade in; `None` for none.
- `parts_exit: Option<FadeOut> = None`: How the labels, current dots and glow fade out before the end; `None` for none.
- `fn pin(&self, pin: Pin) -> Option<(f64, f64)>`: Where `pin` is, in units of `ui.space`.
- `fn route(&self, wire: &Connection) -> Option<Vec<(f64, f64)>>`: The corners of `wire` from its start to its end, in units of `ui.space`, or `None` when one of its ends does not resolve.
- `fn unresolved(&self) -> Vec<usize>`: The indices of the wires with an end that names a missing symbol or terminal.
- `fn flowing(&self, now: f32) -> f32`: Seconds the current has flowed at `now`, 0 before it starts or without it.
- `fn junctions(&self) -> Vec<(f64, f64)>`: The points where three or more conductors meet, in units of `ui.space`: the ends of wires, counting a terminal as one conductor and a wire that runs on through the point as two.

## ScreenRectangle

A rectangle in a screen's proportions (Manim `ScreenRectangle`): 16:9, half the canvas tall, in its middle.

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/shapes.md

- `cx: f32 = 960.0`: Center x in pixels of the canvas.
- `cy: f32 = 540.0`: Center y in pixels of the canvas (y down).
- `height: f32 = 540.0`: Height in pixels; the width is `height * aspect_ratio`.
- `aspect_ratio: f32 = 16.0 / 9.0`: Width divided by height.
- `fill: Option<Color> = Paint::outline(theme).fill`: `None` leaves the inside empty.
- `stroke: Option<Color> = Paint::outline(theme).stroke`: `None` draws no outline.
- `stroke_width: f32 = Paint::outline(theme).stroke_width`: Outline width in pixels.
- `dash: Option<(f32, f32)> = None`: Dash and gap lengths of the outline.
- `opacity: f32 = 1.0`: 0 transparent to 1 opaque.
- `enter: Option<EnterAnim> = None`: How it appears; `None` shows it from the start.
- `exit: Option<ExitAnim> = None`: How it leaves at the end of its container; `None` stays.
- `emphasis: Option<Emphasis> = None`: An emphasis animation (`Indicate`, `Wiggle`, ..) played while it is shown.
- `fn shape(&self) -> Shape`: The path and paint as a `Shape`.

## Secant

The secant of `f` through `x` and `x + dx`, extended `extend` pixels past both points, with dots on them and, when `legs` is set, the dashed `dx` and `dy` legs (Manim's `get_secant_slope_group`). As `dx` goes to 0 it turns into the tangent.

Page: https://fframes-kit.pages.dev/docs/math/tangent-and-secant.md · feature `math`

- `f: Func = |x| x`: The function, taking x in the axes' coordinates and returning y.
- `axes: AxesMap = AxesMap::default()`: The axes (an `AxesMap`) the function sits on; turns graph coordinates into canvas points.
- `x: ValueTracker = 0.0.into()`: The x, in the axes' coordinates, of the first point; a tracker so it can slide along the graph.
- `dx: ValueTracker = 1.0.into()`: The distance from `x` to the second point, in the axes' x units; as it goes to 0 the secant becomes the tangent.
- `extend: f32 = 120.0`: Pixels the line runs past each of the two points.
- `legs: bool = true`: Draws the dashed `dx` and `dy` legs of the slope triangle when `true`.
- `color: Color = theme.colors.highlight`: Colour of the secant line and its dots.
- `legs_color: Color = theme.colors.muted`: Colour of the dashed legs.
- `stroke_width: f32 = theme.stroke.regular`: Line width in pixels; the legs draw at half of it.
- `dot: f32 = 10.0`: Radius in pixels of the dots on the two points; `0` for no dots.
- `enter: Option<EnterAnim> = None`: How it appears; `None` shows it from the start.
- `exit: Option<ExitAnim> = None`: How it leaves at the end of its container; `None` stays.

## Sector

A slice of a disc from `start_angle` by `angle` (Manim `Sector`).

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/shapes.md

- `cx: f32 = 0.0`: Center x in pixels of the canvas.
- `cy: f32 = 0.0`: Center y in pixels of the canvas (y down).
- `radius: f32 = 100.0`: Radius in pixels.
- `start_angle: f32 = 0.0`: Where the slice starts, in radians counterclockwise on screen from the right (0 is right).
- `angle: f32 = std::f32::consts::FRAC_PI_2`: How far the slice turns, in radians; counterclockwise on screen for a positive value.
- `fill: Option<Color> = Paint::solid(theme).fill`: `None` leaves the inside empty.
- `stroke: Option<Color> = Paint::solid(theme).stroke`: `None` draws no outline.
- `stroke_width: f32 = Paint::solid(theme).stroke_width`: Outline width in pixels.
- `dash: Option<(f32, f32)> = None`: Dash and gap lengths of the outline.
- `opacity: f32 = 1.0`: 0 transparent to 1 opaque.
- `enter: Option<EnterAnim> = None`: How it appears; `None` shows it from the start.
- `exit: Option<ExitAnim> = None`: How it leaves at the end of its container; `None` stays.
- `emphasis: Option<Emphasis> = None`: An emphasis animation (`Indicate`, `Wiggle`, ..) played while it is shown.
- `fn shape(&self) -> Shape`: The path and paint as a `Shape`.

## Sequence

Shows its children from `from` seconds on, for `duration` seconds or until the parent ends. Inside, time starts at 0 and `ui.duration` is the sequence's length.

Page: https://fframes-kit.pages.dev/docs/basics/time-containers-and-fades.md

- `from: f32 = 0.0`: Start in the parent's local seconds.
- `duration: Option<f32> = None`: Length in seconds; `None` runs until the parent ends.
- `children: Children = no_children()`: What it shows; a closure taking the `Ui`, whose time starts at 0 at `from`.

## SequenceDiagram

A sequence diagram: `participants` as boxes along the top, `spacing` pixels apart, with dashed lifelines below, centred on `center` (units of `ui.space`). From `delay` it sends one of `messages` every `step_time` seconds, `row` pixels below the one before: a packet travels from the sender's lifeline to the receiver's in the first `travel` of the step, drawing the arrow behind it, and the label appears above it, cut with `…` to fit between the lifelines. A message to the sender itself loops out to the right. The message being sent is in `active_color`, earlier ones in `message_color`; replies are dashed. With `numbers` the labels are numbered. The whole figure fades with `enter` and `exit`.

Page: https://fframes-kit.pages.dev/docs/computer-science/sequence-diagram.md · feature `cs`

- `participants: Vec<String> = Vec::new()`: Names of the participants, left to right; each is a box on top of a dashed lifeline.
- `messages: Vec<Message> = Vec::new()`: The messages in sending order, one per step; each goes between two participants.
- `delay: f32 = 0.0`: Seconds after the container's start before the first message is sent.
- `step_time: f32 = 1.0`: Seconds between the start of one message and the start of the next.
- `travel: f32 = 0.6`: Fraction of `step_time`, 0..1, a packet takes to travel from sender to receiver.
- `center: (f64, f64) = (0.0, 0.0)`: The middle of the diagram, in units of `ui.space`.
- `spacing: f32 = 420.0`: Pixels between neighbouring lifelines.
- `row: f32 = 76.0`: Pixels between one message and the next below it.
- `numbers: bool = true`: Whether the message labels are numbered.
- `box_color: Color = theme.colors.surface`: Fill of the participant boxes.
- `line_color: Color = theme.colors.muted`: Colour of the lifelines and the box outlines.
- `message_color: Color = theme.colors.text`: Colour of the arrows of messages already sent.
- `active_color: Color = theme.colors.highlight`: Colour of the message being sent.
- `text_color: Color = theme.colors.text`: Colour of the participant names and the message labels.
- `name_style: TextStyle = name_style`: The font of the participant names.
- `label_style: TextStyle = theme.typography.caption`: The font of the message labels.
- `enter: Option<FadeIn> = None`: Fade in at the start; `None` for none.
- `exit: Option<FadeOut> = None`: Fade out before the end; `None` for none.

## Series

Children one after the other, each for its own number of seconds. Each item starts `overlap` seconds before the previous one ends, so both show during the overlap.

Page: https://fframes-kit.pages.dev/docs/basics/time-containers-and-fades.md

- `items: Vec<(f32, Children)>`: `(seconds, children)` in play order.
- `overlap: f32`: Seconds each item overlaps the one before it; 0 plays them back to back.

## ShaderNoise

Film grain on the GPU: a grey value per `scale` pixel cell at `opacity`, over a `size` area from the top left. The same `seed` gives the same grain; with `animated` it moves on every frame. Only the Skia backend runs shaders: the CPU backend draws nothing and the editor a placeholder, so use `Noise` where those matter.

Page: https://fframes-kit.pages.dev/docs/motion/effects.md

- `seed: u32 = 0`: Seeds the grain; the same seed draws the same grain.
- `opacity: f32 = 0.12`: 0 transparent to 1 opaque.
- `scale: f32 = 2.0`: Side of one grain cell in pixels of the canvas; at least 1.
- `animated: bool = true`: `true` moves the seed on every frame so the grain flickers; `false` keeps it still.
- `size: (f32, f32) = (1920.0, 1080.0)`: Width and height of the grain area from the top left, in pixels of the canvas.

## ShadowsHighlights

Shadows and highlights: `shadows` lifts the dark tones (up to a sixth at 1) and `highlights` pulls the light tones down, through a curve on every channel. An approximation: the real effect looks at each pixel's neighbourhood, this curve only at the pixel's own value.

Page: https://fframes-kit.pages.dev/docs/motion/effects.md

- `shadows: Anim<f32> = Anim::Fixed(0.6)`: How much the dark tones are lifted, 0 to 1 (up to a sixth of the range).
- `highlights: f32 = 0.3`: How much the light tones are pulled down, 0 to 1 (up to a sixth of the range).
- `key: Option<&str> = None`: Names the filter when two effects of this kind share a frame.
- `children: Children = ui::no_children()`: The content the filter is applied to (a closure taking the `Ui`).

## ShowPassingFlash

A piece of the outline `time_width` long runs along it once; nothing is drawn before or after (Manim's `ShowPassingFlash`). Draw the shape itself separately to keep it. A shape without an outline flashes in its fill colour.

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/geometry-animations.md

- `shape: Shape`: The shape; its outline is what the effect draws (its fill colour is used if it has no stroke), the shape itself is not drawn.
- `time_width: f32`: Length of the flash as a fraction of the outline's length.
- `delay: f32`: Seconds after the container's start before it begins.
- `run_time: f32`: Seconds the animation takes.
- `rate_func: RateFunc`: Easing of the animation over its run time.
- `fn new(shape: Shape) -> Self`: Along `shape` in Manim's 1 second, smooth, a tenth of it long.

## ShowPassingFlashWithThinningStrokeWidth

`n_segments` passing flashes over each other: the head is wide, the tail thins out behind it (Manim's `ShowPassingFlashWithThinningStrokeWidth`). The widest is the shape's stroke width (at least 2).

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/geometry-animations.md

- `shape: Shape`: The shape; its outline is what the effect draws (its fill colour is used if it has no stroke), the shape itself is not drawn.
- `n_segments: usize`: How many flashes are layered; more make a smoother taper (at least 2).
- `time_width: f32`: Length of the longest, thinnest flash as a fraction of the outline's length.
- `delay: f32`: Seconds after the container's start before it begins.
- `run_time: f32`: Seconds the animation takes.
- `rate_func: RateFunc`: Easing of the animation over its run time.
- `fn new(shape: Shape) -> Self`: Along `shape` in Manim's 1 second, smooth, 10 segments, a tenth of it long.
- `fn segments(&self) -> Vec<(f32, f32)>`: `(stroke width, time width)` of every flash that draws something: Manim's widths from 0 to the widest against time widths from `time_width` to 0, without the ends.

## Shrinkwrap

Its children shrink-wrapped in plastic (Remotion's `shrinkwrap()`): glossy glints on `feTurbulence` wrinkles, brightest at `highlight_intensity`, a stretched highlight along the edges facing the top left at `edge_tension`, all scaled by `amount` (0 unchanged). `wrinkle_density` from 0 (broad folds) to 1 (tight texture) and `seed` pick the wrinkles. Remotion also displaces the picture along the wrinkles; that needs `feDisplacementMap`, which the CPU backend draws wrongly, so it is left out.

Page: https://fframes-kit.pages.dev/docs/motion/effects.md

- `amount: Anim<f32> = Anim::Fixed(1.0)`: 0 unchanged to 1 full strength of every wrap effect. Animatable.
- `highlight_intensity: f32 = 0.75`: Brightness of the glossy glints on the wrinkles; 0 for none.
- `wrinkle_density: f32 = 0.42`: 0 broad folds to 1 tight texture.
- `edge_tension: f32 = 0.45`: 0 to 1 strength of the stretched highlight along the edges that face the top left.
- `seed: u32 = 0`: Picks the wrinkle pattern.
- `key: Option<&str> = None`: Names the filter when two effects of this kind share a frame.
- `children: Children = ui::no_children()`: The content the filter is applied to (a closure taking the `Ui`).

## Skew

Its children slanted (Remotion's `skew()`): `x` degrees along the horizontal, then `y` along the vertical, like CSS `skewX` and `skewY`, about `origin` (0 to 1 across the area). Cut to the area.

Page: https://fframes-kit.pages.dev/docs/motion/effects.md

- `x: Anim<f32> = Anim::Fixed(20.0)`: Degrees of slant along the horizontal, like CSS `skewX`. Animatable.
- `y: Anim<f32> = Anim::Fixed(0.0)`: Degrees of slant along the vertical, like CSS `skewY`, applied after `x`. Animatable.
- `origin: (f32, f32) = (0.5, 0.5)`: Fixed point of the slant, as 0 to 1 fractions of `area` (x, y); `(0.5, 0.5)` is the middle.
- `area: (f32, f32) = (1920.0, 1080.0)`: Width and height of the area the result is cut to from the top left, in the children's user units.
- `key: Option<&str> = None`: Names the clip id when two skews share a frame.
- `children: Children = no_children()`: The content that is slanted (a closure taking the `Ui`).

## Slide

One slide of a `Deck`: a layout that builds in, then holds.

Page: https://fframes-kit.pages.dev/docs/slides/slides.md

- `key: &str`: The slide's stable name: its scene name in a deck, the key of its clips in fframes Studio's timeline and of its stops. Unique in a deck; keep it when the slide changes.
- `layout: SlideLayout`: What the slide shows.
- `build: Option<f32>`: Seconds the build-in takes. `None` keeps the layout's own timing; a value stretches or squeezes it to that length, and 0 shows every part from the first frame.
- `hold: f32`: Seconds the built slide stays before it ends, 1 by default.
- `notes: Option<&str>`: Speaker notes, for presenting; not drawn.
- `backdrop: Backdrop`: What is drawn behind the layout, `Backdrop::Plain` (the theme's background) by default.
- `footer: Option<SlideFooter>`: A label and page number along the bottom; `None` for none. `Deck::footer` sets one on every slide but title pages.
- `fn new(key: &str, layout: SlideLayout) -> Self`: A slide with the layout's own build-in, a hold of 1 second, no notes, a plain backdrop and no footer.
- `fn build_seconds(&self) -> f32`: Seconds the build-in takes: `build`, or the layout's own timing without one.
- `fn seconds(&self) -> f32`: Seconds the slide lasts: its build-in plus its hold.
- `fn reveal_times(&self) -> Vec<f32>`: Seconds into the slide when each bullet of a `SlideLayout::Bullets` is fully in, one per item in order; empty for the other layouts. A presenter stops at these.
- `fn notes(&self) -> Option<&str>`: The speaker notes.

## SmoothedVectorizedHomotopy

`Homotopy` whose path gets smooth handles after every step (Manim's `SmoothedVectorizedHomotopy`), for maps that would leave corners.

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/geometry-animations.md

- `homotopy: Homotopy`: The homotopy to play; its path is smoothed after every step.

## SortVisualizer

A sort as bars, `width` by `height` pixels around `center` (units of `ui.space`), each as tall as its value. It plays an `ArrayTrace` from `ArrayTrace::bubble`, `insertion`, `merge` or `quick`, one step every `step_time` seconds from `delay`: the compared bars light up, moved bars slide to their new place, and bars in their final place turn `colors.sorted`. `name` is written above the bars with the comparisons and moves so far; `values` writes each value under its bar and `notes` the step under the figure. The whole figure fades with `enter` and `exit`.

Page: https://fframes-kit.pages.dev/docs/computer-science/sort-visualizer.md · feature `cs`

- `trace: Option<&ArrayTrace> = None`: The recorded steps to play (an `ArrayTrace` of a sort); `None` draws nothing.
- `name: Cow<str> = Cow::Borrowed("")`: Name of the algorithm written above the bars; empty for none.
- `delay: f32 = 0.0`: Seconds after the container's start before the first step.
- `step_time: f32 = 0.25`: Seconds each step of the trace takes.
- `center: (f64, f64) = (0.0, 0.0)`: The middle of the figure, in units of `ui.space`.
- `width: f32 = 900.0`: Width of the bars area in pixels.
- `height: f32 = 420.0`: Height in pixels of the tallest bar.
- `values: bool = true`: Whether each value is written under its bar.
- `counts: bool = true`: Whether the comparisons and moves so far are counted next to the name.
- `notes: bool = true`: Whether the step's note is written under the bars.
- `colors: CellColors`: Colours of the bars in each state (compared, moved, sorted).
- `muted: Color = theme.colors.muted`: Colour of the counts, the values and the notes.
- `name_style: TextStyle = theme.typography.body`: The font of the algorithm name.
- `small_style: TextStyle = theme.typography.caption`: The font of the values, counts and notes.
- `enter: Option<FadeIn> = None`: Fade in at the start; `None` for none.
- `exit: Option<FadeOut> = None`: Fade out before the end; `None` for none.

## Spark

A sparkle: `points` sharp points joined by curves that pass `inner` times the size from the center (Remotion's star with rounded inner corners).

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/shapes.md

- `cx: f32 = 0.0`: Center x in pixels of the canvas.
- `cy: f32 = 0.0`: Center y in pixels of the canvas (y down).
- `size: f32 = 100.0`: Distance in pixels from the center to each point.
- `points: usize = 4`: Number of points (at least 2).
- `inner: f32 = 0.2`: Distance of the curves' control point from the center as a fraction of `size`; smaller gives thinner points.
- `fill: Option<Color> = Paint::solid(theme).fill`: `None` leaves the inside empty.
- `stroke: Option<Color> = Paint::solid(theme).stroke`: `None` draws no outline.
- `stroke_width: f32 = Paint::solid(theme).stroke_width`: Outline width in pixels.
- `dash: Option<(f32, f32)> = None`: Dash and gap lengths of the outline.
- `opacity: f32 = 1.0`: 0 transparent to 1 opaque.
- `enter: Option<EnterAnim> = None`: How it appears; `None` shows it from the start.
- `exit: Option<ExitAnim> = None`: How it leaves at the end of its container; `None` stays.
- `emphasis: Option<Emphasis> = None`: An emphasis animation (`Indicate`, `Wiggle`, ..) played while it is shown.
- `fn shape(&self) -> Shape`: The path and paint as a `Shape`.

## Speckle

Small holes punched through its children (Remotion's `speckle()`): a share `density` of the cells of a grid gets a round hole `size` units across. `randomness` moves the holes off the cell centres and varies their size (0 keeps a regular grid). One cell is 2.5 holes wide; a grid finer than about 20,000 holes is drawn coarser.

Page: https://fframes-kit.pages.dev/docs/motion/effects.md

- `density: f32 = 0.08`: 0 to 1 share of the grid cells that get a hole.
- `size: f32 = 4.0`: Diameter of a hole in the children's user units; one cell is 2.5 holes wide.
- `randomness: f32 = 1.0`: 0 to 1: how far holes move off the cell centers and vary in size; 0 keeps a regular grid.
- `area: (f32, f32) = (1920.0, 1080.0)`: Width and height of the area the holes cover from the top left, in the children's user units.
- `key: Option<&str> = None`: Names the mask id when two of these effects share a frame.
- `children: Children = no_children()`: The content the holes are punched through (a closure taking the `Ui`).
- `fn holes(&self) -> Vec<(f32, f32, f32)>`: The holes: their centres and radii.

## SpectrumBars

One rounded bar per value, spread over `width` from `x`. A value becomes `value * gain` pixels, kept between `min_height` and `max_height`; NaN draws the shortest bar. Pass the values of `spectrum` (often `.step_by(n)` or `center_spectrum_low_frequencies`).

Page: https://fframes-kit.pages.dev/docs/media-and-overlays/data-audio-decoration-and-media.md

- `values: Vec<f32> = Vec::new()`: One bar per value, left to right; empty draws nothing.
- `x: f32 = 0.0`: Left edge of the bars in pixels of the canvas.
- `y: f32 = 0.0`: Vertical anchor of the bars in pixels of the canvas: their middle with `BarAlign::Center`, their foot with `BarAlign::Bottom`.
- `width: f32 = 1920.0`: Width in pixels the bars are spread over.
- `bar_width: f32 = 24.0`: Width of one bar in pixels.
- `gain: f32 = 60.0`: Pixels of bar height per unit of value.
- `min_height: f32 = 24.0`: Shortest bar in pixels; also used for NaN.
- `max_height: f32 = 720.0`: Tallest bar in pixels.
- `radius: Option<f32> = None`: `None` rounds the ends fully (half the bar width).
- `fill: Color = theme.colors.accent`: Colour of the bars.
- `align: BarAlign = BarAlign::Center`: Whether the bars grow up and down from `y` or only up.
- `fn height(&self, value: f32) -> f32`: The height in pixels a value is drawn at.

## SpringMass

A block on a horizontal spring fixed to a wall at `wall` (units of `ui.space`, the middle of the spring's end; `scale` units per meter), oscillating as `motion` says from `delay` seconds after the local start. The block rests `rest_length` meters from the wall, marked by a dashed line. With `plot`, the displacement so far is drawn on those axes (time in seconds along x, meters up y) with a dot at the current value, so the oscillation and its graph move together; show the axes yourself. The wall and floor draw with `enter`, the rest fades with `parts_enter`. Without `motion` nothing is drawn.

Page: https://fframes-kit.pages.dev/docs/physics/spring-mass.md · feature `physics`

- `motion: Option<&SpringMotion> = None`: The simulated oscillation to draw, built once in the video's constructor; `None` draws nothing.
- `wall: (f64, f64) = (-6.0, 1.5)`: Where the spring is fixed to the wall (the middle of its end), in units of `ui.space`.
- `rest_length: f64 = 3.0`: Meters from the wall to the block's near side at rest; the dashed line marks it.
- `scale: f64 = 1.0`: Units of `ui.space` per meter.
- `delay: f32 = 0.0`: Seconds after the local start before the block is let go.
- `time_scale: f32 = 1.0`: Speed of the motion over local time; 2 runs twice as fast, 1 is real time.
- `coils: usize = 10`: Number of turns of the zigzag that draws the spring.
- `block_size: f32 = 110.0`: Side of the square block in pixels.
- `plot: Option<AxesMap> = None`: Axes to plot the displacement on as the block moves (time in seconds along x, meters along y); `None` for no plot. Draw the axes yourself.
- `color: Color = theme.colors.text`: Colour of the spring, the wall and the floor.
- `block_color: Color = theme.colors.accent`: Colour of the block.
- `plot_color: Color = theme.colors.highlight`: Colour of the displacement plot and its dot.
- `guide_color: Color = theme.colors.muted`: Colour of the dashed rest line.
- `stroke_width: f32 = theme.stroke.regular`: Width of the spring, the wall, the floor and the plot in pixels.
- `enter: Option<EnterAnim> = None`: How the wall, floor and rest line draw in; `None` shows them from the start.
- `exit: Option<ExitAnim> = None`: How the wall, floor and rest line leave at the end of the container; `None` stays.
- `parts_enter: Option<FadeIn> = None`: How the spring, block and plot fade in; `None` for none.
- `parts_exit: Option<FadeOut> = None`: How the spring, block and plot fade out before the end; `None` for none.

## Square

A square with sides of `side_length` (Manim `Square`).

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/shapes.md

- `cx: f32 = 0.0`: Center x in pixels of the canvas.
- `cy: f32 = 0.0`: Center y in pixels of the canvas (y down).
- `side_length: f32 = 200.0`: Length of each side in pixels.
- `fill: Option<Color> = Paint::outline(theme).fill`: `None` leaves the inside empty.
- `stroke: Option<Color> = Paint::outline(theme).stroke`: `None` draws no outline.
- `stroke_width: f32 = Paint::outline(theme).stroke_width`: Outline width in pixels.
- `dash: Option<(f32, f32)> = None`: Dash and gap lengths of the outline.
- `opacity: f32 = 1.0`: 0 transparent to 1 opaque.
- `enter: Option<EnterAnim> = None`: How it appears; `None` shows it from the start.
- `exit: Option<ExitAnim> = None`: How it leaves at the end of its container; `None` stays.
- `emphasis: Option<Emphasis> = None`: An emphasis animation (`Indicate`, `Wiggle`, ..) played while it is shown.
- `fn shape(&self) -> Shape`: The path and paint as a `Shape`.

## Stack

A stack: boxes `width` by `height` pixels piled up from the bottom of a container that holds `capacity` of them, centred on `center` (units of `ui.space`), with a `top` marker beside the top box. It plays a `ListTrace` (the last item is the top), one step every `step_time` seconds from `delay`: pushed boxes drop in from above, popped ones rise out. With `indices` (manim-dsa's `add_indexes`) each box has its index left of the container, 0 at the bottom, and `label` (`add_label`, empty for none) is written under it. The whole figure fades with `enter` and `exit`.

Page: https://fframes-kit.pages.dev/docs/computer-science/linked-list-stack-and-queue.md · feature `cs`

- `trace: Option<&ListTrace> = None`: The recorded steps to play (`ListTrace`, the last item is the top); `None` draws nothing.
- `delay: f32 = 0.0`: Seconds after the container's start before the first step.
- `step_time: f32 = 0.7`: Seconds each step of the trace takes.
- `center: (f64, f64) = (0.0, 0.0)`: The middle of the container, in units of `ui.space`.
- `width: f32 = 220.0`: Width of a box in pixels.
- `height: f32 = 60.0`: Height of a box in pixels.
- `gap: f32 = 10.0`: Space between neighbouring boxes in pixels.
- `capacity: usize = 5`: How many boxes the container holds; sets its height.
- `indices: bool = false`: Whether each box has its index left of the container, 0 at the bottom.
- `label: &str = ""`: Text written under the container; empty for none.
- `notes: bool = true`: Whether the step's note is written under the stack.
- `colors: CellColors = CellColors::themed(theme)`: Colours of the boxes in each state (visited, moved, found).
- `frame_color: Color = theme.colors.muted`: Colour of the container's outline.
- `marker_color: Color = theme.colors.highlight`: Colour of the `top` marker.
- `index_color: Color = theme.colors.muted`: Colour of the indices.
- `label_color: Color = theme.colors.text`: Colour of the label under the container.
- `value_style: TextStyle = value_style`: The font of the values in the boxes.
- `small_style: TextStyle = theme.typography.caption`: The font of the marker, indices and notes.
- `enter: Option<FadeIn> = None`: Fade in at the start; `None` for none.
- `exit: Option<FadeOut> = None`: Fade out before the end; `None` for none.

## Star

A star with `n` points (Manim `Star`, Remotion `Star`). The first point is at the top; `inner_radius` is where the edges meet between the points.

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/shapes.md

- `cx: f32 = 0.0`: Center x in pixels of the canvas.
- `cy: f32 = 0.0`: Center y in pixels of the canvas (y down).
- `n: usize = 5`: Number of points (at least 2).
- `outer_radius: f32 = 100.0`: Radius in pixels of the points.
- `inner_radius: f32 = 38.2`: Radius in pixels of the notches between the points.
- `fill: Option<Color> = Paint::outline(theme).fill`: `None` leaves the inside empty.
- `stroke: Option<Color> = Paint::outline(theme).stroke`: `None` draws no outline.
- `stroke_width: f32 = Paint::outline(theme).stroke_width`: Outline width in pixels.
- `dash: Option<(f32, f32)> = None`: Dash and gap lengths of the outline.
- `opacity: f32 = 1.0`: 0 transparent to 1 opaque.
- `enter: Option<EnterAnim> = None`: How it appears; `None` shows it from the start.
- `exit: Option<ExitAnim> = None`: How it leaves at the end of its container; `None` stays.
- `emphasis: Option<Emphasis> = None`: An emphasis animation (`Indicate`, `Wiggle`, ..) played while it is shown.
- `fn shape(&self) -> Shape`: The path and paint as a `Shape`.

## Starburst

Rays of colour from a point (Remotion's `starburst()`): `rays` (2 to 100) wedges round `origin` (0 to 1 across the area), coloured with `colors` in turn and turned `rotation` degrees clockwise; the first ray starts on the left. `smoothness` (0 to 1) blends each ray into the next over that share of a ray. It replaces the layer, so it takes no children.

Page: https://fframes-kit.pages.dev/docs/motion/effects.md

- `rays: u32 = 12`: Number of wedges round `origin`, 2 to 100.
- `colors: Vec<Color> = vec![theme.colors.accent, theme.colors.background]`: Colours of the wedges, used in turn; empty draws nothing.
- `rotation: f32 = 0.0`: Degrees the rays are turned clockwise; the first ray starts on the left.
- `smoothness: f32 = 0.0`: 0 to 1: the share of a ray over which it blends into the next; 0 for hard edges.
- `origin: (f32, f32) = (0.5, 0.5)`: Where the rays meet, as 0 to 1 fractions of `area` (x, y).
- `area: (f32, f32) = (1920.0, 1080.0)`: Width and height of the area the rays fill from the top left, in pixels of the canvas.
- `key: Option<&str> = None`: Names the clip id when two starbursts share a frame.
- `fn wedges(&self) -> Vec<(f32, f32, usize)>`: The rays as `(start, end, colour index)`, in degrees clockwise from the right.

## StateMachine

A state machine running over its input: round states `radius` pixels (accepting ones with a second ring), `spacing` pixels between columns and `level` pixels between rows, centred on `center` (units of `ui.space`), an arrow into the start state, labelled transitions (loops above their state, pairs that point both ways bent apart) and the input as a tape underneath. It plays a `MachineTrace`, one step every `step_time` seconds from `delay`: a token travels along the transition taken while the tape's symbol lights up, the current state lights up, and at the end it turns `colors.found` when the input is accepted or `reject_color` when not. The whole figure fades with `enter` and `exit`.

Page: https://fframes-kit.pages.dev/docs/computer-science/machine-machine-trace-and-state-machine.md · feature `cs`

- `trace: Option<&MachineTrace> = None`: The recorded steps to play (`MachineTrace`); `None` draws nothing.
- `delay: f32 = 0.0`: Seconds after the container's start before the first step.
- `step_time: f32 = 0.9`: Seconds each step of the trace takes.
- `center: (f64, f64) = (0.0, 0.0)`: The middle of the machine, in units of `ui.space`.
- `spacing: f32 = 240.0`: Pixels between columns of states.
- `level: f32 = 170.0`: Pixels between rows of states.
- `radius: f32 = 40.0`: Radius of a state in pixels.
- `tape: bool = true`: Whether the input is drawn as a tape under the machine.
- `notes: bool = true`: Whether the step's note is written under the machine.
- `colors: CellColors = CellColors::themed(theme)`: Colours of the states in each state of the run (`colors.found` for an accepted input).
- `edge_color: Color = theme.colors.muted`: Colour of the transitions and the arrow into the start state.
- `active_color: Color = theme.colors.highlight`: Colour of the transition being taken, its label and the travelling token.
- `reject_color: Color = Color::hex("#ff6b6b")`: Colour of the current state when the input is rejected.
- `value_style: TextStyle = value_style`: The font of the state names and the tape symbols.
- `small_style: TextStyle = theme.typography.caption`: The font of the transition labels and notes.
- `enter: Option<FadeIn> = None`: Fade in at the start; `None` for none.
- `exit: Option<FadeOut> = None`: Fade out before the end; `None` for none.

## StatesOfMatter

Particles in a box changing state, from `from` to `to` over `duration` seconds after `at`: in a solid they vibrate on a lattice at the bottom, in a liquid they wander past each other and in a gas they fly across the whole box and bounce off its walls. Between two states the motions blend, and the particles turn from `cold_color` to `hot_color`. `columns` by `rows` particles of `radius` pixels sit in a `width` by `height` pixel box around `center` (units of `ui.space`). Positions are a function of the time and `seed` only, so every frame renders on its own and the same everywhere. With `labels` the state, or the change under way, is written under the box. The box draws with `enter`, the particles and the label fade with `parts_enter`.

Page: https://fframes-kit.pages.dev/docs/chemistry/states-of-matter.md · feature `chemistry`

- `seed: u64 = 1`: Seed of the particles' motion; the same seed gives the same picture on every frame and machine.
- `columns: usize = 8`: Particles per row of the starting lattice.
- `rows: usize = 4`: Rows of particles in the starting lattice.
- `from: MatterState = MatterState::Solid`: State the particles start in.
- `to: MatterState = MatterState::Gas`: State the particles end in.
- `at: f32 = 1.0`: Seconds after the container's start when the change begins.
- `duration: f32 = 4.0`: Seconds the change from `from` to `to` takes.
- `center: (f64, f64) = (0.0, 0.0)`: The middle of the box, in units of `ui.space`.
- `width: f32 = 760.0`: Width of the box in pixels.
- `height: f32 = 520.0`: Height of the box in pixels.
- `radius: f32 = 18.0`: Radius of a particle in pixels.
- `labels: bool = true`: Writes the state, or the change under way, under the box; `false` for none.
- `box_color: Color = theme.colors.muted`: Colour of the box outline.
- `cold_color: Color = Color::hex("#4dabf7")`: Colour of the particles in a solid; they blend to `hot_color` as the state warms.
- `hot_color: Color = Color::hex("#ff6b6b")`: Colour of the particles in a gas.
- `text_color: Color = theme.colors.text`: Colour of the state label.
- `stroke_width: f32 = theme.stroke.regular`: Width in pixels of the box outline.
- `enter: Option<EnterAnim> = None`: How the box draws; `None` shows it from the start.
- `exit: Option<ExitAnim> = None`: How the box leaves at the end of the container; `None` stays.
- `parts_enter: Option<FadeIn> = None`: Fade in of the particles and the label; `None` for none.
- `parts_exit: Option<FadeOut> = None`: Fade out of the particles and the label before the end; `None` for none.
- `fn level(&self, seconds: f32) -> f64`: The particles' level at `seconds`: 0 a solid, 1 a liquid, 2 a gas.
- `fn positions(&self, seconds: f32) -> Vec<Vec2>`: The particles' centres at `seconds`, from the box's middle in pixels (y down).

## StreamLines

Lines that follow a `VectorField` (Manim `StreamLines`): from every grid point, moved by a seeded `noise_factor`, a point moves along the field in steps of `dt` for `virtual_time`, until it leaves the grid by more than `padding` units. Each line takes the colour of the field's magnitude at its middle.

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/coordinate-systems.md

- `field: VectorField = VectorField::themed(theme)`: The vector field the lines follow, with the box of grid points they start from and the colour by length.
- `dt: f64 = 0.05`: Seconds of virtual time per step of a line.
- `virtual_time: f64 = 3.0`: Seconds of virtual time each line is followed for; with `dt` it sets how long the lines get.
- `max_anchors_per_line: usize = 100`: Most points kept per line; longer runs keep every n-th point.
- `padding: f64 = 3.0`: Units of `ui.space` outside the field's box a line may wander before it ends.
- `n_repeats: usize = 1`: How many lines start from every grid point.
- `noise_factor: Option<f64> = None`: How far, in units, a start moves from its grid point; `None` is half the grid step.
- `seed: u64 = 0`: Seed of the start offsets and of where each line begins its flow; the same seed gives the same picture.
- `stroke_width: f32 = theme.stroke.regular`: Width of the lines in pixels.
- `opacity: f32 = 1.0`: 0 transparent to 1 opaque.
- `flow: Option<Flow> = None`: A piece of every line that runs along it, over and over; `None` draws the whole lines.
- `enter: Option<EnterAnim> = None`: How the lines appear when there is no `flow` (`Create`, ..); `None` shows them from the start.
- `exit: Option<ExitAnim> = None`: How the lines leave at the end of their container; `None` stays.
- `fn lines(&self) -> Arc<[(f64, f64)]>`: The traced lines in units of `ui.space`, separated by a `(NaN, NaN)` point.

## Succession

Each child starts when the one before it has run `run_time` seconds (Manim's `Succession`, a `LaggedStart` with `lag_ratio` 1).

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/geometry-animations.md

- `run_time: f32`: Seconds each child runs before the next one starts.
- `children: Vec<Children>`: The children in order; each is a closure taking the `Ui`.

## SurroundingRectangle

A rectangle `buff` outside a box (Manim `SurroundingRectangle`), in the highlight colour.

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/shapes.md

- `around: Rect = Rect::ZERO`: The box it is drawn around, in pixels of the canvas.
- `buff: f32 = SMALL_BUFF`: Gap in pixels between the box and the rectangle.
- `corner_radius: f32 = 0.0`: Radius of the rounded corners in pixels; 0 for square corners.
- `fill: Option<Color>`: `None` leaves the inside empty.
- `stroke: Option<Color>`: `None` draws no outline.
- `stroke_width: f32`: Outline width in pixels.
- `dash: Option<(f32, f32)> = None`: Dash and gap lengths of the outline.
- `opacity: f32 = 1.0`: 0 transparent to 1 opaque.
- `enter: Option<EnterAnim> = None`: How it appears; `None` shows it from the start.
- `exit: Option<ExitAnim> = None`: How it leaves at the end of its container; `None` stays.
- `emphasis: Option<Emphasis> = None`: An emphasis animation (`Indicate`, `Wiggle`, ..) played while it is shown.
- `fn shape(&self) -> Shape`: The path and paint as a `Shape`.

## SvgPath

One path given as SVG path data (Manim `VMobjectFromSVGPath`), in canvas pixels as written: `SvgPath { path: paths::parse_path("M0 0 L100 0")?, ..ui.defaults() }`.

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/shapes.md

- `path: BezPath = BezPath::new()`: The path as SVG path data, in pixels of the canvas as written.
- `fill: Option<Color> = Paint::outline(theme).fill`: `None` leaves the inside empty.
- `stroke: Option<Color> = Paint::outline(theme).stroke`: `None` draws no outline.
- `stroke_width: f32 = Paint::outline(theme).stroke_width`: Outline width in pixels.
- `dash: Option<(f32, f32)> = None`: Dash and gap lengths of the outline.
- `opacity: f32 = 1.0`: 0 transparent to 1 opaque.
- `enter: Option<EnterAnim> = None`: How it appears; `None` shows it from the start.
- `exit: Option<ExitAnim> = None`: How it leaves at the end of its container; `None` stays.
- `emphasis: Option<Emphasis> = None`: An emphasis animation (`Indicate`, `Wiggle`, ..) played while it is shown.
- `fn shape(&self) -> Shape`: The path and paint as a `Shape`.

## SvgShape

An SVG drawing as a shape (Manim `SVGMobject`). Parse the file once with `SvgShape::parse` and keep it; a clone shares the parts. The drawing is centered on `(cx, cy)` and scaled to `height`. Every path keeps the file's paint unless `fill` or `stroke` replace it; `fill_part`, `stroke_part` and `only` change single parts. Text and images in the file are not drawn (convert text to paths before export) and a gradient is drawn in its first stop's colour; `inspect` warns about them.

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/shapes.md

- `parts: Arc<Vec<SvgPart>> = Arc::default()`: The paths of the file with their paint, from `SvgShape::parse`; clones share them.
- `cx: f32 = 960.0`: Center x in pixels of the canvas the drawing is placed on.
- `cy: f32 = 540.0`: Center y in pixels of the canvas the drawing is placed on (y down).
- `height: Option<f32> = Some(270.0)`: The drawn height; `None` keeps the file's size and position.
- `fill: Option<Color> = None`: Replaces the fill of every filled part.
- `stroke: Option<Color> = None`: Replaces the outline color of every outlined part.
- `opacity: f32 = 1.0`: 0 transparent to 1 opaque.
- `enter: Option<EnterAnim> = None`: How it appears; `None` shows it from the start.
- `exit: Option<ExitAnim> = None`: How it leaves at the end of its container; `None` stays.
- `emphasis: Option<Emphasis> = None`: An emphasis animation (`Indicate`, `Wiggle`, ..) played while it is shown.
- `unsupported: Arc<Vec<String>> = Arc::default()`: What the file holds that is not drawn as it is; `inspect` lists it.
- `fn parse(svg: &str) -> Result<Self, SvgError>`: The paths of `svg` with the default placement: 270 px tall in the middle of the canvas.
- `fn part(&self, key: impl Into<PartKey>) -> Option<&SvgPart>`: The first part that `key` names.
- `fn fill_part(self, key: impl Into<PartKey>, color: Color) -> Self`: Fills the parts that `key` names with `color`.
- `fn stroke_part(self, key: impl Into<PartKey>, color: Color) -> Self`: Outlines the parts that `key` names in `color`, keeping their width (2 px when they had no outline).
- `fn only(self, keep: impl Fn(usize, &SvgPart) -> bool) -> Self`: Keeps the parts for which `keep(index, part)` is true. Indexes stay those of the file for the closure, not for later calls.
- `fn shapes(&self) -> Vec<Shape>`: Every part placed on the canvas with its paint.

## Swap

Two shapes trade places on arcs (Manim's `Swap`, a `CyclicReplace` of two).

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/geometry-animations.md

- `first: Shape`: The shape that moves to where `second` is.
- `second: Shape`: The shape that moves to where `first` is.
- `path_arc: f32`: Radians of the arc each shape travels on; positive turns counterclockwise, 0 is a straight line.
- `delay: f32`: Seconds after the container's start before it begins.
- `run_time: f32`: Seconds the animation takes.
- `rate_func: RateFunc`: Easing of the animation over its run time.
- `fn new(first: Shape, second: Shape) -> Self`: Manim's quarter turns in 1 second, smooth.

## Symbol

A circuit symbol, Manim-circuit's `Resistor`, `Capacitor` and the rest: `kind` drawn at `at` (units of `ui.space`), turned `rotation` degrees counterclockwise, `size` units from its middle to a terminal. `terminal` gives where a wire attaches. The label is drawn beside it, on the other side with `flip_label`; an empty one is not drawn. The symbol draws with `enter`, the label and a bulb's glow (`lit`, 0 to 1) fade with `parts_enter`. A `Schematic` wires symbols together.

Page: https://fframes-kit.pages.dev/docs/physics/symbol-and-schematic.md · feature `physics`

- `kind: SymbolKind = SymbolKind::Resistor`: Which part to draw: resistor, capacitor, inductor, source, ground, op-amp, battery, switch, bulb or diode.
- `at: (f64, f64) = (0.0, 0.0)`: The middle of the symbol, in units of `ui.space`.
- `rotation: f64 = 0.0`: Degrees counterclockwise to turn the symbol around its middle.
- `size: f64 = 0.6`: Units of `ui.space` from the middle to a terminal.
- `label: &str = ""`: Text drawn beside the symbol; empty for none.
- `flip_label: bool = false`: Puts the label on the opposite side of the symbol.
- `lit: f32 = 0.0`: Glow of a bulb from 0 (off) to 1 (full); other symbols ignore it.
- `color: Color = theme.colors.text`: Colour of the symbol's lines and fills.
- `label_color: Color = theme.colors.text`: Colour of the label.
- `glow_color: Color = theme.colors.highlight`: Colour of a bulb's glow.
- `stroke_width: f32 = theme.stroke.regular`: Line width in pixels; the battery's short plate is 2.5 times as thick.
- `enter: Option<EnterAnim> = None`: How the symbol draws in; `None` shows it from the start.
- `exit: Option<ExitAnim> = None`: How the symbol leaves at the end of the container; `None` stays.
- `parts_enter: Option<FadeIn> = None`: How the label and the bulb's glow fade in; `None` for none.
- `parts_exit: Option<FadeOut> = None`: How the label and the bulb's glow fade out before the end; `None` for none.
- `fn terminal(&self, name: &str) -> Option<(f64, f64)>`: Where the terminal `name` is, in units of `ui.space`; `None` for a name the kind does not have.
- `fn lever_angle(&self, now: f32) -> f64`: The angle of a switch's lever at `now` seconds, from open (35°) to closed (0).

## Table

Text in rows and columns with lines between them (Manim `Table`), centered on `(x, y)`. `col_labels` go above the columns and `row_labels` left of the rows, in `label_style`. The lines draw with `enter` (`Create`), the text fades with `entries_enter`.

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/coordinate-systems.md

- `rows: Vec<Vec<Cow<str>>> = Vec::new()`: The body, row by row; a shorter row is padded with empty cells.
- `col_labels: Vec<Cow<str>> = Vec::new()`: Labels above the columns, empty for none.
- `row_labels: Vec<Cow<str>> = Vec::new()`: Labels left of the rows, empty for none.
- `x: f32 = 960.0`: Horizontal middle of the table in pixels of the canvas.
- `y: f32 = 540.0`: Vertical middle of the table in pixels of the canvas.
- `buff: (f32, f32) = (theme.spacing.xl, theme.spacing.lg + theme.spacing.md)`: Pixels between the columns and between the rows (Manim `h_buff`, `v_buff`); the lines run through the middle of them.
- `style: TextStyle = theme.typography.body`: The font of the body cells: family, size in pixels and weight.
- `fill: Color = theme.colors.text`: Colour of the body cells' text.
- `label_style: TextStyle = TextStyle { weight: 600, ..theme.typography.body }`: The font of the row and column labels: family, size in pixels and weight.
- `label_fill: Color = theme.colors.accent`: Colour of the row and column labels.
- `line_color: Color = theme.colors.muted`: Colour of the lines between the cells.
- `stroke_width: f32 = theme.stroke.thin`: Width of the lines in pixels.
- `outer_lines: bool = false`: Draws the frame around the table too (Manim `include_outer_lines`).
- `enter: Option<EnterAnim> = None`: How the lines appear (`Create`, ..); `None` shows them from the start.
- `exit: Option<ExitAnim> = None`: How the lines leave at the end of their container; `None` stays.
- `entries_enter: Option<FadeIn> = Some(FadeIn::themed(theme))`: Fade the text in at the start; `None` shows it from the start.
- `entries_exit: Option<FadeOut> = None`: Fade the text out before the end; `None` for none.
- `fn cell(&self, ui: &Ui, row: usize, column: usize) -> Option<Rect>`: The area of body cell `(row, column)` between its lines (Manim `get_cell`), to put a highlight behind it. `None` outside the table.

## Tangent

The tangent of `f` at `x`, `length` pixels long and centered on the point, with a dot on the point when `dot` is above 0 (Manim's `TangentLine`). `x` is a `ValueTracker`, so the line can slide along the graph.

Page: https://fframes-kit.pages.dev/docs/math/tangent-and-secant.md · feature `math`

- `f: Func = |x| x`: The function, taking x in the axes' coordinates and returning y.
- `axes: AxesMap = AxesMap::default()`: The axes (an `AxesMap`) the function sits on; turns graph coordinates into canvas points.
- `x: ValueTracker = 0.0.into()`: The x, in the axes' coordinates, of the point of tangency; a tracker so it can slide along the graph.
- `length: f32 = 400.0`: Length of the line in pixels.
- `color: Color = theme.colors.highlight`: Colour of the line and its dot.
- `stroke_width: f32 = theme.stroke.regular`: Line width in pixels.
- `dot: f32 = 10.0`: Radius in pixels of the dot on the point; `0` for no dot.
- `enter: Option<EnterAnim> = None`: How it appears; `None` shows it from the start.
- `exit: Option<ExitAnim> = None`: How it leaves at the end of its container; `None` stays.

## TangentialArc

The arc of `radius` that touches two lines (Manim `TangentialArc`): the first from `line1.0` to `line1.1`, the second likewise. Of the four corners where the lines cross, `corner` picks the one on the side of each line's direction (`1`) or against it (`-1`).

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/shapes.md

- `line1: ((f32, f32), (f32, f32)) = ((0.0, 0.0), (200.0, 0.0))`: The first line as two points `((x1, y1), (x2, y2))` in pixels of the canvas.
- `line2: ((f32, f32), (f32, f32)) = ((0.0, 0.0), (0.0, 200.0))`: The second line, in the same form.
- `radius: f32 = 50.0`: Radius of the arc in pixels.
- `corner: (f32, f32) = (1.0, 1.0)`: Which of the four corners where the lines cross the arc fills: for each line `1` is the side of its direction, `-1` against it.
- `fill: Option<Color> = Paint::outline(theme).fill`: `None` leaves the inside empty.
- `stroke: Option<Color> = Paint::outline(theme).stroke`: `None` draws no outline.
- `stroke_width: f32 = Paint::outline(theme).stroke_width`: Outline width in pixels.
- `dash: Option<(f32, f32)> = None`: Dash and gap lengths of the outline.
- `opacity: f32 = 1.0`: 0 transparent to 1 opaque.
- `enter: Option<EnterAnim> = None`: How it appears; `None` shows it from the start.
- `exit: Option<ExitAnim> = None`: How it leaves at the end of its container; `None` stays.
- `emphasis: Option<Emphasis> = None`: An emphasis animation (`Indicate`, `Wiggle`, ..) played while it is shown.
- `fn shape(&self) -> Shape`: The path and paint as a `Shape`.

## TangentLine

A line of `length` touching `path` at `alpha` of its length (Manim `TangentLine`). On axes, `kits::math::Tangent` draws the tangent of a function.

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/shapes.md

- `path: BezPath = BezPath::new()`: The path to touch, in pixels of the canvas.
- `alpha: f32 = 0.5`: Where along the path's length the line touches it, 0 (start) to 1 (end).
- `length: f32 = 135.0`: Length of the line in pixels, centered on the point where it touches.
- `fill: Option<Color> = Paint::outline(theme).fill`: `None` leaves the inside empty.
- `stroke: Option<Color> = Paint::outline(theme).stroke`: `None` draws no outline.
- `stroke_width: f32 = Paint::outline(theme).stroke_width`: Outline width in pixels.
- `dash: Option<(f32, f32)> = None`: Dash and gap lengths of the outline.
- `opacity: f32 = 1.0`: 0 transparent to 1 opaque.
- `enter: Option<EnterAnim> = None`: How it appears; `None` shows it from the start.
- `exit: Option<ExitAnim> = None`: How it leaves at the end of its container; `None` stays.
- `emphasis: Option<Emphasis> = None`: An emphasis animation (`Indicate`, `Wiggle`, ..) played while it is shown.
- `fn shape(&self) -> Shape`: The path and paint as a `Shape`.

## TextPath

Text drawn as glyph outlines, so `Create`, `Write` and `DrawBorderThenFill` can draw it (Manim's `Text` as a `VMobject`). `(x, y)` is the start of the baseline.

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/geometry-animations.md

- `text: &str = ""`: The text to draw.
- `x: f32 = 0.0`: Start of the baseline in pixels of the canvas.
- `y: f32 = 0.0`: Baseline in pixels of the canvas.
- `style: TextStyle = theme.typography.title`: The font: a family from the video's media, its size in pixels and weight.
- `fill: Option<Color> = Some(theme.colors.title)`: Colour of the inside of the glyphs; `None` leaves it empty.
- `stroke: Option<Color> = None`: Colour of the glyph outlines; `None` draws no outline.
- `stroke_width: f32 = theme.stroke.thin`: Outline width in pixels.
- `opacity: f32 = 1.0`: 0 transparent to 1 opaque.
- `enter: Option<EnterAnim> = None`: How it appears (`Create`, `Write`, `DrawBorderThenFill`, ..); `None` shows it from the start.
- `exit: Option<ExitAnim> = None`: How it leaves at the end of its container; `None` stays.
- `emphasis: Option<Emphasis> = None`: An emphasis animation (`Indicate`, `Wiggle`, ..) played while it is shown.
- `fn parts(&self, ctx: &FFramesContext) -> Option<Vec<Shape>>`: One shape per glyph, or `None` when the font has no file in the media.
- `fn bounds(&self, ctx: &FFramesContext) -> Rect`: The box of the inked glyphs, descenders included (what Manim measures around text), or the estimated box when the font has no file in the media.

## TextReveal

A line whose words or letters fade in one after another while they move by `shift` into place. Unit `i` starts `delay + i * stagger` seconds into the container and takes `run_time`. `(x, y)` is the start of the baseline. Without a measurable font the whole line fades in as unit 0.

Page: https://fframes-kit.pages.dev/docs/text-and-formulas/text.md

- `text: Cow<str> = Cow::Borrowed("")`: The words or letters that fade in; the whole line is drawn as one when the font cannot be measured.
- `x: f32 = 0.0`: Left of the line, in pixels of the canvas.
- `y: f32 = 0.0`: Baseline of the text, in pixels of the canvas.
- `style: TextStyle = theme.typography.title`: The font: family, size in pixels and weight.
- `fill: Color = theme.colors.title`: Colour of the text.
- `by: RevealBy = RevealBy::Word`: Whether it reveals word by word or letter by letter.
- `shift: (f32, f32) = (0.0, 24.0)`: Canvas units, `y` down: `(0.0, 24.0)` rises 24 units into place.
- `delay: f32 = 0.0`: Seconds after the container's start before the first unit begins.
- `stagger: f32 = theme.motion.stagger.tight`: Seconds between the starts of two units.
- `run_time: f32 = theme.motion.duration.enter`: Seconds each unit takes to fade and move into place.
- `rate_func: RateFunc = theme.motion.easing.enter`: Easing of each unit over its run time.

## ThermalVision

Its children as a thermal camera sees them: the luminance mapped onto `palette`, cold to hot, evenly spaced (the default is `THERMAL_PALETTE`).

Page: https://fframes-kit.pages.dev/docs/motion/effects.md

- `palette: &[Color] = &THERMAL_PALETTE`: Colours the luminance is mapped onto, evenly spaced from cold (dark) to hot (light); empty maps to black and white.
- `key: Option<&str> = None`: Names the filter when two effects of this kind share a frame.
- `children: Children = ui::no_children()`: The content the filter is applied to (a closure taking the `Ui`).

## ThreeDView

Manim's `ThreeDScene`: 3D objects seen by a camera on a sphere around `frame_center`, in one image over the canvas of `ui.space`, with 2D drawn on top.

Page: https://fframes-kit.pages.dev/docs/three-d/three-d-view.md · feature `3d`

- `phi: f32 = 0.0`: Angle of the camera from the `z` axis in radians; 0 looks straight down on the `xy` plane.
- `theta: f32 = -FRAC_PI_2`: Angle of the camera around the `z` axis from the `x` axis in radians; -90 degrees is the default.
- `distance: f32 = 20.0`: How far the camera sits from `frame_center` in Manim units; changes the perspective, not the lens.
- `focal_distance: f32 = 20.0`: Distance in Manim units at which the lens shows the canvas's height; the plane through `frame_center` lines up with `ui.space` when `distance` matches.
- `zoom: f32 = 1.0`: Zoom of the lens; above 1 shows less of the scene.
- `frame_center: Point3 = (0.0, 0.0, 0.0)`: The point the camera orbits and looks at, in Manim units `(x, y, z)`.
- `ambient_rotation: f32 = 0.0`: Radians per second `theta` turns; 0 keeps the camera still.
- `objects: Vec<Box<dyn Object3D>> = Vec::new()`: The 3D objects drawn in the image, in order.
- `fixed_in_frame: Option<Children> = None`: Drawn over the picture in canvas pixels, not moved by the camera (a closure taking the `Ui`); `None` for none.
- `fn camera(&self, space: Space, seconds: f32) -> Camera`: The camera `seconds` into the view.
- `fn projector(&self, ui: &Ui) -> Projector`: The projector of the picture at `ui`'s time.

## Tile

Its children repeated across the area like tiles, every other copy mirrored so the edges meet (Remotion's `tile()`): the copies of `rect` (x, y, width, height) are laid side by side with `horizontal` and above and below with `vertical`. Remotion finds the rectangle from the opaque pixels; here it is given, as fframes cannot measure the children. At most `MAX_TILES` copies are drawn, each twice: a slightly larger one under the exact ones hides the seams between them. The children render twice.

Page: https://fframes-kit.pages.dev/docs/motion/effects.md

- `rect: (f32, f32, f32, f32) = (640.0, 360.0, 640.0, 360.0)`: The `(x, y, width, height)` rectangle of the children that is repeated, in the children's user units; it stays where it is.
- `horizontal: bool = true`: `true` repeats the rectangle side by side across the area.
- `vertical: bool = true`: `true` repeats the rectangle above and below across the area.
- `area: (f32, f32) = (1920.0, 1080.0)`: Width and height of the area the copies fill from the top left, in the children's user units.
- `key: Option<&str> = None`: Names the mask, clip and tile ids when two tiles share a frame.
- `children: Children = no_children()`: The content that is tiled (a closure taking the `Ui`).
- `fn copies(&self) -> Vec<(i64, i64)>`: The copies as (column, row) counted from the original, at most `MAX_TILES`.

## Tint

Its children in shades of `color`, mixed with the original by `amount`.

Page: https://fframes-kit.pages.dev/docs/motion/effects.md

- `color: Color = theme.colors.accent`: Colour the picture is tinted with; the picture turns shades of it.
- `amount: Anim<f32> = Anim::Fixed(0.8)`: 0 the original to 1 fully tinted.
- `key: Option<&str> = None`: Names the filter when two effects of this kind share a frame.
- `children: Children = ui::no_children()`: The content the filter is applied to (a closure taking the `Ui`).

## Title

Manim's `Title`: a line of text centered on `x` near the top, over an underline `underline_width` wide, or as wide as the text with `match_underline_width_to_text` (and a measurable font).

Page: https://fframes-kit.pages.dev/docs/text-and-formulas/text.md

- `text: Cow<str> = Cow::Borrowed("")`: The title words.
- `x: f32 = 960.0`: Horizontal center of the title and its underline, in pixels of the canvas.
- `y: f32 = 130.0`: The baseline.
- `style: TextStyle = theme.typography.title`: The font: family, size in pixels and weight.
- `fill: Color = theme.colors.title`: Colour of the text.
- `include_underline: bool = true`: `true` draws a line under the text.
- `match_underline_width_to_text: bool = false`: `true` makes the underline as wide as the text instead of `underline_width` (when the font can be measured).
- `underline_width: f32 = 1720.0`: Width of the underline in pixels.
- `underline_buff: f32 = 28.0`: Pixels from the baseline down to the underline.
- `underline_stroke: Color = theme.colors.title`: Colour of the underline.
- `underline_stroke_width: f32 = 3.0`: Thickness of the underline in pixels.
- `opacity: f32 = 1.0`: 0 transparent to 1 opaque.

## TitrationCurve

The pH of a `Titration` as the base is added on `axes` (mL across, pH up): from `delay` over `run_time` seconds the base pours in at a constant rate up to `until` mL and the curve draws along with a dot at the current pH. When it gets there the equivalence point is marked with guides to both axes; for a weak acid the half-equivalence point too, where the pH equals the pKa. Show the axes yourself. Everything fades with `parts_enter`.

Page: https://fframes-kit.pages.dev/docs/chemistry/titration-curve-and-ph-scale.md · feature `chemistry`

- `titration: Titration = Titration::default()`: The acid and base being titrated, whose pH the curve follows.
- `axes: Option<AxesMap> = None`: The axes to draw on, mL across and pH up (`c2p` maps data to the canvas); `None` draws nothing.
- `until: f64 = 50.0`: Millilitres of base added when the pour ends, the right end of the curve.
- `delay: f32 = 0.0`: Seconds after the container's start before the base begins to pour.
- `run_time: f32 = 4.0`: Seconds the pour takes, at a constant rate, from none to `until` mL.
- `labels: bool = true`: Names the equivalence point (and the half-equivalence point of a weak acid) when the curve reaches it; `false` for none.
- `color: Color = theme.colors.accent`: Colour of the curve and its moving dot.
- `marker_color: Color = theme.colors.highlight`: Colour of the dots on the marked points.
- `guide_color: Color = theme.colors.muted`: Colour of the dashed guides from a marked point to both axes.
- `text_color: Color = theme.colors.text`: Colour of the labels.
- `stroke_width: f32 = theme.stroke.regular`: Width in pixels of the curve and the guides.
- `parts_enter: Option<FadeIn> = None`: Fade in of the curve and its marks; `None` for none.
- `parts_exit: Option<FadeOut> = None`: Fade out of the curve and its marks before the end; `None` for none.
- `fn added_at(&self, seconds: f32) -> f64`: The base added by `seconds`, in mL.
- `fn ph_at(&self, seconds: f32) -> f64`: The pH at `seconds`, for a `PhScale` pointer or a readout.

## TracedPath

The line a moving point has drawn so far (Manim's `TracedPath`). `point(t)` is where the point is `t` local seconds in, in canvas units; the line runs through it at every frame from `delay` (or the last `dissipating_time` seconds) up to now. The trail is sampled again every frame, at most `MAX_TRACE_SAMPLES` times, on a fixed grid of times so the old part does not shimmer.

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/geometry-animations.md

- `point: &dyn Fn(f32) -> (f32, f32) = &origin`: Where the point is `t` local seconds in, in pixels of the canvas.
- `stroke: Color = theme.colors.highlight`: Colour of the line.
- `stroke_width: f32 = theme.stroke.regular`: Width of the line in pixels.
- `dissipating_time: Option<f32> = None`: Seconds of trail to keep; `None` keeps it all.
- `delay: f32 = 0.0`: Local second where the trail starts.
- `fn times(&self, now: f32, fps: usize) -> Vec<f32>`: The times sampled at `now` with `fps` frames per second: the start, every frame on the grid since, and `now`.

## Trail

The children at earlier local times behind themselves, each copy fainter, like Remotion's `<Trail>`. `samples` copies (at most `MAX_SAMPLES`) are `spacing` seconds apart; the newest has `opacity` and they fade out linearly behind it. Before the local start there is nothing to repeat, so the trail grows in.

Page: https://fframes-kit.pages.dev/docs/motion/effects.md

- `samples: usize = 6`: Number of earlier copies, at most `MAX_SAMPLES`; each one renders the children again.
- `spacing: f32 = 0.05`: Seconds between one copy and the next, going back in time from the newest.
- `opacity: f32 = 0.5`: Opacity of the newest copy, 0 transparent to 1 opaque; older copies fade out linearly behind it.
- `children: Children = no_children()`: The content that leaves the trail (a closure taking the `Ui`).
- `fn copy(&self, i: usize) -> (f32, f32)`: How far back copy `i` (from 1, the newest) is and how opaque.

## Transcription

Transcription: the DNA of `coding` (its coding strand on top, the template strand below it, base pairs meeting in the middle) with RNA polymerase moving along it from `delay`, one base every `base_time` seconds, `spacing` pixels apart, centred on `center` (units of `ui.space`). Where it is the strands open into a bubble and the template base it reads lights up; the matching mRNA base (`U` for `T`) drops into the mRNA row below. At the end the polymerase lets go and the bubble closes. With `labels` the rows are named.

Page: https://fframes-kit.pages.dev/docs/biology/transcription.md · feature `biology`

- `coding: String = "ATGGCTTCGAAATGGTAA".into()`: The coding strand, written 5' to 3' with the letters `A`, `T`, `G`, `C`; the template strand is its complement and the mRNA copies it with `U` for `T`.
- `delay: f32 = 0.0`: Seconds after the container's start before the polymerase begins to move.
- `base_time: f32 = 0.35`: Seconds the polymerase spends on each base.
- `center: (f64, f64) = (0.0, 0.0)`: The middle of the DNA, in units of `ui.space`.
- `spacing: f32 = 52.0`: Pixels between neighbouring bases along the strand.
- `labels: bool = true`: Names the strands, the mRNA and the polymerase when `true`.
- `bases: BaseColors = BaseColors::default()`: Colour of each base letter.
- `strand_color: Color = theme.colors.text`: Colour of the DNA backbones.
- `rna_color: Color = theme.colors.highlight`: Colour of the mRNA backbone.
- `polymerase_color: Color = theme.colors.accent`: Colour of the RNA polymerase and its label.
- `lit_color: Color = theme.colors.title`: Colour the template base being read mixes toward.
- `base_style: TextStyle = base_style`: The font of the base letters: family, size in pixels and weight.
- `label_style: TextStyle = theme.typography.caption`: The font of the row names: family, size in pixels and weight.
- `label_color: Color = theme.colors.muted`: Colour of the row names.
- `enter: Option<FadeIn> = None`: Fade in at the start; `None` for none.
- `exit: Option<FadeOut> = None`: Fade out before the end; `None` for none.

## Transform

Morphs `from` into `to`: path, paint and width (Manim's `Transform`). Before it starts it draws `from`, after it ends the morphed shape, which looks like `to`. The prelude calls it `Morph`, because `Transform` there is the SVG transform.

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/geometry-animations.md

- `from: Shape`: The shape it starts as; drawn until `delay` has passed.
- `to: Shape`: The shape it ends as.
- `delay: f32`: Seconds after the container's start before it begins.
- `run_time: f32`: Seconds the animation takes.
- `rate_func: RateFunc`: Easing of the animation over its run time.
- `fn new(from: Shape, to: Shape) -> Self`: From `from` to `to` in Manim's 1 second, smooth.

## TransformAnimations

Runs `from_anim` on `from` and `to_anim` on `to` at once while one shape morphs into the other (Manim's `TransformAnimations`): the shape and its look go from the first animation's to the second's over `run_time`.

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/geometry-animations.md

- `from: Shape`: The shape it starts as; drawn until `delay` has passed.
- `from_anim: EnterAnim`: The enter animation applied to `from` while it morphs.
- `to: Shape`: The shape it ends as.
- `to_anim: EnterAnim`: The enter animation applied to `to` while it morphs.
- `delay: f32`: Seconds after the container's start before it begins.
- `run_time: f32`: Seconds the animation takes.
- `rate_func: RateFunc`: Easing of the animation over its run time.
- `fn new(from: Shape, from_anim: EnterAnim, to: Shape, to_anim: EnterAnim) -> Self`: In Manim's 1 second, smooth; time the two animations to run over the same second.

## TransformFromCopy

A morph of `from` into `to` while `from` stays where it is (Manim's `TransformFromCopy`).

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/geometry-animations.md

- `from: Shape`: The shape it starts as; drawn until `delay` has passed.
- `to: Shape`: The shape it ends as.
- `delay: f32`: Seconds after the container's start before it begins.
- `run_time: f32`: Seconds the animation takes.
- `rate_func: RateFunc`: Easing of the animation over its run time.
- `fn new(from: Shape, to: Shape) -> Self`: From `from` to `to` in Manim's 1 second, smooth.

## TransformMatchingShapes

Pieces of `from` that have the same shape as pieces of `to` move there, the others fade out while the rest of `to` fades in (Manim's `TransformMatchingShapes`). Shapes match by `shape_key`, as in Manim, wherever they are and whatever their size. Manim transforms all pieces of one key as a group; here they pair in order.

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/geometry-animations.md

- `from: Vec<Shape>`: The pieces it starts as; each moves to the piece of `to` with the same shape.
- `to: Vec<Shape>`: The pieces it ends as; those with no match in `from` fade in.
- `delay: f32`: Seconds after the container's start before it begins.
- `run_time: f32`: Seconds the animation takes.
- `rate_func: RateFunc`: Easing of the animation over its run time.
- `fn new(from: Vec<Shape>, to: Vec<Shape>) -> Self`: In Manim's 1 second, smooth.

## TransformMatchingTex

One formula into another (Manim's `TransformMatchingTex`). Parts with the same `\part{..}` label match first, then `{{ }}` parts with the same source, then glyphs outside parts with the same outline. Matched glyphs move to their new place (a part with a different number of glyphs morphs as one shape), the rest of `from` fades out and the rest of `to` fades in. Before the start it draws `from`, after the end `to`.

Page: https://fframes-kit.pages.dev/docs/text-and-formulas/formulas.md · feature `latex`

- `from: FormulaView`: The formula that is shown before the start and that its matched glyphs leave.
- `to: FormulaView`: The formula that is shown after the end and that its matched glyphs arrive at.
- `delay: f32`: Seconds after the container's start before the transform begins.
- `run_time: f32`: Seconds the transform takes.
- `rate_func: RateFunc`: Easing of the transform over its run time.
- `match_tokens: bool`: Match glyphs outside parts by their token (text and occurrence, `2#1`), then by outline. Needs Typst formulas; with others it warns and matches as without.
- `fn new(from: FormulaView, to: FormulaView) -> Self`: From `from` to `to` in Manim's 1 second, smooth.
- `fn shapes_at(&self, p: f32) -> Vec<Shape>`: The shapes `p` of the way from `from` to `to`.
- `fn matching(&self) -> (usize, usize, usize)`: Glyph counts: (matched pairs of groups, glyphs fading out, glyphs fading in).

## TransitionSeries

Sequences one after another with transitions between them (Remotion's `<TransitionSeries>`). A transition overlaps its two sequences by its duration, so the series is shorter than its sequences by the sum of the transitions. A transition longer than one of its sequences is shortened to it; a transition that is first, last, or next to another transition is skipped. `inspect` warns about both.

Page: https://fframes-kit.pages.dev/docs/motion/transitions.md

- `key: Option<&str>`: Makes the ids of the transitions' clip paths unique when two series share a frame.
- `items: Vec<TransitionItem>`: Sequences and the transitions between them, in play order.
- `fn sequence(seconds: f32, children: Children) -> TransitionItem`: A sequence item.
- `fn lengths(&self) -> Vec<SeriesLength>`: The lengths of the items, for `audio_fades`.
- `fn audio_fades(&self, fps: usize) -> Vec<AudioFade>`: Where each sequence plays and how long its audio fades at `fps`, see `audio_fades`.
- `fn transition(timing: Timing, presentation: impl Presentation) -> TransitionItem`: A transition item.

## Translate

Its children moved by `x` and `y` (Remotion's `xyTranslate()`), or with `uv` by those shares of the area, 1 the full width or height (Remotion's `uvTranslate()`). Cut to the area.

Page: https://fframes-kit.pages.dev/docs/motion/effects.md

- `x: Anim<f32> = Anim::Fixed(0.0)`: Horizontal shift in the children's user units (right is positive), or with `uv` a share of the area's width. Animatable.
- `y: Anim<f32> = Anim::Fixed(0.0)`: Vertical shift in the children's user units (down is positive), or with `uv` a share of the area's height. Animatable.
- `uv: bool = false`: `true` reads `x` and `y` as shares of the area's width and height (1 is the full size); `false` as user units.
- `area: (f32, f32) = (1920.0, 1080.0)`: Width and height of the area the result is cut to from the top left, in the children's user units.
- `key: Option<&str> = None`: Names the clip id when two translates share a frame.
- `children: Children = no_children()`: The content that is moved (a closure taking the `Ui`).

## Translation

Translation: the mRNA `mrna` along the bottom, `spacing` pixels a base, with its codons from the start codon underlined, centred on `center` (units of `ui.space`). From `delay` a ribosome reads one codon every `codon_time` seconds: the tRNA with the matching anticodon drops in carrying its amino acid, the growing chain moves over onto it and the tRNA before it leaves. At the stop codon the chain is released and the ribosome falls apart. The chain so far is written under the mRNA (`Met-Ala-Ser`).

Page: https://fframes-kit.pages.dev/docs/biology/translation.md · feature `biology`

- `mrna: String = "GCCAUGGCUUCGAAAUGGUAAGC".into()`: The mRNA written with `A`, `U`, `G`, `C`; the ribosome starts at its first `AUG` and stops at a stop codon.
- `delay: f32 = 0.0`: Seconds after the container's start before the ribosome begins to read.
- `codon_time: f32 = 1.2`: Seconds the ribosome spends on each codon.
- `center: (f64, f64) = (0.0, 0.0)`: The middle of the mRNA, in units of `ui.space`.
- `spacing: f32 = 44.0`: Pixels between neighbouring bases along the mRNA.
- `bases: BaseColors = BaseColors::default()`: Colour of each base letter.
- `strand_color: Color = theme.colors.highlight`: Colour of the mRNA backbone.
- `ribosome_color: Color = theme.colors.accent`: Colour of the ribosome.
- `trna_color: Color = theme.colors.muted`: Colour of the tRNA molecules.
- `amino_color: Color = Color::hex("#9775fa")`: Fill of the amino acid circles.
- `base_style: TextStyle = base_style`: The font of the base letters: family, size in pixels and weight.
- `amino_style: TextStyle = amino_style`: The font of the amino acid names on the circles: family, size in pixels and weight.
- `chain_style: TextStyle = theme.typography.caption`: The font of the chain written under the mRNA: family, size in pixels and weight.
- `text_color: Color = theme.colors.text`: Colour of the codon marks, amino acid outlines and chain text.
- `enter: Option<FadeIn> = None`: Fade in at the start; `None` for none.
- `exit: Option<FadeOut> = None`: Fade out before the end; `None` for none.

## TreeView

A binary tree: round nodes `radius` pixels with their values, `spacing` pixels between neighbouring slots and `level` pixels between depths, centred on `center` (units of `ui.space`). It plays a `TreeTrace`, one step every `step_time` seconds from `delay`: the nodes a step looks at light up, the path to them is outlined, nodes slide to their new places as the tree changes (swapped heap nodes pass each other), new nodes drop in and removed ones fade. The whole figure fades with `enter` and `exit`.

Page: https://fframes-kit.pages.dev/docs/computer-science/tree-trace-and-tree-view.md · feature `cs`

- `trace: Option<&TreeTrace> = None`: The recorded steps to play (`TreeTrace`); `None` draws nothing.
- `delay: f32 = 0.0`: Seconds after the container's start before the first step.
- `step_time: f32 = 0.8`: Seconds each step of the trace takes.
- `center: (f64, f64) = (0.0, 0.0)`: The middle of the tree, in units of `ui.space`.
- `spacing: f32 = 100.0`: Pixels between neighbouring node slots in a depth.
- `level: f32 = 120.0`: Pixels between depths.
- `radius: f32 = 30.0`: Radius of a node in pixels.
- `notes: bool = true`: Whether the step's note is written under the tree.
- `colors: CellColors = CellColors::themed(theme)`: Colours of the nodes in each state (looked at, moved, found).
- `edge_color: Color = theme.colors.muted`: Colour of the edges between nodes.
- `path_color: Color = theme.colors.accent`: Colour of the outline of the path to the nodes a step looks at.
- `value_style: TextStyle = value_style`: The font of the values in the nodes.
- `small_style: TextStyle = theme.typography.caption`: The font of the notes.
- `enter: Option<FadeIn> = None`: Fade in at the start; `None` for none.
- `exit: Option<FadeOut> = None`: Fade out before the end; `None` for none.

## Triangle

An equilateral triangle pointing up, its corners on a circle of `radius` (Manim `Triangle`, Remotion `Triangle`).

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/shapes.md

- `cx: f32 = 0.0`: Center x in pixels of the canvas.
- `cy: f32 = 0.0`: Center y in pixels of the canvas (y down).
- `radius: f32 = 100.0`: Radius in pixels of the circle the corners lie on.
- `fill: Option<Color> = Paint::outline(theme).fill`: `None` leaves the inside empty.
- `stroke: Option<Color> = Paint::outline(theme).stroke`: `None` draws no outline.
- `stroke_width: f32 = Paint::outline(theme).stroke_width`: Outline width in pixels.
- `dash: Option<(f32, f32)> = None`: Dash and gap lengths of the outline.
- `opacity: f32 = 1.0`: 0 transparent to 1 opaque.
- `enter: Option<EnterAnim> = None`: How it appears; `None` shows it from the start.
- `exit: Option<ExitAnim> = None`: How it leaves at the end of its container; `None` stays.
- `emphasis: Option<Emphasis> = None`: An emphasis animation (`Indicate`, `Wiggle`, ..) played while it is shown.
- `fn shape(&self) -> Shape`: The path and paint as a `Shape`.

## TvSignalOff

Its children replaced by television test bars (Remotion's `tvSignalOff()`), mixed in by `amount` (0 to 1) inside the children's alpha: seven colour bars, a row of thin bars, white running into a dark ramp and a grey scale. The bars are drawn over the children, so semi-transparent parts mix a little differently from Remotion. The children render twice.

Page: https://fframes-kit.pages.dev/docs/motion/effects.md

- `amount: Anim<f32> = Anim::Fixed(1.0)`: 0 the children only to 1 fully test bars, inside the children's alpha. Animatable.
- `area: (f32, f32) = (1920.0, 1080.0)`: Width and height of the test picture from the top left, in the children's user units.
- `key: Option<&str> = None`: Names the filter ids when two of these effects share a frame.
- `children: Children = no_children()`: The content that the test bars replace (a closure taking the `Ui`).
- `fn bars(&self) -> Vec<(f32, f32, f32, f32, Color)>`: The flat parts of the test picture as `(x, y, w, h, colour)`.

## TypeAt

A text cursor that clicks into a field and the `Typewriter` that then types there. The cursor sits just left of the text's start, fades in over `fade` seconds from the start of the container and clicks `lead` seconds before the typing starts (the typewriter's `delay`), so the delay should be at least `fade + lead`.

Page: https://fframes-kit.pages.dev/docs/media-and-overlays/cursors-emoji-sound-effects-and-gi-fs.md

- `typewriter: Typewriter = Typewriter { delay: 0.9, ..Typewriter::themed(theme) }`: The text that is typed after the click; its `x`, `y` and `delay` place the cursor and time the click.
- `shape: CursorShape = CursorShape::IBeam`: Which cursor is drawn; the I-beam by default.
- `style: CursorStyle = CursorStyle::Dark`: Colours of the cursor: `Dark` (black with a white outline) or `Light` (white with a black outline).
- `size: f32 = 40.0`: Height in pixels of the 24 unit design; also sets how far left of the text the cursor sits.
- `lead: f32 = 0.4`: Seconds the click comes before the typing starts.
- `fade: f32 = theme.motion.duration.fast`: Seconds the cursor takes to fade in from the start of its container.
- `click: ClickLook = ClickLook::themed(theme)`: How the click looks: the press depth and duration and the ring that goes out.
- `fn cursor_at(&self) -> (f32, f32)`: Where the cursor's hotspot is: left of the start of the text, at its middle.
- `fn click_at(&self) -> f32`: The second of the click.

## Typewriter

Types its text one character at a time, `chars_per_second` from `delay` seconds into the container, with a cursor after the last character (Manim's `TypeWithCursor`). The cursor is steady while typing and blinks every `blink` seconds once the text is complete. With `erase` it deletes the text again at the same rate, from the end, finishing `erase` seconds before the end of the container (Manim's `UntypeWithCursor`). `(x, y)` is the start of the baseline. Without a measurable font there is no cursor.

Page: https://fframes-kit.pages.dev/docs/text-and-formulas/text.md

- `text: Cow<str> = Cow::Borrowed("")`: The words that are typed.
- `x: f32 = 0.0`: Left of the text, in pixels of the canvas.
- `y: f32 = 0.0`: Baseline of the text, in pixels of the canvas.
- `style: TextStyle = theme.typography.body`: The font: family, size in pixels and weight.
- `fill: Color = theme.colors.text`: Colour of the text.
- `delay: f32 = 0.0`: Seconds after the container's start before typing begins.
- `chars_per_second: f32 = 24.0`: Characters typed (and erased) per second.
- `cursor: Option<Color> = Some(theme.colors.accent)`: `None` draws no cursor.
- `cursor_width: f32 = 3.0`: Cursor width in pixels; its height is the font size.
- `blink: f32 = 0.5`: Seconds the cursor is on, then off, after typing; 0 keeps it on.
- `erase: Option<f32> = None`: Seconds before the end of the container when the erasing is done; `None` keeps the text.
- `fn typed(&self, t: f32) -> usize`: Characters typed `t` seconds into the container.
- `fn shown(&self, t: f32, end: Option<f32>) -> usize`: Characters shown `t` seconds into a container that ends at `end` seconds: typed, less the erased ones.
- `fn cursor_on(&self, t: f32) -> bool`: Whether the cursor shows `t` seconds into the container; it is steady while erasing.
- `fn cursor_on_until(&self, t: f32, end: Option<f32>) -> bool`: `cursor_on` in a container that ends at `end` seconds.

## Underline

A line `buff` below a box, as wide as it (Manim `Underline`).

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/shapes.md

- `around: Rect = Rect::ZERO`: The box it is drawn around, in pixels of the canvas.
- `buff: f32 = SMALL_BUFF`: Gap in pixels between the bottom of the box and the line.
- `fill: Option<Color> = Paint::outline(theme).fill`: `None` leaves the inside empty.
- `stroke: Option<Color> = Paint::outline(theme).stroke`: `None` draws no outline.
- `stroke_width: f32 = Paint::outline(theme).stroke_width`: Outline width in pixels.
- `dash: Option<(f32, f32)> = None`: Dash and gap lengths of the outline.
- `opacity: f32 = 1.0`: 0 transparent to 1 opaque.
- `enter: Option<EnterAnim> = None`: How it appears; `None` shows it from the start.
- `exit: Option<ExitAnim> = None`: How it leaves at the end of its container; `None` stays.
- `emphasis: Option<Emphasis> = None`: An emphasis animation (`Indicate`, `Wiggle`, ..) played while it is shown.
- `fn shape(&self) -> Shape`: The path and paint as a `Shape`.

## Union

The area inside any of `paths` (Manim `Union`).

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/shapes.md

- `paths: Vec<BezPath> = Vec::new()`: The paths to combine, in pixels of the canvas.
- `fill: Option<Color> = Paint::solid(theme).fill`: `None` leaves the inside empty.
- `stroke: Option<Color> = Paint::solid(theme).stroke`: `None` draws no outline.
- `stroke_width: f32 = Paint::solid(theme).stroke_width`: Outline width in pixels.
- `dash: Option<(f32, f32)> = None`: Dash and gap lengths of the outline.
- `opacity: f32 = 1.0`: 0 transparent to 1 opaque.
- `enter: Option<EnterAnim> = None`: How it appears; `None` shows it from the start.
- `exit: Option<ExitAnim> = None`: How it leaves at the end of its container; `None` stays.
- `emphasis: Option<Emphasis> = None`: An emphasis animation (`Indicate`, `Wiggle`, ..) played while it is shown.
- `fn shape(&self) -> Shape`: The path and paint as a `Shape`.

## UnitCircle

The unit circle at a tracked angle: the radius to the point, its cosine along the x-axis and its sine up to the point, the angle's arc and, with `labels`, their values (`cos 0.71`, `sin 0.71`, `45°`). `center` and `radius` are in units of `ui.space`, `angle` in radians counterclockwise. The circle and its axes draw with `enter`, the rest fades with `parts_enter`.

Page: https://fframes-kit.pages.dev/docs/math/unit-circle.md · feature `math`

- `center: (f64, f64) = (0.0, 0.0)`: The middle of the circle, in units of `ui.space` (y up).
- `radius: f64 = 3.0`: Radius of the circle, in units of `ui.space`.
- `angle: ValueTracker = 0.0.into()`: The angle in radians, counterclockwise from the positive x-axis; a tracker to animate.
- `labels: bool = true`: Writes the cosine, the sine and the angle in degrees when `true`.
- `color: Color = theme.colors.text`: Colour of the circle, its axes, the radius and the arc.
- `cos_color: Color = theme.colors.accent`: Colour of the cosine segment along the x-axis.
- `sin_color: Color = theme.colors.highlight`: Colour of the sine segment up to the point.
- `stroke_width: f32 = theme.stroke.regular`: Line width in pixels.
- `enter: Option<EnterAnim> = None`: How the circle and its axes appear; `None` shows them from the start.
- `exit: Option<ExitAnim> = None`: How the circle and its axes leave at the end of its container; `None` stays.
- `parts_enter: Option<FadeIn> = None`: Fade in of the radius, cosine, sine, arc and labels; `None` for none.
- `parts_exit: Option<FadeOut> = None`: Fade out of the radius, cosine, sine, arc and labels; `None` for none.

## Variable

Manim's `Variable`: `label = value`, the value a `DecimalNumber` that follows a `ValueTracker`. `(x, y)` is the start of the label on the baseline; the label stays in place and the number grows to the right. For a value computed from time, pass `value: f(ui.seconds()).into()` in `render_frame`, which runs every frame.

Page: https://fframes-kit.pages.dev/docs/text-and-formulas/text.md

- `label: Cow<str> = Cow::Borrowed("")`: The name written before the ` = `.
- `value: ValueTracker = 0.0.into()`: The `ValueTracker` whose value is written; it is read at every frame.
- `x: f32 = 0.0`: Left of the label, in pixels of the canvas; the number follows it.
- `y: f32 = 0.0`: Baseline of the text, in pixels of the canvas.
- `style: TextStyle = theme.typography.heading`: The font: family, size in pixels and weight.
- `fill: Color = theme.colors.text`: Colour of the label and the `=`.
- `value_fill: Color = theme.colors.accent`: The color of the number; the label and `=` take `fill`.
- `num_decimal_places: usize = 2`: Digits after the decimal point.
- `unit: &str = ""`: Text written after the number, such as `" kg"`; empty for none.
- `opacity: f32 = 1.0`: 0 transparent to 1 opaque.

## VariableBox

A variable as manim-dsa draws it (`MVariable` with `add_label`): its `name` above a box with its value, centred on `center` (units of `ui.space`). The box is `width` by `height` pixels and widens to fit a longer value. `values` holds the value of each step, the first one at the start; the value changes every `step_time` seconds from `delay`, like the steps of the other figures, so it can follow a trace in step. On a change the old value rises out of the box, the new one rises in, the box flashes `colors.compare` and resizes. The whole figure fades with `enter` and `exit`.

Page: https://fframes-kit.pages.dev/docs/computer-science/variable-box.md · feature `cs`

- `name: &str = ""`: Name written above the box.
- `values: Vec<String> = Vec::new()`: The value at each step, as text; the first shows at the start. Empty draws nothing.
- `delay: f32 = 0.0`: Seconds after the container's start before the value first changes.
- `step_time: f32 = 0.8`: Seconds each value is shown before the next.
- `center: (f64, f64) = (0.0, 0.0)`: The middle of the box, in units of `ui.space`.
- `width: f32 = 120.0`: Smallest width of the box in pixels; it widens to fit a longer value.
- `height: f32 = 80.0`: Height of the box in pixels.
- `colors: CellColors = CellColors::themed(theme)`: Colours of the box; it flashes `colors.compare` when the value changes.
- `name_color: Color = theme.colors.text`: Colour of the name above the box.
- `value_style: TextStyle = value_style`: The font of the value in the box.
- `name_style: TextStyle = theme.typography.caption`: The font of the name.
- `enter: Option<FadeIn> = None`: Fade in at the start; `None` for none.
- `exit: Option<FadeOut> = None`: Fade out before the end; `None` for none.
- `fn value_at(&self, seconds: f32) -> Option<&str>`: The value `seconds` into the video: the first value before `delay`, the last after the last step. `None` without values.

## VariationalAutoencoder

A variational autoencoder as `ManimML` draws it (`VariationalAutoencoder`): the image `input`, the feed-forward layers of the `encoder` (neurons per layer), the latent space with its Gaussian, the `decoder` and the image `output`, `size` cells square. The latent box shows a cloud of `points` points for `seed`, the Gaussian's 1σ and 2σ rings in `ring_color`, and the code of this image in `pulse_color`: the point `μ + L·epsilon` of the Gaussian, `epsilon` in units of the standard normal distribution. With `forward_pass` the pulses run from the input to the output and the point appears when they reach the latent space.

Page: https://fframes-kit.pages.dev/docs/machine-learning/variational-autoencoder.md · feature `ml`

- `input: &str = ""`: File name of the input image in the media folder.
- `output: &str = ""`: File name of the reconstructed output image in the media folder.
- `size: usize = 8`: Width and height of the images in cells, for the convolution-style maps.
- `encoder: Vec<usize> = vec![5, 3]`: Neurons in each feed-forward layer of the encoder, from the input towards the latent space.
- `decoder: Vec<usize> = vec![3, 5]`: Neurons in each feed-forward layer of the decoder, from the latent space towards the output.
- `points: usize = 120`: Number of points in the cloud drawn in the latent box.
- `seed: u64 = 1`: Seed of the point cloud; the same seed gives the same cloud on every frame and machine.
- `epsilon: (f64, f64) = (1.3, -0.7)`: Noise of this image's latent point, in units of the standard normal distribution (the point is the mean plus the noise scaled by the Gaussian).
- `center: (f64, f64) = (0.0, 0.0)`: The middle of the network, in units of `ui.space`.
- `spacing: f32 = 130.0`: Pixels between neighbouring layers.
- `node_radius: f32 = 16.0`: Radius in pixels of a neuron.
- `node_spacing: f32 = 46.0`: Pixels between neighbouring neurons of a layer.
- `cell: f32 = 14.0`: Size in pixels of one cell of an image.
- `forward_pass: Option<ForwardPass> = None`: Pulses that run from the input to the output; the latent point appears when they reach it. `None` for none.
- `node_color: Color = theme.colors.text`: Colour of the neuron and box outlines and of the text.
- `node_fill: Color = theme.colors.surface`: Fill colour inside the neurons and boxes.
- `edge_color: Color = theme.colors.muted`: Colour of the connection lines.
- `pulse_color: Color = theme.colors.highlight`: Colour of the pulses and of this image's latent point.
- `ring_color: Color = theme.colors.accent`: Colour of the Gaussian's 1σ and 2σ rings in the latent box.
- `stroke_width: f32 = 2.5`: Width in pixels of the outlines and connection lines.
- `enter: Option<FadeIn> = None`: Fade in at the start; `None` for none.
- `exit: Option<FadeOut> = None`: Fade out before the end; `None` for none.
- `fn layers(&self) -> Vec<Layer>`: The layers from the input image to the output image.
- `fn latent_index(&self) -> usize`: The place of the latent space among `layers`.

## Vector

An arrow from `(x, y)` by `(dx, dy)` (Manim `Vector`, which starts at the origin).

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/shapes.md

- `x: f32 = 0.0`: Start x in pixels of the canvas.
- `y: f32 = 0.0`: Start y in pixels of the canvas (y down).
- `dx: f32 = 200.0`: Horizontal offset in pixels from the start to the tip; positive is right.
- `dy: f32 = 0.0`: Vertical offset in pixels from the start to the tip; positive is down.
- `tip_length: f32 = 24.0`: Length in pixels of each tip from its point back along the shaft; shortened to fit a short arrow.
- `tip_width: f32 = 20.0`: Width in pixels of each tip across the shaft.
- `tip_start: Option<ArrowTip> = None`: The tip at the start; `None` for none.
- `tip_end: Option<ArrowTip> = Some(ArrowTip::TriangleFilled)`: The tip at the end; `None` for none.
- `fill: Option<Color> = Paint::arrow(theme).fill`: `None` leaves the inside empty.
- `stroke: Option<Color> = Paint::arrow(theme).stroke`: `None` draws no outline.
- `stroke_width: f32 = Paint::arrow(theme).stroke_width`: Outline width in pixels.
- `dash: Option<(f32, f32)> = None`: Dash and gap lengths of the outline.
- `opacity: f32 = 1.0`: 0 transparent to 1 opaque.
- `enter: Option<EnterAnim> = None`: How it appears; `None` shows it from the start.
- `exit: Option<ExitAnim> = None`: How it leaves at the end of its container; `None` stays.
- `emphasis: Option<Emphasis> = None`: An emphasis animation (`Indicate`, `Wiggle`, ..) played while it is shown.
- `fn shape(&self) -> Shape`: The path and paint as a `Shape`.

## VectorSum

Vectors added tip to tail (Manim's vector addition): every vector starts at `origin`, then moves over `run_time` seconds after `delay` to the tip of the one before, and the resultant from `origin` to the last tip draws with `resultant_enter` (a `Create` delayed past the move). Vectors are in units of `ui.space`; `labels` are written at the middle of the vectors, on their left, and `resultant_label` on the side of the resultant away from them.

Page: https://fframes-kit.pages.dev/docs/math/linear-transform-and-vector-sum.md · feature `math`

- `vectors: Vec<(f64, f64)> = Vec::new()`: The vectors `(dx, dy)` in units of `ui.space` (y up), added in order tip to tail.
- `origin: (f64, f64) = (0.0, 0.0)`: Where the first vector starts and the resultant begins, in units of `ui.space`.
- `colors: Vec<Color> = Vec::new()`: Colours of the vectors in turn; empty for the theme's accent and highlight.
- `labels: Vec<Cow<str>> = Vec::new()`: Text for each vector in turn, written at its middle; a vector without one has none.
- `delay: f32 = 0.0`: Seconds after the container's start before the vectors begin to move into place.
- `run_time: f32 = 1.5`: Seconds the vectors take to move to the tip of the one before.
- `rate_func: RateFunc = RateFunc::default()`: Easing of the move over its run time.
- `resultant: bool = true`: Draws the sum from `origin` to the last tip when `true`.
- `resultant_color: Color = theme.colors.title`: Colour of the resultant.
- `resultant_label: Cow<str> = Cow::Borrowed("")`: Text written beside the resultant; empty for none.
- `enter: Option<EnterAnim> = None`: How each vector appears; `None` shows them from the start.
- `resultant_enter: Option<EnterAnim> = None`: How the resultant appears; `None` shows it from the start.
- `labels_enter: Option<FadeIn> = None`: Fade in of the vector labels; `None` for none.
- `resultant_label_enter: Option<FadeIn> = None`: The resultant's label also fades with this, to wait for the resultant.
- `fn total(&self) -> (f64, f64)`: The sum of the vectors.

## VenetianBlinds

Its children shown through blinds that open (Remotion's `venetianBlinds()`): `slats` strips across the area, each showing a band from its middle that is `progress` (0 hidden to 1 open) of the strip wide.

Page: https://fframes-kit.pages.dev/docs/motion/effects.md

- `progress: Anim<f32> = Anim::Fixed(0.5)`: 0 hidden to 1 fully open: the share of each slat's width that shows. Animatable.
- `direction: BlindsDirection = BlindsDirection::Vertical`: Whether the slats stand upright side by side or lie one above the other.
- `slats: u32 = 12`: Number of strips across the area; at least 1.
- `area: (f32, f32) = (1920.0, 1080.0)`: Width and height of the area the blinds cover from the top left, in the children's user units.
- `key: Option<&str> = None`: Names the mask when two of these effects share a frame.
- `children: Children = no_children()`: The content shown through the blinds (a closure taking the `Ui`).
- `fn bands(&self, progress: f32) -> Vec<(f32, f32, f32, f32)>`: The open bands as `(x, y, w, h)` at `progress`.

## VGroup

Shapes moved and animated together (Manim `VGroup`). Build one from the `shape()` of shape components, line them up with `VGroup::arrange` or `VGroup::arrange_in_grid` and draw it with one `enter`, `exit` and `emphasis`.

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/coordinate-systems.md

- `parts: Vec<Shape>`: The shapes drawn together, in pixels of the canvas.
- `enter: Option<EnterAnim>`: How the parts appear together; `None` shows them from the start.
- `exit: Option<ExitAnim>`: How the parts leave together at the end of their container; `None` stays.
- `emphasis: Option<Emphasis>`: An emphasis animation (`Indicate`, `Wiggle`, ..) played on the parts while they are shown.
- `fn new(parts: Vec<Shape>) -> Self`
- `fn bounds(&self) -> Option<Rect>`: The box around every part, `None` for an empty group.
- `fn shift(self, dx: f64, dy: f64) -> Self`: Moves every part by `(dx, dy)` pixels (Manim `shift`).
- `fn move_to(self, x: f64, y: f64) -> Self`: Moves the group so the center of its box is at `(x, y)` (Manim `move_to`).
- `fn arrange(self, direction: Anchor, buff: f64) -> Self`: Lines the parts up one after another in `direction`, `buff` pixels apart, around the group's current center (Manim `arrange(direction, buff)`).
- `fn arrange_in_grid(self, columns: usize, buff: (f64, f64)) -> Self`: Puts the parts in rows of `columns` cells (Manim `arrange_in_grid`), around the group's current center. `buff` is `(between columns, between rows)`.

## Vibrance

Its children with gentler extra saturation than `Saturation`; see `ColorMatrix::vibrance` for how it approximates vibrance.

Page: https://fframes-kit.pages.dev/docs/motion/effects.md

- `amount: Anim<f32> = Anim::Fixed(0.8)`: Extra saturation, gentler than `Saturation`: 1 saturates half as much as `Saturation` at 2; 0 unchanged.
- `key: Option<&str> = None`: Names the filter when two effects of this kind share a frame.
- `children: Children = ui::no_children()`: The content the filter is applied to (a closure taking the `Ui`).

## Vignette

Darkened edges round its children (Remotion's `vignette()`). The middle up to `radius` stays clear, then the vignette grows over `feather` to `amount` (both 0 to 1, where 1 is the edge of the area seen from `center`). `roundness` 1 makes it an ellipse with the area's proportions and 0 a rectangle; in between the two shapes are mixed (Remotion mixes the distances, so the in-between shapes differ a little). `mode` lays `color` over the edges, also where the children are transparent, or fades the children out towards them. The curve is a smoothstep sampled at 16 points and drawn with gradients, so it costs no filter.

Page: https://fframes-kit.pages.dev/docs/motion/effects.md

- `amount: Anim<f32> = Anim::Fixed(0.5)`: 0 to 1 strength of the vignette at full darkness. Animatable.
- `radius: f32 = 0.65`: 0 to 1 distance from `center` up to which the picture stays clear, where 1 is the edge of the area.
- `center: (f32, f32) = (0.5, 0.5)`: Middle of the clear area as 0 to 1 fractions of `area` (x, y).
- `feather: f32 = 0.35`: 0 to 1 width over which the vignette grows from clear to full `amount`, after `radius`.
- `roundness: f32 = 1.0`: 0 a rectangle to 1 an ellipse with the area's proportions.
- `color: Color = Color::BLACK`: Colour laid over the edges in `Color` mode.
- `mode: VignetteMode = VignetteMode::Color`: `Color` lays `color` over the edges, also where the children are transparent; `Alpha` fades the children out towards them.
- `area: (f32, f32) = (1920.0, 1080.0)`: Width and height of the area the vignette covers from the top left, in the children's user units.
- `key: Option<&str> = None`: Names the gradient and mask ids when two vignettes share a frame.
- `children: Children = no_children()`: The content that is darkened (a closure taking the `Ui`).

## Wave

A wave along `length` meters of a medium whose left end is at `origin` (units of `ui.space`, `scale` units per meter), travelling right at `speed` m/s. With `front`, the medium is at rest at the start and the wave leaves the left end on the figure's clock; without it the whole length moves from the start. `marker` (meters from the left end) picks out one point of the medium, which shows that the medium oscillates in place while the wave passes. The axis draws with `enter`, the medium fades with `parts_enter`.

Page: https://fframes-kit.pages.dev/docs/physics/wave.md · feature `physics`

- `kind: WaveKind = WaveKind::Transverse`: What the wave shows: a transverse wave, a longitudinal one, a standing wave or two waves added.
- `origin: (f64, f64) = (-6.0, 0.0)`: Left end of the medium, on its resting line, in units of `ui.space`.
- `length: f64 = 12.0`: Length of the medium in meters.
- `scale: f64 = 1.0`: Units of `ui.space` per meter.
- `amplitude: f64 = 0.8`: Largest displacement in meters; a standing wave reaches twice this.
- `wavelength: f64 = 4.0`: Meters between two crests.
- `speed: f64 = 2.0`: Speed the wave travels right at in m/s.
- `second_wavelength: f64 = 3.0`: Meters between two crests of the second wave of a `Superposition`.
- `second_amplitude: f64 = 0.5`: Largest displacement in meters of the second wave of a `Superposition`.
- `front: bool = true`: The medium is at rest at the start and the wave leaves the left end on the clock; off makes the whole length move from the start.
- `marker: Option<f64> = None`: Meters from the left end of one point of the medium to highlight, which shows it oscillates in place; `None` for none.
- `particles: usize = 48`: Particles of a longitudinal wave.
- `band: f64 = 1.2`: Meters tall, the lines that stand for the particles of a longitudinal wave.
- `delay: f32 = 0.0`: Seconds after the container's start before the wave begins.
- `time_scale: f32 = 1.0`: Speed of the motion over local time; 2 runs twice as fast, 1 is real time.
- `color: Color = theme.colors.accent`: Colour of the wave, or of the first wave of a `Superposition`.
- `second_color: Color = theme.colors.highlight`: Colour of the second wave of a `Superposition` and of the nodes of a standing wave.
- `marker_color: Color = theme.colors.title`: Colour of the highlighted point and of the summed wave of a `Superposition`.
- `guide_color: Color = theme.colors.muted`: Colour of the dashed axis and of a standing wave's envelope.
- `stroke_width: f32 = theme.stroke.regular`: Width of the wave line in pixels; the other lines use the theme's thin width.
- `enter: Option<EnterAnim> = None`: How the axis draws in; `None` shows it from the start.
- `exit: Option<ExitAnim> = None`: How the axis leaves at the end of the container; `None` stays.
- `parts_enter: Option<FadeIn> = None`: How the medium fades in; `None` for none.
- `parts_exit: Option<FadeOut> = None`: How the medium fades out before the end; `None` for none.
- `fn displacement(&self, x: f64, t: f64) -> f64`: The displacement in meters of the medium `x` meters from the left end after `t` seconds: up for the transverse kinds, to the right for the longitudinal one.
- `fn envelope(&self, x: f64) -> f64`: The largest displacement of a standing wave at `x`, `2A sin(kx)`.
- `fn harmonic(self, n: u32) -> Self`: The standing wave of the `n`th harmonic of a string `length` meters long, fixed at both ends: Manim-physics' `StandingWave(n, length)`, `n` half wavelengths along it.
- `fn nodes(&self) -> Vec<f64>`: The nodes of a standing wave, every half wavelength from the left end, in meters.

## Waveform

The audio spectrum (or any values) as a filled smooth wave over a baseline, like the layered waves of an audio announcement. See `wave_path` for the geometry.

Page: https://fframes-kit.pages.dev/docs/media-and-overlays/data-audio-decoration-and-media.md

- `values: Vec<f32> = Vec::new()`: The wave heights, spread evenly between the start and the end of the baseline; empty gives a flat line.
- `x: f32 = 0.0`: Left end of the baseline in pixels of the canvas.
- `y: f32 = 1080.0`: The baseline.
- `width: f32 = 1920.0`: Length of the baseline in pixels.
- `gain: f32 = 1200.0`: Pixels of wave height per unit of value.
- `max_height: f32 = 600.0`: Highest the wave rises over the baseline, in pixels.
- `fill: Option<Color> = Some(theme.colors.accent)`: Colour of the area under the wave; `None` leaves it empty.
- `stroke: Option<Color> = None`: Colour of the outline; `None` draws no outline.
- `stroke_width: f32 = theme.stroke.thin`: Outline width in pixels.
- `opacity: f32 = 1.0`: 0 transparent to 1 opaque.

## WhiteBalance

Its children warmer or colder: `temperature` from -1 (blue) to 1 (orange) and `tint` from -1 (green) to 1 (magenta).

Page: https://fframes-kit.pages.dev/docs/motion/effects.md

- `temperature: Anim<f32> = Anim::Fixed(0.5)`: -1 cold (blue) to 1 warm (orange).
- `tint: f32 = 0.0`: -1 green to 1 magenta.
- `key: Option<&str> = None`: Names the filter when two effects of this kind share a frame.
- `children: Children = ui::no_children()`: The content the filter is applied to (a closure taking the `Ui`).

## WhiteNoise

Grey static over its children (Remotion's `whiteNoise()`): TV static, signal loss, snow. `amount` mixes it in, 0 unchanged and 1 the visible pixels fully replaced; the children's alpha stays. `seed` picks the pattern: derive it from the frame (`ui.frame.index as u32`) to make the static move. `grain` is the size of a speck in units: keep it at least two output pixels (2 for a full-size render, more for a scaled down one), since finer noise aliases and each backend samples it differently. Drawn with `feTurbulence` over the `area` from the origin; the children render twice.

Page: https://fframes-kit.pages.dev/docs/motion/effects.md

- `amount: Anim<f32> = Anim::Fixed(1.0)`: 0 the children unchanged to 1 the visible pixels fully replaced by static. Animatable.
- `seed: u32 = 0`: Picks the pattern; derive it from the frame (`ui.frame.index as u32`) to make the static move.
- `grain: f32 = 2.0`: Size of a speck in the children's user units; keep it at least 2 output pixels or it aliases.
- `area: (f32, f32) = (1920.0, 1080.0)`: Width and height of the area the static covers from the top left, in the children's user units.
- `key: Option<&str> = None`: Names the filter and mask ids when two of these effects share a frame.
- `children: Children = no_children()`: The content the static is drawn over, only where it is opaque (a closure taking the `Ui`).

## WordCaptions

TikTok-style captions: the page of `pages` that plays now, centred on `(x, y)` and wrapped into `width` pixels, with the word being said in `highlight`, scaled by `pop`. Times are milliseconds of the container. A page that needs more than `max_lines` lines is shrunk until it fits. Between pages and after the last one nothing is drawn.

Page: https://fframes-kit.pages.dev/docs/media-and-overlays/overlays.md

- `pages: Vec<TikTokPage> = Vec::new()`: The pages of words, each with its own timing, as made by `tiktok_pages`; one shows at a time.
- `x: f32 = 960.0`: Horizontal center of the caption, in pixels of the canvas.
- `y: f32 = 860.0`: Vertical center of the caption block, in pixels of the canvas.
- `width: f32 = 1400.0`: Width in pixels the words wrap into.
- `max_lines: usize = 2`: Most lines a page may take; a longer page is shrunk until it fits.
- `style: TextStyle = theme.typography.title`: The font: family, size in pixels and weight.
- `fill: Color = theme.colors.caption`: Colour of the words that are not being said.
- `highlight: Color = theme.colors.accent`: Colour of the word being said.
- `pop: f32 = 1.12`: The size of the word being said, 1 for none.
- `fade: f32 = 0.08`: Seconds a word takes to light up and to fade back.
- `uppercase: bool = false`: `true` writes every word in capitals.
- `pill: Option<Color> = None`: A rounded box behind the page, in this colour.
- `pill_opacity: f32 = 0.75`: Opacity of the `pill`, 0 transparent to 1 opaque.
- `padding: f32 = 24.0`: Space between the text and the edge of the pill.
- `entrance: PageEntrance = PageEntrance::Pop`: How a page comes in over `enter` seconds.
- `enter: f32 = 0.15`: Seconds of the entrance.
- `exit: f32 = 0.1`: Seconds the page takes to fade out before the next one starts, or the last one ends.

## ZoomedInset

Manim's `ZoomedScene`: the children, and a second, magnified copy of what is inside `frame` drawn in `display` (both pixel boxes), with the frame outlined and the display bordered. The display pops out of the frame over `run_time` after `delay` (Manim's `get_zoomed_display_pop_out_animation`); a `run_time` of 0 shows it at once. The children render twice.

Page: https://fframes-kit.pages.dev/docs/layout-and-shapes/coordinate-systems.md

- `key: Option<&str> = None`: Names it when two of the same kind share a frame.
- `frame: Rect = Rect::new(929.625, 509.625, 990.375, 570.375)`: The part of the canvas that is magnified.
- `display: Rect = Rect::new(1447.5, 67.5, 1852.5, 472.5)`: Where the magnified copy is drawn.
- `frame_color: Color = theme.colors.highlight`: Colour of the outline of `frame`.
- `border_color: Color = theme.colors.highlight`: Colour of the border of `display`.
- `stroke_width: f32 = theme.stroke.regular`: Width of the frame outline and the display border in pixels.
- `background: Color = theme.colors.background`: Fills the display under the copy.
- `delay: f32 = 0.0`: Seconds after the container's start before the display begins to pop out of the frame.
- `run_time: f32 = 0.0`: Seconds the display takes to pop out of the frame; 0 shows it at once at `delay`.
- `rate_func: RateFunc = RateFunc::Smooth`: Easing of the pop-out over its run time.
- `children: Children = Box::new(|_| Svgr::empty())`: What is drawn and magnified (a closure taking the `Ui`); it renders twice.
- `fn display_at(&self, p: f32) -> Rect`: Where the display is at progress `p` of the pop-out.
- `fn zoom(&self, p: f32) -> Affine`: The map from canvas pixels to the display at progress `p`: `frame` onto the display.