react-fidget-spinner
Version:
Turn any React component into an interactive clickable fidget spinner! 🪿
986 lines (952 loc) • 97.8 kB
TypeScript
import { JSX as JSX_2 } from 'react/jsx-runtime';
import { PropsWithChildren } from 'react';
import * as v from 'valibot';
export declare type BubbleConfig = {
/** Whether the bubble spawner is active or not - setting the component as active will stop the animation loop */
active: boolean;
/** The components to use for the bubbles - each bubble will be a random component from this array */
components: React.ReactNode[];
/** The duration of the bubble animation */
durationMs: NumericControl;
/** The ending scale of the bubble */
scaleEnd: NumericControl;
/** The frame rate of the animation */
frameRate: number;
/** The callback function that is called when a bubble is removed */
onRemove: () => void;
/** The callback function that is called when a bubble is spawned */
onSpawn: () => void;
/** The ending opacity of the bubble */
opacityEnd: NumericControl;
/** The bezier curve definition which controls the opacity of the bubble over time */
opacityEasing: [number, number, number, number];
/** The starting opacity of the bubble */
opacityStart: NumericControl;
/** The bezier curve definition which controls the scale of the bubble over time */
scaleEasing: [number, number, number, number];
/** The starting scale of the bubble */
scaleStart: NumericControl;
/** The amplitude of the wobble animation */
wobbleAmplitude: NumericControl;
/** The frequency of the wobble animation */
wobbleFrequency: NumericControl;
/** The randomness in the x position of the bubble */
xStart: NumericControl;
/** The bezier curve definition which controls the y position of the bubble over time */
yEasing: [number, number, number, number];
/** The y position of the bubble when it reaches the end of its animation - nb: +ve `y` is up (which is the opposite of the html definition of positive y) */
yEnd: NumericControl;
/** The starting y position of the bubble */
yStart: NumericControl;
/** The interval between spawns */
spawnIntervalMs: NumericControl;
};
/**
* `Bubbles` is a standalone particle spawner component.
*
* The `Bubble` particles spawn at an origin point and then float upwards using a randomised cos/sin wave `wobble` function.
*
* Particles can be any valid `ReactNode` - we've used emojis by default.
*
* You can pass an array of your own `components` to render. The spawner will then pick one at random.
*
* We recommend that we recommend that you keep the components simple to render for performance
*
* ## Usage
*
* ```jsx
*
* import { Bubbles } from "react-fidget-spinner"
*
*
* const MyBubbles = () => {
*
* return (
* <Bubbles components={['💸', "Bubble", <ComplexBubble /> ]} />
* )
* }
*
* ```
*
*/
export declare const Bubbles: (config: Partial<BubbleConfig>) => JSX_2.Element;
export declare const buildBubbleConfig: (bubbleConfigOverrides?: Partial<BubbleConfig>) => {
components: string[];
frameRate: number;
active: boolean;
durationMs: number | {
value: number;
variation?: {
value: number;
type: VariationType;
unit: VariationUnit;
} | undefined;
};
scaleEnd: number | {
value: number;
variation?: {
value: number;
type: VariationType;
unit: VariationUnit;
} | undefined;
};
spawnIntervalMs: number | {
value: number;
variation?: {
value: number;
type: VariationType;
unit: VariationUnit;
} | undefined;
};
onRemove: (...args: unknown[]) => unknown;
onSpawn: (...args: unknown[]) => unknown;
opacityEasing: [number, number, number, number];
opacityEnd: number | {
value: number;
variation?: {
value: number;
type: VariationType;
unit: VariationUnit;
} | undefined;
};
opacityStart: number | {
value: number;
variation?: {
value: number;
type: VariationType;
unit: VariationUnit;
} | undefined;
};
scaleEasing: [number, number, number, number];
scaleStart: number | {
value: number;
variation?: {
value: number;
type: VariationType;
unit: VariationUnit;
} | undefined;
};
wobbleAmplitude: number | {
value: number;
variation?: {
value: number;
type: VariationType;
unit: VariationUnit;
} | undefined;
};
wobbleFrequency: number | {
value: number;
variation?: {
value: number;
type: VariationType;
unit: VariationUnit;
} | undefined;
};
yEasing: [number, number, number, number];
yEnd: number | {
value: number;
variation?: {
value: number;
type: VariationType;
unit: VariationUnit;
} | undefined;
};
yStart: number | {
value: number;
variation?: {
value: number;
type: VariationType;
unit: VariationUnit;
} | undefined;
};
xStart: number | {
value: number;
variation?: {
value: number;
type: VariationType;
unit: VariationUnit;
} | undefined;
};
};
export declare const buildClickConfig: (clickConfigOverrides?: Partial<ClickConfig>) => {
active: boolean;
onRemove: (...args: unknown[]) => unknown;
onSpawn: (...args: unknown[]) => unknown;
angularVelocityPerClick: number | {
value: number;
variation?: {
value: number;
type: VariationType;
unit: VariationUnit;
} | undefined;
};
};
export declare const buildResetConfig: (resetConfigOverrides?: Partial<ResetConfig>) => {
durationMs: number;
easing: [number, number, number, number];
onResetStart: (...args: unknown[]) => unknown;
onResetEnd: (...args: unknown[]) => unknown;
onResetCancel: (...args: unknown[]) => unknown;
};
export declare const buildScaleConfig: (scaleConfigOverrides?: Partial<ScaleConfig>) => {
scaleEasing: [number, number, number, number];
scale: number;
scaleDurationMs: number;
onScaleChange: (...args: unknown[]) => unknown;
onScaleEnd: (...args: unknown[]) => unknown;
onScaleStart: (...args: unknown[]) => unknown;
};
export declare const buildSparkConfig: (sparkConfigOverrides?: Partial<SparkConfig>) => {
components: any[];
frameRate: number | {
value: number;
variation?: {
value: number;
type: VariationType;
unit: VariationUnit;
} | undefined;
};
active: boolean;
durationMs: number | {
value: number;
variation?: {
value: number;
type: VariationType;
unit: VariationUnit;
} | undefined;
};
scaleEnd: number | {
value: number;
variation?: {
value: number;
type: VariationType;
unit: VariationUnit;
} | undefined;
};
spawnIntervalMs: number | {
value: number;
variation?: {
value: number;
type: VariationType;
unit: VariationUnit;
} | undefined;
};
onRemove: (...args: unknown[]) => unknown;
onSpawn: (...args: unknown[]) => unknown;
opacityEasing: [number, number, number, number];
opacityEnd: number | {
value: number;
variation?: {
value: number;
type: VariationType;
unit: VariationUnit;
} | undefined;
};
opacityStart: number | {
value: number;
variation?: {
value: number;
type: VariationType;
unit: VariationUnit;
} | undefined;
};
scaleEasing: [number, number, number, number];
scaleStart: number | {
value: number;
variation?: {
value: number;
type: VariationType;
unit: VariationUnit;
} | undefined;
};
distanceEasing: [number, number, number, number];
distanceStart: number | {
value: number;
variation?: {
value: number;
type: VariationType;
unit: VariationUnit;
} | undefined;
};
distanceEnd: number | {
value: number;
variation?: {
value: number;
type: VariationType;
unit: VariationUnit;
} | undefined;
};
intensity: number | {
value: number;
variation?: {
value: number;
type: VariationType;
unit: VariationUnit;
} | undefined;
};
};
export declare const buildSpinnerConfig: (spinnerConfigOverrides?: Partial<SpinnerConfig>) => {
dampingCoefficient: number;
initialAngle: number;
initialAngularVelocity: number;
maxAngularVelocity: number;
direction: "clockwise" | "antiClockwise";
onMaxAngularVelocity: (...args: unknown[]) => unknown;
onClick: (...args: unknown[]) => unknown;
};
export declare const buildVelocityBreakpointConfigs: (breakpointInputs: VelocityBreakpointInput[] | undefined, baseConfig: VelocityBreakpointConfigInput) => {
breakpoint: number;
config: {
scaleConfig: {
scaleEasing: [number, number, number, number];
scale: number;
scaleDurationMs: number;
onScaleChange: (...args: unknown[]) => unknown;
onScaleEnd: (...args: unknown[]) => unknown;
onScaleStart: (...args: unknown[]) => unknown;
};
bubbleConfig: {
components: string[];
frameRate: number;
active: boolean;
durationMs: number | {
value: number;
variation?: {
value: number;
type: VariationType;
unit: VariationUnit;
} | undefined;
};
scaleEnd: number | {
value: number;
variation?: {
value: number;
type: VariationType;
unit: VariationUnit;
} | undefined;
};
spawnIntervalMs: number | {
value: number;
variation?: {
value: number;
type: VariationType;
unit: VariationUnit;
} | undefined;
};
onRemove: (...args: unknown[]) => unknown;
onSpawn: (...args: unknown[]) => unknown;
opacityEasing: [number, number, number, number];
opacityEnd: number | {
value: number;
variation?: {
value: number;
type: VariationType;
unit: VariationUnit;
} | undefined;
};
opacityStart: number | {
value: number;
variation?: {
value: number;
type: VariationType;
unit: VariationUnit;
} | undefined;
};
scaleEasing: [number, number, number, number];
scaleStart: number | {
value: number;
variation?: {
value: number;
type: VariationType;
unit: VariationUnit;
} | undefined;
};
wobbleAmplitude: number | {
value: number;
variation?: {
value: number;
type: VariationType;
unit: VariationUnit;
} | undefined;
};
wobbleFrequency: number | {
value: number;
variation?: {
value: number;
type: VariationType;
unit: VariationUnit;
} | undefined;
};
yEasing: [number, number, number, number];
yEnd: number | {
value: number;
variation?: {
value: number;
type: VariationType;
unit: VariationUnit;
} | undefined;
};
yStart: number | {
value: number;
variation?: {
value: number;
type: VariationType;
unit: VariationUnit;
} | undefined;
};
xStart: number | {
value: number;
variation?: {
value: number;
type: VariationType;
unit: VariationUnit;
} | undefined;
};
};
sparkConfig: {
components: any[];
frameRate: number | {
value: number;
variation?: {
value: number;
type: VariationType;
unit: VariationUnit;
} | undefined;
};
active: boolean;
durationMs: number | {
value: number;
variation?: {
value: number;
type: VariationType;
unit: VariationUnit;
} | undefined;
};
scaleEnd: number | {
value: number;
variation?: {
value: number;
type: VariationType;
unit: VariationUnit;
} | undefined;
};
spawnIntervalMs: number | {
value: number;
variation?: {
value: number;
type: VariationType;
unit: VariationUnit;
} | undefined;
};
onRemove: (...args: unknown[]) => unknown;
onSpawn: (...args: unknown[]) => unknown;
opacityEasing: [number, number, number, number];
opacityEnd: number | {
value: number;
variation?: {
value: number;
type: VariationType;
unit: VariationUnit;
} | undefined;
};
opacityStart: number | {
value: number;
variation?: {
value: number;
type: VariationType;
unit: VariationUnit;
} | undefined;
};
scaleEasing: [number, number, number, number];
scaleStart: number | {
value: number;
variation?: {
value: number;
type: VariationType;
unit: VariationUnit;
} | undefined;
};
distanceEasing: [number, number, number, number];
distanceStart: number | {
value: number;
variation?: {
value: number;
type: VariationType;
unit: VariationUnit;
} | undefined;
};
distanceEnd: number | {
value: number;
variation?: {
value: number;
type: VariationType;
unit: VariationUnit;
} | undefined;
};
intensity: number | {
value: number;
variation?: {
value: number;
type: VariationType;
unit: VariationUnit;
} | undefined;
};
};
resetConfig: {
durationMs: number;
easing: [number, number, number, number];
onResetStart: (...args: unknown[]) => unknown;
onResetEnd: (...args: unknown[]) => unknown;
onResetCancel: (...args: unknown[]) => unknown;
};
spinnerConfig: {
dampingCoefficient: number;
initialAngle: number;
initialAngularVelocity: number;
maxAngularVelocity: number;
direction: "clockwise" | "antiClockwise";
onMaxAngularVelocity: (...args: unknown[]) => unknown;
onClick: (...args: unknown[]) => unknown;
};
clickConfig: {
active: boolean;
onRemove: (...args: unknown[]) => unknown;
onSpawn: (...args: unknown[]) => unknown;
angularVelocityPerClick: number | {
value: number;
variation?: {
value: number;
type: VariationType;
unit: VariationUnit;
} | undefined;
};
};
};
}[];
export declare type ClickConfig = {
angularVelocityPerClick: NumericControl;
onSpawn: () => void;
onRemove: () => void;
active: boolean;
};
/**
*
* ## Basic Usage
* Turns `children` into a clickable interactive fidget spinner:
*
* - Each click adds energy which makes it spin faster
* - It will then slow down and eventually trigger a reset animation.
*
*
* ```tsx
* <FidgetSpinner>
* <YourComponent />
* </FidgetSpinner>
* ```
*
*
* ## Config Overrides
* Any props passed through to the `FidgetSpinner` will **shallow merge** with the default values.
*
* ```tsx
* <FidgetSpinner scaleConfig={{scale: 2}}>
* <YourComponent />
* </FidgetSpinner>
* ```
*
*
* ## Complex Configuration
* config builder functions are exported at the top level to help build out more complex configuration. Eg, when using velocity breakpoints.
*
*
* ```tsx
* // eg for scale config which controls the size of the spinner
* import { buildScaleConfig } from './react-fidget-spinnner';
* ```
*
* ## What are the default configuration values?
* Each `control` visible in storybook is the `default` value for that prop.
*/
export declare const FidgetSpinner: ({ bubbleConfig: bubbleConfigOverrides, children, resetConfig: resetConfigOverrides, scaleConfig: scaleConfigOverrides, sparkConfig: sparkConfigOverrides, spinnerConfig: spinnerConfigOverrides, velocityBreakpoints: velocityBreakpointsOverrides, clickConfig: clickConfigOverrides, }: PropsWithChildren<FidgetSpinnerProps>) => JSX_2.Element;
export declare type FidgetSpinnerProps = {
/** Configuration that gets passed to the underlying `Bubbles` particle spawner component*/
bubbleConfig?: Partial<BubbleConfig>;
/** Configuration for the resetting animation */
resetConfig?: Partial<ResetConfig>;
/** Configuration for the animation that happens when the FidgetSpinner changes in size */
scaleConfig?: Partial<ScaleConfig>;
/** Configuration that gets passed to the underlying `Sparks` particle spawner component*/
sparkConfig?: Partial<SparkConfig>;
/** Configuration for the flywheel physics of the `FidgetSpinner` */
spinnerConfig?: Partial<SpinnerConfig>;
/** An array of configuration changes that trigger when the velocity of the fidget spinner gets to `x%` of its `maxAngularVelocity` */
velocityBreakpoints?: VelocityBreakpointsInput;
/** Configuration for the mouse click animation */
clickConfig?: Partial<ClickConfig>;
};
declare type NumericControl = NumericControlWithVariation | number;
declare type NumericControlWithVariation = {
value: number;
variation?: VariationConfig;
};
export declare type ResetConfig = Omit<v.InferOutput<typeof ResetConfigSchema>, keyof ResetConfigCallbacks> & ResetConfigCallbacks;
declare type ResetConfigCallbacks = {
onResetStart: () => void;
onResetEnd: () => void;
onResetCancel: () => void;
};
declare const ResetConfigSchema: v.ObjectSchema<{
readonly durationMs: v.SchemaWithPipe<[v.NumberSchema<undefined>, v.ToMinValueAction<number, 0>]>;
readonly easing: v.TupleSchema<[v.NumberSchema<undefined>, v.NumberSchema<undefined>, v.NumberSchema<undefined>, v.NumberSchema<undefined>], undefined>;
readonly onResetStart: v.FunctionSchema<undefined>;
readonly onResetEnd: v.FunctionSchema<undefined>;
readonly onResetCancel: v.FunctionSchema<undefined>;
}, undefined>;
export declare type ScaleConfig = Omit<v.InferOutput<typeof ScaleConfigSchema>, keyof ScaleConfigCallbacks> & ScaleConfigCallbacks;
declare type ScaleConfigCallbacks = {
onScaleChange: (scale: number) => void;
onScaleEnd: () => void;
onScaleStart: () => void;
};
declare const ScaleConfigSchema: v.ObjectSchema<{
readonly onScaleChange: v.FunctionSchema<undefined>;
readonly onScaleEnd: v.FunctionSchema<undefined>;
readonly onScaleStart: v.FunctionSchema<undefined>;
readonly scale: v.SchemaWithPipe<[v.NumberSchema<undefined>, v.ToMinValueAction<number, 0>]>;
readonly scaleDurationMs: v.SchemaWithPipe<[v.NumberSchema<undefined>, v.ToMinValueAction<number, 0>]>;
readonly scaleEasing: v.TupleSchema<[v.NumberSchema<undefined>, v.NumberSchema<undefined>, v.NumberSchema<undefined>, v.NumberSchema<undefined>], undefined>;
}, undefined>;
export declare type SparkConfig = {
/** Whether the spark spawner is active or not - setting the component as active will stop the animation loop */
active: boolean;
/** The components to use for the sparks - each spark will be a random component from this array */
components: React.ReactNode[];
/** The bezier curve definition which controls the distance of the spark over time */
distanceEasing: [number, number, number, number];
/** The starting distance of the spark */
distanceStart: NumericControl;
/** The ending distance of the spark */
distanceEnd: NumericControl;
/** The duration of the spark animation */
durationMs: NumericControl;
/** The frame rate of the animation */
frameRate: NumericControl;
/** The intensity of the spark */
intensity: NumericControl;
/** The callback function that is called when a spark is removed */
onRemove: () => void;
/** The callback function that is called when a spark is spawned */
onSpawn: () => void;
/** The bezier curve definition which controls the opacity of the spark over time */
opacityEasing: [number, number, number, number];
/** The ending opacity of the spark */
opacityEnd: NumericControl;
/** The starting opacity of the spark */
opacityStart: NumericControl;
/** The bezier curve definition which controls the scale of the spark over time */
scaleEasing: [number, number, number, number];
/** The ending scale of the spark */
scaleEnd: NumericControl;
/** The starting scale of the spark */
scaleStart: NumericControl;
/** The interval between spawning sparks */
spawnIntervalMs: NumericControl;
};
/**
* `Sparks` is a standalone particle spawner component
*
* The `Spark` particles spawn within an origin area and then radiate outwards at a fixed angle from their start point.
*
* Particles can be any valid `ReactNode` - we've used emojis by default.
*
* You can pass an array of your own `components` to render. The spawner will then pick one at random.
* We recommend that we recommend that you keep the components simple to render for performance
* ## Usage
*
* ```jsx
*
* import { Sparks } from "react-fidget-spinner"
*
*
* const MySparks = () => {
*
* return (
* <Sparks components={['💸', "Spark", <ComplexSpark /> ]} />
* )
* }
*
* ```
*/
export declare const Sparks: (config: Partial<SparkConfig>) => JSX_2.Element;
export declare type SpinnerConfig = Omit<v.InferOutput<typeof SpinnerConfigSchema>, keyof SpinnerConfigCallbacks> & SpinnerConfigCallbacks;
declare type SpinnerConfigCallbacks = {
onMaxAngularVelocity: () => void;
onClick: () => void;
};
declare const SpinnerConfigSchema: v.ObjectSchema<{
readonly dampingCoefficient: v.SchemaWithPipe<[v.NumberSchema<undefined>, v.ToMinValueAction<number, 0>, v.ToMaxValueAction<number, 1>]>;
readonly initialAngle: v.SchemaWithPipe<[v.NumberSchema<undefined>, v.ToMinValueAction<number, 0>, v.ToMaxValueAction<number, number>]>;
readonly initialAngularVelocity: v.SchemaWithPipe<[v.NumberSchema<undefined>, v.ToMinValueAction<number, 0>]>;
readonly maxAngularVelocity: v.SchemaWithPipe<[v.NumberSchema<undefined>, v.ToMinValueAction<number, 0>]>;
readonly onMaxAngularVelocity: v.FunctionSchema<undefined>;
readonly onClick: v.FunctionSchema<undefined>;
readonly direction: v.UnionSchema<[v.LiteralSchema<"clockwise", undefined>, v.LiteralSchema<"antiClockwise", undefined>], undefined>;
}, undefined>;
declare type VariationConfig = {
type: VariationType;
unit: VariationUnit;
value: number;
};
declare enum VariationType {
Plus = "Plus",
Minus = "Minus",
PlusMinus = "PlusMinus"
}
declare enum VariationUnit {
Percent = "Percent",
Absolute = "Absolute"
}
export declare type VelocityBreakpoint = v.InferOutput<typeof VelocityBreakpointSchema>;
export declare type VelocityBreakpointConfig = v.InferOutput<typeof VelocityBreakpointConfigSchema>;
declare type VelocityBreakpointConfigInput = {
scaleConfig?: Partial<ScaleConfig>;
bubbleConfig?: Partial<BubbleConfig>;
sparkConfig?: Partial<SparkConfig>;
resetConfig?: Partial<ResetConfig>;
spinnerConfig?: Partial<SpinnerConfig>;
clickConfig?: Partial<ClickConfig>;
};
declare const VelocityBreakpointConfigSchema: v.ObjectSchema<{
readonly scaleConfig: v.ObjectSchema<{
readonly onScaleChange: v.FunctionSchema<undefined>;
readonly onScaleEnd: v.FunctionSchema<undefined>;
readonly onScaleStart: v.FunctionSchema<undefined>;
readonly scale: v.SchemaWithPipe<[v.NumberSchema<undefined>, v.ToMinValueAction<number, 0>]>;
readonly scaleDurationMs: v.SchemaWithPipe<[v.NumberSchema<undefined>, v.ToMinValueAction<number, 0>]>;
readonly scaleEasing: v.TupleSchema<[v.NumberSchema<undefined>, v.NumberSchema<undefined>, v.NumberSchema<undefined>, v.NumberSchema<undefined>], undefined>;
}, undefined>;
readonly bubbleConfig: v.ObjectSchema<{
readonly active: v.BooleanSchema<undefined>;
readonly components: v.ArraySchema<v.StringSchema<undefined>, undefined>;
readonly durationMs: v.UnionSchema<[v.NumberSchema<undefined>, v.ObjectSchema<{
readonly value: v.NumberSchema<undefined>;
readonly variation: v.OptionalSchema<v.ObjectSchema<{
readonly type: v.UnionSchema<[v.LiteralSchema<import("./NumericControl").VariationType.Plus, undefined>, v.LiteralSchema<import("./NumericControl").VariationType.Minus, undefined>, v.LiteralSchema<import("./NumericControl").VariationType.PlusMinus, undefined>], undefined>;
readonly unit: v.UnionSchema<[v.LiteralSchema<import("./NumericControl").VariationUnit.Percent, undefined>, v.LiteralSchema<import("./NumericControl").VariationUnit.Absolute, undefined>], undefined>;
readonly value: v.NumberSchema<undefined>;
}, undefined>, undefined>;
}, undefined>], undefined>;
readonly scaleEnd: v.UnionSchema<[v.NumberSchema<undefined>, v.ObjectSchema<{
readonly value: v.NumberSchema<undefined>;
readonly variation: v.OptionalSchema<v.ObjectSchema<{
readonly type: v.UnionSchema<[v.LiteralSchema<import("./NumericControl").VariationType.Plus, undefined>, v.LiteralSchema<import("./NumericControl").VariationType.Minus, undefined>, v.LiteralSchema<import("./NumericControl").VariationType.PlusMinus, undefined>], undefined>;
readonly unit: v.UnionSchema<[v.LiteralSchema<import("./NumericControl").VariationUnit.Percent, undefined>, v.LiteralSchema<import("./NumericControl").VariationUnit.Absolute, undefined>], undefined>;
readonly value: v.NumberSchema<undefined>;
}, undefined>, undefined>;
}, undefined>], undefined>;
readonly frameRate: v.SchemaWithPipe<[v.NumberSchema<undefined>, v.ToMinValueAction<number, 0>]>;
readonly spawnIntervalMs: v.UnionSchema<[v.NumberSchema<undefined>, v.ObjectSchema<{
readonly value: v.NumberSchema<undefined>;
readonly variation: v.OptionalSchema<v.ObjectSchema<{
readonly type: v.UnionSchema<[v.LiteralSchema<import("./NumericControl").VariationType.Plus, undefined>, v.LiteralSchema<import("./NumericControl").VariationType.Minus, undefined>, v.LiteralSchema<import("./NumericControl").VariationType.PlusMinus, undefined>], undefined>;
readonly unit: v.UnionSchema<[v.LiteralSchema<import("./NumericControl").VariationUnit.Percent, undefined>, v.LiteralSchema<import("./NumericControl").VariationUnit.Absolute, undefined>], undefined>;
readonly value: v.NumberSchema<undefined>;
}, undefined>, undefined>;
}, undefined>], undefined>;
readonly onRemove: v.FunctionSchema<undefined>;
readonly onSpawn: v.FunctionSchema<undefined>;
readonly opacityEasing: v.TupleSchema<[v.NumberSchema<undefined>, v.NumberSchema<undefined>, v.NumberSchema<undefined>, v.NumberSchema<undefined>], undefined>;
readonly opacityEnd: v.UnionSchema<[v.NumberSchema<undefined>, v.ObjectSchema<{
readonly value: v.NumberSchema<undefined>;
readonly variation: v.OptionalSchema<v.ObjectSchema<{
readonly type: v.UnionSchema<[v.LiteralSchema<import("./NumericControl").VariationType.Plus, undefined>, v.LiteralSchema<import("./NumericControl").VariationType.Minus, undefined>, v.LiteralSchema<import("./NumericControl").VariationType.PlusMinus, undefined>], undefined>;
readonly unit: v.UnionSchema<[v.LiteralSchema<import("./NumericControl").VariationUnit.Percent, undefined>, v.LiteralSchema<import("./NumericControl").VariationUnit.Absolute, undefined>], undefined>;
readonly value: v.NumberSchema<undefined>;
}, undefined>, undefined>;
}, undefined>], undefined>;
readonly opacityStart: v.UnionSchema<[v.NumberSchema<undefined>, v.ObjectSchema<{
readonly value: v.NumberSchema<undefined>;
readonly variation: v.OptionalSchema<v.ObjectSchema<{
readonly type: v.UnionSchema<[v.LiteralSchema<import("./NumericControl").VariationType.Plus, undefined>, v.LiteralSchema<import("./NumericControl").VariationType.Minus, undefined>, v.LiteralSchema<import("./NumericControl").VariationType.PlusMinus, undefined>], undefined>;
readonly unit: v.UnionSchema<[v.LiteralSchema<import("./NumericControl").VariationUnit.Percent, undefined>, v.LiteralSchema<import("./NumericControl").VariationUnit.Absolute, undefined>], undefined>;
readonly value: v.NumberSchema<undefined>;
}, undefined>, undefined>;
}, undefined>], undefined>;
readonly scaleEasing: v.TupleSchema<[v.NumberSchema<undefined>, v.NumberSchema<undefined>, v.NumberSchema<undefined>, v.NumberSchema<undefined>], undefined>;
readonly scaleStart: v.UnionSchema<[v.NumberSchema<undefined>, v.ObjectSchema<{
readonly value: v.NumberSchema<undefined>;
readonly variation: v.OptionalSchema<v.ObjectSchema<{
readonly type: v.UnionSchema<[v.LiteralSchema<import("./NumericControl").VariationType.Plus, undefined>, v.LiteralSchema<import("./NumericControl").VariationType.Minus, undefined>, v.LiteralSchema<import("./NumericControl").VariationType.PlusMinus, undefined>], undefined>;
readonly unit: v.UnionSchema<[v.LiteralSchema<import("./NumericControl").VariationUnit.Percent, undefined>, v.LiteralSchema<import("./NumericControl").VariationUnit.Absolute, undefined>], undefined>;
readonly value: v.NumberSchema<undefined>;
}, undefined>, undefined>;
}, undefined>], undefined>;
readonly wobbleAmplitude: v.UnionSchema<[v.NumberSchema<undefined>, v.ObjectSchema<{
readonly value: v.NumberSchema<undefined>;
readonly variation: v.OptionalSchema<v.ObjectSchema<{
readonly type: v.UnionSchema<[v.LiteralSchema<import("./NumericControl").VariationType.Plus, undefined>, v.LiteralSchema<import("./NumericControl").VariationType.Minus, undefined>, v.LiteralSchema<import("./NumericControl").VariationType.PlusMinus, undefined>], undefined>;
readonly unit: v.UnionSchema<[v.LiteralSchema<import("./NumericControl").VariationUnit.Percent, undefined>, v.LiteralSchema<import("./NumericControl").VariationUnit.Absolute, undefined>], undefined>;
readonly value: v.NumberSchema<undefined>;
}, undefined>, undefined>;
}, undefined>], undefined>;
readonly wobbleFrequency: v.UnionSchema<[v.NumberSchema<undefined>, v.ObjectSchema<{
readonly value: v.NumberSchema<undefined>;
readonly variation: v.OptionalSchema<v.ObjectSchema<{
readonly type: v.UnionSchema<[v.LiteralSchema<import("./NumericControl").VariationType.Plus, undefined>, v.LiteralSchema<import("./NumericControl").VariationType.Minus, undefined>, v.LiteralSchema<import("./NumericControl").VariationType.PlusMinus, undefined>], undefined>;
readonly unit: v.UnionSchema<[v.LiteralSchema<import("./NumericControl").VariationUnit.Percent, undefined>, v.LiteralSchema<import("./NumericControl").VariationUnit.Absolute, undefined>], undefined>;
readonly value: v.NumberSchema<undefined>;
}, undefined>, undefined>;
}, undefined>], undefined>;
readonly yEasing: v.TupleSchema<[v.NumberSchema<undefined>, v.NumberSchema<undefined>, v.NumberSchema<undefined>, v.NumberSchema<undefined>], undefined>;
readonly yEnd: v.UnionSchema<[v.NumberSchema<undefined>, v.ObjectSchema<{
readonly value: v.NumberSchema<undefined>;
readonly variation: v.OptionalSchema<v.ObjectSchema<{
readonly type: v.UnionSchema<[v.LiteralSchema<import("./NumericControl").VariationType.Plus, undefined>, v.LiteralSchema<import("./NumericControl").VariationType.Minus, undefined>, v.LiteralSchema<import("./NumericControl").VariationType.PlusMinus, undefined>], undefined>;
readonly unit: v.UnionSchema<[v.LiteralSchema<import("./NumericControl").VariationUnit.Percent, undefined>, v.LiteralSchema<import("./NumericControl").VariationUnit.Absolute, undefined>], undefined>;
readonly value: v.NumberSchema<undefined>;
}, undefined>, undefined>;
}, undefined>], undefined>;
readonly yStart: v.UnionSchema<[v.NumberSchema<undefined>, v.ObjectSchema<{
readonly value: v.NumberSchema<undefined>;
readonly variation: v.OptionalSchema<v.ObjectSchema<{
readonly type: v.UnionSchema<[v.LiteralSchema<import("./NumericControl").VariationType.Plus, undefined>, v.LiteralSchema<import("./NumericControl").VariationType.Minus, undefined>, v.LiteralSchema<import("./NumericControl").VariationType.PlusMinus, undefined>], undefined>;
readonly unit: v.UnionSchema<[v.LiteralSchema<import("./NumericControl").VariationUnit.Percent, undefined>, v.LiteralSchema<import("./NumericControl").VariationUnit.Absolute, undefined>], undefined>;
readonly value: v.NumberSchema<undefined>;
}, undefined>, undefined>;
}, undefined>], undefined>;
readonly xStart: v.UnionSchema<[v.NumberSchema<undefined>, v.ObjectSchema<{
readonly value: v.NumberSchema<undefined>;
readonly variation: v.OptionalSchema<v.ObjectSchema<{
readonly type: v.UnionSchema<[v.LiteralSchema<import("./NumericControl").VariationType.Plus, undefined>, v.LiteralSchema<import("./NumericControl").VariationType.Minus, undefined>, v.LiteralSchema<import("./NumericControl").VariationType.PlusMinus, undefined>], undefined>;
readonly unit: v.UnionSchema<[v.LiteralSchema<import("./NumericControl").VariationUnit.Percent, undefined>, v.LiteralSchema<import("./NumericControl").VariationUnit.Absolute, undefined>], undefined>;
readonly value: v.NumberSchema<undefined>;
}, undefined>, undefined>;
}, undefined>], undefined>;
}, undefined>;
readonly sparkConfig: v.ObjectSchema<{
readonly active: v.BooleanSchema<undefined>;
readonly components: v.ArraySchema<v.AnySchema, undefined>;
readonly distanceEasing: v.TupleSchema<[v.NumberSchema<undefined>, v.NumberSchema<undefined>, v.NumberSchema<undefined>, v.NumberSchema<undefined>], undefined>;
readonly distanceStart: v.UnionSchema<[v.NumberSchema<undefined>, v.ObjectSchema<{
readonly value: v.NumberSchema<undefined>;
readonly variation: v.OptionalSchema<v.ObjectSchema<{
readonly type: v.UnionSchema<[v.LiteralSchema<import("./NumericControl").VariationType.Plus, undefined>, v.LiteralSchema<import("./NumericControl").VariationType.Minus, undefined>, v.LiteralSchema<import("./NumericControl").VariationType.PlusMinus, undefined>], undefined>;
readonly unit: v.UnionSchema<[v.LiteralSchema<import("./NumericControl").VariationUnit.Percent, undefined>, v.LiteralSchema<import("./NumericControl").VariationUnit.Absolute, undefined>], undefined>;
readonly value: v.NumberSchema<undefined>;
}, undefined>, undefined>;
}, undefined>], undefined>;
readonly distanceEnd: v.UnionSchema<[v.NumberSchema<undefined>, v.ObjectSchema<{
readonly value: v.NumberSchema<undefined>;
readonly variation: v.OptionalSchema<v.ObjectSchema<{
readonly type: v.UnionSchema<[v.LiteralSchema<import("./NumericControl").VariationType.Plus, undefined>, v.LiteralSchema<import("./NumericControl").VariationType.Minus, undefined>, v.LiteralSchema<import("./NumericControl").VariationType.PlusMinus, undefined>], undefined>;
readonly unit: v.UnionSchema<[v.LiteralSchema<import("./NumericControl").VariationUnit.Percent, undefined>, v.LiteralSchema<import("./NumericControl").VariationUnit.Absolute, undefined>], undefined>;
readonly value: v.NumberSchema<undefined>;
}, undefined>, undefined>;
}, undefined>], undefined>;
readonly durationMs: v.UnionSchema<[v.NumberSchema<undefined>, v.ObjectSchema<{
readonly value: v.NumberSchema<undefined>;
readonly variation: v.OptionalSchema<v.ObjectSchema<{
readonly type: v.UnionSchema<[v.LiteralSchema<import("./NumericControl").VariationType.Plus, undefined>, v.LiteralSchema<import("./NumericControl").VariationType.Minus, undefined>, v.LiteralSchema<import("./NumericControl").VariationType.PlusMinus, undefined>], undefined>;
readonly unit: v.UnionSchema<[v.LiteralSchema<import("./NumericControl").VariationUnit.Percent, undefined>, v.LiteralSchema<import("./NumericControl").VariationUnit.Absolute, undefined>], undefined>;
readonly value: v.NumberSchema<undefined>;
}, undefined>, undefined>;
}, undefined>], undefined>;
readonly frameRate: v.UnionSchema<[v.NumberSchema<undefined>, v.ObjectSchema<{
readonly value: v.NumberSchema<undefined>;
readonly variation: v.OptionalSchema<v.ObjectSchema<{
readonly type: v.UnionSchema<[v.LiteralSchema<import("./NumericControl").VariationType.Plus, undefined>, v.LiteralSchema<import("./NumericControl").VariationType.Minus, undefined>, v.LiteralSchema<import("./NumericControl").VariationType.PlusMinus, undefined>], undefined>;
readonly unit: v.UnionSchema<[v.LiteralSchema<import("./NumericControl").VariationUnit.Percent, undefined>, v.LiteralSchema<import("./NumericControl").VariationUnit.Absolute, undefined>], undefined>;
readonly value: v.NumberSchema<undefined>;
}, undefined>, undefined>;
}, undefined>], undefined>;
readonly intensity: v.UnionSchema<[v.NumberSchema<undefined>, v.ObjectSchema<{
readonly value: v.NumberSchema<undefined>;
readonly variation: v.OptionalSchema<v.ObjectSchema<{
readonly type: v.UnionSchema<[v.LiteralSchema<import("./NumericControl").VariationType.Plus, undefined>, v.LiteralSchema<import("./NumericControl").VariationType.Minus, undefined>, v.LiteralSchema<import("./NumericControl").VariationType.PlusMinus, undefined>], undefined>;
readonly unit: v.UnionSchema<[v.LiteralSchema<import("./NumericControl").VariationUnit.Percent, undefined>, v.LiteralSchema<import("./NumericControl").VariationUnit.Absolute, undefined>], undefined>;
readonly value: v.NumberSchema<undefined>;
}, undefined>, undefined>;
}, undefined>], undefined>;
readonly onRemove: v.FunctionSchema<undefined>;
readonly onSpawn: v.FunctionSchema<undefined>;
readonly opacityEasing: v.TupleSchema<[v.NumberSchema<undefined>, v.NumberSchema<undefined>, v.NumberSchema<undefined>, v.NumberSchema<undefined>], undefined>;
readonly opacityEnd: v.UnionSchema<[v.NumberSchema<undefined>, v.ObjectSchema<{
readonly value: v.NumberSchema<undefined>;
readonly variation: v.OptionalSchema<v.ObjectSchema<{
readonly type: v.UnionSchema<[v.LiteralSchema<import("./NumericControl").VariationType.Plus, undefined>, v.LiteralSchema<import("./NumericControl").VariationType.Minus, undefined>, v.LiteralSchema<import("./NumericControl").VariationType.PlusMinus, undefined>], undefined>;
readonly unit: v.UnionSchema<[v.LiteralSchema<import("./NumericControl").VariationUnit.Percent, undefined>, v.LiteralSchema<import("./NumericControl").VariationUnit.Absolute, undefined>], undefined>;
readonly value: v.NumberSchema<undefined>;
}, undefined>, undefined>;
}, undefined>], undefined>;
readonly opacityStart: v.UnionSchema<[v.NumberSchema<undefined>, v.ObjectSchema<{
readonly value: v.NumberSchema<undefined>;
readonly variation: v.OptionalSchema<v.ObjectSchema<{
readonly type: v.UnionSchema<[v.LiteralSchema<import("./NumericControl").VariationType.Plus, undefined>, v.LiteralSchema<import("./NumericControl").VariationType.Minus, undefined>, v.LiteralSchema<import("./NumericControl").VariationType.PlusMinus, undefined>], undefined>;
readonly unit: v.UnionSchema<[v.LiteralSchema<import("./NumericControl").VariationUnit.Percent, undefined>, v.LiteralSchema<import("./NumericControl").VariationUnit.Absolute, undefined>], undefined>;
readonly value: v.NumberSchema<undefined>;
}, undefined>, undefined>;
}, undefined>], undefined>;
readonly scaleEasing: v.TupleSchema<[v.NumberSchema<undefined>, v.NumberSchema<undefined>, v.NumberSchema<undefined>, v.NumberSchema<undefined>], undefined>;
readonly scaleEnd: v.UnionSchema<[v.NumberSchema<undefined>, v.ObjectSchema<{
readonly value: v.NumberSchema<undefined>;
readonly variation: v.OptionalSchema<v.ObjectSchema<{
readonly type: v.UnionSchema<[v.LiteralSchema<import("./NumericControl").VariationType.Plus, undefined>, v.LiteralSchema<import("./NumericControl").VariationType.Minus, undefined>, v.LiteralSchema<import("./NumericControl").VariationType.PlusMinus, undefined>], undefined>;
readonly unit: v.UnionSchema<[v.LiteralSchema<import("./NumericControl").VariationUnit.Percent, undefined>, v.LiteralSchema<import("./NumericControl").VariationUnit.Absolute, undefined>], undefined>;
readonly value: v.NumberSchema<undefined>;
}, undefined>, undefined>;
}, undefined>], undefined>;
readonly scaleStart: v.UnionSchema<[v.NumberSchema<undefined>, v.ObjectSchema<{
readonly value: v.NumberSchema<undefined>;
readonly variation: v.OptionalSchema<v.ObjectSchema<{
readonly type: v.UnionSchema<[v.LiteralSchema<import("./NumericControl").VariationType.Plus, undefined>, v.LiteralSchema<import("./NumericControl").VariationType.Minus, undefined>, v.LiteralSchema<import("./NumericControl").VariationType.PlusMinus, undefined>], undefined>;
readonly unit: v.UnionSchema<[v.LiteralSchema<import("./NumericControl").VariationUnit.Percent, undefined>, v.LiteralSchema<import("./NumericControl").VariationUnit.Absolute, undefined>], undefined>;
readonly value: v.NumberSchema<undefined>;
}, undefined>, undefined>;
}, undefined>], undefined>;
readonly spawnIntervalMs: v.UnionSchema<[v.NumberSchema<undefined>, v.ObjectSchema<{
readonly value: v.NumberSchema<undefined>;
readonly variation: v.OptionalSchema<v.ObjectSchema<{
readonly type: v.UnionSchema<[v.LiteralSchema<import("./NumericControl").VariationType.Plus, undefined>, v.LiteralSchema<import("./NumericControl").VariationType.Minus, undefined>, v.LiteralSchema<import("./NumericControl").VariationType.PlusMinus, undefined>], undefined>;
readonly unit: v.UnionSchema<[v.LiteralSchema<import("./NumericControl").VariationUnit.Percent, undefined>, v.LiteralSchema<import("./NumericControl").VariationUnit.Absolute, undefined>], undefined>;
readonly value: v.NumberSchema<undefined>;
}, undefined>, undefined>;
}, undefined>], undefined>;
}, undefined>;
readonly resetConfig: v.ObjectSchema<{
readonly durationMs: v.SchemaWithPipe<[v.NumberSchema<undefined>, v.ToMinValueAction<number, 0>]>;
readonly easing: v.TupleSchema<[v.NumberSchema<undefined>, v.NumberSchema<undefined>, v.NumberSchema<undefined>, v.NumberSchema<undefined>], undefined>;
readonly onResetStart: v.FunctionSchema<undefined>;
readonly onResetEnd: v.FunctionSchema<undefined>;
readonly onResetCancel: v.FunctionSchema<undefined>;
}, undefined>;
readonly spinnerConfig: v.ObjectSchema<{
readonly dampingCoefficient: v.SchemaWithPipe<[v.NumberSchema<undefined>, v.ToMinValueAction<number, 0>, v.ToMaxValueAction<number, 1>]>;
readonly initialAngle: v.SchemaWithPipe<[v.NumberSchema<undefined>, v.ToMinValueAction<number, 0>, v.ToMaxValueAction<number, number>]>;
readonly initialAngularVelocity: v.SchemaWithPipe<[v.NumberSchema<undefined>, v.ToMinValueAction<number, 0>]>;
readonly maxAngularVelocity: v.SchemaWithPipe<[v.NumberSchema<undefined>, v.ToMinValueAction<number, 0>]>;
readonly onMaxAngularVelocity: v.FunctionSchema<undefined>;
readonly onClick: v.FunctionSchema<undefined>;
readonly direction: v.UnionSchema<[v.LiteralSchema<"clockwise", undefined>, v.LiteralSchema<"antiClockwise", undefined>], undefined>;
}, undefined>;
readonly clickConfig: v.ObjectSchema<{
readonly angularVelocityPerClick: v.UnionSchema<[v.NumberSchema<undefined>, v.ObjectSchema<{
readonly value: v.NumberSchema<undefined>;
readonly variation: v.OptionalSchema<v.ObjectSchema<{
readonly type: v.UnionSchema<[v.LiteralSchema<import("./NumericControl").VariationType.Plus, undefined>, v.LiteralSchema<import("./NumericControl").VariationType.Minus, undefined>, v.LiteralSchema<import("./NumericControl").VariationType.PlusMinus, undefined>], undefined>;
readonly unit: v.UnionSchema<[v.LiteralSchema<import("./NumericControl").VariationUnit.Percent, undefined>, v.LiteralSchema<import("./NumericControl").VariationUnit.Absolute, undefined>], undefined>;
readonly value: v.NumberSchema<undefined>;
}, undefined>, undefined>;
}, undefined>], undefined>;
readonly onSpawn: v.FunctionSchema<undefined>;
readonly onRemove: v.FunctionSchema<undefined>;
readonly active: v.BooleanSchema<undefined>;
}, undefined>;
}, undefined>;
declare const VelocityBreakpointConfigsSchema: v.ArraySchema<v.ObjectSchema<{
readonly breakpoint: v.SchemaWithPipe<[v.NumberSchema<undefined>, v.ToMinValueAction<number, 0>, v.ToMaxValueAction<number, 1>]>;
readonly config: v.ObjectSchema<{
readonly scaleConfig: v.ObjectSchema<{
readonly onScaleChange: v.FunctionSchema<undefined>;
readonly onScaleEnd: v.FunctionSchema<undefined>;
readonly onScaleStart: v.FunctionSchema<undefined>;
readonly scale: v.SchemaWithPipe<[v.NumberSchema<undefined>,