AI prompts
base on JavaScript animation engine # Anime.js
<p align="center">
<picture align="center">
<source media="(prefers-color-scheme: dark)" srcset="./assets/images/animejs-v4-logo-animation-dark.gif">
<img align="center" alt="Anime.js V4 logo animation" src="./assets/images/animejs-v4-logo-animation.gif" width="560">
</picture>
</p>
<p align="center">
<strong>
<em>Anime.js</em> is a fast, multipurpose and lightweight JavaScript animation library with a simple, yet powerful API.<br>
It works with CSS properties, SVG, DOM attributes and JavaScript Objects.
</strong>
</p>
<p align="center">
<img alt="NPM Downloads" src="https://img.shields.io/npm/dm/animejs?style=flat-square&logo=npm">
<img alt="jsDelivr hits (npm)" src="https://img.shields.io/jsdelivr/npm/hm/animejs?style=flat-square&logo=jsdeliver">
<img alt="GitHub Sponsors" src="https://img.shields.io/github/sponsors/juliangarnier?style=flat-square&logo=github">
</p>
## Usage
Anime.js V4 works by importing ES modules like so:
<table>
<tr>
<td>
```javascript
import {
animate,
stagger,
} from 'animejs';
animate('.square', {
x: 320,
rotate: { from: -180 },
duration: 1250,
delay: stagger(65, { from: 'center' }),
ease: 'inOutQuint',
loop: true,
alternate: true
});
```
</td>
<td>
<img align="center" alt="Anime.js code example" src="./assets/images/usage-example-result.gif">
</td>
</tr>
</table>
## V4 Documentation
The full documentation is available [here](https://animejs.com/documentation).
## V3 Migration guide
You can find the v3 to v4 migration guide [here](https://github.com/juliangarnier/anime/wiki/Migrating-from-v3-to-v4).
## NPM development scripts
First, run `npm i` to install all the necessary packages.
Then, execute the following scripts with `npm run <script>`.
| script | action |
| ------ | ------ |
| `dev` | Watch any changes in `src/` and compiles the esm version to `lib/anime.esm.js` |
| `dev-types` | Same as `dev`, but also run TypeScript and generate the `types/index.d.ts` file |
| `build` | Generate types definition and compiles ESM / UMD / IIFE versions to `lib/` |
| `test-browser` | Start a local server and start all browser related tests |
| `test-node` | Start all Node related tests |
| `open-examples` | Start a local server to browse the examples locally |
## Our sponsors
Anime.js is 100% free and is only made possible with the help of our sponsors.
Help the project become sustainable by sponsoring us on <a target="_blank" href="https://github.com/sponsors/juliangarnier">GitHub Sponsors</a>.
### Platinum sponsors
<table>
<tr>
<td>
<a target="_blank" href="https://huly.io/?ref=animejs">
<picture>
<source media="(prefers-color-scheme: dark)" srcset="./assets/sponsors/huly-logomark.svg">
<img align="center" src="./assets/sponsors/huly-logomark-dark.svg" width="128">
</picture>
</a>
</td>
<td>
<a target="_blank" href="https://ice.io/?ref=animejs">
<picture>
<source media="(prefers-color-scheme: dark)" srcset="./assets/sponsors/ice-open-network-logomark.svg">
<img align="center" src="./assets/sponsors/ice-open-network-logomark-dark.svg" width="128">
</picture>
</a>
</td>
<td>
<a target="_blank" href="https://github.com/sponsors/juliangarnier">
<picture>
<source media="(prefers-color-scheme: dark)" srcset="./assets/sponsors/placeholder.svg">
<img align="center" src="./assets/sponsors/placeholder-dark.svg" width="128">
</picture>
</a>
</td>
</tr>
<tr>
<td align="center">
<a target="_blank" href="https://huly.io/?ref=animejs">Huly</a>
</td>
<td align="center">
<a target="_blank" href="https://ice.io/?ref=animejs">Ice Open Network</a>
</td>
<td align="center">
<a target="_blank" href="https://github.com/sponsors/juliangarnier">Your logo here</a>
</td>
</tr>
</table>
© [Julian Garnier](http://juliangarnier.com) | [MIT License](LICENSE.md)", Assign "at most 3 tags" to the expected json: {"id":"6140","tags":[]} "only from the tags list I provide: [{"id":77,"name":"3d"},{"id":89,"name":"agent"},{"id":17,"name":"ai"},{"id":54,"name":"algorithm"},{"id":24,"name":"api"},{"id":44,"name":"authentication"},{"id":3,"name":"aws"},{"id":27,"name":"backend"},{"id":60,"name":"benchmark"},{"id":72,"name":"best-practices"},{"id":39,"name":"bitcoin"},{"id":37,"name":"blockchain"},{"id":1,"name":"blog"},{"id":45,"name":"bundler"},{"id":58,"name":"cache"},{"id":21,"name":"chat"},{"id":49,"name":"cicd"},{"id":4,"name":"cli"},{"id":64,"name":"cloud-native"},{"id":48,"name":"cms"},{"id":61,"name":"compiler"},{"id":68,"name":"containerization"},{"id":92,"name":"crm"},{"id":34,"name":"data"},{"id":47,"name":"database"},{"id":8,"name":"declarative-gui "},{"id":9,"name":"deploy-tool"},{"id":53,"name":"desktop-app"},{"id":6,"name":"dev-exp-lib"},{"id":59,"name":"dev-tool"},{"id":13,"name":"ecommerce"},{"id":26,"name":"editor"},{"id":66,"name":"emulator"},{"id":62,"name":"filesystem"},{"id":80,"name":"finance"},{"id":15,"name":"firmware"},{"id":73,"name":"for-fun"},{"id":2,"name":"framework"},{"id":11,"name":"frontend"},{"id":22,"name":"game"},{"id":81,"name":"game-engine "},{"id":23,"name":"graphql"},{"id":84,"name":"gui"},{"id":91,"name":"http"},{"id":5,"name":"http-client"},{"id":51,"name":"iac"},{"id":30,"name":"ide"},{"id":78,"name":"iot"},{"id":40,"name":"json"},{"id":83,"name":"julian"},{"id":38,"name":"k8s"},{"id":31,"name":"language"},{"id":10,"name":"learning-resource"},{"id":33,"name":"lib"},{"id":41,"name":"linter"},{"id":28,"name":"lms"},{"id":16,"name":"logging"},{"id":76,"name":"low-code"},{"id":90,"name":"message-queue"},{"id":42,"name":"mobile-app"},{"id":18,"name":"monitoring"},{"id":36,"name":"networking"},{"id":7,"name":"node-version"},{"id":55,"name":"nosql"},{"id":57,"name":"observability"},{"id":46,"name":"orm"},{"id":52,"name":"os"},{"id":14,"name":"parser"},{"id":74,"name":"react"},{"id":82,"name":"real-time"},{"id":56,"name":"robot"},{"id":65,"name":"runtime"},{"id":32,"name":"sdk"},{"id":71,"name":"search"},{"id":63,"name":"secrets"},{"id":25,"name":"security"},{"id":85,"name":"server"},{"id":86,"name":"serverless"},{"id":70,"name":"storage"},{"id":75,"name":"system-design"},{"id":79,"name":"terminal"},{"id":29,"name":"testing"},{"id":12,"name":"ui"},{"id":50,"name":"ux"},{"id":88,"name":"video"},{"id":20,"name":"web-app"},{"id":35,"name":"web-server"},{"id":43,"name":"webassembly"},{"id":69,"name":"workflow"},{"id":87,"name":"yaml"}]" returns me the "expected json"