open-index/open-npm huggingface dataset:
npm package: @lottie-animation-community/lottie-specs
Description: JS bindings to Lottie specs
Author: Lottie Animation Community
Latest version: 0.3.2

Lottie Specs
============

JS bindings for the Lottie specs


## Usage

Node:

```js
// Imports
const ajv2020 = require("ajv/dist/2020");
const {LottieValidator, get_schema_path} = require("src/validator-node.js");

// Data
const data = {...}; // Lottie data to validate

// Create validator
const schema = JSON.parse(fs.readFileSync(get_schema_path(), "utf8"));
const validator = new LottieValidator(ajv2020.Ajv2020, schema);
// Get errors
const errors = validator.validate(data);
```

Browser:
```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/ajv/8.17.1/ajv2020.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@lottie-animation-community/lottie-specs/src/validator.js"></script>

<script>
    // Data
    const data = {...}; // Lottie data to validate

    // You'll need to fetch the schema
    fetch(get_schema_url()).then( r => r.json() ).then(schema => {
        const validator = new LottieValidator(ajv2020.Ajv2020, schema);
        const errors = validator.validate(data);
    });
</script>
```

## Configuration

LottieValidator takes an optional second argument for configuration.
These settings are:

* `name_paths`: whether to extract the user specified names from JSON path (default: false) 
* `docs_url`: Base url for information on errors (default: "https://lottie.github.io/lottie-spec/latest")

### Returned Errors

Returned error objects have the following properties:

* `type`: `"error"` or `"warning"`
* `warning`: (only on warnings)
    * `"type"` whether it's an unknown object type
    * `"property"` whether it's an unknown property
* `message`: Human readable message
* `path`: JSON path to the object causing the error (empty string refers to the top-level object)
* `path_names`: User specified list of names from each level where they are available in the JSON path (if enabled)
* `name`: Name of the object type as per the schema
* `docs`: Link to the specs describing the object

By default `LottieValidator.validate` returns warnings, to suppress them pass `false` as second parameter.


## Links

* NPM: https://www.npmjs.com/package/@lottie-animation-community/lottie-specs
* GitHub: https://github.com/lottie/lottie-specs-js

## Publishing the package

```bash
npm login
npm publish --access public
```
npm package: @lottiefiles/commitlint-config
Description: Shared Commitlint config for LottieFiles projects
Author: LottieFiles
Latest version: 2.0.0

# @lottiefiles/commitlint-config

