# EnzymeFit

> EnzymeFit shows an enzyme splitting its substrate.

Page: https://fframes-kit.pages.dev/docs/biology/enzyme-fit/
Cargo feature: `biology` (`fframes-kit = { version = "..", features = ["biology"] }`)

`EnzymeFit` shows an enzyme splitting its substrate. The substrate is two halves joined by a
bond; it drifts in and settles into the active site cut into the top of the enzyme.

- **Model:** with `induced` (the default) the site starts wider than the substrate and closes
  round it as it binds (induced fit). Without it the site already has the substrate's shape
  (lock and key). The model is named under the caption.
- **Motion:** from `delay` the substrate arrives over 0.6..1.8 s and binds over 2..2.8 s.
  The bond glows from 3.4 s and breaks at 4.8 s, then the two products drift away and an
  induced-fit site opens again. Everything has finished by 6.2 s.
- **Text:** `labels` names the enzyme, the active site, the substrate and the products.
  `captions` describes each step underneath, one caption at a time.

Gallery scenes: `EnzymeFit` (induced fit) and `LockAndKey`.

Gallery clip of `EnzymeFit`: https://fframes-kit.pages.dev/media/scenes/EnzymeFit-979c3052.mp4

Gallery clip of `LockAndKey`: https://fframes-kit.pages.dev/media/scenes/LockAndKey-349b99ed.mp4

```rust
use fframes_kit::prelude::*;

fn lock_and_key<'a>(ui: &mut Ui<'a, '_, '_>) -> Svgr<'a> {
    ui.show(EnzymeFit {
        induced: false,
        delay: 0.5,
        scale: 1.3,
        ..ui.defaults()
    })
}
```

## API

Components are plain structs. Set the fields you need and fill the rest with `..ui.defaults()`: the defaults below come from the current theme (`theme.` values are fields of `Theme`).

### EnzymeFit

| Field | Type | Default | Description |
| --- | --- | --- | --- |
| `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. |

Feature `biology` · [Source](https://github.com/khanhthanhdev/fframes-kit/blob/main/fframes-kit/src/kits/biology/enzyme.rs#L84)