User context

Advanced adapter entrypoints expose a read/write API over the user store in MotionGPUContext:

import {
	setMotionGPUUserContext,
	useMotionGPUUserContext
} from '@motion-core/motion-gpu/svelte/advanced';

import {
	setMotionGPUUserContext,
	useMotionGPUUserContext
} from '@motion-core/motion-gpu/svelte/advanced';

React also exports useSetMotionGPUUserContext() for writes from effects and event handlers. Vue and Svelte use setMotionGPUUserContext(...) directly.

Read

const all = useMotionGPUUserContext();
const controls = useMotionGPUUserContext<Controls>('controls');

const all = useMotionGPUUserContext();
const controls = useMotionGPUUserContext<Controls>('controls');

The first overload returns a CurrentReadable view of the complete namespace map. The second returns CurrentReadable<T | undefined> for one string or symbol namespace.

Write

setMotionGPUUserContext(
	'controls',
	() => ({ enabled: true, speed: 1 }),
	{ existing: 'skip' }
);

setMotionGPUUserContext(
	'controls',
	() => ({ enabled: true, speed: 1 }),
	{ existing: 'skip' }
);

The setter returns the effective value stored under the namespace.

The default is 'skip'.

Functions are treated as factories by default. Set functionValue: 'value' to store the function itself instead of calling it:

setMotionGPUUserContext('handler', callback, {
	existing: 'replace',
	functionValue: 'value'
});

setMotionGPUUserContext('handler', callback, {
	existing: 'replace',
	functionValue: 'value'
});

Use cases

Use separate namespaces for plugins or runtime subsystems that share a canvas but should not depend directly on each other. Use framework-native component state when data does not need to cross Motion GPU runtime boundaries.

All user-context functions require an active FragCanvas context. See Hooks API for exact signatures.