5.0.0-dev.11

MVS: Color map interpolation & canvas backgrounds (#1636 )
* MVS: Color map interpolation * print validation errors to plugin log * fixes * background postprocessing * fix resetCanvasProps * fix link * add example
2026-06-07 23:34:23 +08:00 · 2025-08-31 09:51:54 +02:00 · 2025-08-31 09:36:50 +02:00 · 2025-08-29 17:59:26 +02:00 · 2025-08-26 18:55:34 +02:00 · 2025-08-26 17:43:06 +02:00
26 changed files with 687 additions and 239 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,6 +13,7 @@ Note that since we don't clearly distinguish between a public and private interf
  - This change is breaking because all volume objects require the `instances` field now.
 - [Breaking] `Canvas3D.identify` now expects `Vec2` or `Ray3D`
 - [Breaking] `TrackballControlsParams.animate.spin.speed` now means "Number of rotations per second" instead of "radians per second"
+- [Breaking] `PluginStateSnapshotManager.play` now accepts an options object instead of a single boolean value
 - Update production build to use `esbuild`
 - Emit explicit paths in `import`s in `lib/`
 - Fix outlines on opaque elements using illumination mode
@@ -23,7 +24,7 @@ Note that since we don't clearly distinguish between a public and private interf
  - `representation` node: support custom property `molstar_representation_params`
  - Add `backbone` and `line` representation types
  - `primitives` node: support custom property `molstar_mesh/label/line_params`
-  - `canvas` node: support custom property `molstar_postprocessing` with the ability to customize outline, depth of field, bloom, shadow, occlusion (SSAO), and fog
+  - `canvas` node: support custom property `molstar_postprocessing` with the ability to customize outline, depth of field, bloom, shadow, occlusion (SSAO), fog, and background
  - `clip` node support for structure and volume representations
  - `grid_slice` representation support for volumes
  - Support tethers and background for primitive labels
@@ -43,6 +44,7 @@ Note that since we don't clearly distinguish between a public and private interf
  - Support loading trajectory coordinates from separate nodes
  - Trigger markdown commands from primitives using `molstar_markdown_commands` custom extensions
  - Support `molstar_on_load_markdown_commands` custom state on the `root` node
+  - Print tree validation errors to plugin log
 - Added new color schemes, synchronized with D3.js ('inferno', 'magma', 'turbo', 'rainbow', 'sinebow', 'warm', 'cool', 'cubehelix-default', 'category-10', 'observable-10', 'tableau-10')
 - Snapshot Markdown improvements
  - Add `MarkdownExtensionManager` (`PluginContext.managers.markdownExtensions`)
@@ -99,6 +101,7 @@ Note that since we don't clearly distinguish between a public and private interf
 - Add plugin config item ShowReset (shows/hides "Reset Zoom" button)
 - Fix transform params not being normalized when used together with param hash version
 - Replace `immer` with `mutative`
+- Fix renderer transparency check

 ## [v4.18.0] - 2025-06-08
 - MolViewSpec extension:
--- a/docs/docs/plugin/managers/markdown-extensions.md
+++ b/docs/docs/plugin/managers/markdown-extensions.md
@@ -20,6 +20,10 @@ Generally, the command should be URL encoded, e.g., `a b` => `a%20b` (in JS, `en

 - `center-camera` - Centers the camera
 - `apply-snapshot=key` - Loads snapshots with the provided key
+- `next-snapshot[=-1|1]` - Loads next/previous snapshot, the direction is optional and default to `1`
+- `play-snapshots` - Starts playback of state snapshots
+- `play-transition` - Plays an animation associated with the given snapshot
+- `stop-animation` - Stops currently playing animation
 - `focus-refs=ref1,ref2,...` - On click, focuses nodes with the provided refs
 - `highlight-refs=ref1,ref2,...` - On mouse over, highlights the provided refs
 - `query=...&lang=...&action=highlight,focus&focus-radius=...`
@@ -28,7 +32,7 @@ Generally, the command should be URL encoded, e.g., `a b` => `a%20b` (in JS, `en
    - (optional) `action` is an array of `highlight` (default), `focus` (multiple actions can be specified)
    - (optional) `focus-radius` is extra distance applied when focusing the selection (default is `3`)
    - Example: `[HEM](!query=resn%20HEM%26lang=pymol&action=highlight,focus)` highlights or focuses the HEM residue (the query must be URL encoded because it contains spaces and possibly other special characters)
- `play-audio=src`, `toggle-audio[=str]`, `stop-audio`, `pause-audio` - Audio playback support
+- `play-audio=src`, `toggle-audio[=src]`, `stop-audio`, `pause-audio`, `dispose-audio` - Audio playback support

 ## Custom Content

--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "molstar",
-  "version": "5.0.0-dev.9",
+  "version": "5.0.0-dev.11",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "molstar",
-      "version": "5.0.0-dev.9",
+      "version": "5.0.0-dev.11",
      "license": "MIT",
      "dependencies": {
        "@types/argparse": "^2.0.17",
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "molstar",
-  "version": "5.0.0-dev.9",
+  "version": "5.0.0-dev.11",
  "description": "A comprehensive macromolecular library.",
  "homepage": "https://github.com/molstar/molstar#readme",
  "repository": {
@@ -122,7 +122,8 @@
    "Lukáš Polák <admin@lukaspolak.cz>",
    "Chetan Mishra <chetan.s115@gmail.com>",
    "Zach Charlop-Powers <zach.charlop.powers@gmail.com>",
-    "Kim Juho <juho_kim@outlook.com>"
+    "Kim Juho <juho_kim@outlook.com>",
+    "Victoria Doshchenko <doshchenko.victoria@gmail.com>"
  ],
  "license": "MIT",
  "devDependencies": {
--- a/src/apps/mvs-stories/styles.scss
+++ b/src/apps/mvs-stories/styles.scss
@@ -182,6 +182,15 @@
        max-width: 100%;
        height: auto;
    }
+
+    a {
+        text-decoration: none;
+        color: #1d4ed7;
+
+        &:hover {
+            text-decoration: underline;
+        }
+    }
 }

@media (orientation:portrait) {
--- a/src/examples/mvs-stories/stories/animation.ts
+++ b/src/examples/mvs-stories/stories/animation.ts
@@ -22,7 +22,15 @@ const Steps = [
        header: 'Animation Demo',
        key: 'intro',
        description: `### Molecular Animation
-A story showcasing MolViewSpec animation capabilities.`,
+A story showcasing MolViewSpec animation capabilities.
+
+[\[**🔄 Replay Intro**\]](!play-transition)
+[\[**⏵ Play Snapshots**\]](!play-snapshots)
+[\[**⏹ Stop Animation**\]](!stop-animation)
+
+[\[**➡️ Next Snapshot**\]](!next-snapshot)
+
+`,
        linger_duration_ms: 2000,
        transition_duration_ms: 500,
        state: (): Root => {
@@ -41,7 +49,7 @@ A story showcasing MolViewSpec animation capabilities.`,
                custom: {
                    molstar_trackball: {
                        name: 'rock',
-                        params: { speed: 1.5 },
+                        params: { speed: 0.5 },
                    }
                }
            });
@@ -49,11 +57,23 @@ A story showcasing MolViewSpec animation capabilities.`,
                kind: 'scalar',
                ref: 'prims-opacity',
                target_ref: 'prims',
-                duration_ms: 1000,
+                start_ms: 500,
+                duration_ms: 500,
                property: 'label_opacity',
                end: 1,
            });

+            anim.interpolate({
+                kind: 'scalar',
+                ref: 'prims-opacity',
+                target_ref: 'prims',
+                start_ms: 1500,
+                duration_ms: 500,
+                property: 'label_opacity',
+                start: 1,
+                end: 0.66,
+            });
+

            // Uncomment this to make 2nd frame render much faster
            // It will cause shader compilation to happen during the 1st snapshot
@@ -91,12 +111,28 @@ A story showcasing MolViewSpec animation capabilities.`,
            const builder = createMVSBuilder();

            const _1cbs = structure(builder, '1cbs');
-            const [poly,] = polymer(_1cbs, { color: Colors['1cbs'] });
+            const [poly, repr] = polymer(_1cbs, { color: Colors['1cbs'] });
+
+            repr.colorFromSource({
+                ref: 'residue_colors',
+                schema: 'residue',
+                category_name: 'atom_site',
+                field_name: 'label_comp_id',
+                palette: {
+                    kind: 'categorical',
+                    missing_color: 'white',
+                    colors: {
+                        ALA: 'red',
+                        ILE: 'white',
+                        LYS: 'white',
+                    }
+                }
+            });

            const surface = poly.representation({
                type: 'surface',
                surface_type: 'gaussian',
-            });
+            }).opacity({ opacity: 0.33 });

            _1cbs.component({ selector: 'ligand' })
                .transform({
@@ -119,14 +155,32 @@ A story showcasing MolViewSpec animation capabilities.`,

            anim.interpolate({
                kind: 'scalar',
-                ref: 'clip-transition',
                target_ref: 'clip',
-                duration_ms: 2000,
+                duration_ms: 500,
                property: ['point', 2],
                end: 55,
                easing: 'sin-in',
            });

+            anim.interpolate({
+                kind: 'scalar',
+                target_ref: 'clip',
+                start_ms: 600,
+                duration_ms: 800,
+                property: ['point', 2],
+                end: 0,
+                easing: 'sin-out',
+            });
+
+            anim.interpolate({
+                kind: 'scalar',
+                target_ref: 'clip',
+                start_ms: 1500,
+                duration_ms: 500,
+                property: ['point', 2],
+                end: 55,
+            });
+
            anim.interpolate({
                kind: 'vec3',
                target_ref: 'xform',
@@ -152,6 +206,20 @@ A story showcasing MolViewSpec animation capabilities.`,
                end: Colors['ligand-docked'],
            });

