@animatorkit/editor 0.5.0-beta → 0.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1,20 +1,18 @@
1
1
  # Anime.js Editor
2
2
 
3
- A free visual editor for [anime.js](https://animejs.com) animations. Tweak durations, delays, easing curves, keyframes, and more in real time, then save the changes back to your source code as plain anime.js.
4
-
5
- The editor runs on [tweaks](https://github.com/juliangarnier/tweaks). Set it up in your project folder:
3
+ A visual editor for [Anime.js](https://animejs.com) animations. Tweak durations, delays, easing curves, keyframes, and more in real time, then save the changes back to your source code as plain anime.js.
6
4
 
7
5
  ```bash
8
6
  npx @animatorkit/editor
9
7
  ```
10
8
 
11
- The command installs `animejs`, and `tweaks` and `@animatorkit/editor` as dev dependencies, when they are missing, adds the Vite plugin to your Vite config, or creates one when your project uses Vite with no config. Without Vite, it adds an `editor` script that starts the save server. It also creates `editor.config.json`, and points `AGENTS.md` and `CLAUDE.md` to `llm.txt`.
9
+ The command installs what the editor needs and sets up your project: the Vite plugin with Vite, or an `editor` script that starts the save server without Vite.
12
10
 
13
- To update the editor, update `@animatorkit/editor` with your package manager, for example `npm i -D @animatorkit/editor@latest`. With Editor Kit, use the kit command instead, see [Editor Kit](#editor-kit).
11
+ To update, run `npm i -D @animatorkit/editor@latest`, or the kit command with [Editor Kit](#editor-kit).
14
12
 
15
13
  ## With Vite
16
14
 
17
- The plugin loads the editor on every page `vite dev` serves and saves through the Vite server. Builds ship untouched.
15
+ The plugin loads the editor in `vite dev` and saves through the Vite server. Your builds never include the editor.
18
16
 
19
17
  ```js
20
18
  // vite.config.js
@@ -26,7 +24,7 @@ export default defineConfig({ plugins: [editor()] });
26
24
 
27
25
  ## Without Vite
28
26
 
29
- Start the save server with the `editor` script that the setup command adds, then import the editor in your code:
27
+ Start the save server, then import the editor in your code:
30
28
 
31
29
  ```bash
32
30
  npm run editor
@@ -36,11 +34,11 @@ npm run editor
36
34
  import '@animatorkit/editor';
37
35
  ```
38
36
 
39
- The script runs `animejs-editor serve`. To start it on another port, run `npm run editor 7349`.
37
+ To use another port, run `npm run editor 7349`.
40
38
 
41
39
  ## Using the editor
42
40
 
43
- The editor reads every running `animate`, `createTimeline`, `utils.set`, and `createLayout` call that has an id:
41
+ The editor lists every `animate`, `createTimeline`, `utils.set`, and `createLayout` call that has an `id`:
44
42
 
45
43
  ```js
46
44
  import { animate } from 'animejs';
@@ -52,41 +50,29 @@ animate('.box', {
52
50
  });
53
51
  ```
54
52
 
55
- ## Demo pages
56
-
57
- On a page with no save server, such as a non-commercial public demo, disable saving right after the import. The panel and its versions keep working in the session, and the page never contacts a server:
58
-
59
- ```js
60
- import { editor } from '@animatorkit/editor';
61
-
62
- editor.config({ save: false });
63
- ```
64
-
65
- The editor plays each animation once. To keep a looping demo looping, turn the transport loop on by default with `editor.config({ defaultPlayback: { loop: true } })`.
66
-
67
- To open the demo on one animation or timeline child, select it by its id after the call that carries it:
68
-
69
- ```js
70
- editor.select('letters pop');
71
- ```
72
-
73
53
  ## Coding agents
74
54
 
75
- Point your coding agent to `node_modules/@animatorkit/editor/llm.txt`, the rules for writing animations the editor can edit.
55
+ Point your coding agent to `node_modules/@animatorkit/editor/llm.txt`. It holds the rules for writing animations the editor can edit.
76
56
 
77
57
  ## Editor Kit
78
58
 
79
59
  The stagger, random, onScroll, spring, steps, and irregular editors and the on-page gizmo are Editor Kit features. The free version still shows, retimes, copies, and saves those values when your code uses them.
80
60
 
81
- Get Editor Kit at [https://animejs.com/animatorkit](https://animejs.com/animatorkit). To upgrade, run the kit command, then paste the Editor Kit key from your account page at animejs.com:
61
+ Get Editor Kit at [animejs.com/animatorkit](https://animejs.com/animatorkit), then run the kit command in your project and paste the key from your account page:
82
62
 
83
63
  ```bash
84
64
  npx @animatorkit/editor kit
85
65
  ```
86
66
 
87
- It saves the key in your user config folder: `~/.config/animatorkit/` on macOS and Linux, `$XDG_CONFIG_HOME/animatorkit/` when that variable is set, and `%APPDATA%\animatorkit\` on Windows, downloads Editor Kit into `.animatorkit/`, which it adds to `.gitignore`, and installs it from there as an optional dependency, the `@animatorkit/editor-kit` package. With Vite, your config and your pages stay as they are: the plugin loads Editor Kit when it is installed. Without Vite, import `@animatorkit/editor-kit` in place of `@animatorkit/editor`. A build server or a teammate without a seat installs the project and gets the free editor. With Yarn 2 and later, set `nodeLinker: node-modules` in `.yarnrc.yml`. Yarn then fails an install without Editor Kit, so each developer and build server needs a seat.
67
+ Run it again to update Editor Kit, or after cloning a project. Teammates and build servers without Editor Kit get the free editor. Without Vite, import `@animatorkit/editor-kit` instead of `@animatorkit/editor`.
68
+
69
+ To go back to the free editor:
70
+
71
+ ```bash
72
+ npx @animatorkit/editor free
73
+ ```
88
74
 
89
- Run the same command to update Editor Kit to the newest version your key allows, and after a clone to install it again, as git does not keep `.animatorkit/`. It moves `@animatorkit/editor` to the Editor Kit version. The two versions must match. A package manager only warns when they differ, and `npx @animatorkit/editor` then prints the kit command that matches them. To go back to the free editor, run `npx @animatorkit/editor free`. It removes Editor Kit from the project and keeps your key, which your other projects use. Without Vite, import `@animatorkit/editor` again in your pages. To remove the key from this machine, delete that `animatorkit` folder.
75
+ See the [installation guide](https://animejs.com/documentation/editor/getting-started/installation) for the details.
90
76
 
91
77
  ## License
92
78
 
package/cli.js CHANGED
@@ -1,6 +1,6 @@
1
1
  #!/usr/bin/env node
2
2
  /*!
3
- * Anime.js Editor v0.5.0-beta
3
+ * Anime.js Editor v0.6.0
4
4
  * Copyright (c) Julian Garnier. All rights reserved.
5
5
  * Free to use under the Anime.js Editor License, see LICENSE.md. It may be redistributed only
6
6
  * as the unmodified @animatorkit/editor package, and it may not be copied or modified.