Donuts API

Donuts

Extends Effect.

Factory Function

createDonuts(config?: DonutsConfig)

Methods

See Effect for the full method reference: mount(), start(), pause(), resume(), configure(), withFade(), and destroy().

---

DonutsConfig

interface DonutsConfig {
    background?: string;
    collisionPadding?: number;
    colors?: string[];
    count?: number;
    gradient?: boolean;
    mouseAvoidance?: boolean;
    mouseAvoidanceRadius?: number;
    mouseAvoidanceStrength?: number;
    radiusRange?: [number, number];
    repulsionStrength?: number;
    rotationSpeedRange?: [number, number];
    scale?: number;
    speedRange?: [number, number];
    thickness?: number;
}

Property	Type	Default	Description
background	string	'#a51955'	Canvas background fill color.
collisionPadding	number	20	Minimum spacing between donut edges in pixels.
colors	string[]	['#bd1961', '#da287c']	Fill colors for the donuts. Each donut picks a random color.
count	number	12	Number of donuts on screen.
gradient	boolean	false	When enabled, donuts are filled with a radial gradient.
mouseAvoidance	boolean	false	When enabled, donuts move away from the mouse cursor.
mouseAvoidanceRadius	number	150	Distance in pixels within which donuts are repelled from the cursor (before scale).
mouseAvoidanceStrength	number	0.03	How strongly donuts are repelled from the cursor. Higher = stronger avoidance.
radiusRange	[number, number]	[60, 90]	Outer radius range [min, max] in pixels (before scale).
repulsionStrength	number	0.02	How strongly donuts repel each other. Higher = snappier avoidance.
rotationSpeedRange	[number, number]	[0.0005, 0.002]	Rotation speed range [min, max] in radians per frame.
scale	number	1	Scales donut radius, speed, and collision padding proportionally.
speedRange	[number, number]	[0.15, 0.6]	Movement speed range [min, max] in pixels per frame (before scale).
thickness	number	0.39	Ring thickness as a fraction of the outer radius (0–1).