matterviz 0.3.6 → 0.3.7

package/dist/convex-hull/types.d.ts

@@ -0,0 +1,162 @@
+import type { CompositionType } from '../composition';
+import type { ShowControlsProp } from '../controls';
+import type { ElementSymbol } from '../element';
+import type { Point2D, Point3D, Vec3 } from '../math';
+import type { Rect, Sides } from '../plot/layout';
+import type { AnyStructure } from '../structure';
+export interface StructurePopupStats {
+    id?: string;
+    formula?: string;
+    e_above_hull?: number;
+    e_form?: number;
+}
+export interface StructurePopupContext {
+    structure: AnyStructure;
+    stats?: StructurePopupStats;
+    formula_html: string;
+}
+export interface PhaseData {
+    composition: CompositionType;
+    energy: number;
+    entry_id?: string;
+    e_above_hull?: number;
+    is_stable?: boolean;
+    exclude_from_hull?: boolean;
+    energy_per_atom?: number;
+    e_form_per_atom?: number;
+    reduced_formula?: string;
+    name?: string;
+    temperatures?: number[];
+    free_energies?: number[];
+    '@module'?: string;
+    '@class'?: string;
+    correction?: number;
+    energy_adjustments?: Record<string, number>[];
+    parameters?: Record<string, unknown>;
+    data?: Record<string, unknown>;
+    structure?: Record<string, unknown>;
+    attributes?: Record<string, unknown>;
+}
+export interface ProcessedPhaseData {
+    entries: PhaseData[];
+    stable_entries: PhaseData[];
+    unstable_entries: PhaseData[];
+    elements: ElementSymbol[];
+    el_refs: Record<string, PhaseData>;
+}
+export type MarkerSymbol = // Marker symbol types for convex hull entries
+`circle` | `star` | `triangle` | `cross` | `diamond` | `square` | `wye`;
+export type HullFaceColorMode = `uniform` | `formation_energy` | `dominant_element` | `facet_index`;
+export declare const HULL_FACE_COLOR_MODES: readonly HullFaceColorMode[];
+export interface ConvexHullEntry extends PhaseData, Point3D {
+    is_element: boolean;
+    size?: number;
+    marker?: MarkerSymbol;
+}
+export interface ConvexHullConfig {
+    width?: number;
+    height?: number;
+    margin?: Sides;
+    unstable_threshold?: number;
+    show_labels?: boolean;
+    show_hull?: boolean;
+    point_size?: number;
+    line_width?: number;
+    font_size?: number;
+    colors?: {
+        stable?: string;
+        unstable?: string;
+        hull_line?: string;
+        background?: string;
+        text?: string;
+        edge?: string;
+        tooltip_bg?: string;
+        tooltip_text?: string;
+        annotation?: string;
+    };
+}
+export interface ConvexHullControlsType {
+    title?: string;
+    show?: ShowControlsProp;
+    position?: `top-left` | `top-right` | `bottom-left` | `bottom-right`;
+    width?: number;
+    show_counts?: boolean;
+    show_color_toggle?: boolean;
+    show_label_controls?: boolean;
+}
+export interface Plane {
+    normal: Point3D;
+    offset: number;
+}
+export interface ConvexHullFace {
+    vertices: Vec3;
+    plane: Plane;
+    centroid: Point3D;
+    outside_points: Set<number>;
+}
+export interface ConvexHullTriangle {
+    vertices: [Point3D, Point3D, Point3D];
+    normal: Point3D;
+    centroid: Point3D;
+}
+export interface LabelPlacement {
+    x: number;
+    y: number;
+    rect: Rect;
+}
+export interface HoverData3D<T = ConvexHullEntry> {
+    entry: T;
+    position: Point2D;
+}
+export interface PhaseStats {
+    total: number;
+    unary: number;
+    binary: number;
+    ternary: number;
+    quaternary: number;
+    quinary_plus: number;
+    stable: number;
+    unstable: number;
+    energy_range: {
+        min: number;
+        max: number;
+        avg: number;
+    };
+    hull_distance: {
+        max: number;
+        avg: number;
+    };
+    elements: number;
+    chemical_system: string;
+    max_arity: number;
+}
+export type PhaseArityField = Extract<keyof PhaseStats, `unary` | `binary` | `ternary` | `quaternary` | `quinary_plus`>;
+export interface HighlightStyle {
+    effect?: `pulse` | `glow` | `size` | `color` | `both`;
+    color?: string;
+    size_multiplier?: number;
+    opacity?: number;
+    pulse_speed?: number;
+}
+export declare const DEFAULT_GAS_TEMP = 300;
+export type GasSpecies = `O2` | `N2` | `H2` | `CO` | `CO2` | `H2O` | `F2`;
+export declare const GAS_SPECIES: readonly GasSpecies[];
+export declare const DEFAULT_GAS_PRESSURES: Readonly<Record<GasSpecies, number>>;
+export interface GasThermodynamicsProvider {
+    get_standard_chemical_potential(gas: GasSpecies, T: number): number;
+    get_supported_gases(): GasSpecies[];
+    get_temperature_range(): [number, number];
+}
+export interface GasThermodynamicsConfig {
+    enabled_gases?: GasSpecies[];
+    pressures?: Partial<Record<GasSpecies, number>>;
+    provider?: GasThermodynamicsProvider;
+    element_to_gas?: Partial<Record<ElementSymbol, GasSpecies>>;
+}
+export interface GasAnalysis {
+    has_gas_dependent_elements: boolean;
+    gas_elements: ElementSymbol[];
+    relevant_gases: GasSpecies[];
+}
+export declare const GAS_CONTROL_POSITIONS: readonly ["top-left", "top-right", "bottom-left", "bottom-right"];
+export type GasControlPosition = (typeof GAS_CONTROL_POSITIONS)[number];