+            anim.interpolate({
+                kind: 'color',
+                target_ref: 'residue_colors',
+                duration_ms: 2000,
+                property: ['palette', 'colors'],
+                start: {
+                    ALA: 'yellow',
+                },
+                end: {
+                    ILE: 'blue',
+                    LYS: 'purple',
+                },
+            });
+
            return builder;
        },
        camera: {
@@ -273,10 +341,12 @@ function structure(builder: Root, id: string): MVSStructure {
        .modelStructure();
 }

-function polymer(structure: MVSStructure, options: { color: ColorT }) {
+function polymer(structure: MVSStructure, options?: { color?: ColorT }) {
    const component = structure.component({ selector: { label_asym_id: 'A' } });
    const reprensentation = component.representation({ type: 'cartoon' });
-    reprensentation.color({ color: options.color });
+    if (options?.color) {
+        reprensentation.color({ color: options.color });
+    }
    return [component, reprensentation] as const;
 }

@@ -294,6 +364,21 @@ export function buildStory(): MVSData_States {
                molstar_postprocessing: {
                    enable_outline: true,
                    enable_ssao: true,
+                    background: {
+                        name: 'horizontalGradient',
+                        params: {
+                            topColor: 0x777777,
+                            bottomColor: 0xffffff,
+                        }
+                    },
+                    // Example with background image:
+                    // background: {
+                    //     name: 'image',
+                    //     params: {
+                    //         // URL can also be filename in MVSX archive
+                    //         source: { name: 'url', params: 'URL' }
+                    //     }
+                    // }
                }
            }
        });
