# @types/granim

> TypeScript definitions for granim

Latest version **2.0.4** (published 2023-11-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install @types/granim
pnpm add @types/granim
yarn add @types/granim
bun add @types/granim
```

## Health

**Score 40/100 (D)** — status: abandoned.

Positive: has types; no vulnerabilities; popular repo; extremely popular.

Warnings: low downloads; no esm support.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 2.0.4 |
| Published | 2023-11-07 |
| First published | 2021-10-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 5.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 51375 |
| Maintainers | types |

## Links

- npm: https://www.npmjs.com/package/@types/granim
- Repository: https://github.com/DefinitelyTyped/DefinitelyTyped
- Homepage: https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/granim
- npm.io page: https://npm.io/package/@types/granim

## Recent versions

- 2.0.4 (latest) — 2023-11-07
- 2.0.1 (ts3.9) — 2022-03-12
- 2.0.0 (ts3.7) — 2021-10-06
- 2.0.3 — 2023-10-18
- 2.0.2 — 2023-09-20

## README

# Installation
> `npm install --save @types/granim`

# Summary
This package contains type definitions for granim (https://github.com/sarcadass/granim.js).

# Details
Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/granim.
## [index.d.ts](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/granim/index.d.ts)
````ts
export as namespace Granim;

declare class Granim {
    constructor(options: Granim.Options);
    play(): void;
    pause(): void;
    clear(): void;
    changeState(stateName: string): void;
    changeDirection(directionName: string): void;
    changeBlendingMode(blendingModeName: string): void;
    destroy(): void;
}
declare namespace Granim {
    interface OnGradientChangeObject {
        activeState: string;
        colorsFrom: [string, string];
        colorsTo: [string, string];
        isLooping: boolean;
    }

    interface Options {
        element: string | HTMLCanvasElement;
        name?: string;
        elToSetClassOn?: string;
        direction?: "diagonal" | "left-right" | "top-bottom" | "radial" | "custom";
        customDirection?: { x0: string; y0: string; x1: string; y1: string };
        isPausedWhenNotInView?: boolean;
        scrollDebounceThreshold?: number;
        stateTransitionSpeed?: number;
        defaultStateName?: string;
        states: { [stateName: string]: State };
        image?: Image;
        onStart?: () => void;
        onGradientChange?: (colorDetails: OnGradientChangeObject) => void;
        onEnd?: () => void;
    }

    interface Gradient {
        color: string;
        pos: number;
    }

    interface State {
        gradients: Array<string[] | Gradient[]>;
        transitionSpeed?: number;
        loop?: boolean;
    }

    type StretchMode = "none" | "stretch" | "stretch-if-smaller" | "stretch-if-bigger";

    interface Image {
        source: string;
        position?: ["left" | "center" | "right", "top" | "center" | "bottom"];
        stretchMode?: [StretchMode, StretchMode];
        blendingMode?: string;
    }
}

export = Granim;

````

### Additional Details
 * Last updated: Tue, 07 Nov 2023 03:09:37 GMT
 * Dependencies: none

# Credits
These definitions were written by [Raiper34](https://github.com/Raiper34).

---
_Source: https://npm.io/package/@types/granim · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._