> Shared configuration for [commitlint](https://github.com/conventional-changelog/commitlint).

## Table of contents

* [Usage](#usage)
* [Changelog](#changelog)

## Usage

1. Install to the project root with pnpm.

```sh
pnpm add -DW @lottiefiles/commitlint-config
```

2. Create a `commitlint.config.cjs` file in the project with the contents:

```js
module.exports = { extends: ['@lottiefiles/commitlint-config'] };
```

## Changelog

See [CHANGELOG.md](CHANGELOG.md) for the latest changes.
npm package: @lottiefiles/last-builder
Description: Composable functions to easily build last structures
Author: LottieFiles
Latest version: 1.15.0

# last-builder

![npm](https://img.shields.io/npm/v/@lottiefiles/last-builder)
![npm bundle size](https://img.shields.io/bundlephobia/minzip/%40lottiefiles%2Flast-builder)
![npm](https://img.shields.io/npm/dt/%40lottiefiles/last-builder)
![npm](https://img.shields.io/npm/l/@lottiefiles/last-builder)

Use composable functions to build up a [last] structure

## Use

```sh
yarn add @lottiefiles/last-builder
```

```ts
import { at, el, ob, pt, rt } from '@lottiefiles/last-builder';

const output = rt([
    at('v', 'version', pt('4.8.0')),
    el(
    'meta',
    'metadata',
    ob('custom', [
        at('a', 'author', pt('LottieFiles')),
        at('d', 'description', pt('A lottie animation.')),
        at('data', 'custom', pt(2)),
    ]),
    ),
]);
```

`output` will equal

```javascript
{
    type: 'root',
    title: 'animation',
    hasExpressions: false,
    children: [
    {
        type: 'attribute',
        key: 'v',
        title: 'version',
        children: [
        {
            type: 'primitive',
            value: '4.8.0',
        },
        ],
    },
    {
        type: 'element',
        key: 'meta',
        title: 'metadata',
        children: [
        {
            type: 'object',
            title: 'custom',
            children: [
            {
                type: 'attribute',
                key: 'a',
                title: 'author',
                children: [
                {
                    type: 'primitive',
                    value: 'LottieFiles',
                },
                ],
            },
            {
                type: 'attribute',
                key: 'd',
                title: 'description',
                children: [
                {
                    type: 'primitive',
                    value: 'A lottie animation.',
                },
                ],
            },
            {
                type: 'attribute',
                key: 'data',
                title: 'custom',
                children: [
                {
                    type: 'primitive',
                    value: 2,
                },
                ],
            },
            ],
        },
        ],
    },
    ]
}
```

## Legal

[License](license) © [LottieFiles][]

[last]: https://github.com/LottieFiles/relottie/tree/main/packages/last

[LottieFiles]: https://github.com/LottieFiles
npm package: @lottiefiles/lottie-js
Description: Lottie JSON model for Javascript/Typescript
Author: Jawish Hameed
Latest version: 0.4.2

# lottie-js

An object model for representing the Lottie JSON structure.

This library was created to make interacting with the Lottie JSON object simpler. The library consists of methods to map
the Lottie JSON to the object model and interact with properties as well as manipulate them. The goal is to fully map
the Lottie object model and add in enough helper methods to the library such that Lottie manipulation can be made easier
without having to learn the entire complex structure of a Lottie file.

### Full Documentation is available here [Click me](https://docs.lottiefiles.com/lottie-js/)

### Usage

1. Install

```
yarn add @lottiefiles/lottie-js@0.0.1
```

2. Use

```
import { Animation } from '@lottiefiles/lottie-js';

async function loadAnimation() {
  // Create Lottie instance
  // (you can also use Animation.fromJSON method if you already have the Lottie JSON loaded)
  const anim = await Animation.fromURL('https://assets1.lottiefiles.com/packages/lf20_u4j3xm6r.json');

  // Print some data of the animation
  console.log('Frame Rate', anim.frameRate);
  console.log('Number of Layers', anim.layers.length);
  console.log(anim.getColors());

  // Manipulate animation
  anim.name = 'Woohoo';
  anim.width = 512;
  anim.height = 512;

  // Get the new JSON
  const woohooLottie = JSON.stringify(anim);
  console.log(woohooLottie);
}

Promise.resolve(loadAnimation());
```

### Documentation &amp; API

---

The documenting system used is [TypeDoc](https://typedoc.org/).

Clone the repo and run the yarn command: `yarn docs` to generate the docs to browse locally.

The generated documentation is placed in the docs/ folder.

### Testing

---

The testing system used is [Jest](https://jestjs.io/) and each file should have an accompanying test suite for
functional and integration tests.

### Development

---

Development work on the toolkit requires Nodejs and Yarn.

#### Guidelines

- Use [defensive programming](https://en.wikipedia.org/wiki/Defensive_programming) techniques: Ensure type and range of
  input values, cast values to native representation whenever possible, etc.
- Refrain from using external dependencies: Discuss before adding a dependency. Check with
  [Bundlephobia](https://bundlephobia.com/) for package size and dependencies when choosing one.
- Use code formatting in the IDE using the given eslint+prettier configs.
- Write tests to cover all functions and code branches with valid and invalid values.

#### Setting up

```
git clone https://github.com/LottieFiles/lottie-js

cd lottie-js

yarn install
```

#### Running test suite

```
yarn test
```

#### Building

```
yarn build
```
npm package: @lottiefiles/prettier-config
Description: Shared Prettier config for LottieFiles projects
Author: LottieFiles
Latest version: 3.0.0

# @lottiefiles/prettier-config

> Shared Prettier configuration.

## Table of contents

* [Installation](#installation)
* [Usage](#usage)
* [Customizing configuration](#customizing-configuration)
* [Integrations](#integrations)
  * [IDE Integration](#ide-integration)
  * [Lint-Staged Integration](#lint-staged-integration)
* [Changelog](#changelog)

## Installation

#### 1. Install plugin and dependencies.

Install Prettier and this plugin by running:

```sh
# Normal repository? Install in the project root.
pnpm add -D prettier @lottiefiles/prettier-config

# Monorepo? Install Prettier in the project root workspace.
pnpm add -DW prettier @lottiefiles/prettier-config
```

#### 2. Create configuration file

Create a `prettier.config.cjs` file in your project root with the contents below:

```js
module.exports = {
  ...require('@lottiefiles/prettier-config'),
};
```

## Usage

Create a npm script entry in the root package.json as follows:

```json
{
  "scripts": {
    "format": "prettier --loglevel=warn --no-editorconfig --write ."
  }
}
```

You can then run `pnpm format` to format your project using the command line or in CI pipelines.

You can use the editor integration options described below to get your files formatted as you save them in the IDE.

## Customizing configuration

*Do this only if absolutely required*

You can override the company-wide base configuration by setting values in the `prettier.config.cjs` file.

```js
module.exports = {
  ...require('@lottiefiles/prettier-config'),

  // Overrides:
  semi: false,
};
```

## Integrations

### IDE Integration

Read the [Editor Integration documentation](https://prettier.io/docs/en/editors.html) at the
[Prettier](https://prettier.io) website for how to integrate with all IDEs.

#### VS Code

1. Install the `prettier-vscode`
   [extension from the marketplace](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode).
2. Add the following content to the `settings.json` file:

```json
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}
```

Note: If you prefer to apply the configuration to a project only, add the settings content above to a file named
`settings.json` file in the `.vscode` folder at the root of your project. Create the file if it does not exist.

### Lint-Staged Integration

Integrate formatting code before code is commited using git pre-commit hook events via lint-staged. (See docs on how to
setup lint-staged)

*lint-staged.config.cjs*

```js
module.exports = {
  '*': 'prettier --plugin=prettier-plugin-package --ignore-unknown --loglevel=warn --no-editorconfig --write',
};
```

## Changelog

See [CHANGELOG.md](CHANGELOG.md) for the latest changes.
npm package: @lottiefiles/relottie-metadata
Description: relottie plugin to extract Lottie metadata
Author: LottieFiles
Latest version: 1.15.0

# relottie-metadata

![npm](https://img.shields.io/npm/v/@lottiefiles/relottie-metadata)
![npm](https://img.shields.io/npm/dt/%40lottiefiles/relottie-metadata)
![npm](https://img.shields.io/npm/l/@lottiefiles/relottie-metadata)

A [relottie] plugin to extract Lottie metadata from the document and store them in vfile.data.

## Use

```sh
yarn add @lottiefiles/relottie-metadata
```

```ts
import relottieParse, { type ParseFileData } from '@lottiefiles/relottie-parse';
import relottieStringify, { type StringifyFileData } from '@lottiefiles/relottie-stringify';
import relottieMetadata, { type MetadataFileData } from '@lottiefiles/relottie-metadata';
import { unified } from 'unified';

type FileData = ParseFileData & StringifyFileData & MetadataFileData

// The Lottie source: __fixtures__/features/auto-orient.json
const lottieJson = '...';

const vfile = unified()
  .use(relottieParse)
  .use(relottieMetadata)
  .use(relottieStringify)
  .processSync(lottieJson);

const data = vfile.data as FileData
const output = data['metadata']
```

`output`:

```
{
  "colors": Set {
    "#3250b0",
  },
  "fileSize": {
    "bytes": 2653,
    "formated": {
      "exponent": 1,
      "symbol": "KiB",
      "unit": "KiB",
      "value": "2.59",
    },
  },
  "framerate": 60,
  "frames": 180,
  "generator": "Glaxnimate 0.4.6-26-g7b05e75c",
  "height": 512,
  "inPoint": 0,
  "outPoint": 180,
  "version": "5.5.7",
  "width": 512,
}
...
```

## FileData

```typescript
export interface MetadataFileData extends Data {
  metadata: {
    /**
     * Set of hex colors used in the animation.
     */
    colors: Set<string>;
    /** *
     * Size of the Lottie JSON
     */
    fileSize?: FileSizeValue;
    /**
     * Framerate in frames per second
     */
    framerate: number;
    /**
     * Total number of frames in the animation.
     */
    frames: number;
    /**
     * Generator of the animation.
     */
    generator: string;
    /**
     * Height of the animation.
     */
    height: number;
    /**
     * Which frame the animation starts at (usually 0)
     */
    inPoint: number;
    /**
     * Which frame the animation stops/loops at, which makes this the duration in frames
     */
    outPoint: number;
    /**
     * Version of the Lottie JSON.
     */
    version: string;
    /**
     * Width of the animation.
     */
    width: number;  
  };
}
```

## Start

1. `pnpm install`
2. `pnpm ts-node playground.ts` for testing playground environment (if you are in the root folder you have to enter the package directory `cd packages/relottie-metadata`)
3. for testing `pnpm test`

## Legal

[MIT](LICENSE) © [LottieFiles](https://www.lottiefiles.com)

<!-- Definitions -->

[relottie]: https://github.com/LottieFiles/relottie

[unified]: https://github.com/unifiedjs/unified
npm package: @lottiefiles/relottie-stringify
Description: relottie plugin to add support for serializing LAST
Author: LottieFiles
Latest version: 1.15.0

# relottie-stringify

![npm](https://img.shields.io/npm/v/@lottiefiles/relottie-stringify)
![npm bundle size](https://img.shields.io/bundlephobia/minzip/%40lottiefiles%2Frelottie-stringify)
![npm](https://img.shields.io/npm/dt/%40lottiefiles/relottie-stringify)
![npm](https://img.shields.io/npm/l/@lottiefiles/relottie-stringify)

Compiler for [unified]. Serializes [last] syntax trees to LottieJSON

## Use

```sh
yarn add @lottiefiles/relottie-stringify
```

```ts
import { unified } from 'unified';
import { visit } from 'unist-util-visit';

import type { Attribute } from '@lottiefiles/last';
import relottieParse from '@lottiefiles/relottie-parse';
import relottieStringify from '@lottiefiles/relottie-stringify';

const processor = unified().use(relottieParse).use(relottieStringify);

const tree = processor.parse('{"v":"5.5.7"}');

visit(tree, 'attribute', (node: Attribute) => {
  node.key = 'new_v';
});

const output = processor.stringify(tree);
```

`output` will equal

```json
{"new_v":"5.5.7"}
```

## dotLottie

You can use [dotLottie.js] for converting a LottieJSON into `.lottie` format

## Security

As last properties can have [expressions][], and improper use of **last** can open you up to cross-site scripting [cross-site scripting (XSS)][XSS]. Carefully assess each plugin and the risks involved in using them.

## Contribute

Any contributions are welcome.

## Acknowledgments

*   [unified][]
*   [momoa][]
*   [lottie-docs][lottie-docs]

## Legal

[License](license) © [LottieFiles][lottiefiles]

[last]: https://github.com/LottieFiles/relottie/tree/main/packages/last

[momoa]: https://github.com/humanwhocodes/momoa

[LottieFiles]: https://github.com/LottieFiles

[lottie-docs]: https://lottiefiles.github.io/lottie-docs/

[unified]: https://github.com/unifiedjs/unified

[dotLottie.js]: https://github.com/dotlottie/dotlottie-js

[expressions]: https://lottiefiles.github.io/lottie-docs/expressions/#expressions

[xss]: https://en.wikipedia.org/wiki/Cross-site_scripting
npm package: @lottiefiles/relottie-style
Description: relottie transformer for styling lottie animation using lss
Author: LottieFiles
Latest version: 0.5.0

# relottie-style

`relottie-style` is a plugin from the lottie-styler suite, integrating with relottie. It empowers developers with a "CSS-in-JS" inspired approach, enabling dynamic customization and theming of Lottie animations via Lottie Style Sheets (LSS).

## Features

- CSS-in-JS inspired approach for Lottie animations.
- Easy integration with relottie.
- Support for a variety of Lottie properties.

## Pre-requisites

- [relottie](https://github.com/LottieFiles/relottie)
- [Node.js](https://nodejs.org/en/) v18.0.0 or higher

## Installation

```sh
npm install @lottiefiles/relottie
npm install @lottiefiles/relottie-style
```

## Usage

```js
import style from '@lottiefiles/relottie-style';
import {relottie} from '@lottiefiles/relottie';
import lottie from './lottie.json';

const lss = {
    "SolidColorLayer": {
        "fill-color": "blue"
    },
    //... more styles
};

relottie()
  .use(style, { lss })
  .process(JSON.stringify(lottieJSON))
  .then(({ value }) => {
    const styledLottieJSON = JSON.parse(value);
  });
```

## Lottie Style Sheets (LSS)

To find out more about Lottie Style Sheets, check out the [LSS documentation](:\//TODO: Add link)

### Supported Selectors

Lottie Style Sheets use selectors to target specific layers or shapes for styling. Here are the primary selector categories:

#### 1. ID Selector

Targets layers or shapes by their ID.

```json
"#my-fill-shape" : {
    "fill-color": "red"
}
```

#### 2. Class Selector

Targets layers or shapes by their class.

```json
".my-shape": {
    "fill-color": "red"
}
```

#### 3. Type Selector

Targets layers or shapes by their type. Supported types are `FillShape`, `StrokeShape`, `SolidColorLayer`, `ImageLayer`, `GradientFillShape`, and `GradientStrokeShape`.

```json
"FillShape": {
    "fill-color": "red"
}
```

#### 4. Attribute Selector

Targets layers or shapes by their attributes like `name`, `id`, and `class`.

```json
"[name="my-fill-shape"]": {
    "fill-color": "red"
}
```

### Supported Properties

- **fill-color:** Defines the color of a `FillShape`, `SolidColorLayer` or similar in standard CSS format.
- **fill-rule:** Determines the fill rule for a shape (e.g., `evenodd`).
- **opacity:** Adjusts transparency, ranging from 0.0 (transparent) to 1.0 (opaque).
- **stroke-color:** Sets the color of a `StrokeShape` or similar. Supports plain colors or linear/radial gradients (e.g., `linear-gradient(red, green, blue)`).
- **stroke-width:** Denotes the stroke width.
- **visibility:** Toggles visibility ('visible' by default, 'hidden' to hide).
- **src:** Specifies the URL of an image asset, typically used with `ImageLayer`.

## Contributing

We employ changesets for our changelog. When making amendments, include a changeset:

```
pnpm changeset add
```

Then commit and initiate a pull request.
npm package: @lottiefiles/remark-preset
Description: Shared Remark config for LottieFiles projects
Author: LottieFiles
Latest version: 1.0.0

# @lottiefiles/remark-preset

> Shared preset for Remark for formatting and linting Markdown files.

## Table of contents

* [Installation](#installation)
  * [Install Dependencies](#install-dependencies)
* [Usage](#usage)
* [Changelog](#changelog)

## Installation

Install Remark CLI and this preset.

```
pnpm add -D remark-cli @lottiefiles/remark-preset
```

### Install Dependencies

#### Peer Dependencies

| Package Name | Version |
| ------------ | ------- |
| puppeteer    | \*      |
| remark       | \*      |

#### Optional Dependencies

| Package Name                | Version |
| --------------------------- | ------- |
| install-chrome-dependencies | \*      |

## Usage

1. Create a `.remarkrc.mjs` file in the project root and add the following content:

```js
import remarkPreset from '@lottiefiles/remark-preset';
 
export default remarkPreset;
```

2. Create a `.remarkignore` file in the project and add the following content:

```
# Build artifacts
build/
dist/
artifacts/

# Changelog
CHANGELOG.md

# IDE related
.idea/
.history/

# Package management
node_modules/
.yarn/

# Testing
__fixtures__
coverage/
reports/

# Temporary or local data
temp/
tmp/
```

## Changelog

See [CHANGELOG.md](CHANGELOG.md) for the latest changes.
npm package: @lottiefiles/svelte-lottie-player
Description: Lottie animation player component for Svelte
Author: Jawish Hameed
Latest version: 0.3.1

# Svelte Lottie Player

![npm (scoped)](https://img.shields.io/npm/v/@lottiefiles/svelte-lottie-player?style=flat-square)
![NPM](https://img.shields.io/npm/l/@lottiefiles/svelte-lottie-player?style=flat-square)
![David](https://img.shields.io/david/LottieFiles/svelte-lottie-player?style=flat-square)
![npm bundle size (scoped)](https://img.shields.io/bundlephobia/min/@lottiefiles/svelte-lottie-player?style=flat-square)

> Lottie player component for use with Svelte.

This provides a Lottie player using the lottie-web library, adding a control toolbar, render graph and other handy
configs for viewing Lottie animations.

![Screenshot](assets/screenshot1.png?raw=true)

## Features

- Configuration of lottie-web via props
- Control toolbar with play, pause, stop, progress track with seeker, looping
- Render graph for viewing frame render times

## Table of Contents

- [Getting started](#getting-started)
- [Installation](#installation)
- [Usage](#usage)

## Demos

- [Component Storybook](https://lottiefiles.github.io/svelte-lottie-player/)
- [Basic usage on Svelte REPL](https://svelte.dev/repl/c7c774dba1464389af5d738a9e486658)

## Installation

With `yarn`:

```bash
yarn add @lottiefiles/svelte-lottie-player
```

With `npm`:

```bash
npm install --save @lottiefiles/svelte-lottie-player
```

## Usage

Basic steps for use in a Svelte project:

```html
<!-- App.svelte -->
<script>
  import { LottiePlayer } from '@lottiefiles/svelte-lottie-player';

  let controlsLayout = [
    'previousFrame',
    'playpause',
    'stop',
    'nextFrame',
    'progress',
    'frame',
    'loop',
    'spacer',
    'background',
    'snapshot',
    'zoom',
    'info',
  ];
</script>

<LottiePlayer
  src="https://assets2.lottiefiles.com/packages/lf20_wxUJzo.json"
  autoplay="{true}"
  loop="{true}"
  controls="{true}"
  renderer="svg"
  background="transparent"
  height="{600}"
  width="{600}"
  controlsLayout="{controlsLayout}"
/>
```

[examples-folder-url]: https://github.com/LottieFiles/svelte-lottie-player/tree/master/examples
[examples-basic]: https://github.com/LottieFiles/svelte-lottie-player/tree/master/examples/basic
npm package: @lottiefiles/tgskit
Description: Toolkit for dealing with Telegram Stickers and Bodymovin/Lottie animations.
Author: Jawish Hameed
Latest version: 0.0.7

# Telegram Sticker Kit by LottieFiles

Toolkit for dealing with Telegram Stickers and Bodymovin/Lottie animations

## Installation

#### In HTML, import from CDN or from the local Installation:

##### Lottie Player:
- Import from CDN.
```html
<script src="https://unpkg.com/@lottiefiles/tgskit@0.0.4/dist/tgskit.js"></script>
```

- Import from local node_modules directory.
```html
<script src="/node_modules/@lottiefiles/tgskit/dist/tgskit.js"></script>
```

#### In Javascript or TypeScript:

1. Install package using npm or yarn.
```shell
npm install --save @lottiefiles/tgskit
```

2. Import package in your code.
```javascript
import { TGSKit } from '@lottiefiles/tgskit';
```

## Usage

```js
const anim = new TGSKit();

anim.load('http://localhost:1234/bodymovin.json')
  .then(() => {
    const errors = anim.validate();

    if (errors.length === 0) {
      anim.download('sticker');
    } else {
      console.log('Given JSON does not meet requirements for a TGS:');
      console.log(errors);
    }
  })
  .catch(err => {
    console.log('There was an error loading the src resource', err);
  });
```

## Docs

TGSKit class documentation is available in the /docs/ directory.
npm package: @lottiepro-web/dotlottie-core
Description: Core functionality for dotLottie animation format support
Author: anaskhan28
Latest version: 0.0.1

# @lottiepro-web/dotlottie-core

Core functionality for dotLottie animation format support.

## Installation

```bash
npm install @lottiepro-web/dotlottie-core
```

## Usage

```typescript
import { DotLottiePlayer } from '@lottiepro-web/dotlottie-core';

const container = document.getElementById('lottie-container');
const player = new DotLottiePlayer(container);

// Load from URL
await player.loadFromDotLottie('path/to/animation.lottie');

// Load from buffer
const response = await fetch('path/to/animation.lottie');
const buffer = await response.arrayBuffer();
await player.loadFromDotLottieBuffer(buffer);

// Control playback
player.play();
player.pause();
player.stop();

// Set theme (if available)
player.setTheme('dark');

// Set marker (if available)
player.setMarker('start');
```

## Features

- Load dotLottie (.lottie) files
- Support for themes, markers, and states
- Full animation control
- TypeScript support

## License

MIT
npm package: @lottiepro-web/dotlottie-react
Description: React components for dotLottie animation format
Author: anaskhan28
Latest version: 0.0.1

# @lottiepro-web/dotlottie-react

React components for dotLottie animation format.

## Installation

```bash
npm install @lottiepro-web/dotlottie-react
```

## Usage

```tsx
import React from 'react';
import { DotLottiePlayer } from '@lottiepro-web/dotlottie-react';

function App() {
  return (
    <div>
      <DotLottiePlayer
        src="path/to/animation.lottie"
        style={{ width: 300, height: 300 }}
        autoplay
        loop
      />
    </div>
  );
}

export default App;
```

## Props

- `src`: Path to the .lottie file
- `autoplay`: Whether to start playing automatically
- `loop`: Whether to loop the animation
- `speed`: Playback speed (default: 1)
- `theme`: Theme to apply (if available)
- `marker`: Marker to start from (if available)
- `style`: CSS styles for the container
- `className`: CSS class name for the container

## Features

- React component wrapper for dotLottie
- Full TypeScript support
- All core functionality available
- Easy to use props interface

## License

MIT
npm package: @lottiepro-web/dotlottie-vue
Description: Vue components for dotLottie animation format
Author: anaskhan28
Latest version: 0.0.1

# @lottiepro-web/dotlottie-vue

Vue components for dotLottie animation format.

## Installation

```bash
npm install @lottiepro-web/dotlottie-vue
```

## Usage

```vue
<template>
  <div>
    <DotLottiePlayer
      :src="animationSrc"
      :style="{ width: '300px', height: '300px' }"
      :autoplay="true"
      :loop="true"
    />
  </div>
</template>

<script setup lang="ts">
import { DotLottiePlayer } from '@lottiepro-web/dotlottie-vue';

const animationSrc = 'path/to/animation.lottie';
</script>
```

## Props

- `src`: Path to the .lottie file
- `autoplay`: Whether to start playing automatically
- `loop`: Whether to loop the animation
- `speed`: Playback speed (default: 1)
- `theme`: Theme to apply (if available)
- `marker`: Marker to start from (if available)
- `style`: CSS styles for the container
- `class`: CSS class name for the container

## Features

- Vue component wrapper for dotLottie
- Full TypeScript support
- All core functionality available
- Easy to use props interface

## License

MIT