Skip to content
Caps0.4.0
API reference

lib/motion

Import

Section titled “Import”
Import
import * as api from "@fungi.computer/caps/lib/motion";

Exports

Section titled “Exports”
Kind Export Description
type alias Motion Resolved, element-scoped motion. Times are milliseconds and distances pixels.
constant motionDefaults Today’s feel: the defaults that components’ authored timings are written against.
function readMotion() Read at an event boundary; no root-theme lookup, so nested tokens win.
function useMotion() Live motion tokens for a mounted ref, including nested theme and OS changes.
function motionTime() Scale one of a component’s authored durations by the theme’s tempo (--stipe-motion-normal against its 180ms default). Today’s themes return the authored value unchanged; reduced motion returns 0 (nothing travels).
function motionBounce() Scale one of a component’s authored spring bounces by the theme’s bounce (--stipe-motion-bounce against its 0.3 default), so a lively control stays livelier than a calm one inside every theme. A 0 theme is critically damped.
function motionSpringTime() Scale an authored spring settle time by --stipe-motion-spring-duration.
function motionEasing() A CSS easing for a Web Animation, stepped when the theme asks for it.
function canAnimate() Whether the element can run Web Animations (not in jsdom or old engines).
function useReducedMotion() The live reduced-motion preference alone, for controls that only need to know whether to move (their timing comes from readMotion when they do).

Motiontype alias

Section titled “Motion”
Signature
type Motion = Readonly<{
  reduced: boolean;
  squish: number;
  fast: number;
  normal: number;
  slow: number;
  springDuration: number;
  bounce: number;
  stretch: number;
  distance: number;
  stagger: number;
  blur: number;
  shake: number;
  steps: number;
  fuse: number;
  pressDepth: number;
  pressScale: number;
  ease: string;
  easeExit: string;
}>;

Resolved, element-scoped motion. Times are milliseconds and distances pixels.

motionDefaultsconstant

Section titled “motionDefaults”
Signature
const motionDefaults: Motion = defaults;

Today’s feel: the defaults that components’ authored timings are written against.

readMotion()function

Section titled “readMotion()”
Signature
function readMotion(element): Motion;

Read at an event boundary; no root-theme lookup, so nested tokens win.

Parameters

Section titled “Parameters”
Parameter Type
element Element

Returns

Section titled “Returns”

Motion

useMotion()function

Section titled “useMotion()”
Signature
function useMotion(ref): Motion;

Live motion tokens for a mounted ref, including nested theme and OS changes.

Parameters

Section titled “Parameters”
Parameter Type
ref RefObject<Element | null>

Returns

Section titled “Returns”

Motion

motionTime()function

Section titled “motionTime()”
Signature
function motionTime(motion, authored): number;

Scale one of a component’s authored durations by the theme’s tempo (--stipe-motion-normal against its 180ms default). Today’s themes return the authored value unchanged; reduced motion returns 0 (nothing travels).

Parameters

Section titled “Parameters”
Parameter Type
motion Motion
authored number

Returns

Section titled “Returns”

number

motionBounce()function

Section titled “motionBounce()”
Signature
function motionBounce(motion, authored): number;

Scale one of a component’s authored spring bounces by the theme’s bounce (--stipe-motion-bounce against its 0.3 default), so a lively control stays livelier than a calm one inside every theme. A 0 theme is critically damped.

Parameters

Section titled “Parameters”
Parameter Type
motion Motion
authored number

Returns

Section titled “Returns”

number

motionSpringTime()function

Section titled “motionSpringTime()”
Signature
function motionSpringTime(motion, authored): number;

Scale an authored spring settle time by --stipe-motion-spring-duration.

Parameters

Section titled “Parameters”
Parameter Type
motion Motion
authored number

Returns

Section titled “Returns”

number

motionEasing()function

Section titled “motionEasing()”
Signature
function motionEasing(motion, ease): string;

A CSS easing for a Web Animation, stepped when the theme asks for it.

Parameters

Section titled “Parameters”
Parameter Type
motion Motion
ease string

Returns

Section titled “Returns”

string

canAnimate()function

Section titled “canAnimate()”
Signature
function canAnimate(element): boolean;

Whether the element can run Web Animations (not in jsdom or old engines).

Parameters

Section titled “Parameters”
Parameter Type
element Element

Returns

Section titled “Returns”

boolean

useReducedMotion()function

Section titled “useReducedMotion()”
Signature
function useReducedMotion(): boolean;

The live reduced-motion preference alone, for controls that only need to know whether to move (their timing comes from readMotion when they do).

Returns

Section titled “Returns”

boolean