# fframes-kit

> 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.

Add it with `cargo add fframes-kit` (kits: `--features math,physics,chemistry,cs,ml,biology,3d,latex`) and import `use fframes_kit::prelude::*;`.
Every component is a struct of props drawn with `ui.show(..)`; unset props come from the theme through `..ui.defaults()`.
Each page below is Markdown: the explanation, a rendered gallery clip, the compiled example code and an API table of every field (type, theme default, description).

Also: https://fframes-kit.pages.dev/llms-full.txt (every page in one file), https://fframes-kit.pages.dev/llms-small.txt (every component's fields only), https://fframes-kit.pages.dev/components.json (the same as JSON).

## Start here

- [fframes-kit docs](https://fframes-kit.pages.dev/docs.md): Animated components for fframes videos, grouped by what they do, each with its explanation, its code and a rendered demo.
- [Use with AI agents](https://fframes-kit.pages.dev/docs/ai.md): The fframes-kit docs as Markdown, llms.txt and JSON for coding agents, an installable Agent Skill, and a prompt to start from.
- [Getting started](https://fframes-kit.pages.dev/docs/start/getting-started.md): Add the kit to a video made by cargo fframes new and show a title and a lower third.
- [LaTeX setup](https://fframes-kit.pages.dev/docs/start/latex-setup.md): The latex feature of fframes-kit (MathTex, Tex, ChemEq, see components.md) typesets MathTex formulas with Typst, built into the kit, so most videos need…

## Core: Basics

- [Basics](https://fframes-kit.pages.dev/docs/basics.md): fframes-kit (crate fframes_kit) is a component library for fframes videos: Remotion's model (props, children, time set by the parent) with Manim's names…
- [One import](https://fframes-kit.pages.dev/docs/basics/one-import.md): The prelude also re-exports the fframes types a video needs (Video, Frame, Svgr, Color, Transform, svgr!, timeline!, Easing, Scene, Duration, ...).
- [The model](https://fframes-kit.pages.dev/docs/basics/the-model.md): The model
- [Time containers and fades](https://fframes-kit.pages.dev/docs/basics/time-containers-and-fades.md): Gallery scenes: Sequence, Series, Loop, Freeze, FadeIn, FadeOut, Fill.
- [Animated props](https://fframes-kit.pages.dev/docs/basics/animated-props.md): Anim<T> is a fixed value or a timeline! stored once in the video; ui.sample(&anim) reads it at the current time.
- [Theme](https://fframes-kit.pages.dev/docs/basics/theme.md): Theme holds typed groups: colors, typography, spacing, radius, stroke, shadow, motion.

## Core: Text and formulas

- [Text](https://fframes-kit.pages.dev/docs/text-and-formulas/text.md): Text components measure with the font files of the video's media, so a layout is the same in the editor and in the render.
- [Formulas](https://fframes-kit.pages.dev/docs/text-and-formulas/formulas.md): Feature latex: fframes-kit = { features = ["latex"] }.

## Core: Layout and shapes

- [Coordinate systems](https://fframes-kit.pages.dev/docs/layout-and-shapes/coordinate-systems.md): The explain layer measures in units of ui.space, 8 units tall with y up, like Manim (see the explain module docs for NumberLine, Axes, NumberPlane and…
- [Shapes](https://fframes-kit.pages.dev/docs/layout-and-shapes/shapes.md): Every shape is a component with its geometry props, the paint props fill, stroke, stroke_width, dash, opacity, and the animation props enter, exit…
- [Geometry animations](https://fframes-kit.pages.dev/docs/layout-and-shapes/geometry-animations.md): Animations are plain data.
- [Paths](https://fframes-kit.pages.dev/docs/layout-and-shapes/paths.md): fframes_kit::paths has Remotion's @remotion/paths in snake_case over kurbo::BezPath: get_length, get_point_at_length, get_tangent_at_length, evolve_path…

## Core: Motion

- [Transitions](https://fframes-kit.pages.dev/docs/motion/transitions.md): TransitionSeries is Remotion's <TransitionSeries>: sequences one after another, with a transition between two of them.
- [Effects](https://fframes-kit.pages.dev/docs/motion/effects.md): Gallery scenes: Trail, CameraMotionBlur, LightLeak, Blur, Noise, ShaderNoise.

## Core: Media and overlays

- [Overlays](https://fframes-kit.pages.dev/docs/media-and-overlays/overlays.md): Overlays sit on top of a scene: who is speaking, what is said, where in the video we are.
- [Data, audio, decoration and media](https://fframes-kit.pages.dev/docs/media-and-overlays/data-audio-decoration-and-media.md): Gallery scenes: BarChart, SpectrumBars, Waveform, DrawOn, CornerMarks, Glow, DropShadow, PhotoFrame, KenBurns.
- [Cursors, emoji, sound effects and GIFs](https://fframes-kit.pages.dev/docs/media-and-overlays/cursors-emoji-sound-effects-and-gi-fs.md): The kit draws its own mouse cursors (@remotion/mac-cursors), so they need no image files.

## Core: Slides and decks

- [Slides and decks](https://fframes-kit.pages.dev/docs/slides.md): The slides module makes a video that is also a deck.
- [Slides](https://fframes-kit.pages.dev/docs/slides/slides.md): slides::Slide::new(key, layout) makes a slide with the layout's own build-in, a hold of 1 second and no notes.
- [Backdrops, footers and themes](https://fframes-kit.pages.dev/docs/slides/backdrops-footers-and-themes.md): A slide's backdrop is drawn behind its layout, in the theme's colours.
- [Starter templates](https://fframes-kit.pages.dev/docs/slides/starter-templates.md): slides::templates provides editable example decks for common presentations.
- [Decks](https://fframes-kit.pages.dev/docs/slides/decks.md): Deck::new(theme, slides) makes one fframes Scene per slide, named by the slide's key, so frame agenda@end on the command line finds it.
- [A complete deck](https://fframes-kit.pages.dev/docs/slides/a-complete-deck.md): A whole video: the pitch template, renamed and extended with a slide of your own, in the sunset theme over a glow, with a footer and a slide transition…

## Core: Advanced

- [Your own component](https://fframes-kit.pages.dev/docs/advanced/your-own-component.md): A component is a struct and one render.
- [Tag form (ui!)](https://fframes-kit.pages.dev/docs/advanced/tag-form-ui.md): ui! is svgr! markup that also takes component tags.
- [Editable props (fframes Studio)](https://fframes-kit.pages.dev/docs/advanced/editable-props-fframes-studio.md): fframes Studio can change a component's props without code edits.
- [A whole video](https://fframes-kit.pages.dev/docs/advanced/a-whole-video.md): The gallery (gallery/ of the repository) has one scene per component; render one with cargo run --release -p components-gallery -- frame Sequence@50%.

## Kits: Math

- [Math kit](https://fframes-kit.pages.dev/docs/math.md): The math kit is the math feature of fframes-kit (fframes-kit = { .., features = ["math"] }).
- [NumberPoint and Interval](https://fframes-kit.pages.dev/docs/math/number-point-and-interval.md): NumberPoint is a dot on a number line at a tracked value, with a label above it that can write the value.
- [FunctionPlot](https://fframes-kit.pages.dev/docs/math/function-plot.md): Axes with a graph, its label and a tracer: a dot that follows a tracked x along the graph, with a dashed line down to the x-axis and the point's…
- [Tangent and Secant](https://fframes-kit.pages.dev/docs/math/tangent-and-secant.md): Tangent is the tangent of a function at a tracked x, a line of fixed length centered on the point.
- [RiemannSum and AreaUnder](https://fframes-kit.pages.dev/docs/math/riemann-sum-and-area-under.md): RiemannSum draws Riemann rectangles with each width of dxs in turn, cross-fading from one to the next, and can write the sum.
- [UnitCircle](https://fframes-kit.pages.dev/docs/math/unit-circle.md): The unit circle at a tracked angle (radians, counterclockwise): the radius to the point, the cosine along the x-axis, the sine up to the point and the…
- [LinearTransform and VectorSum](https://fframes-kit.pages.dev/docs/math/linear-transform-and-vector-sum.md): LinearTransform is Manim's ApplyMatrix on a LinearTransformationScene.
- [Pythagoras](https://fframes-kit.pages.dev/docs/math/pythagoras.md): A right triangle with legs a and b and a square on each side, each drawn with its own squares_enter and labeled with its area (a² = 9, b² = 16, c² = 25).…
- [FractionBar and FractionPie](https://fframes-kit.pages.dev/docs/math/fraction-bar-and-fraction-pie.md): A bar or a circle cut into denominator equal parts, of which the first numerator fill one after another (stagger seconds apart, from delay).
- [MatrixView](https://fframes-kit.pages.dev/docs/math/matrix-view.md): A matrix product worked out entry by entry: a × b = c, centered on (x, y).
- [Plots](https://fframes-kit.pages.dev/docs/math/plots.md): fframes_kit::plot draws data on axes.
- [NormalFit](https://fframes-kit.pages.dev/docs/math/normal-fit.md): Samples pouring into a histogram, then the normal curve that fits them. samples is a slice, and shown (a tracker) says how many of them are binned so…
- [Epicycles](https://fframes-kit.pages.dev/docs/math/epicycles.md): A chain of turning circles whose end draws a closed path, as in the 3Blue1Brown Fourier series. fourier(path, samples, terms) resamples the path along…

## Kits: Physics

- [Physics kit](https://fframes-kit.pages.dev/docs/physics.md): The physics kit is the physics feature of fframes-kit (fframes-kit = { .., features = ["physics"] }).
- [Projectile](https://fframes-kit.pages.dev/docs/physics/projectile.md): A ball thrown at speed and angle without drag.
- [Pendulum and EnergyBars](https://fframes-kit.pages.dev/docs/physics/pendulum-and-energy-bars.md): PendulumMotion::new(length, angle0, seconds) swings a pendulum from rest without friction; PendulumMotion::damped(length, angle0, damping, seconds) slows…
- [RigidWorld](https://fframes-kit.pages.dev/docs/physics/rigid-world.md): Manim-physics' Space and SpaceScene.
- [MultiPendulum](https://fframes-kit.pages.dev/docs/physics/multi-pendulum.md): MultiPendulumMotion::new(lengths, masses, angles, seconds) solves a chain of point masses on massless rods released at rest, a double pendulum with two…
- [SpringMass](https://fframes-kit.pages.dev/docs/physics/spring-mass.md): SpringMotion::new(stiffness, mass, x0, seconds) lets a block go from rest x0 meters from its rest position, and SpringMotion::damped(stiffness, mass…
- [Wave](https://fframes-kit.pages.dev/docs/physics/wave.md): One figure for four kinds of wave, chosen by kind:
- [RadialWave](https://fframes-kit.pages.dev/docs/physics/radial-wave.md): Circular waves from every point of sources, amplitude sin(k r - ω t) each, summed where they meet.
- [FreeBody](https://fframes-kit.pages.dev/docs/physics/free-body.md): A block with forces (Force::new(name, x, y), in newtons, y up) drawn from its middle, scale units per newton.
- [Orbit](https://fframes-kit.pages.dev/docs/physics/orbit.md): A planet on a Kepler orbit around a star at focus: semi_major units, eccentricity, the perihelion to the right of the star, once around every period…
- [FieldLines](https://fframes-kit.pages.dev/docs/physics/field-lines.md): Field::new(charges, lines_per_charge, bounds) traces the field lines of point charges once (Charge::new(x, y, q)).
- [ElectricField and MagneticField](https://fframes-kit.pages.dev/docs/physics/electric-field-and-magnetic-field.md): ElectricField is manim-physics' ElectricField: an arrow on every grid point of x_range by y_range, pointing along the field of charges and coloured by…
- [Circuit](https://fframes-kit.pages.dev/docs/physics/circuit.md): A series circuit on a rectangular loop: a battery on the left side, a switch on the top, a bulb on the right and a resistor on the bottom.
- [Symbol and Schematic](https://fframes-kit.pages.dev/docs/physics/symbol-and-schematic.md): Symbol draws one circuit part: SymbolKind::Resistor, Capacitor, Inductor, VoltageSource, CurrentSource, Ground, Opamp (Manim-circuit's set), and Battery…
- [RayDiagram and Refraction](https://fframes-kit.pages.dev/docs/physics/ray-diagram-and-refraction.md): RayDiagram draws the three principal rays of a thin lens (Optic::Lens) or a mirror (Optic::Mirror).
- [OpticalBench, Lens and Ray](https://fframes-kit.pages.dev/docs/physics/optical-bench-lens-and-ray.md): OpticalBench is manim-physics' Lens and Ray: lenses on one horizontal axis, and rays traced through them from left to right.
- [Collision1D](https://fframes-kit.pages.dev/docs/physics/collision-1d.md): Carts A and B on a track that collide head on: masses m1, m2, velocities u1, u2, centers x1, x2, and a restitution from 1 (elastic) to 0 (they stick…
- [Doppler](https://fframes-kit.pages.dev/docs/physics/doppler.md): A source moving right from start at source_speed m/s sends out a front every period seconds, and the fronts spread at wave_speed m/s.
- [GasBox](https://fframes-kit.pages.dev/docs/physics/gas-box.md): GasMotion::new(GasSetup { .. }) steps count hard balls in a box once, at 240 steps a second: elastic collisions between equal masses and with the walls…

## Kits: Chemistry

- [Chemistry kit](https://fframes-kit.pages.dev/docs/chemistry.md): The chemistry kit is the chemistry feature of fframes-kit (fframes-kit = { .., features = ["chemistry"] }).
- [BohrAtom](https://fframes-kit.pages.dev/docs/chemistry/bohr-atom.md): The Bohr model of an element: its symbol on the nucleus and its electrons on rings, shell_gap pixels apart.
- [ElementTile and PeriodicTable](https://fframes-kit.pages.dev/docs/chemistry/element-tile-and-periodic-table.md): ElementTile is one element as a square: the atomic number, the symbol, the name and the atomic weight, tinted with the colour of its category (or color…
- [ElementCard](https://fframes-kit.pages.dev/docs/chemistry/element-card.md): ElementCard is the larger card of one element, size pixels high: the atomic number, the symbol, the name, the atomic mass, the ground state electron…
- [Molecule2D and Molecule](https://fframes-kit.pages.dev/docs/chemistry/molecule-2d-and-molecule.md): Molecule2D draws a skeletal formula from a Structure: atoms with positions in bond lengths (y up) and bonds between them.
- [Molecule3D and Orbital](https://fframes-kit.pages.dev/docs/chemistry/molecule-3d-and-orbital.md): These two need the 3d feature as well (features = ["chemistry", "3d"]), which turns on fframes/3d.
- [MolFile](https://fframes-kit.pages.dev/docs/chemistry/mol-file.md): MolFile::parse reads a V2000 molfile (.mol), or the first record of an .sdf file: the title, the atoms with their positions and charges (M CHG lines…
- [NamedMolecule](https://fframes-kit.pages.dev/docs/chemistry/named-molecule.md): NamedMolecule { name: "caffeine".into(), .. } draws a molecule by its common name, like Molecule draws a SMILES string.
- [GraphMolecule](https://fframes-kit.pages.dev/docs/chemistry/graph-molecule.md): GraphMolecule is manim-chemistry's GraphMolecule with the animations of its GMAnimationBuilder.
- [ReactionEquation](https://fframes-kit.pages.dev/docs/chemistry/reaction-equation.md): Reaction holds a reaction's formulas. atom_counts reads one, with parentheses (Ca(OH)2). balance finds the smallest whole coefficients.
- [BondFormation](https://fframes-kit.pages.dev/docs/chemistry/bond-formation.md): Two atoms with their valence electrons on a ring around each symbol, placed as in a Lewis diagram.
- [EnergyProfile](https://fframes-kit.pages.dev/docs/chemistry/energy-profile.md): A reaction's energy along its progress: the reactants' level, the hump of the transition state and the products' level, in unit.
- [TitrationCurve and PhScale](https://fframes-kit.pages.dev/docs/chemistry/titration-curve-and-ph-scale.md): Titration is an acid titrated with sodium hydroxide: the acid's concentration and volume, the base's concentration, and a pka for a weak acid…
- [StatesOfMatter](https://fframes-kit.pages.dev/docs/chemistry/states-of-matter.md): Particles in a box going from from to to (MatterState::Solid, Liquid or Gas) over duration seconds after at:
- [Equilibrium](https://fframes-kit.pages.dev/docs/chemistry/equilibrium.md): EquilibriumModel is a reaction in a closed vessel.

## Kits: Computer science

- [Computer science kit](https://fframes-kit.pages.dev/docs/computer-science.md): The computer science kit is the cs feature of fframes-kit (fframes-kit = { .., features = ["cs"] }).
- [Layouts](https://fframes-kit.pages.dev/docs/computer-science/layouts.md): Two layouts in fframes_kit::layout place the nodes of the tree and graph figures.
- [ArrayTrace](https://fframes-kit.pages.dev/docs/computer-science/array-trace.md): ArrayTrace holds the steps of an array algorithm.
- [ArrayView and BinarySearch](https://fframes-kit.pages.dev/docs/computer-science/array-view-and-binary-search.md): ArrayView draws a trace as a row of cells, cell pixels wide and gap apart, with the index under each cell.
- [SortVisualizer](https://fframes-kit.pages.dev/docs/computer-science/sort-visualizer.md): SortVisualizer draws a sort's trace as bars, width by height pixels, each as tall as its value.
- [ListTrace](https://fframes-kit.pages.dev/docs/computer-science/list-trace.md): ListTrace holds the steps of a linked list, a stack or a queue.
- [LinkedList, Stack and Queue](https://fframes-kit.pages.dev/docs/computer-science/linked-list-stack-and-queue.md): LinkedList draws a ListTrace as boxes with a value and a link cell, node by height pixels and gap apart.
- [VariableBox](https://fframes-kit.pages.dev/docs/computer-science/variable-box.md): VariableBox is manim-dsa's MVariable with a label: name above a box with the variable's value, width by height pixels, widening to fit a longer value.…
- [TreeTrace and TreeView](https://fframes-kit.pages.dev/docs/computer-science/tree-trace-and-tree-view.md): TreeTrace holds the steps of a binary tree.
- [Graph, GraphTrace and GraphView](https://fframes-kit.pages.dev/docs/computer-science/graph-graph-trace-and-graph-view.md): Graph holds named nodes and edges, directed or not.
- [HashTrace and HashTable](https://fframes-kit.pages.dev/docs/computer-science/hash-trace-and-hash-table.md): HashTrace::record(buckets, &keys) starts a table with separate chaining: a key goes to bucket key mod buckets (Euclidean, so negative keys land in a…
- [Machine, MachineTrace and StateMachine](https://fframes-kit.pages.dev/docs/computer-science/machine-machine-trace-and-state-machine.md): Machine::new(&states, &transitions, start, &accepting) is a finite state machine.
- [CallTrace, CallStack and RecursionTree](https://fframes-kit.pages.dev/docs/computer-science/call-trace-call-stack-and-recursion-tree.md): CallTrace records a recursion: every call and every return takes a step.
- [ComplexityPlot](https://fframes-kit.pages.dev/docs/computer-science/complexity-plot.md): ComplexityPlot races growth rates on the same axes. n sweeps along n_range in duration seconds from delay, and each Growth in growths grows with it, a…
- [CodeBlock](https://fframes-kit.pages.dev/docs/computer-science/code-block.md): CodeBlock shows source code on a panel in a monospaced style (JetBrains Mono by default, ship it in media/), with line numbers and colours from a small…
- [SequenceDiagram](https://fframes-kit.pages.dev/docs/computer-science/sequence-diagram.md): SequenceDiagram draws participants as boxes along the top, spacing pixels apart, with dashed lifelines below, and sends one of messages every step_time…

## Kits: Machine learning

- [Machine learning kit](https://fframes-kit.pages.dev/docs/machine-learning.md): The machine learning kit is the ml feature of fframes-kit (fframes-kit = { .., features = ["ml"] }) and needs no other crate.
- [NeuralNetwork](https://fframes-kit.pages.dev/docs/machine-learning/neural-network.md): NeuralNetwork draws layers from left to right around center, spacing pixels between neighbouring layers.
- [VariationalAutoencoder](https://fframes-kit.pages.dev/docs/machine-learning/variational-autoencoder.md): VariationalAutoencoder draws ManimML's autoencoder as a NeuralNetwork: the image input, the feed-forward layers of the encoder (neurons per layer, [5, 3]…
- [Decision trees](https://fframes-kit.pages.dev/docs/machine-learning/decision-trees.md): A DecisionTree is a trained tree given as data: its nodes with the root first, the names of its features and of its classes.
- [Normal distributions and MCMC](https://fframes-kit.pages.dev/docs/machine-learning/normal-distributions-and-mcmc.md): Gaussian2D { mean, covariance } is a 2D normal distribution. density(p) is its probability density, principal_axes() the standard deviation along each…

## Kits: Biology

- [Biology kit](https://fframes-kit.pages.dev/docs/biology.md): The biology kit is the biology feature of fframes-kit (fframes-kit = { .., features = ["biology"] }) and needs no other crate.
- [Cell](https://fframes-kit.pages.dev/docs/biology/cell.md): Cell draws an animal or a plant cell (kind: CellKind::Animal or Plant), size pixels from its centre to its side.
- [DnaHelix](https://fframes-kit.pages.dev/docs/biology/dna-helix.md): DnaHelix draws a double helix from the side, the first base of sequence at the left (the other strand is its complement, complement(base)).
- [DnaHelix3D](https://fframes-kit.pages.dev/docs/biology/dna-helix-3d.md): DnaHelix3D needs the 3d feature as well (features = ["biology", "3d"]), which turns on fframes/3d.
- [Transcription](https://fframes-kit.pages.dev/docs/biology/transcription.md): Transcription copies a gene into mRNA.
- [Translation](https://fframes-kit.pages.dev/docs/biology/translation.md): Translation reads mrna into a protein.
- [MitosisStages](https://fframes-kit.pages.dev/docs/biology/mitosis-stages.md): MitosisStages shows one cell dividing into two, size pixels from its centre to its side.
- [Neuron](https://fframes-kit.pages.dev/docs/biology/neuron.md): Neuron lies across the frame, length pixels from its dendrites to its axon terminals: dendrites branching from the cell body (placed from seed), the axon…
- [ActionPotential](https://fframes-kit.pages.dev/docs/biology/action-potential.md): ActionPotential traces the membrane potential of an action potential on axes of time (0 to 6 ms) against millivolts, drawing it in duration seconds from…
- [PopulationCurve](https://fframes-kit.pages.dev/docs/biology/population-curve.md): PopulationCurve draws population growth on axes of time against population, from 0 to years in duration seconds from delay, a dot at the head of each…
- [PhyloTree](https://fframes-kit.pages.dev/docs/biology/phylo-tree.md): PhyloTree reads a tree in Newick format (Newick::parse, which says where a malformed string goes wrong) and grows it from the root at the left, width…
- [FoodWeb](https://fframes-kit.pages.dev/docs/biology/food-web.md): FoodWeb draws who eats whom: species, and the arrows of eats as (prey, predator) pairs pointing the way energy flows.
- [Circulation](https://fframes-kit.pages.dev/docs/biology/circulation.md): Circulation draws double circulation: the four chambers of the heart, with the lungs above and the body below.
- [EnzymeFit](https://fframes-kit.pages.dev/docs/biology/enzyme-fit.md): EnzymeFit shows an enzyme splitting its substrate.
- [PunnettSquare](https://fframes-kit.pages.dev/docs/biology/punnett-square.md): PunnettSquare crosses two parents, genotypes of one to three genes written as pairs of a letter with the dominant allele in upper case ("Pp", "YyRr").

## Kits: 3D

- [3D](https://fframes-kit.pages.dev/docs/three-d.md): The 3d feature of fframes-kit (fframes-kit = { .., features = ["3d"] }) adds the three module and its names to the prelude.
- [ThreeDView](https://fframes-kit.pages.dev/docs/three-d/three-d-view.md): three::ThreeDView is Manim's ThreeDScene.