cm-ricochet/dist/index.d.ts

Creates a ricochet effect for an element inside a container.

interface RicochetParams {
    /**
     * The container element where the item will bounce.
     */
    container: HTMLElement;
    /**
     * The element that moves and bounces inside the container.
     */
    item: HTMLElement;
    /**
     * Horizontal movement speed in pixels per second.
     * Default `370`.
     */
    horizontalSpeed?: number;
    /**
     * Vertical movement speed in pixels per second.
     * Default is `200`.
     */
    verticalSpeed?: number;
    /**
     * The initial direction the item moves in.
     * Options: "bottom-right", "bottom-left", "top-right", "top-left".
     * Default is `"bottom-right"`.
     */
    initialDirection?: InitialDirection;
    /**
     * Callback fired when the item hits any border.
     */
    onHitBorder?: () => void | Promise<void>;
    /**
     * Callback fired when the item hits the left border.
     */
    onHitLeft?: () => void | Promise<void>;
    /**
     * Callback fired when the item hits the right border.
     */
    onHitRight?: () => void | Promise<void>;
    /**
     * Callback fired when the item hits the top border.
     */
    onHitTop?: () => void | Promise<void>;
    /**
     * Callback fired when the item hits the bottom border.
     */
    onHitBottom?: () => void | Promise<void>;
}
type InitialDirection = ("bottom-right" | "bottom-left" | "top-right" | "top-left");

/**
 * Creates a ricochet effect on an element (item) inside a container (container).
 * Pauses automatically if the tab/window is hidden, and resumes when visible.
 * @returns a function to stop the ricochet.
 */
declare const startRicochet: ({ container, item, horizontalSpeed, verticalSpeed, initialDirection, onHitBorder, onHitLeft, onHitRight, onHitTop, onHitBottom }: RicochetParams) => () => void;

export { startRicochet };