package/dist/convex-hull/types.js

@@ -0,0 +1,36 @@
+export const HULL_FACE_COLOR_MODES = [
+    `uniform`,
+    `formation_energy`,
+    `dominant_element`,
+    `facet_index`,
+];
+// --- Gas Phase Thermodynamics ---
+// Default temperature (Kelvin) for gas corrections when no temperature is specified
+export const DEFAULT_GAS_TEMP = 300;
+// All supported gas species as an array (for iteration)
+export const GAS_SPECIES = [
+    `O2`,
+    `N2`,
+    `H2`,
+    `CO`,
+    `CO2`,
+    `H2O`,
+    `F2`,
+];
+// Default atmospheric partial pressures (in bar)
+export const DEFAULT_GAS_PRESSURES = {
+    O2: 0.2095, // ~21% in atmosphere
+    N2: 0.7809, // ~78% in atmosphere
+    H2: 0.1, // typical experimental
+    CO: 1e-6, // trace
+    CO2: 3.95e-4, // ~400 ppm in atmosphere
+    H2O: 0.03, // ~3% humidity
+    F2: 0.1, // typical experimental
+};
+// Position options for UI control panels (e.g., GasPressureControls)
+export const GAS_CONTROL_POSITIONS = [
+    `top-left`,
+    `top-right`,
+    `bottom-left`,
+    `bottom-right`,
+];

package/dist/coordination/CoordinationBarPlot.svelte