--- a/src/examples/mvs-stories/stories/audio.ts
+++ b/src/examples/mvs-stories/stories/audio.ts
@@ -22,15 +22,16 @@ const Steps = [
    {
        header: 'Audio Demo',
        key: 'intro',
-        description: `### Audio Playback
+        description: `
+**Audio**
+[‹ **▶ Play** ›](${encodeURIComponent(`!play-audio=${_Audio}`)})
+[‹ **⏸ Pause** ›](!pause-audio)
+[‹ **⏹ Stop** ›](!stop-audio) 
+[‹ **Hide** ›](!dispose-audio)
+
+### Audio Playback

 A simple example showcasing audio playback.
-
-Basic controls:
-
-[Play](${encodeURIComponent(`!play-audio=${_Audio}`)})
-[Pause](!pause-audio)
-[Stop](!stop-audio)
        `,
        linger_duration_ms: 2000,
        transition_duration_ms: 500,
@@ -50,7 +51,7 @@ Basic controls:
                    }
                }
            });
-            prims.label({ text: 'Click to Play', position: { label_asym_id: 'A' }, label_size: 10 });
+            prims.label({ text: '▶ Click to Play', position: { label_asym_id: 'A' }, label_size: 10 });

            return builder;
        },
@@ -67,7 +68,7 @@ Basic controls:

 If you clicked "Click to Play" in the previous snapshot, the audio should be playing now.

-[Stop](!stop-audio)
+[Stop Audio](!stop-audio)
        `,
        linger_duration_ms: 2000,
        transition_duration_ms: 500,
@@ -103,7 +104,7 @@ If you clicked "Click to Play" in the previous snapshot, the audio should be pla

 If you browser security permissions allow it, the audio should start playing automatically when the snapshot gets loaded

-[Stop](!stop-audio)
+[Stop Audio](!stop-audio)
        `,
        linger_duration_ms: 2000,
        transition_duration_ms: 500,
--- a/src/examples/mvs-stories/stories/motm1.ts
+++ b/src/examples/mvs-stories/stories/motm1.ts
@@ -3,6 +3,7 @@
 *
 * @author David Sehnal <david.sehnal@gmail.com>
 * @author Ludovic Autin <autin@scripps.edu>
+ * @author Victoria Doshchenko <doshchenko.victoria@gmail.com>
 */

 import { decodeColor } from '../../../extensions/mvs/helpers/utils';
@@ -84,15 +85,21 @@ const _Audio4 = audioPathBase + '/examples/audio/AudioMOM1_D.mp3';
 const q = (expr: string, lang = 'pymol') =>
    `!query=${encodeURIComponent(expr)}&lang=${lang}&action=highlight,focus`;

-const description_intro = `
-# Molecule of the Month: Myoglobin
+const desc_intro = `
+# Introduction
+
 A story based on the orginal [first Molecule of the Month](https://pdb101.rcsb.org/motm/1) made by David Goodsell in January 2000.

+🔊 *This story includes short audio commentaries to guide you through the structures.*  
+For the best experience, please keep your sound on or use headphones.  
+
+`;
+
+const description_p0 = `
+# Molecule of the Month: Myoglobin

 Basic controls for the audio comments:
-[Play](${encodeURIComponent(`!play-audio=${_Audio1}`)})
-[Pause](!pause-audio)
-[Stop](!stop-audio)
+${createAudioControls(_Audio1)}

 Myoglobin was the first protein to have its atomic structure determined, revealing how it stores oxygen in muscle cells.

@@ -161,9 +168,7 @@ const charged_residues = q(formatMolScript(query3), 'mol-script');
 const description_p1 = `
 # Myoglobin and Whales
 Basic controls for the audio comments:
-[Play](${encodeURIComponent(`!play-audio=${_Audio2}`)})
-[Pause](!pause-audio)
-[Stop](!stop-audio)
+${createAudioControls(_Audio2)}

 If you look at John Kendrew's PDB file, you'll notice that the myoglobin he used was taken 
 from sperm whale muscles. Whales and dolphin have a great need for myoglobin, so that they can 
@@ -184,9 +189,7 @@ high concentrations.
 const description_p2 = `
 # Oxygen Bound to Myoglobin
 Basic controls for the audio comments:
-[Play](${encodeURIComponent(`!play-audio=${_Audio3}`)})
-[Pause](!pause-audio)
-[Stop](!stop-audio)
+${createAudioControls(_Audio3)}

 A later structure of myoglobin, PDB entry [1mbo](https://www.rcsb.org/structure/1mbo), 
 shows that [oxygen](${q('index 1276+1277')}) binds to 
@@ -202,9 +205,7 @@ appear and disappear, allowing oxygen in and out.
 const description_p3 = `
 # Molecule of the Month: Myoglobin
 Basic controls for the audio comments:
-[Play](${encodeURIComponent(`!play-audio=${_Audio1}`)})
-[Pause](!pause-audio)
-[Stop](!stop-audio)
+${createAudioControls(_Audio4)}

 The atomic structure of myoglobin revealed many of the basic principles 
 of protein structure and stability. For instance, the structure showed 
@@ -235,10 +236,67 @@ PDB entry [2jho](https://www.rcsb.org/structure/2jho) includes myoglobin poisone
 `;

 const Steps = [
+    {
+        header: 'Introduction',
+        key: 'first-slide',
+        description: desc_intro,
+        linger_duration_ms: 0,
+        state: (): Root => {
+            const builder = createMVSBuilder();
+            const _1mbn = build1mbn(builder, '1MBN');
+
+            builder.extendRootCustomState({
+                molstar_on_load_markdown_commands: {
+                    'dispose-audio': _Audio1,
+                }
+            });
+
+            const anim = builder.animation(
+                {
+                    custom: {
+                        molstar_trackball: {
+                            name: 'spin',
+                            params: { speed: -0.05 },
+                        }
+                    }
+                }
+            );
+
+            const prims = _1mbn.struct.primitives({
+                ref: 'start-story',
+                label_opacity: 0,
+                label_background_color: 'grey',
+                snapshot_key: 'intro'
+            });
+            prims.label({
+                text: 'Start story',
+                position: [13.5, -4, 7.7],
+                label_size: 8
+            });
+
+            anim.interpolate({
+                kind: 'scalar',
+                target_ref: 'start-story',
+                duration_ms: 1000,
+                start_ms: 1,
+                property: 'label_opacity',
+                start: 0.0,
+                end: 1.0,
+            });
+
+
+            return builder;
+        },
+        camera: {
+            position: [13.5, 21.1, 73.1],
+            target: [13.5, 21.1, 7.7],
+            up: [0, 1, 0],
+        } satisfies MVSNodeParams<'camera'>,
+    },
    {
        header: 'Molecule of the Month: Myoglobin',
        key: 'intro',
-        description: description_intro,
+        description: description_p0,
        linger_duration_ms: 45000,
        transition_duration_ms: 500,
        state: (): Root => {
@@ -247,39 +305,10 @@ const Steps = [

            builder.canvas({ custom: { molstar_postprocessing: { enable_outline: false } } });

-            const _1mbn = structure(builder, '1MBN');
-
-            _1mbn.component({ selector: 'ligand' })
-                .representation({ ref: 'ligand', type: 'ball_and_stick' })
-                .color({ color: 'orange' });
-            // FE and O should be spacefill
-
-            _1mbn.component({ selector: { auth_seq_id: 155, label_atom_id: 'F' } })
-                .representation({ type: 'spacefill' })
-                .color({ color: 'yellow' });
-
-            _1mbn.component({ selector: { auth_seq_id: 154 } })
-                .representation({ type: 'spacefill' })
-                .color({ color: 'blue' });
-
-            _1mbn.component({ selector: { auth_seq_id: 154 } })
-                .representation({ type: 'spacefill' })
-                .color({ color: 'blue' });
-
-            const chA = _1mbn.component({ selector: { label_asym_id: 'A' } });
-            chA.representation({ type: 'surface', surface_type: 'gaussian' })
-                .color({ color: '#ff0303' })
-                .opacity({ ref: 'surfopa', opacity: 0.0 });
-
-            chA.representation({ type: 'line' })
-                .color({ custom: { molstar_color_theme_name: 'element-symbol' } })
-                .opacity({ ref: 'lineopa', opacity: 0.0 });
-
-            chA.representation({ type: 'cartoon' })
-                .color({ custom: { molstar_color_theme_name: 'secondary-structure' } });
+            const _1mbn = build1mbn(builder, '1MBN');

            // whale
-            _1mbn.component({ selector: { label_asym_id: 'A' } })
+            _1mbn.struct.component({ selector: { label_asym_id: 'A' } })
                .representation({ type: 'spacefill', custom: { molstar_representation_params: { ignoreLight: true } } })
                .colorFromSource({
                    schema: 'all_atomic',
@@ -296,29 +325,12 @@ const Steps = [
                    }
                }).opacity({ ref: 'cpkopa1', opacity: 0.0 });

-            _1mbn.component({ selector: { auth_seq_id: 155 } })
+            _1mbn.struct.component({ selector: { auth_seq_id: 155 } })
                .representation({ type: 'spacefill', custom: { molstar_representation_params: { ignoreLight: true } } })
                .color({ custom: GColors2 }).opacity({ ref: 'cpkopa2', opacity: 0.0 });

-            const prims = _1mbn.primitives({
-                ref: 'prims',
-                label_opacity: 1,
-                label_background_color: 'grey',
-                custom: {
-                    molstar_markdown_commands: {
-                        // 'apply-snapshot': 'interlude',
-                        'play-audio': _Audio1,
-                    }
-                }
-            });
-            prims.label({
-                text: 'Start Comments',
-                position: [13.5, 45.1, 7.7],
-                label_size: 5
-            });
-            addNextButton(builder, 'whale', [13.5, 0, 7.7]);
+            addNextButton(builder, 'whale', [13.5, -4, 7.7]);

-            // doesnt work for first slide, but work afterward
            builder.extendRootCustomState({
                molstar_on_load_markdown_commands: {
                    'play-audio': _Audio1,
@@ -543,7 +555,7 @@ const Steps = [
                start: 0.0,
                end: 1.0,
            });
-            addNextButton(builder, 'oxygen', [-18.9, 10, 7.3]);
+            addNextButton(builder, 'oxygen', [-18.9, -4, 7.3]);
            anim.interpolate({
                kind: 'scalar',
                target_ref: 'next',
@@ -897,7 +909,7 @@ function addNextButton(builder: any, snapshotKey: string, position: [number, num
        .label({
            ref: 'next_label',
            position: position,
-            text: 'Click me to go next',
+            text: 'Next Scene →',
            label_color: 'white',
            label_size: 5
        });
@@ -955,4 +967,54 @@ export function buildStory(): MVSData_States {
            timestamp: new Date().toISOString(),
        }
    };
+}
+
+function build1mbn(builder: any, pdbId: string) {
+    const struct = structure(builder, '1MBN');
+
+    struct.component({ selector: 'ligand' })
+        .representation({ ref: 'ligand', type: 'ball_and_stick' })
+        .color({ color: 'orange' });
+
+    // FE and O should be spacefill
+    struct.component({ selector: { auth_seq_id: 155, label_atom_id: 'FE' } })
+        .representation({ type: 'spacefill' })
+        .color({ color: 'yellow' });
+
+    struct.component({ selector: { auth_seq_id: 154 } })
+        .representation({ type: 'spacefill' })
+        .color({ color: 'blue' });
+
+    struct.component({ selector: { auth_seq_id: 154 } })
+        .representation({ type: 'spacefill' })
+        .color({ color: 'blue' });
+
+    const chA = struct.component({ selector: { label_asym_id: 'A' } });
+    chA.representation({ type: 'surface', surface_type: 'gaussian' })
+        .color({ color: '#ff0303' })
+        .opacity({ ref: 'surfopa', opacity: 0.0 });
+
+    chA.representation({ type: 'line' })
+        .color({ custom: { molstar_color_theme_name: 'element-symbol' } })
+        .opacity({ ref: 'lineopa', opacity: 0.0 });
+
+    chA.representation({ type: 'cartoon' })
+        .color({ custom: { molstar_color_theme_name: 'secondary-structure' } });
+
+    return {
+        struct,
+        refs: {
+            surfaceOpacity: 'surfopa',
+            lineOpacity: 'lineopa',
+        }
+    };
+}
+
+function createAudioControls(url: string) {
+    return `
+  [‹ **▶ Play** ›](${encodeURIComponent(`!play-audio=${url}`)})
+  [‹ **⏸ Pause** ›](!pause-audio)
+  [‹ **⏹ Stop** ›](!stop-audio)
+  [‹ **Hide** ›](!dispose-audio)
+  `;
 }
--- a/src/extensions/mvs/README.md
+++ b/src/extensions/mvs/README.md
@@ -1 +1 @@
-Find the MVS extension documentation [here](../../../docs/extensions/mvs/README.md).
+Please refer to the standalone documentation [here](https://molstar.org/mol-view-spec-docs/).
--- a/src/extensions/mvs/camera.ts
+++ b/src/extensions/mvs/camera.ts
@@ -8,6 +8,7 @@
 import { Camera } from '../../mol-canvas3d/camera';
 import { CameraFogParams, Canvas3DParams, Canvas3DProps, DefaultCanvas3DParams } from '../../mol-canvas3d/canvas3d';
 import { TrackballControlsParams } from '../../mol-canvas3d/controls/trackball';
+import { BackgroundParams } from '../../mol-canvas3d/passes/background';
 import { BloomParams } from '../../mol-canvas3d/passes/bloom';
 import { DofParams } from '../../mol-canvas3d/passes/dof';
 import { OutlineParams } from '../../mol-canvas3d/passes/outline';
@@ -21,6 +22,7 @@ import { PluginState } from '../../mol-plugin/state';
 import { StateObjectSelector } from '../../mol-state';
 import { fovAdjustedPosition } from '../../mol-util/camera';
 import { ColorNames } from '../../mol-util/color/names';
+import { deepClone } from '../../mol-util/object';
 import { ParamDefinition } from '../../mol-util/param-definition';
 import { decodeColor } from './helpers/utils';
 import { MolstarLoadingContext } from './load';
@@ -132,6 +134,11 @@ function optionalParams(enable: boolean | undefined, values: any, params: ParamD
    return fallback;
 }

+function normalizeBackground(variant: any, prev: any): any {
+    if (!variant) return prev;
+    return ParamDefinition.normalizeParams(BackgroundParams, { variant }, 'children');
+}
+
 /** Create a deep copy of `oldCanvasProps` with values modified according to a canvas node params. */
 export function modifyCanvasProps(oldCanvasProps: Canvas3DProps, canvasNode: MolstarNode<'canvas'> | undefined, animationNode: MVSAnimationNode<'animation'> | undefined): Canvas3DProps {
    const params = canvasNode?.params;
@@ -157,6 +164,8 @@ export function modifyCanvasProps(oldCanvasProps: Canvas3DProps, canvasNode: Mol
    const bloom = molstar_postprocessing?.enable_bloom;
    const bloomParams = molstar_postprocessing?.bloom_params;

+    const background = molstar_postprocessing?.background;
+
    const trackballAnimation = animationNode?.custom?.molstar_trackball;
    const trackballAnimationName = trackballAnimation?.name;
    const trackballAnimationParams = trackballAnimation?.params ?? {};
@@ -170,6 +179,7 @@ export function modifyCanvasProps(oldCanvasProps: Canvas3DProps, canvasNode: Mol
            occlusion: optionalParams(occlusion, occlusionParams, SsaoParams, oldCanvasProps.postprocessing.occlusion),
            dof: optionalParams(dof, dofParams, DofParams, oldCanvasProps.postprocessing.dof),
            bloom: optionalParams(bloom, bloomParams, BloomParams, oldCanvasProps.postprocessing.bloom),
+            background: normalizeBackground(background, oldCanvasProps.postprocessing.background),
        },
        cameraFog: optionalParams(fog, fogParams, CameraFogParams, oldCanvasProps.cameraFog),
        renderer: {
@@ -200,13 +210,14 @@ export function resetCanvasProps(plugin: PluginContext) {
        ...old,
        postprocessing: {
            ...old,
-            outline: DefaultCanvas3DParams.postprocessing.outline,
-            shadow: DefaultCanvas3DParams.postprocessing.shadow,
-            occlusion: DefaultCanvas3DParams.postprocessing.occlusion,
-            dof: DefaultCanvas3DParams.postprocessing.dof,
-            bloom: DefaultCanvas3DParams.postprocessing.bloom,
+            outline: deepClone(DefaultCanvas3DParams.postprocessing.outline),
+            shadow: deepClone(DefaultCanvas3DParams.postprocessing.shadow),
+            occlusion: deepClone(DefaultCanvas3DParams.postprocessing.occlusion),
+            dof: deepClone(DefaultCanvas3DParams.postprocessing.dof),
+            bloom: deepClone(DefaultCanvas3DParams.postprocessing.bloom),
+            background: deepClone(DefaultCanvas3DParams.postprocessing.background),
        },
-        cameraFog: DefaultCanvas3DParams.cameraFog,
+        cameraFog: deepClone(DefaultCanvas3DParams.cameraFog),
        trackball: {
            ...old?.trackball,
            animate: { name: 'off', params: {} },
--- a/src/extensions/mvs/helpers/animation.ts
+++ b/src/extensions/mvs/helpers/animation.ts
@@ -5,21 +5,23 @@
 * @author Ludovic Autin <ludovic.autin@gmail.com>
 */

-import { Snapshot } from '../mvs-data';
-import { Tree } from '../tree/generic/tree-schema';
-import { clamp, lerp } from '../../../mol-math/interpolate';
-import { MVSAnimationEasing, MVSAnimationNode, MVSAnimationSchema } from '../tree/animation/animation-tree';
-import { MVSTree } from '../tree/mvs/mvs-tree';
+import { SortedArray } from '../../../mol-data/int';
 import * as EasingFns from '../../../mol-math/easing';
-import { addDefaults } from '../tree/generic/tree-utils';
-import { RuntimeContext } from '../../../mol-task';
+import { clamp, lerp } from '../../../mol-math/interpolate';
 import { EPSILON, Mat3, Mat4, Quat, Vec3 } from '../../../mol-math/linear-algebra';
+import { RuntimeContext } from '../../../mol-task';
+import { deepEqual } from '../../../mol-util';
 import { Color } from '../../../mol-util/color';
+import { decodeColor } from '../../../mol-util/color/utils';
+import { produce } from '../../../mol-util/produce';
 import { makeContinuousPaletteCheckpoints, MVSContinuousPaletteProps, MVSDiscretePaletteProps } from '../components/annotation-color-theme';
 import { palettePropsFromMVSPalette } from '../load-helpers';
-import { SortedArray } from '../../../mol-data/int';
+import { Snapshot } from '../mvs-data';
+import { MVSAnimationEasing, MVSAnimationNode, MVSAnimationSchema } from '../tree/animation/animation-tree';
+import { Tree } from '../tree/generic/tree-schema';
+import { addDefaults } from '../tree/generic/tree-utils';
+import { MVSTree } from '../tree/mvs/mvs-tree';
 import { ColorT } from '../tree/mvs/param-types';
-import { produce } from '../../../mol-util/produce';

 export async function generateStateTransition(ctx: RuntimeContext, snapshot: Snapshot, snapshotIndex: number, snapshotCount: number) {
    if (!snapshot.animation) return undefined;
@@ -33,17 +35,27 @@ export async function generateStateTransition(ctx: RuntimeContext, snapshot: Sna
        ...transitions.map(t => (t.params.start_ms ?? 0) + t.params.duration_ms)
    );

-    const frames: MVSTree[] = [];
+    const frames: [tree: MVSTree, time: number][] = [];
    const dt = tree.params?.frame_time_ms ?? (1000 / 60);
    const N = Math.ceil(duration / dt);

    const nodeMap = makeNodeMap(snapshot.root, new Map(), []);
    const cache = new Map<any, InterpolationCacheEntry>();

+    const transitionGroups = groupTranstions(transitions);
+
+    let prevRoot: MVSTree | undefined;
    for (let i = 0; i <= N; i++) {
        const t = i * dt;
-        const root = createSnapshot(snapshot.root, transitions, t, cache, nodeMap);
-        frames.push(root);
+        const root = createSnapshot(snapshot.root, transitionGroups, t, cache, nodeMap);
+
+        if (root === prevRoot || (prevRoot && deepEqual(root, prevRoot))) {
+            frames[frames.length - 1][1] += dt;
+        } else {
+            frames.push([root, dt]);
+        }
+
+        prevRoot = root;

        if (ctx.shouldUpdate) {
            await ctx.update({ message: `Generating transition for snapshot ${snapshotIndex + 1}/${snapshotCount}`, current: i + 1, max: N });
@@ -77,74 +89,96 @@ const EasingFnMap: Record<MVSAnimationEasing, (t: number) => number> = {

 interface InterpolationCacheEntry {
    paletteFn?: (value: number) => Color,
+    startColor?: Color | Record<number | string, Color>,
+    endColor?: Color | Record<number | string, Color>,
    rotation?: { axis: Vec3, angle: number, start: Quat, end: Quat },
 }

-function createSnapshot(tree: MVSTree, transitions: MVSAnimationNode<'interpolate'>[], time: number, cache: Map<any, InterpolationCacheEntry>, nodeMap: Map<string, (string | number)[]>) {
-    return produce(tree, (draft) => {
-        for (const transition of transitions) {
-            const nodePath = nodeMap.get(transition.params.target_ref);
+function getTransitionKey(transition: MVSAnimationNode<'interpolate'>) {
+    const prop = transition.params.property;
+    if (Array.isArray(prop)) {
+        return `${transition.params.target_ref}:${prop.join('.')}`;
+    }
+    return `${transition.params.target_ref}:${prop}`;
+}
+
+function groupTranstions(transitions: MVSAnimationNode<'interpolate'>[]) {
+    const map = new Map<string, MVSAnimationNode<'interpolate'>[]>();
+    const groups: MVSAnimationNode<'interpolate'>[][] = [];
+    for (const t of transitions) {
+        const key = getTransitionKey(t);
+        if (!map.has(key)) {
+            const group: MVSAnimationNode<'interpolate'>[] = [];
+            map.set(key, group);
+            groups.push(group);
+        }
+        map.get(key)!.push(t);
+    }
+    for (const group of groups) {
+        group.sort((a, b) => {
+            const s = (a.params.start_ms ?? 0) - (b.params.start_ms ?? 0);
+            if (s !== 0) return s;
+            return a.params.duration_ms - b.params.duration_ms;
+        });
+    }
+    return groups;
+}
+
+function createSnapshot(tree: MVSTree, transitionGroups: MVSAnimationNode<'interpolate'>[][], time: number, cache: Map<any, InterpolationCacheEntry>, nodeMap: Map<string, (string | number)[]>) {
+    let modified = false;
+    const ret = produce(tree, (draft) => {
+        for (const transitionGroup of transitionGroups) {
+
+            const pivot = transitionGroup[0];
+            const nodePath = nodeMap.get(pivot.params.target_ref);
            if (!nodePath) continue;

            const node = select(draft, nodePath, 0);
-            const target = transition.params.property[0] === 'custom' ? node?.custom : node?.params;
+            const target = pivot.params.property[0] === 'custom' ? node?.custom : node?.params;
            if (!target) continue;

+
+            const offset = pivot.params.property[0] === 'custom' ? 1 : 0;
+
+            let transition: MVSAnimationNode<'interpolate'> = pivot;
+            let previous: MVSAnimationNode<'interpolate'> | undefined;
+
+            for (let i = transitionGroup.length - 1; i > 0; i--) {
+                const current = transitionGroup[i];
+                const currentStart = current.params.start_ms ?? 0;
+                if (time >= currentStart) {
+                    transition = current;
+                    previous = i > 0 ? transitionGroup[i - 1] : undefined;
+                    break;
+                }
+            }
+
            if (!cache.has(transition)) {
                cache.set(transition, {});
            }

            const cacheEntry: InterpolationCacheEntry = cache.get(transition)!;

-            const startTime = transition.params.start_ms ?? 0;
-            let t = clamp((time - startTime) / transition.params.duration_ms, 0, 1);
-
-            if (transition.params.kind === 'transform_matrix') {
-                processTransformMatrix(transition, target, t, cacheEntry);
-                continue;
-            }
-
-            t = applyFrequency(t, transition.params.frequency ?? 1, !!transition.params.alternate_direction);
-
-            const offset = transition.params.property[0] === 'custom' ? 1 : 0;
-            const startBase = transition.params.start ?? select(target, transition.params.property, offset);
-
-            if (transition.params.kind === 'color' && !cacheEntry.paletteFn) {
-                cacheEntry.paletteFn = makePaletteFunction(transition, startBase, transition.params.end as ColorT | undefined);
-            }
-
-            const paletteFn = cacheEntry.paletteFn!;
-
-            const startValue: any = transition.params.kind === 'color'
-                ? Color.toHexStyle(paletteFn(0))
-                : startBase;
-            const endValue: any = transition.params.kind === 'color'
-                ? Color.toHexStyle(paletteFn(1))
-                : transition.params.end;
-
-            if (time <= startTime) {
-                assign(target, transition.params.property, startValue, offset);
-                continue;
-            }
-
-            const easing = EasingFnMap[transition.params.easing ?? 'linear'] ?? EasingFnMap['linear'];
-            t = easing(t);
+            const startTime: number = transition.params.start_ms ?? 0;
+            const durationMs: number = transition.params.duration_ms ?? 0;
+            const t = (time - startTime) / durationMs;

            let next: any;
-            if (transition.params.kind === 'scalar') {
-                next = interpolateScalars(startValue, endValue, t, transition.params.noise_magnitude ?? 0, !!transition.params.discrete);
-            } else if (transition.params.kind === 'vec3') {
-                next = interpolateVectors(startValue, endValue, t, transition.params.noise_magnitude ?? 0, !!transition.params.spherical);
-            } else if (transition.params.kind === 'rotation_matrix') {
-                next = interpolateRotation(startValue, endValue, t, transition.params.noise_magnitude ?? 0, cacheEntry);
-            } else if (transition.params.kind === 'color') {
-                const color = paletteFn(t);
-                next = Color.toHexStyle(color);
+            if (transition.params.kind === 'transform_matrix') {
+                next = processTransformMatrix(transition, target, clamp(t, 0, 1), cacheEntry, offset, previous);
+            } else {
+                next = processScalarLike(transition, target, t, cacheEntry, offset, previous);
            }

+            if (next === undefined) {
+                continue;
+            }
+
+            modified = true;
            assign(target, transition.params.property, next, offset);
        }
    });
+    return modified ? ret : tree;
 }

 function applyFrequency(t: number, frequency: number, alternate: boolean) {
@@ -163,6 +197,53 @@ function applyFrequency(t: number, frequency: number, alternate: boolean) {
    return v;
 }

+function getPreviousScalarEnd(previous: MVSAnimationNode<'interpolate'> | undefined) {
+    if (!previous || previous.params.kind === 'transform_matrix') return undefined;
+    return previous.params.end;
+}
+
+function processScalarLike(transition: MVSAnimationNode<'interpolate'>, target: any, time: number, cacheEntry: InterpolationCacheEntry, offset: number, previous: MVSAnimationNode<'interpolate'> | undefined) {
+    if (transition.params.kind === 'transform_matrix') return;
+    if (previous && previous.params.kind === 'transform_matrix') return;
+
+    const startValue = transition.params.start ?? getPreviousScalarEnd(previous) ?? select(target, transition.params.property, offset);
+    if (transition.params.kind === 'color' && !cacheEntry.paletteFn) {
+        cacheEntry.paletteFn = makePaletteFunction(transition);
+    }
+
+    const endValue: any = transition.params.end;
+
+    if (time <= 0) return startValue;
+    else if (time >= 1 - EPSILON && !transition.params.alternate_direction && transition.params.kind !== 'color') return endValue;
+
+    let t = clamp(time, 0, 1);
+    t = applyFrequency(t, transition.params.frequency ?? 1, !!transition.params.alternate_direction);
+
+    const easing = EasingFnMap[transition.params.easing ?? 'linear'] ?? EasingFnMap['linear'];
+    t = easing(t);
+
+    if (transition.params.kind === 'scalar') {
+        return interpolateScalars(startValue, endValue, t, transition.params.noise_magnitude ?? 0, !!transition.params.discrete);
+    } else if (transition.params.kind === 'vec3') {
+        return interpolateVectors(startValue, endValue, t, transition.params.noise_magnitude ?? 0, !!transition.params.spherical);
+    } else if (transition.params.kind === 'rotation_matrix') {
+        return interpolateRotation(startValue, endValue, t, transition.params.noise_magnitude ?? 0, cacheEntry);
+    } else if (transition.params.kind === 'color') {
+        if (cacheEntry.paletteFn) {
+            const color = cacheEntry.paletteFn(t);
+            return Color.toHexStyle(color);
+        }
+
+        const baseColors = typeof startValue === 'object' ? select(target, transition.params.property, offset) : undefined;
+        return interpolateColors(startValue, endValue, t, cacheEntry, baseColors);
+    }
+}
+
+function getPreviousMatrixEnd(previous: MVSAnimationNode<'interpolate'> | undefined, prop: 'rotation_start' | 'translation_start' | 'scale_start') {
+    if (!previous || previous.params.kind !== 'transform_matrix') return undefined;
+    return previous.params[prop];
+}
+
 const TransformState = {
    pivotTranslation: Mat4(),
    pivotTranslationInv: Mat4(),
@@ -172,31 +253,41 @@ const TransformState = {
    pivotNeg: Vec3(),
    temp: Mat4(),
 };
-function processTransformMatrix(transition: MVSAnimationNode<'interpolate'>, target: any, time: number, cache: InterpolationCacheEntry) {
+function processTransformMatrix(transition: MVSAnimationNode<'interpolate'>, target: any, time: number, cache: InterpolationCacheEntry, offset: number, previous: MVSAnimationNode<'interpolate'> | undefined) {
    if (transition.params.kind !== 'transform_matrix') return;
+    if (previous && previous.params.kind !== 'transform_matrix') return;

-    const offset = transition.params.property[0] === 'custom' ? 1 : 0;
    const transform = select(target, transition.params.property, offset) ?? Mat4.identity();

-    const startRotation = transition.params.rotation_start ?? Mat3.fromMat4(Mat3(), transform);
-    const startTranslation = transition.params.translation_start ?? Mat4.getTranslation(Vec3(), transform);
-    const startScale = transition.params.scale_start ?? Mat4.getScaling(Vec3(), transform);
+    const startRotation = transition.params.rotation_start ?? getPreviousMatrixEnd(previous, 'rotation_start') ?? Mat3.fromMat4(Mat3(), transform);
+    const startTranslation = transition.params.translation_start ?? getPreviousMatrixEnd(previous, 'translation_start') ?? Mat4.getTranslation(Vec3(), transform);
+    const startScale = transition.params.scale_start ?? getPreviousMatrixEnd(previous, 'scale_start') ?? Mat4.getScaling(Vec3(), transform);

    const endRotation = transition.params.rotation_end;
    const endTranslation = transition.params.translation_end;
    const endScale = transition.params.scale_end;

-    let t = applyFrequency(time, transition.params.rotation_frequency ?? 1, !!transition.params.rotation_alternate_direction);
-    let easing = EasingFnMap[transition.params.rotation_easing ?? 'linear'] ?? EasingFnMap['linear'];
-    const rotation = interpolateRotation(startRotation as Mat3, endRotation as Mat3, easing(t), transition.params.rotation_noise_magnitude ?? 0, cache);
+    let rotation, translation, scale;

-    t = applyFrequency(time, transition.params.translation_frequency ?? 1, !!transition.params.translation_alternate_direction);
-    easing = EasingFnMap[transition.params.translation_easing ?? 'linear'] ?? EasingFnMap['linear'];
-    const translation = interpolateVec3(startTranslation as Vec3, endTranslation as Vec3 | undefined, easing(t), transition.params.translation_noise_magnitude ?? 0, false);
+    if (time <= 0) {
+        rotation = startRotation as Mat3;
+        translation = startTranslation as Vec3;
+        scale = startScale as Vec3;
+    } else {
+        const clampedTime = clamp(time, 0, 1);

-    t = applyFrequency(time, transition.params.scale_frequency ?? 1, !!transition.params.scale_alternate_direction);
-    easing = EasingFnMap[transition.params.scale_easing ?? 'linear'] ?? EasingFnMap['linear'];
-    const scale = interpolateVec3(startScale as Vec3, endScale as Vec3 | undefined, easing(t), transition.params.scale_noise_magnitude ?? 0, false);
+        let t = applyFrequency(clampedTime, transition.params.rotation_frequency ?? 1, !!transition.params.rotation_alternate_direction);
+        let easing = EasingFnMap[transition.params.rotation_easing ?? 'linear'] ?? EasingFnMap['linear'];
+        rotation = interpolateRotation(startRotation as Mat3, endRotation as Mat3, easing(t), transition.params.rotation_noise_magnitude ?? 0, cache);
+
+        t = applyFrequency(clampedTime, transition.params.translation_frequency ?? 1, !!transition.params.translation_alternate_direction);
+        easing = EasingFnMap[transition.params.translation_easing ?? 'linear'] ?? EasingFnMap['linear'];
+        translation = interpolateVec3(startTranslation as Vec3, endTranslation as Vec3 | undefined, easing(t), transition.params.translation_noise_magnitude ?? 0, false);
+
+        t = applyFrequency(clampedTime, transition.params.scale_frequency ?? 1, !!transition.params.scale_alternate_direction);
+        easing = EasingFnMap[transition.params.scale_easing ?? 'linear'] ?? EasingFnMap['linear'];
+        scale = interpolateVec3(startScale as Vec3, endScale as Vec3 | undefined, easing(t), transition.params.scale_noise_magnitude ?? 0, false);
+    }

    const pivot = transition.params.pivot ?? Vec3.zero();

@@ -213,7 +304,7 @@ function processTransformMatrix(transition: MVSAnimationNode<'interpolate'>, tar
    Mat4.mul(result, TransformState.rotation, result);
    Mat4.mul(result, TransformState.translation, result);

-    assign(target, transition.params.property, result, offset);
+    return result;
 }

 function interpolateScalars(start: number | number[], end: number | number[] | undefined, t: number, noise: number, discrete: boolean) {
@@ -351,6 +442,76 @@ function interpolateRotation(start: Mat3, end: Mat3 | undefined, t: number, nois
    return Mat3.fromMat4(Mat3(), RotationState.temp);
 }

+function decodeColors(color: ColorT | Record<number | string, ColorT> | undefined, baseColors: Record<number | string, ColorT> | undefined) {
+    if (color === undefined || color === null) return undefined;
+
+    if (typeof color === 'object') {
+        const ret: Record<number | string, Color> = {};
+        if (baseColors) {
+            for (const key of Object.keys(baseColors)) {
+                const decoded = decodeColor(baseColors[key]);
+                if (decoded !== undefined) {
+                    ret[key] = decoded;
+                }
+            }
+        }
+        for (const key of Object.keys(color)) {
+            const decoded = decodeColor(color[key]);
+            if (decoded !== undefined) {
+                ret[key] = decoded;
+            }
+        }
+        return ret;
+    }
+
+    return decodeColor(color);
+}
+
+function interpolateColors(start: ColorT | Record<number, ColorT>, end: ColorT | Record<number, ColorT> | undefined, time: number, cacheEntry: InterpolationCacheEntry, baseColors: Record<number, ColorT> | undefined) {
+    const t = clamp(time, 0, 1);
+
+    if (cacheEntry.paletteFn) {
+        const c = cacheEntry.paletteFn(t);
+        return Color.toHexStyle(c);
+    }
+
+    if (cacheEntry.startColor === undefined) {
+        cacheEntry.startColor = decodeColors(start, baseColors);
+    }
+    if (cacheEntry.endColor === undefined) {
+        cacheEntry.endColor = decodeColors(end, undefined);
+    }
+
+    const { startColor, endColor } = cacheEntry;
+
+    if (typeof startColor === 'object') {
+        if (typeof baseColors !== 'object') {
+            throw new Error('Cannot interpolate from scalar color to color mapping');
+        }
+
+        const ret = { ...baseColors as any, ...startColor as any };
+        if (typeof endColor === 'object') {
+            for (const key of Object.keys(endColor)) {
+                ret[key] = Color.toHexStyle(Color.interpolate(startColor[key], endColor[key], t));
+            }
+        } else if (typeof endColor === 'number') {
+            for (const key of Object.keys(startColor)) {
+                ret[key] = Color.toHexStyle(Color.interpolate(startColor[key], endColor, t));
+            }
+        }
+        return ret;
+    }
+    if (typeof endColor === 'object') {
+        throw new Error('Cannot interpolate from scalar color to color mapping');
+    }
+
+    if (typeof endColor === 'number' && typeof startColor === 'number') {
+        return Color.toHexStyle(Color.interpolate(startColor, endColor, t));
+    }
+
+    return start;
+}
+
 function select(params: any, path: string | (string | number)[], offset: number) {
    if (typeof path === 'string') {
        return params?.[path];
@@ -403,12 +564,10 @@ function makeNodeMap(tree: Tree, map: Map<string, (string | number)[]>, currentP
    return map;
 }

-function makePaletteFunction(props: MVSAnimationNode<'interpolate'>, start: ColorT | undefined | null, end: ColorT | undefined | null): ((value: number) => Color) | undefined {
-    if (props.params.kind !== 'color') return undefined;
+function makePaletteFunction(props: MVSAnimationNode<'interpolate'>): ((value: number) => Color) | undefined {
+    if (props.params.kind !== 'color' || !props.params.palette) return undefined;

-    const params = props.params.palette
-        ? palettePropsFromMVSPalette(props.params.palette)
-        : palettePropsFromMVSPalette({ kind: 'continuous', colors: [start ?? 'black', end ?? start ?? 'black'] });
+    const params = palettePropsFromMVSPalette(props.params.palette);
    if (params.name === 'discrete') return makePaletteFunctionDiscrete(params.params);
    if (params.name === 'continuous') return makePaletteFunctionContinuous(params.params);
    throw new Error(`NotImplementedError: makePaletteFunction for ${(props as any).name}`);
--- a/src/extensions/mvs/load.ts
+++ b/src/extensions/mvs/load.ts
@@ -33,7 +33,7 @@ import { NonCovalentInteractionsExtension } from './load-extensions/non-covalent
 import { LoadingActions, LoadingExtension, loadTreeVirtual, UpdateTarget } from './load-generic';
 import { AnnotationFromSourceKind, AnnotationFromUriKind, collectAnnotationReferences, collectAnnotationTooltips, collectInlineLabels, collectInlineTooltips, colorThemeForNode, componentFromXProps, componentPropsFromSelector, isPhantomComponent, labelFromXProps, makeNearestReprMap, prettyNameFromSelector, representationProps, structureProps, transformAndInstantiateStructure, transformAndInstantiateVolume, volumeColorThemeForNode, volumeRepresentationProps } from './load-helpers';
 import { MVSData, MVSData_States, Snapshot, SnapshotMetadata } from './mvs-data';
-import { MVSAnimationNode } from './tree/animation/animation-tree';
+import { MVSAnimationNode, MVSAnimationSchema } from './tree/animation/animation-tree';
 import { validateTree } from './tree/generic/tree-schema';
 import { convertMvsToMolstar, mvsSanityCheck } from './tree/molstar/conversion';
 import { MolstarNode, MolstarNodeParams, MolstarSubtree, MolstarTree, MolstarTreeSchema } from './tree/molstar/molstar-tree';
@@ -51,6 +51,7 @@ export interface MVSLoadOptions {
    sanityChecks?: boolean,
    /** Base for resolving relative URLs/URIs. May itself be a relative URL (relative to the window URL). */
    sourceUrl?: string,
+
    doNotReportErrors?: boolean
 }

@@ -78,10 +79,13 @@ async function _loadMVS(ctx: RuntimeContext, plugin: PluginContext, data: MVSDat
        for (let i = 0; i < multiData.snapshots.length; i++) {
            const snapshot = multiData.snapshots[i];
            const previousSnapshot = i > 0 ? multiData.snapshots[i - 1] : multiData.snapshots[multiData.snapshots.length - 1];
-            validateTree(MVSTreeSchema, snapshot.root, 'MVS');
+            validateTree(MVSTreeSchema, snapshot.root, 'MVS', plugin);
+            if (snapshot.animation) {
+                validateTree(MVSAnimationSchema, snapshot.animation, 'Animation', plugin);
+            }
            if (options.sanityChecks) mvsSanityCheck(snapshot.root);
            const molstarTree = convertMvsToMolstar(snapshot.root, options.sourceUrl);
-            validateTree(MolstarTreeSchema, molstarTree, 'Converted Molstar');
+            validateTree(MolstarTreeSchema, molstarTree, 'Converted Molstar', plugin);
            const entry = molstarTreeToEntry(
                plugin,
                molstarTree,
@@ -136,7 +140,7 @@ async function assignStateTransition(ctx: RuntimeContext, plugin: PluginContext,

    for (let i = 0; i < transitions.frames.length; i++) {
        const frame = transitions.frames[i];
-        const molstarTree = convertMvsToMolstar(frame, options.sourceUrl);
+        const molstarTree = convertMvsToMolstar(frame[0], options.sourceUrl);
        const entry = molstarTreeToEntry(
            plugin,
            molstarTree,
@@ -148,7 +152,7 @@ async function assignStateTransition(ctx: RuntimeContext, plugin: PluginContext,
        StateTree.reuseTransformParams(entry.snapshot.data!.tree, parentEntry.snapshot.data!.tree);

        animation.frames.push({
-            durationInMs: transitions.frametimeMs,
+            durationInMs: frame[1],
            data: entry.snapshot.data!,
            camera: transitions.tree.params?.include_camera ? entry.snapshot.camera : undefined,
            canvas3d: transitions.tree.params?.include_canvas ? entry.snapshot.canvas3d : undefined,
--- a/src/extensions/mvs/tree/animation/animation-tree.ts
+++ b/src/extensions/mvs/tree/animation/animation-tree.ts
@@ -4,7 +4,7 @@
 * @author David Sehnal <david.sehnal@gmail.com>
 */

-import { bool, float, int, list, OptionalField, RequiredField, str, union, nullable, literal, ValueFor } from '../generic/field-schema';
+import { bool, float, int, list, OptionalField, RequiredField, str, union, nullable, literal, ValueFor, dict } from '../generic/field-schema';
 import { SimpleParamsSchema, UnionParamsSchema } from '../generic/params-schema';
 import { NodeFor, ParamsOfKind, SubtreeOfKind, TreeFor, TreeSchema } from '../generic/tree-schema';
 import { ColorT, ContinuousPalette, DiscretePalette, Matrix, Vector3 } from '../mvs/param-types';
@@ -75,8 +75,8 @@ const ColorInterpolation = {
    ..._Common,
    ..._Frequency,
    ..._Easing,
-    start: OptionalField(nullable(ColorT), null, 'Start value. If unset, parent state value is used.'),
-    end: OptionalField(nullable(ColorT), null, 'End value.'),
+    start: OptionalField(union(nullable(ColorT), dict(union(int, str), ColorT)), null, 'Start value. If unset, parent state value is used.'),
+    end: OptionalField(union(nullable(ColorT), dict(union(int, str), ColorT)), null, 'End value.'),
    palette: OptionalField(nullable(union(DiscretePalette, ContinuousPalette)), null, 'Palette to sample colors from. Overrides start and end values.'),
 };

--- a/src/extensions/mvs/tree/generic/tree-schema.ts
+++ b/src/extensions/mvs/tree/generic/tree-schema.ts
@@ -4,6 +4,7 @@
 * @author Adam Midlik <midlik@gmail.com>
 */

+import { PluginContext } from '../../../../mol-plugin/context';
 import { onelinerJsonString } from '../../../../mol-util/json';
 import { isPlainObject, mapObjectMap } from '../../../../mol-util/object';
 import { Field } from './field-schema';
@@ -145,13 +146,15 @@ export function treeValidationIssues(schema: TreeSchema, tree: Tree, options: {
 /** Validate a tree against the given schema.
 * Do nothing if OK; print validation issues on console and throw an error is the tree does not conform.
 * Include `label` in the printed output. */
-export function validateTree(schema: TreeSchema, tree: Tree, label: string): void {
+export function validateTree(schema: TreeSchema, tree: Tree, label: string, plugin: PluginContext): void {
    const issues = treeValidationIssues(schema, tree, { noExtra: true });
    if (issues) {
        console.warn(`Invalid ${label} tree:\n${treeToString(tree)}`);
        console.error(`${label} tree validation issues:`);
+        plugin.log.error(`${label} tree validation issues:`);
        for (const line of issues) {
            console.error(' ', line);
+            plugin.log.error(line);
        }
        throw new Error('FormatError');
    }
--- a/src/extensions/mvs/tree/mvs/mvs-tree-primitives.ts
+++ b/src/extensions/mvs/tree/mvs/mvs-tree-primitives.ts
@@ -53,7 +53,7 @@ const LinesParams = {
    vertices: RequiredField(FloatList, '3*n_vertices length array of floats with vertex position (x1, y1, z1, ...).'),
    /** 2*n_lines length array of indices into vertices that form lines (l1_1, l1_2, ...). */
    indices: RequiredField(IntList, '2*n_lines length array of indices into vertices that form lines (l1_1, l1_2, ...).'),
-    /** Assign a number to each triangle to group them. If not specified, each line is considered a separate group (line i = group i). */
+    /** Assign a number to each line to group them. If not specified, each line is considered a separate group (line i = group i). */
    line_groups: OptionalField(nullable(IntList), null, 'Assign a number to each triangle to group them. If not specified, each line is considered a separate group (line i = group i).'),
    /** Assign a color to each group. Where not assigned, uses `color`. */
    group_colors: OptionalField(dict(int, ColorT), {}, 'Assign a color to each group. Where not assigned, uses `color`.'),
--- a/src/mol-canvas3d/passes/background.ts
+++ b/src/mol-canvas3d/passes/background.ts
@@ -445,8 +445,9 @@ function areImageTexturePropsEqual(sourceA: ImageProps['source'], sourceB: Image

 function getImageTexture(ctx: WebGLContext, assetManager: AssetManager, source: ImageProps['source'], onload?: (errored?: boolean) => void): { texture: Texture, asset: Asset } {
    const asset = source.name === 'url'
-        ? Asset.getUrlAsset(assetManager, source.params)
+        ? assetManager.tryFindFilename(source.params) ?? Asset.getUrlAsset(assetManager, source.params)
        : source.params!;
+
    if (typeof HTMLImageElement === 'undefined') {
        console.error(`Missing "HTMLImageElement" required for background image`);
        onload?.(true);
--- a/src/mol-gl/renderer.ts
+++ b/src/mol-gl/renderer.ts
@@ -483,13 +483,13 @@ namespace Renderer {
            const alpha = clamp(r.values.alpha.ref.value * r.state.alphaFactor, 0, 1);
            const xrayShaded = r.values.dXrayShaded?.ref.value === 'on' || r.values.dXrayShaded?.ref.value === 'inverted';
            return (
-                (alpha < 1 && alpha !== 0) ||
+                alpha !== 0 && (alpha < 1 ||
                r.values.transparencyAverage.ref.value > 0 ||
                r.values.dGeometryType.ref.value === 'directVolume' ||
                r.values.dPointStyle?.ref.value === 'fuzzy' ||
                r.values.dGeometryType.ref.value === 'text' ||
                r.values.dGeometryType.ref.value === 'image' ||
-                xrayShaded
+                xrayShaded)
            );
        };

--- a/src/mol-gl/shader/outlines.frag.ts
+++ b/src/mol-gl/shader/outlines.frag.ts
@@ -38,11 +38,11 @@ float getDepthOpaque(const in vec2 coords) {
    #endif
 }

-float getDepthTransparent(const in vec2 coords) {
+vec2 getDepthTransparentWithAlpha(const in vec2 coords) {
    #ifdef dTransparentOutline
-        return unpackRGBAToDepthWithAlpha(texture2D(tDepthTransparent, coords)).x;
+        return unpackRGBAToDepthWithAlpha(texture2D(tDepthTransparent, coords));
    #else
-        return 1.0;
+        return vec2(1.0, 1.0);
    #endif
 }

@@ -66,7 +66,7 @@ void main(void) {
    float selfViewZOpaque = isBackground(selfDepthOpaque) ? backgroundViewZ : getViewZ(selfDepthOpaque);
    float pixelSizeOpaque = getPixelSize(coords, selfDepthOpaque) * uOutlineThreshold;

-    float selfDepthTransparent = getDepthTransparent(coords);
+    float selfDepthTransparent = getDepthTransparentWithAlpha(coords).x;
    float selfViewZTransparent = isBackground(selfDepthTransparent) ? backgroundViewZ : getViewZ(selfDepthTransparent);
    float pixelSizeTransparent = getPixelSize(coords, selfDepthTransparent) * uOutlineThreshold;

@@ -79,12 +79,15 @@ void main(void) {
            vec2 sampleCoords = coords + vec2(float(x), float(y)) * invTexSize;

            float sampleDepthOpaque = getDepthOpaque(sampleCoords);
-            float sampleDepthTransparent = getDepthTransparent(sampleCoords);
+            vec2 sampleDepthTransparentWithAlpha = getDepthTransparentWithAlpha(sampleCoords);
+            float sampleDepthTransparent = sampleDepthTransparentWithAlpha.x;
+            float sampleAlphaTransparent = sampleDepthTransparentWithAlpha.y;

            float sampleViewZOpaque = isBackground(sampleDepthOpaque) ? backgroundViewZ : getViewZ(sampleDepthOpaque);
            if (abs(selfViewZOpaque - sampleViewZOpaque) > pixelSizeOpaque && selfDepthOpaque > sampleDepthOpaque && sampleDepthOpaque <= bestDepth) {
                outline = 0.0;
                bestDepth = sampleDepthOpaque;
+                transparentFlag = 0.0;
            }

            if (sampleDepthTransparent < sampleDepthOpaque) {
@@ -92,7 +95,7 @@ void main(void) {
                if (abs(selfViewZTransparent - sampleViewZTransparent) > pixelSizeTransparent && selfDepthTransparent > sampleDepthTransparent && sampleDepthTransparent <= bestDepth) {
                    outline = 0.0;
                    bestDepth = sampleDepthTransparent;
-                    transparentFlag = 1.0;
+                    transparentFlag = sampleAlphaTransparent;
                }
            }
        }
--- a/src/mol-gl/shader/postprocessing.frag.ts
+++ b/src/mol-gl/shader/postprocessing.frag.ts
@@ -168,15 +168,25 @@ void main(void) {
        if (outline == 0.0) {
            float viewDist = abs(getViewZ(closestTexel));
            float fogFactor = smoothstep(uFogNear, uFogFar, viewDist);
-            if (!uTransparentBackground) {
-                    color.rgb = mix(uOutlineColor, uFogColor, fogFactor);
-            } else {
-                color.a = 1.0 - fogFactor;
-                color.rgb = mix(uOutlineColor, vec3(0.0), fogFactor);
-            }
            #ifdef dBlendTransparency
-                if (isTransparentOutline == 1.0 || transparentDepth > closestTexel) {
-                    blendTransparency = false;
+                if (isTransparentOutline > 0.0) {
+                    float outlineAlpha = clamp(isTransparentOutline * 2.0, 0.0, 1.0);        
+                    transparentColor.a = transparentColor.a + outlineAlpha * (1.0 - fogFactor) * (1.0 - transparentColor.a); 
+                    transparentColor.rgb = uOutlineColor;
+                } else {
+                    if (!uTransparentBackground) {
+                        color.rgb = mix(uOutlineColor, uFogColor, fogFactor);
+                    } else {
+                        color.a = 1.0 - fogFactor;
+                        color.rgb = mix(uOutlineColor, vec3(0.0), fogFactor);
+                    }
+                }
+            #else
+                if (!uTransparentBackground) {
+                    color.rgb = mix(uOutlineColor, uFogColor, fogFactor);
+                } else {
+                    color.a = 1.0 - fogFactor;
+                    color.rgb = mix(uOutlineColor, vec3(0.0), fogFactor);
                }
            #endif
        }
--- a/src/mol-plugin-state/animation/built-in/state-snapshots.ts
+++ b/src/mol-plugin-state/animation/built-in/state-snapshots.ts
@@ -13,9 +13,11 @@ async function setPartialSnapshot(plugin: PluginContext, entry: Partial<PluginSt
    if (entry.data) {
        await plugin.runTask(plugin.state.data.setSnapshot(entry.data));
        // update the canvas3d trackball with the snapshot
-        plugin.canvas3d?.setProps({
-            trackball: entry.canvas3d?.props?.trackball
-        });
+        if (entry.canvas3d?.props?.trackball) {
+            plugin.canvas3d?.setProps({
+                trackball: entry.canvas3d?.props?.trackball
+            });
+        }

    }

@@ -175,7 +177,7 @@ export const AnimateStateSnapshotTransition = PluginStateAnimation.create({
        if (t.current >= animState.totalDuration) {
            if (snapshot?.transition && animState.isInitial) {
                const frameIndex = snapshot.transition.frames.length - 1;
-                ctx.plugin.managers.snapshot.setSnapshotAnimationFrame(frameIndex, false);
+                ctx.plugin.managers.snapshot.setSnapshotAnimationFrame(animState.totalDuration, false);
                await setPartialSnapshot(ctx.plugin, snapshot.transition.frames[frameIndex]);
            }
            return { kind: 'finished' };
@@ -193,7 +195,7 @@ export const AnimateStateSnapshotTransition = PluginStateAnimation.create({
            return { kind: 'skip' };
        }

-        ctx.plugin.managers.snapshot.setSnapshotAnimationFrame(frameIndex, false);
+        ctx.plugin.managers.snapshot.setSnapshotAnimationFrame(t.current, false);
        if (frameIndex === 0) {
            await setPartialSnapshot(ctx.plugin, {
                ...transition.frames[frameIndex],
--- a/src/mol-plugin-state/manager/markdown-extensions.ts
+++ b/src/mol-plugin-state/manager/markdown-extensions.ts
@@ -11,6 +11,7 @@ import { PluginContext } from '../../mol-plugin/context';
 import { Script } from '../../mol-script/script';
 import { QueryContext, QueryFn, StructureElement, StructureSelection } from '../../mol-model/structure';
 import { BehaviorSubject } from 'rxjs';
+import { AnimateStateSnapshotTransition } from '../animation/built-in/state-snapshots';

 export type MarkdownExtensionEvent = 'click' | 'mouse-enter' | 'mouse-leave';

@@ -46,6 +47,17 @@ export const BuiltInMarkdownExtension: MarkdownExtension[] = [
            manager.plugin.managers.snapshot.applyKey(key);
        }
    },
+    {
+        name: 'next-snapshot',
+        execute: ({ event, args, manager }) => {
+            if (event !== 'click' || !('next-snapshot' in args)) return;
+            let dir: -1 | 1 = (+args['next-snapshot'] || 1) as -1 | 1;
+            if (!dir) return;
+            if (dir < 0) dir = -1;
+            else dir = 1;
+            manager.plugin.managers.snapshot.applyNext(dir);
+        }
+    },
    {
        name: 'focus-refs',
        execute: ({ event, args, manager }) => {
@@ -185,6 +197,34 @@ export const BuiltInMarkdownExtension: MarkdownExtension[] = [
            manager.audio.stop();
        }
    },
+    {
+        name: 'dispose-audio',
+        execute: ({ event, args, manager }) => {
+            if (event !== 'click' || !('dispose-audio' in args)) return;
+            manager.audio.dispose();
+        }
+    },
+    {
+        name: 'play-transition',
+        execute: ({ event, args, manager }) => {
+            if (event !== 'click' || !('play-transition' in args)) return;
+            manager.plugin.managers.animation.play(AnimateStateSnapshotTransition, {});
+        }
+    },
+    {
+        name: 'play-snapshots',
+        execute: ({ event, args, manager }) => {
+            if (event !== 'click' || !('play-snapshots' in args)) return;
+            manager.plugin.managers.snapshot.play({ restart: true });
+        }
+    },
+    {
+        name: 'stop-animation',
+        execute: ({ event, args, manager }) => {
+            if (event !== 'click' || !('stop-animation' in args)) return;
+            manager.plugin.managers.snapshot.stop();
+        }
+    },
 ];

 export class MarkdownExtensionManager {
--- a/src/mol-plugin-state/manager/snapshots.ts
+++ b/src/mol-plugin-state/manager/snapshots.ts
@@ -25,7 +25,7 @@ export { PluginStateSnapshotManager };

 interface StateManagerState {
    current?: UUID,
-    currentAnimationFrame?: number,
+    currentAnimationTimeMs?: number,
    entries: List<PluginStateSnapshotManager.Entry>,
    isPlaying: boolean,
    nextSnapshotDelayInMs: number
@@ -38,8 +38,8 @@ class PluginStateSnapshotManager extends StatefulPluginComponent<StateManagerSta
    private defaultSnapshotId: UUID | undefined = undefined;

    protected updateState(state: Partial<StateManagerState>) {
-        if ('current' in state && !('curentAnimationFrame' in state)) {
-            return super.updateState({ ...state, currentAnimationFrame: 0 });
+        if ('current' in state && !('currentAnimationTimeMs' in state)) {
+            return super.updateState({ ...state, currentAnimationTimeMs: 0 });
        } else {
            return super.updateState(state);
        }
@@ -168,18 +168,23 @@ class PluginStateSnapshotManager extends StatefulPluginComponent<StateManagerSta
    }

    private animationFrameQueue = new SingleTaskQueue();
-    setSnapshotAnimationFrame(frame: number, load = false) {
-        if (this.updateState({ currentAnimationFrame: frame })) {
+    setSnapshotAnimationFrame(currentAnimationTimeMs: number, load = false) {
+        const entry = this.getEntry(this.state.current);
+        if (!entry) return;
+
+        const frameIndex = PluginState.getStateTransitionFrameIndex(entry.snapshot, currentAnimationTimeMs) ?? 0;
+
+        if (this.updateState({ currentAnimationTimeMs })) {
            this.events.changed.next(void 0);
        }

        if (load) {
            this.animationFrameQueue.run(() => {
-                const entry = this.getEntry(this.state.current);
-                if (!entry) return Promise.resolve();
-                return this.plugin.state.setAnimationSnapshot(entry.snapshot, frame);
+                return this.plugin.state.setAnimationSnapshot(entry.snapshot, frameIndex ?? 0);
            });
        }
+
+        return frameIndex;
    }

    getNextId(id: string | undefined, dir: -1 | 1) {
@@ -233,7 +238,7 @@ class PluginStateSnapshotManager extends StatefulPluginComponent<StateManagerSta
        const next = entry && entry.snapshot;
        if (!next) return;
        await this.plugin.state.setSnapshot(next);
-        if (snapshot.playback && snapshot.playback.isPlaying) this.play(true);
+        if (snapshot.playback?.isPlaying) this.play({ delayFirst: true });
        return next;
    }

@@ -380,10 +385,18 @@ class PluginStateSnapshotManager extends StatefulPluginComponent<StateManagerSta
        }
    }

-    play(delayFirst: boolean = false) {
+    async play(options?: { delayFirst?: boolean, restart?: boolean }) {
+        if (this.state.isPlaying && !options?.delayFirst) {
+            if (options?.restart) {
+                await this.stop();
+            } else {
+                return;
+            }
+        }
+
        this.updateState({ isPlaying: true });

-        if (delayFirst) {
+        if (options?.delayFirst) {
            const e = this.getEntry(this.state.current);
            if (!e) {
                this.next();
@@ -398,21 +411,20 @@ class PluginStateSnapshotManager extends StatefulPluginComponent<StateManagerSta
        }
    }

-    stop() {
-        this.plugin.managers.animation.stop();
+    async stop() {
+        await this.plugin.managers.animation.stop();
        this.updateState({ isPlaying: false });
        if (typeof this.timeoutHandle !== 'undefined') clearTimeout(this.timeoutHandle);
        this.timeoutHandle = void 0;
        this.events.changed.next(void 0);
    }

-    togglePlay() {
+    async togglePlay() {
        if (this.state.isPlaying) {
-            this.stop();
-            this.plugin.managers.animation.stop();
+            await this.stop();
            this.plugin.managers.markdownExtensions.audio.pause();
        } else {
-            this.play();
+            await this.play();
        }
    }

--- a/src/mol-plugin-ui/controls.tsx
+++ b/src/mol-plugin-ui/controls.tsx
@@ -29,6 +29,7 @@ import { StructureQuickStylesControls } from './structure/quick-styles';
 import { Markdown } from './controls/markdown';
 import { Slider } from './controls/slider';
 import { AnimateStateSnapshotTransition } from '../mol-plugin-state/animation/built-in/state-snapshots';
+import { PluginState } from '../mol-plugin/state';

 export class TrajectoryViewportControls extends PluginUIComponent<{}, { show: boolean, label: string }> {
    state = { show: false, label: '' };
@@ -191,14 +192,12 @@ export class StateSnapshotViewportControls extends PluginUIComponent<{}, { isBus
            {hasAnimation && this.state.showAnimation && !isPlaying && <>
                <div className='msp-state-snapshot-animation-slider msp-form-control'>
                    <Slider
-                        value={snapshots.state.currentAnimationFrame ?? 0}
-                        min={1}
-                        step={1}
-                        max={(entry?.snapshot.transition?.frames.length ?? 1)}
+                        value={Math.round(100 * (snapshots.state.currentAnimationTimeMs ?? 0)) /100}
+                        min={0}
+                        step={PluginState.getMinFrameDuration(entry?.snapshot)}
+                        max={PluginState.getStateTransitionDuration(entry?.snapshot) ?? 1000}
                        onChange={() => { }}
-                        onChangeImmediate={v => {
-                            snapshots.setSnapshotAnimationFrame(v - 1, true);
-                        }}
+                        onChangeImmediate={v => snapshots.setSnapshotAnimationFrame(v, true)}
                        hideInput
                        disabled={this.state.isBusy}
                    />
--- a/src/mol-plugin/state.ts
+++ b/src/mol-plugin/state.ts
@@ -27,6 +27,7 @@ import { PluginConfig } from './config';
 import { PluginContext } from './context';
 import { AnimateStateSnapshotTransition } from '../mol-plugin-state/animation/built-in/state-snapshots';
 import { Scheduler } from '../mol-task';
+import { memoizeLatest } from '../mol-util/memoize';

 export { PluginState };

@@ -264,7 +265,23 @@ namespace PluginState {
        }[],
    }

-    export function getStateTransitionDuration(snapshot: Snapshot): number | undefined {
+    export const getMinFrameDuration = memoizeLatest((snapshot: Snapshot | undefined): number => {
+        if (!snapshot) return 1000 / 60;
+        const { transition } = snapshot;
+        if (!transition) return 1000 / 60;
+
+        let minDuration = Infinity;
+        for (const frame of transition.frames) {
+            if (frame.durationInMs > 0 && frame.durationInMs < minDuration) {
+                minDuration = frame.durationInMs;
+            }
+        }
+        if (!Number.isFinite(minDuration)) return 1000 / 60;
+        return minDuration;
+    });
+
+    export const getStateTransitionDuration = memoizeLatest((snapshot: Snapshot | undefined): number | undefined => {
+        if (!snapshot) return undefined;
        const { transition } = snapshot;
        if (!transition) return undefined;
        let totalDuration = 0;
@@ -273,7 +290,20 @@ namespace PluginState {
            totalDuration += frame.durationInMs;
        }
        return totalDuration;
-    }
+    });
+
+    export const getStateTransitionFrameTime = memoizeLatest((snapshot: Snapshot | undefined, frameIndex: number | undefined): number => {
+        if (!snapshot || frameIndex === undefined) return 0;
+        const { transition } = snapshot;
+        if (!transition) return 0;
+        let currentDuration = 0;
+        for (let i = 0; i < frameIndex; i++) {
+            if (transition.frames.length <= i) break;
+            const frame = transition.frames[i];
+            currentDuration += frame.durationInMs;
+        }
+        return currentDuration;
+    });

    export function getStateTransitionFrameIndex(snapshot: Snapshot, timestamp: number): number | undefined {
        const { transition } = snapshot;
--- a/src/mol-util/assets.ts
+++ b/src/mol-util/assets.ts
@@ -83,6 +83,15 @@ class AssetManager {
        }
    }

+    tryFindFilename(name: string): Asset | undefined {
+        const it = this._assets.values();
+        while (true) {
+            const { done, value } = it.next();
+            if (done) break;
+            if (value.file.name === name) return value.asset;
+        }
+    }
+
    set(asset: Asset, file: File, options?: { isStatic?: boolean, tag?: string }) {
        this._assets.set(asset.id, { asset, file, refCount: 0, tag: options?.tag, isStatic: options?.isStatic });
    }
--- a/src/mol-util/error-context.ts
+++ b/src/mol-util/error-context.ts
@@ -5,13 +5,13 @@
 */

 export class ErrorContext {
-    private errors: { [tag: string]: any[] } = Object.create(null);
+    private errors: { [tag: string]: string[] } = Object.create(null);

-    get(tag: string): ReadonlyArray<any> {
+    get(tag: string): ReadonlyArray<string> {
        return this.errors[tag] ?? [];
    }

-    add(tag: string, error: any) {
+    add(tag: string, error: string) {
        if (tag in this.errors && Array.isArray(this.errors[tag])) {
            this.errors[tag].push(error);
        } else {
Author	SHA1	Message	Date
dsehnal	966bc14c67	5.0.0-dev.11	2025-08-31 09:51:54 +02:00
David Sehnal	f752b7e155	MVS: Color map interpolation & canvas backgrounds (#1636 ) * MVS: Color map interpolation * print validation errors to plugin log * fixes * background postprocessing * fix resetCanvasProps * fix link * add example	2025-08-31 09:36:50 +02:00
Gianluca Tomasello	255b8b9ac3	Fix renderer transparency check (#1635 ) * Fix renderer transparency check * Fading transparent outlines * improvements	2025-08-29 17:59:26 +02:00
Victoria Doshchenko	42d969bbeb	MVS: example story improvements (#1632 ) * add intro scene * fixes * add author name	2025-08-26 18:55:34 +02:00
dsehnal	fdc33e44dc	5.0.0-dev.10	2025-08-26 17:43:06 +02:00
David Sehnal	b0aa889a0a	MVS: Animation improvements (#1631 ) * allow interpolation "keyframing" * animation fixes	2025-08-26 17:41:21 +02:00
David Sehnal	4d7bd53231	Additional markdown commands (#1630 )	2025-08-26 06:58:40 +02:00
David Sehnal	c11cf665c9	Additional markdown extensions (#1629 ) * additional markdown extensions * fixes	2025-08-25 20:12:10 +02:00