@@ -0,0 +1,311 @@
+<script lang="ts">
+  import { PLOT_COLORS } from '../colors'
+  import { StatusMessage } from '../feedback'
+  import { create_file_drop_handler } from '../io'
+  import { format_value } from '../labels'
+  import { BarPlot } from '../plot'
+  import type {
+    AxisConfig,
+    BarHandlerProps,
+    BarSeries,
+    Orientation,
+  } from '../plot/types'
+  import type { AnyStructure } from '../structure'
+  import type { BondingStrategy } from '../structure/bonding'
+  import { parse_any_structure } from '../structure/parse'
+  import { is_crystal } from '../structure/validation'
+  import type { ComponentProps } from 'svelte'
+  import { SvelteMap, SvelteSet } from 'svelte/reactivity'
+  import { calc_coordination_nums, type CoordinationData } from './calc-coordination'
+  import type { SplitMode } from './index'
+
+  type CoordinationMetadata = {
+    element?: string
+    structure_label?: string
+  } & Record<string, unknown>
+
+  interface StructureEntry {
+    label: string
+    structure: AnyStructure
+    color?: string
+    data?: CoordinationData
+  }
+  let {
+    structures,
+    strategy = `electroneg_ratio`,
+    split_mode = `by_element`,
+    mode = $bindable(`grouped`),
+    orientation = `vertical` as Orientation,
+    x_axis = {},
+    y_axis = {},
+    allow_file_drop = true,
+    on_file_drop,
+    loading = $bindable(false),
+    error_msg = $bindable(),
+    ...rest
+  }: Omit<ComponentProps<typeof BarPlot>, `series`> & {
+    structures:
+      | AnyStructure
+      | Record<string, AnyStructure | { structure: AnyStructure; color?: string }>
+      | StructureEntry[]
+    strategy?: BondingStrategy
+    split_mode?: SplitMode
+    x_axis?: AxisConfig
+    y_axis?: AxisConfig
+    allow_file_drop?: boolean
+    on_file_drop?: (content: string | ArrayBuffer, filename: string) => void
+    loading?: boolean
+    error_msg?: string
+  } = $props()
+
+  let dragover = $state(false)
+  let dropped_entries = $state<StructureEntry[]>([])
+  let is_horizontal = $derived(orientation === `horizontal`)
+
+  // Normalize input to consistent array of { label, structure, color }
+  const structure_entries = $derived.by<StructureEntry[]>(() => {
+    if (!structures) return []
+
+    const base_entries = Array.isArray(structures)
+      ? (structures as StructureEntry[])
+      : (is_crystal(structures)
+        ? [{ label: `Structure`, structure: structures as AnyStructure }]
+        : Object.entries(
+          structures as Record<
+            string,
+            AnyStructure | { structure: AnyStructure; color?: string }
+          >,
+        ).map(([label, value]) =>
+          `structure` in value
+            ? { label, ...value }
+            : { label, structure: value as AnyStructure }
+        ))
+
+    // Merge user-provided structures with dropped structures
+    return [...base_entries, ...dropped_entries]
+  })
+
+  // Compute coordination data for each structure
+  const entries_with_data = $derived(structure_entries.map((entry) => ({
+    ...entry,
+    data: calc_coordination_nums(entry.structure, strategy),
+  })))
+
+  // Compute appropriate ranges
+  const ranges = $derived.by(() => {
+    // CN axis should always start at 0 and show at least [0,4]
+    let max_cn = 4 // minimum max value
+    for (const entry of entries_with_data) {
+      for (const [cn] of entry.data.cn_histogram) max_cn = Math.max(max_cn, cn)
+    }
+    const cn_range: [number, number] = [-0.5, max_cn + 0.5]
+
+    return { count: [0, null] as [number, null], cn: cn_range } // Count axis should always start at 0
+  })
+
+  // Derive integer CN ticks for axis labels
+  const cn_ticks = $derived.by(() => {
+    const all_cns = new SvelteSet<number>()
+    // Always include minimum CN values 0-4
+    for (let idx = 0; idx <= 4; idx++) all_cns.add(idx)
+    // Add actual CN values from data
+    for (const entry of entries_with_data) {
+      for (const [cn] of entry.data.cn_histogram) all_cns.add(cn)
+    }
+    return Array.from(all_cns).sort((cn1, cn2) => cn1 - cn2)
+  })
+
+  // Build BarPlot series based on split_mode
+  const bar_series = $derived.by<BarSeries<CoordinationMetadata>[]>(() => {
+    if (split_mode === `by_element`) {
+      // One series per element across all structures
+      const element_series_map = new SvelteMap<string, Map<number, number>>()
+
+      // Collect all unique CNs across all elements
+      const all_cns = new SvelteSet<number>()
+
+      for (const entry of entries_with_data) {
+        for (const [element, cn_histogram] of entry.data.cn_histogram_by_element) {
+          if (!element_series_map.has(element)) {
+            element_series_map.set(element, new SvelteMap())
+          }
+          const element_map = element_series_map.get(element)
+          if (!element_map) continue
+
+          for (const [cn, count] of cn_histogram) {
+            all_cns.add(cn)
+            element_map.set(cn, (element_map.get(cn) ?? 0) + count)
+          }
+        }
+      }
+
+      // Sort CNs for consistent x-axis
+      const sorted_cns = Array.from(all_cns).sort((a, b) => a - b)
+
+      // Convert map to array and ensure all series have same x-values
+      return Array.from(element_series_map.entries())
+        .sort((a, b) => a[0].localeCompare(b[0]))
+        .map(([element, cn_map], idx) => {
+          return {
+            x: sorted_cns,
+            y: sorted_cns.map((cn) => cn_map.get(cn) ?? 0),
+            label: element,
+            color: PLOT_COLORS[idx % PLOT_COLORS.length],
+            bar_width: 0.8,
+            visible: true,
+            metadata: { element },
+          }
+        })
+    } else if (split_mode === `by_structure`) {
+      // One series per structure
+      // First collect all unique CNs
+      const all_cns = new SvelteSet<number>()
+      for (const entry of entries_with_data) {
+        for (const [cn] of entry.data.cn_histogram) {
+          all_cns.add(cn)
+        }
+      }
+      const sorted_cns = Array.from(all_cns).sort((a, b) => a - b)
+
+      return entries_with_data.map((entry, idx) => {
+        return {
+          x: sorted_cns,
+          y: sorted_cns.map((cn) => entry.data.cn_histogram.get(cn) ?? 0),
+          label: entry.label,
+          color: entry.color ?? PLOT_COLORS[idx % PLOT_COLORS.length],
+          bar_width: 0.8,
+          visible: true,
+          metadata: { structure_label: entry.label },
+        }
+      })
+    } else {
+      // split_mode === 'none': combine all into single series
+      const combined_histogram = new SvelteMap<number, number>()
+
+      for (const entry of entries_with_data) {
+        for (const [cn, count] of entry.data.cn_histogram) {
+          combined_histogram.set(cn, (combined_histogram.get(cn) ?? 0) + count)
+        }
+      }
+
+      const x_vals = Array.from(combined_histogram.keys()).sort((a, b) => a - b)
+      const y_vals = x_vals.map((cn) => combined_histogram.get(cn) ?? 0)
+
+      return [
+        {
+          x: x_vals,
+          y: y_vals,
+          label: `All Sites`,
+          color: PLOT_COLORS[0],
+          bar_width: 0.8,
+          visible: true,
+          metadata: {},
+        },
+      ]
+    }
+  })
+
+  const compute_and_add = (content: string | ArrayBuffer, filename: string) => {
+    try {
+      const text_content = content instanceof ArrayBuffer
+        ? new TextDecoder().decode(content)
+        : content
+      const parsed_structure = parse_any_structure(text_content, filename)
+      if (is_crystal(parsed_structure)) {
+        dropped_entries = [{
+          label: filename || `Dropped structure`,
+          structure: parsed_structure,
+        }, ...dropped_entries]
+      } else {
+        error_msg = `Structure has no lattice or sites; cannot compute coordination`
+      }
+    } catch (exc) {
+      error_msg = `Failed to process structure: ${
+        exc instanceof Error ? exc.message : String(exc)
+      }`
+    }
+  }
+
+  const handle_file_drop = create_file_drop_handler({
+    allow: () => allow_file_drop,
+    on_drop: (content, filename) =>
+      (on_file_drop || compute_and_add)(content, filename),
+    on_error: (msg) => {
+      error_msg = msg
+    },
+    set_loading: (val) => {
+      loading = val
+      if (val) [error_msg, dragover] = [undefined, false]
+    },
+  })
+
+  let display = $state({ x_zero_line: false, y_zero_line: false })
+  // Update display when orientation changes
+  $effect(() => {
+    display.x_zero_line = is_horizontal
+    display.y_zero_line = !is_horizontal
+  })
+
+  const cn_axis = { label: `Coordination Number`, format: `d` }
+  const count_axis = { label: `Count`, format: `d` }
+</script>
+
+<StatusMessage bind:message={error_msg} type="error" dismissible />
+
+{#if bar_series.length === 0}
+  <StatusMessage
+    message={allow_file_drop
+    ? `Drag and drop structure files here to compute coordination numbers`
+    : `No coordination data to display`}
+  />
+{:else}
+  {#snippet tooltip(info: BarHandlerProps<CoordinationMetadata>)}
+    {@const cn = info.x}
+    {@const count = info.y}
+    {@const element = info.metadata?.element}
+    {@const structure_label = info.metadata?.structure_label}
+    {#if element}
+      {element} —
+    {/if}
+    {#if structure_label}
+      {structure_label} —
+    {/if}
+    CN: {format_value(cn, `.0f`)}
+    <br />
+    Sites: {format_value(count, `.0f`)}
+  {/snippet}
+
+  <BarPlot
+    {...rest}
+    series={bar_series}
+    bind:orientation
+    bind:mode
+    x_axis={{
+      ...(is_horizontal ? count_axis : cn_axis),
+      range: is_horizontal ? ranges.count : ranges.cn,
+      ticks: is_horizontal ? undefined : cn_ticks,
+      ...x_axis,
+      label_shift: { y: 20, ...(is_horizontal ? y_axis : x_axis).label_shift },
+    }}
+    y_axis={{
+      ...(is_horizontal ? cn_axis : count_axis),
+      range: is_horizontal ? ranges.cn : ranges.count,
+      ticks: is_horizontal ? cn_ticks : undefined,
+      ...y_axis,
+      label_shift: { x: 2, ...(is_horizontal ? x_axis : y_axis).label_shift },
+    }}
+    bind:display
+    {tooltip}
+    ondrop={handle_file_drop}
+    ondragover={(event) => {
+      event.preventDefault()
+      if (!allow_file_drop) return
+      dragover = true
+    }}
+    ondragleave={(event) => {
+      event.preventDefault()
+      dragover = false
+    }}
+    class={(rest.class ?? ``) + (dragover ? ` dragover` : ``)}
+  />
+{/if}

package/dist/coordination/CoordinationBarPlot.svelte.d.ts

@@ -0,0 +1,30 @@
+import { BarPlot } from '../plot';
+import type { AxisConfig } from '../plot/types';
+import type { AnyStructure } from '../structure';
+import type { BondingStrategy } from '../structure/bonding';
+import type { ComponentProps } from 'svelte';
+import { type CoordinationData } from './calc-coordination';
+import type { SplitMode } from './index';
+interface StructureEntry {
+    label: string;
+    structure: AnyStructure;
+    color?: string;
+    data?: CoordinationData;
+}
+type $$ComponentProps = Omit<ComponentProps<typeof BarPlot>, `series`> & {
+    structures: AnyStructure | Record<string, AnyStructure | {
+        structure: AnyStructure;
+        color?: string;
+    }> | StructureEntry[];
+    strategy?: BondingStrategy;
+    split_mode?: SplitMode;
+    x_axis?: AxisConfig;
+    y_axis?: AxisConfig;
+    allow_file_drop?: boolean;
+    on_file_drop?: (content: string | ArrayBuffer, filename: string) => void;
+    loading?: boolean;
+    error_msg?: string;
+};
+declare const CoordinationBarPlot: import("svelte").Component<$$ComponentProps, {}, "mode" | "loading" | "error_msg">;
+type CoordinationBarPlot = ReturnType<typeof CoordinationBarPlot>;
+export default CoordinationBarPlot;

package/dist/coordination/calc-coordination.d.ts

@@ -0,0 +1,15 @@
+import type { AnyStructure } from '../structure';
+import type { BondingStrategy } from '../structure/bonding';
+export interface CoordinationSite {
+    site_idx: number;
+    element: string;
+    coordination_num: number;
+    neighbor_elements: string[];
+}
+export interface CoordinationData {
+    sites: CoordinationSite[];
+    cn_by_element: Map<string, number[]>;
+    cn_histogram: Map<number, number>;
+    cn_histogram_by_element: Map<string, Map<number, number>>;
+}
+export declare function calc_coordination_nums(structure: AnyStructure, strategy?: BondingStrategy): CoordinationData;

package/dist/coordination/calc-coordination.js

@@ -0,0 +1,63 @@
+import { BONDING_STRATEGIES } from '../structure/bonding';
+// Calculate coordination numbers for all sites in a structure using the specified bonding strategy.
+//
+// Note: This function operates on the sites present in the structure. For structures with periodic
+// boundary conditions (PBC), image atoms should be added to the structure BEFORE calling this function
+// to ensure atoms at cell boundaries have their full coordination environment calculated correctly.
+// Use get_pbc_image_sites() from '$lib/structure/pbc' to expand the structure with image atoms.
+//
+// When working with PBC-expanded structures:
+// - Image atoms are appended after the original sites
+// - Bonds will be calculated between original and image atoms
+// - Caller should extract coordination numbers for only the first N sites (original atoms)
+export function calc_coordination_nums(structure, strategy = `electroneg_ratio`) {
+    // Get bonds using the specified strategy
+    const bonds = BONDING_STRATEGIES[strategy](structure);
+    // Count neighbors for each site
+    const neighbor_counts = new Map();
+    const sites = structure.sites;
+    for (const bond of bonds) {
+        const { site_idx_1, site_idx_2 } = bond;
+        if (!neighbor_counts.has(site_idx_1)) {
+            neighbor_counts.set(site_idx_1, new Set());
+        }
+        if (!neighbor_counts.has(site_idx_2)) {
+            neighbor_counts.set(site_idx_2, new Set());
+        }
+        const neighbors_1 = neighbor_counts.get(site_idx_1);
+        const neighbors_2 = neighbor_counts.get(site_idx_2);
+        if (neighbors_1)
+            neighbors_1.add(site_idx_2);
+        if (neighbors_2)
+            neighbors_2.add(site_idx_1);
+    }
+    // Build coordination site data
+    const coordination_sites = [];
+    const cn_by_element = new Map();
+    const cn_histogram = new Map();
+    const cn_histogram_by_element = new Map();
+    for (const [site_idx, site] of sites.entries()) {
+        const element = site.species[0]?.element ?? `Unknown`;
+        const neighbors_set = neighbor_counts.get(site_idx) ?? new Set();
+        const coordination_num = neighbors_set.size;
+        // Get neighbor elements
+        const neighbor_elements = Array.from(neighbors_set).map((neighbor_idx) => sites[neighbor_idx].species[0]?.element ?? `Unknown`);
+        coordination_sites.push({ site_idx, element, coordination_num, neighbor_elements });
+        // Update cn_by_element
+        const element_array = cn_by_element.get(element) ?? [];
+        element_array.push(coordination_num);
+        cn_by_element.set(element, element_array);
+        // Update overall cn_histogram
+        cn_histogram.set(coordination_num, (cn_histogram.get(coordination_num) ?? 0) + 1);
+        // Update cn_histogram_by_element
+        const element_histogram = cn_histogram_by_element.get(element) ?? new Map();
+        element_histogram.set(coordination_num, (element_histogram.get(coordination_num) ?? 0) + 1);
+        cn_histogram_by_element.set(element, element_histogram);
+    }
+    return {
+        sites: coordination_sites,
+        cn_by_element,
+        cn_histogram,
+        cn_histogram_by_element,
+    };
+}

package/dist/coordination/index.d.ts

@@ -0,0 +1,8 @@
+export * from './calc-coordination';
+export { default as CoordinationBarPlot } from './CoordinationBarPlot.svelte';
+export declare const SPLIT_MODES: {
+    readonly by_element: "By Element";
+    readonly by_structure: "By Structure";
+    readonly none: "Combined";
+};
+export type SplitMode = keyof typeof SPLIT_MODES;

package/dist/coordination/index.js

@@ -0,0 +1,7 @@
+export * from './calc-coordination';
+export { default as CoordinationBarPlot } from './CoordinationBarPlot.svelte';
+export const SPLIT_MODES = {
+    by_element: `By Element`,
+    by_structure: `By Structure`,
+    none: `Combined`,
+};

package/dist/effects.svelte.d.ts

@@ -0,0 +1,12 @@
+type PulseAnimationOptions = {
+    step?: number;
+    frequency?: number;
+    on_tick?: () => void;
+    reset_when_inactive?: boolean;
+};
+type PulseAnimation = {
+    readonly time: number;
+    readonly unit: number;
+};
+export declare function create_pulse_animation(active: () => boolean, options?: PulseAnimationOptions): PulseAnimation;
+export {};

package/dist/effects.svelte.js

@@ -0,0 +1,37 @@
+export function create_pulse_animation(active, options = {}) {
+    let time = $state(0);
+    let frame_id = null;
+    const { step = 0.02, frequency = 4, on_tick, reset_when_inactive = true } = options;
+    const cancel_frame = () => {
+        if (frame_id == null)
+            return;
+        cancelAnimationFrame(frame_id);
+        frame_id = null;
+    };
+    const stop = () => {
+        cancel_frame();
+        if (reset_when_inactive)
+            time = 0;
+    };
+    $effect(() => {
+        if (!active())
+            return stop();
+        const animate = () => {
+            time += step;
+            on_tick?.();
+            if (!active())
+                return stop();
+            frame_id = requestAnimationFrame(animate);
+        };
+        frame_id = requestAnimationFrame(animate);
+        return cancel_frame;
+    });
+    return {
+        get time() {
+            return time;
+        },
+        get unit() {
+            return 0.5 + 0.5 * Math.sin(time * frequency);
+        },
+    };
+}