@kinetographdev/anime 0.0.0-stage → 0.2.5

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.
Files changed (5) hide show
  1. package/LICENSE.md +67 -0
  2. package/README.md +24 -2
  3. package/dist/index.d.ts +317 -0
  4. package/dist/index.js +81 -0
  5. package/package.json +50 -4
package/LICENSE.md ADDED
@@ -0,0 +1,67 @@
1
+ Required Notice: Copyright 2026 Sanat Gupta (https://github.com/0xS4N4TG)
2
+
3
+ # PolyForm Small Business License 1.0.0
4
+
5
+ <https://polyformproject.org/licenses/small-business/1.0.0>
6
+
7
+ ## Acceptance
8
+
9
+ In order to get any license under these terms, you must agree to them as both strict obligations and conditions to all your licenses.
10
+
11
+ ## Copyright License
12
+
13
+ The licensor grants you a copyright license for the software to do everything you might do with the software that would otherwise infringe the licensor's copyright in it for any permitted purpose. However, you may only distribute the software according to [Distribution License](#distribution-license) and make changes or new works based on the software according to [Changes and New Works License](#changes-and-new-works-license).
14
+
15
+ ## Distribution License
16
+
17
+ The licensor grants you an additional copyright license to distribute copies of the software. Your license to distribute covers distributing the software with changes and new works permitted by [Changes and New Works License](#changes-and-new-works-license).
18
+
19
+ ## Notices
20
+
21
+ You must ensure that anyone who gets a copy of any part of the software from you also gets a copy of these terms or the URL for them above, as well as copies of any plain-text lines beginning with `Required Notice:` that the licensor provided with the software. For example:
22
+
23
+ > Required Notice: Copyright Yoyodyne, Inc. (http://example.com)
24
+
25
+ ## Changes and New Works License
26
+
27
+ The licensor grants you an additional copyright license to make changes and new works based on the software for any permitted purpose.
28
+
29
+ ## Patent License
30
+
31
+ The licensor grants you a patent license for the software that covers patent claims the licensor can license, or becomes able to license, that you would infringe by using the software.
32
+
33
+ ## Fair Use
34
+
35
+ You may have "fair use" rights for the software under the law. These terms do not limit them.
36
+
37
+ ## Small Business
38
+
39
+ Use of the software for the benefit of your company is use for a permitted purpose if your company has fewer than 100 total individuals working as employees and independent contractors, and less than 1,000,000 USD (2019) total revenue in the prior tax year. Adjust this revenue threshold for inflation according to the United States Bureau of Labor Statistics' consumer price index for all urban consumers, U.S. city average, for all items, not seasonally adjusted, with 1982–1984=100 reference base.
40
+
41
+ ## No Other Rights
42
+
43
+ These terms do not allow you to sublicense or transfer any of your licenses to anyone else, or prevent the licensor from granting licenses to anyone else. These terms do not imply any other licenses.
44
+
45
+ ## Patent Defense
46
+
47
+ If you make any written claim that the software infringes or contributes to infringement of any patent, your patent license for the software granted under these terms ends immediately. If your company makes such a claim, your patent license ends immediately for work on behalf of your company.
48
+
49
+ ## Violations
50
+
51
+ The first time you are notified in writing that you have violated any of these terms, or done anything with the software not covered by your licenses, your licenses can nonetheless continue if you come into full compliance with these terms, and take practical steps to correct past violations, within 32 days of receiving notice. Otherwise, all your licenses end immediately.
52
+
53
+ ## No Liability
54
+
55
+ ***As far as the law allows, the software comes as is, without any warranty or condition, and the licensor will not be liable to you for any damages arising out of these terms or the use or nature of the software, under any kind of legal claim.***
56
+
57
+ ## Definitions
58
+
59
+ The **licensor** is the individual or entity offering these terms, and the **software** is the software the licensor makes available under these terms.
60
+
61
+ **You** refers to the individual or entity agreeing to these terms.
62
+
63
+ **Your company** is any legal entity, sole proprietorship, or other kind of organization that you work for, plus all organizations that have control over, are under the control of, or are under common control with that organization. **Control** means ownership of substantially all the assets of an entity, or the power to direct its management and policies by vote, contract, or otherwise. Control can be direct or indirect.
64
+
65
+ **Your licenses** are all the licenses granted to you for the software under these terms.
66
+
67
+ **Use** means anything you do with the software requiring one of your licenses.
package/README.md CHANGED
@@ -1,3 +1,25 @@
1
- # Temporary Holding Version
1
+ # @kinetographdev/anime
2
2
 
3
- This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
3
+ An [anime.js](https://animejs.com) v4 timeline that does not autoplay and is seeked to the current frame, so a frame looks the same rendered alone, in sequence or in parallel.
4
+
5
+ Part of [Kinetograph](https://github.com/0xS4N4TG/kinetograph), a programmatic video engine. `animejs` is a peer dependency and is used as it is.
6
+
7
+ ```sh
8
+ npm install @kinetographdev/anime animejs
9
+ ```
10
+
11
+ ```tsx
12
+ import { useAnimeTimeline } from '@kinetographdev/anime';
13
+
14
+ const scope = useAnimeTimeline((tl) => {
15
+ tl.add('.box', { translateX: [0, 700], rotate: 360, ease: 'outExpo', duration: 900 }, 0)
16
+ .add('.dot', { opacity: [0, 1], duration: 600 }, 300);
17
+ });
18
+ return <div ref={scope}>{/* elements with className="box" and "dot" */}</div>;
19
+ ```
20
+
21
+ - `useAnimeTimeline(build, deps?)` creates `createTimeline({ autoplay: false })`, runs `build(tl)` inside `createScope` (selectors look inside the returned ref's element, and everything is reverted on unmount) and calls `tl.seek(frame / fps * 1000)` every frame. Callbacks run on a seek. `ref.timeline` is the timeline.
22
+ - `<AnimeTimeline build={...} deps={...}>` is the same as a `<div>`.
23
+ - An animation made in `build` that is not on `tl` (`animate(...)` instead of `tl.add(...)`) is warned about once: it would play on anime.js's own loop.
24
+
25
+ Licensed under the PolyForm Small Business License 1.0.0, see `LICENSE.md`.
package/dist/index.d.ts ADDED
@@ -0,0 +1,317 @@
1
+ import { type HTMLAttributes, type ReactNode, type RefObject } from 'react';
2
+ import { type Timeline } from 'animejs';
3
+ export type { Timeline };
4
+ /**
5
+ * What `useAnimeTimeline` returns: attach it to the element that scopes string selectors. `ref.timeline` is the
6
+ * timeline once the layout effect has run.
7
+ */
8
+ export interface AnimeTimelineRef<T extends Element = HTMLDivElement> extends RefObject<T | null> {
9
+ timeline: Timeline | null;
10
+ }
11
+ /** Forgets what was warned about (for tests). */
12
+ export declare function resetAnimeWarnings(): void;
13
+ /**
14
+ * A timeline that does not autoplay, seeked to the current frame.
15
+ *
16
+ * `build` runs once (and again when `deps` change) inside `createScope`, with the timeline to add animations to.
17
+ * Every frame, `tl.seek(frame / fps * 1000)` moves it. Callbacks (`onUpdate`, `onComplete`) run on a seek.
18
+ *
19
+ * ```tsx
20
+ * const scope = useAnimeTimeline((tl) => {
21
+ * tl.add('.box', { translateX: [0, 700], rotate: 360 }, 0).add('.dot', { opacity: [0, 1] }, 300);
22
+ * });
23
+ * return <div ref={scope}><div className="box" /><div className="dot" /></div>;
24
+ * ```
25
+ */
26
+ export declare function useAnimeTimeline<T extends Element = HTMLDivElement>(build: (tl: Timeline) => void, deps?: readonly unknown[]): AnimeTimelineRef<T>;
27
+ export interface AnimeTimelineProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
28
+ /** Adds the animations to `tl`. String selectors are looked up inside this component's element. */
29
+ build: (tl: Timeline) => void;
30
+ /** When these change the timeline is built again. */
31
+ deps?: readonly unknown[];
32
+ children?: ReactNode;
33
+ }
34
+ /** `useAnimeTimeline` as a component: a `<div>` that scopes the selectors in `build`. */
35
+ export declare function AnimeTimeline({ build, deps, children, ...rest }: AnimeTimelineProps): import("react").DetailedReactHTMLElement<{
36
+ ref: AnimeTimelineRef<HTMLDivElement>;
37
+ defaultChecked?: boolean | undefined | undefined;
38
+ defaultValue?: string | number | readonly string[] | undefined;
39
+ suppressContentEditableWarning?: boolean | undefined | undefined;
40
+ suppressHydrationWarning?: boolean | undefined | undefined;
41
+ accessKey?: string | undefined | undefined;
42
+ autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
43
+ autoFocus?: boolean | undefined | undefined;
44
+ className?: string | undefined | undefined;
45
+ contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
46
+ contextMenu?: string | undefined | undefined;
47
+ dir?: string | undefined | undefined;
48
+ draggable?: (boolean | "true" | "false") | undefined;
49
+ enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
50
+ hidden?: boolean | undefined | undefined;
51
+ id?: string | undefined | undefined;
52
+ lang?: string | undefined | undefined;
53
+ nonce?: string | undefined | undefined;
54
+ slot?: string | undefined | undefined;
55
+ spellCheck?: (boolean | "true" | "false") | undefined;
56
+ style?: import("react").CSSProperties | undefined;
57
+ tabIndex?: number | undefined | undefined;
58
+ title?: string | undefined | undefined;
59
+ translate?: "yes" | "no" | undefined | undefined;
60
+ radioGroup?: string | undefined | undefined;
61
+ role?: import("react").AriaRole | undefined;
62
+ about?: string | undefined | undefined;
63
+ content?: string | undefined | undefined;
64
+ datatype?: string | undefined | undefined;
65
+ inlist?: any;
66
+ prefix?: string | undefined | undefined;
67
+ property?: string | undefined | undefined;
68
+ rel?: string | undefined | undefined;
69
+ resource?: string | undefined | undefined;
70
+ rev?: string | undefined | undefined;
71
+ typeof?: string | undefined | undefined;
72
+ vocab?: string | undefined | undefined;
73
+ autoCorrect?: string | undefined | undefined;
74
+ autoSave?: string | undefined | undefined;
75
+ color?: string | undefined | undefined;
76
+ itemProp?: string | undefined | undefined;
77
+ itemScope?: boolean | undefined | undefined;
78
+ itemType?: string | undefined | undefined;
79
+ itemID?: string | undefined | undefined;
80
+ itemRef?: string | undefined | undefined;
81
+ results?: number | undefined | undefined;
82
+ security?: string | undefined | undefined;
83
+ unselectable?: "on" | "off" | undefined | undefined;
84
+ popover?: "" | "auto" | "manual" | "hint" | undefined | undefined;
85
+ popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
86
+ popoverTarget?: string | undefined | undefined;
87
+ inert?: boolean | undefined | undefined;
88
+ inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
89
+ is?: string | undefined | undefined;
90
+ exportparts?: string | undefined | undefined;
91
+ part?: string | undefined | undefined;
92
+ "aria-activedescendant"?: string | undefined | undefined;
93
+ "aria-atomic"?: (boolean | "true" | "false") | undefined;
94
+ "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
95
+ "aria-braillelabel"?: string | undefined | undefined;
96
+ "aria-brailleroledescription"?: string | undefined | undefined;
97
+ "aria-busy"?: (boolean | "true" | "false") | undefined;
98
+ "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
99
+ "aria-colcount"?: number | undefined | undefined;
100
+ "aria-colindex"?: number | undefined | undefined;
101
+ "aria-colindextext"?: string | undefined | undefined;
102
+ "aria-colspan"?: number | undefined | undefined;
103
+ "aria-controls"?: string | undefined | undefined;
104
+ "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined | undefined;
105
+ "aria-describedby"?: string | undefined | undefined;
106
+ "aria-description"?: string | undefined | undefined;
107
+ "aria-details"?: string | undefined | undefined;
108
+ "aria-disabled"?: (boolean | "true" | "false") | undefined;
109
+ "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | undefined;
110
+ "aria-errormessage"?: string | undefined | undefined;
111
+ "aria-expanded"?: (boolean | "true" | "false") | undefined;
112
+ "aria-flowto"?: string | undefined | undefined;
113
+ "aria-grabbed"?: (boolean | "true" | "false") | undefined;
114
+ "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined | undefined;
115
+ "aria-hidden"?: (boolean | "true" | "false") | undefined;
116
+ "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined | undefined;
117
+ "aria-keyshortcuts"?: string | undefined | undefined;
118
+ "aria-label"?: string | undefined | undefined;
119
+ "aria-labelledby"?: string | undefined | undefined;
120
+ "aria-level"?: number | undefined | undefined;
121
+ "aria-live"?: "off" | "assertive" | "polite" | undefined | undefined;
122
+ "aria-modal"?: (boolean | "true" | "false") | undefined;
123
+ "aria-multiline"?: (boolean | "true" | "false") | undefined;
124
+ "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
125
+ "aria-orientation"?: "horizontal" | "vertical" | undefined | undefined;
126
+ "aria-owns"?: string | undefined | undefined;
127
+ "aria-placeholder"?: string | undefined | undefined;
128
+ "aria-posinset"?: number | undefined | undefined;
129
+ "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
130
+ "aria-readonly"?: (boolean | "true" | "false") | undefined;
131
+ "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | undefined;
132
+ "aria-required"?: (boolean | "true" | "false") | undefined;
133
+ "aria-roledescription"?: string | undefined | undefined;
134
+ "aria-rowcount"?: number | undefined | undefined;
135
+ "aria-rowindex"?: number | undefined | undefined;
136
+ "aria-rowindextext"?: string | undefined | undefined;
137
+ "aria-rowspan"?: number | undefined | undefined;
138
+ "aria-selected"?: (boolean | "true" | "false") | undefined;
139
+ "aria-setsize"?: number | undefined | undefined;
140
+ "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined | undefined;
141
+ "aria-valuemax"?: number | undefined | undefined;
142
+ "aria-valuemin"?: number | undefined | undefined;
143
+ "aria-valuenow"?: number | undefined | undefined;
144
+ "aria-valuetext"?: string | undefined | undefined;
145
+ dangerouslySetInnerHTML?: {
146
+ __html: string | TrustedHTML;
147
+ } | undefined | undefined;
148
+ onCopy?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
149
+ onCopyCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
150
+ onCut?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
151
+ onCutCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
152
+ onPaste?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
153
+ onPasteCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
154
+ onCompositionEnd?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
155
+ onCompositionEndCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
156
+ onCompositionStart?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
157
+ onCompositionStartCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
158
+ onCompositionUpdate?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
159
+ onCompositionUpdateCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
160
+ onFocus?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
161
+ onFocusCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
162
+ onBlur?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
163
+ onBlurCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
164
+ onChange?: import("react").ChangeEventHandler<HTMLDivElement, Element> | undefined;
165
+ onChangeCapture?: import("react").ChangeEventHandler<HTMLDivElement, Element> | undefined;
166
+ onBeforeInput?: import("react").InputEventHandler<HTMLDivElement> | undefined;
167
+ onBeforeInputCapture?: import("react").InputEventHandler<HTMLDivElement> | undefined;
168
+ onInput?: import("react").InputEventHandler<HTMLDivElement> | undefined;
169
+ onInputCapture?: import("react").InputEventHandler<HTMLDivElement> | undefined;
170
+ onReset?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
171
+ onResetCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
172
+ onSubmit?: import("react").SubmitEventHandler<HTMLDivElement> | undefined;
173
+ onSubmitCapture?: import("react").SubmitEventHandler<HTMLDivElement> | undefined;
174
+ onInvalid?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
175
+ onInvalidCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
176
+ onLoad?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
177
+ onLoadCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
178
+ onError?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
179
+ onErrorCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
180
+ onKeyDown?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
181
+ onKeyDownCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
182
+ onKeyPress?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
183
+ onKeyPressCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
184
+ onKeyUp?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
185
+ onKeyUpCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
186
+ onAbort?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
187
+ onAbortCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
188
+ onCanPlay?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
189
+ onCanPlayCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
190
+ onCanPlayThrough?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
191
+ onCanPlayThroughCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
192
+ onDurationChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
193
+ onDurationChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
194
+ onEmptied?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
195
+ onEmptiedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
196
+ onEncrypted?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
197
+ onEncryptedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
198
+ onEnded?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
199
+ onEndedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
200
+ onLoadedData?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
201
+ onLoadedDataCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
202
+ onLoadedMetadata?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
203
+ onLoadedMetadataCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
204
+ onLoadStart?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
205
+ onLoadStartCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
206
+ onPause?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
207
+ onPauseCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
208
+ onPlay?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
209
+ onPlayCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
210
+ onPlaying?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
211
+ onPlayingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
212
+ onProgress?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
213
+ onProgressCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
214
+ onRateChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
215
+ onRateChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
216
+ onSeeked?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
217
+ onSeekedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
218
+ onSeeking?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
219
+ onSeekingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
220
+ onStalled?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
221
+ onStalledCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
222
+ onSuspend?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
223
+ onSuspendCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
224
+ onTimeUpdate?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
225
+ onTimeUpdateCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
226
+ onVolumeChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
227
+ onVolumeChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
228
+ onWaiting?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
229
+ onWaitingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
230
+ onAuxClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
231
+ onAuxClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
232
+ onClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
233
+ onClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
234
+ onContextMenu?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
235
+ onContextMenuCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
236
+ onDoubleClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
237
+ onDoubleClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
238
+ onDrag?: import("react").DragEventHandler<HTMLDivElement> | undefined;
239
+ onDragCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
240
+ onDragEnd?: import("react").DragEventHandler<HTMLDivElement> | undefined;
241
+ onDragEndCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
242
+ onDragEnter?: import("react").DragEventHandler<HTMLDivElement> | undefined;
243
+ onDragEnterCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
244
+ onDragExit?: import("react").DragEventHandler<HTMLDivElement> | undefined;
245
+ onDragExitCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
246
+ onDragLeave?: import("react").DragEventHandler<HTMLDivElement> | undefined;
247
+ onDragLeaveCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
248
+ onDragOver?: import("react").DragEventHandler<HTMLDivElement> | undefined;
249
+ onDragOverCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
250
+ onDragStart?: import("react").DragEventHandler<HTMLDivElement> | undefined;
251
+ onDragStartCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
252
+ onDrop?: import("react").DragEventHandler<HTMLDivElement> | undefined;
253
+ onDropCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
254
+ onMouseDown?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
255
+ onMouseDownCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
256
+ onMouseEnter?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
257
+ onMouseLeave?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
258
+ onMouseMove?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
259
+ onMouseMoveCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
260
+ onMouseOut?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
261
+ onMouseOutCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
262
+ onMouseOver?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
263
+ onMouseOverCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
264
+ onMouseUp?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
265
+ onMouseUpCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
266
+ onSelect?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
267
+ onSelectCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
268
+ onTouchCancel?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
269
+ onTouchCancelCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
270
+ onTouchEnd?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
271
+ onTouchEndCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
272
+ onTouchMove?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
273
+ onTouchMoveCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
274
+ onTouchStart?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
275
+ onTouchStartCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
276
+ onPointerDown?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
277
+ onPointerDownCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
278
+ onPointerMove?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
279
+ onPointerMoveCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
280
+ onPointerUp?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
281
+ onPointerUpCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
282
+ onPointerCancel?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
283
+ onPointerCancelCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
284
+ onPointerEnter?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
285
+ onPointerLeave?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
286
+ onPointerOver?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
287
+ onPointerOverCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
288
+ onPointerOut?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
289
+ onPointerOutCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
290
+ onGotPointerCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
291
+ onGotPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
292
+ onLostPointerCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
293
+ onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
294
+ onScroll?: import("react").UIEventHandler<HTMLDivElement> | undefined;
295
+ onScrollCapture?: import("react").UIEventHandler<HTMLDivElement> | undefined;
296
+ onScrollEnd?: import("react").UIEventHandler<HTMLDivElement> | undefined;
297
+ onScrollEndCapture?: import("react").UIEventHandler<HTMLDivElement> | undefined;
298
+ onWheel?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
299
+ onWheelCapture?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
300
+ onAnimationStart?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
301
+ onAnimationStartCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
302
+ onAnimationEnd?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
303
+ onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
304
+ onAnimationIteration?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
305
+ onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
306
+ onToggle?: import("react").ToggleEventHandler<HTMLDivElement> | undefined;
307
+ onBeforeToggle?: import("react").ToggleEventHandler<HTMLDivElement> | undefined;
308
+ onTransitionCancel?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
309
+ onTransitionCancelCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
310
+ onTransitionEnd?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
311
+ onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
312
+ onTransitionRun?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
313
+ onTransitionRunCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
314
+ onTransitionStart?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
315
+ onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
316
+ }, HTMLDivElement>;
317
+ //# sourceMappingURL=index.d.ts.map
package/dist/index.js ADDED
@@ -0,0 +1,81 @@
1
+ // anime.js v4 for a frame-driven render: one timeline that does not autoplay, built once, seeked to the frame's time in
2
+ // milliseconds every frame. `animejs` is a peer dependency and is never patched.
3
+ //
4
+ // The tweens are made inside `createScope`, so a string selector is looked up inside the returned ref's element and
5
+ // everything is reverted on unmount. An animation made in the build function outside the timeline would play on
6
+ // anime.js's own loop, which a render does not control, so it is warned about.
7
+ import { createElement, useLayoutEffect, useRef } from 'react';
8
+ import { useCurrentFrame, useVideoConfig } from 'remotion';
9
+ import { createScope, createTimeline } from 'animejs';
10
+ const warned = new Set();
11
+ function warnOnce(message) {
12
+ if (warned.has(message))
13
+ return;
14
+ warned.add(message);
15
+ console.warn(message);
16
+ }
17
+ /** Forgets what was warned about (for tests). */
18
+ export function resetAnimeWarnings() {
19
+ warned.clear();
20
+ }
21
+ /** Animations the scope holds that are not the timeline, not inside it, and not paused. */
22
+ function strays(scope, tl) {
23
+ return scope.revertibles.filter((r) => {
24
+ const a = r;
25
+ return r !== tl && a.parent !== tl && a.paused === false && (a.duration ?? 0) > 0;
26
+ });
27
+ }
28
+ /**
29
+ * A timeline that does not autoplay, seeked to the current frame.
30
+ *
31
+ * `build` runs once (and again when `deps` change) inside `createScope`, with the timeline to add animations to.
32
+ * Every frame, `tl.seek(frame / fps * 1000)` moves it. Callbacks (`onUpdate`, `onComplete`) run on a seek.
33
+ *
34
+ * ```tsx
35
+ * const scope = useAnimeTimeline((tl) => {
36
+ * tl.add('.box', { translateX: [0, 700], rotate: 360 }, 0).add('.dot', { opacity: [0, 1] }, 300);
37
+ * });
38
+ * return <div ref={scope}><div className="box" /><div className="dot" /></div>;
39
+ * ```
40
+ */
41
+ export function useAnimeTimeline(build, deps = []) {
42
+ const frame = useCurrentFrame();
43
+ const { fps } = useVideoConfig();
44
+ const ref = useRef(null);
45
+ if (ref.current === null)
46
+ ref.current = { current: null, timeline: null };
47
+ const handle = ref.current;
48
+ const now = useRef(0);
49
+ now.current = (frame / fps) * 1000;
50
+ useLayoutEffect(() => {
51
+ const tl = createTimeline({ autoplay: false });
52
+ const scope = createScope(handle.current ? { root: handle.current } : {});
53
+ scope.add(() => {
54
+ build(tl);
55
+ });
56
+ const stray = strays(scope, tl);
57
+ if (stray.length > 0) {
58
+ warnOnce(`useAnimeTimeline: ${stray.length} animation${stray.length === 1 ? '' : 's'} made in the build function ` +
59
+ `${stray.length === 1 ? 'is' : 'are'} not on the timeline and not paused, so ` +
60
+ `${stray.length === 1 ? 'it plays' : 'they play'} on anime.js's own loop. Use tl.add(...) instead of animate(...).`);
61
+ }
62
+ handle.timeline = tl;
63
+ tl.seek(now.current);
64
+ return () => {
65
+ scope.revert();
66
+ tl.revert();
67
+ handle.timeline = null;
68
+ };
69
+ // eslint-disable-next-line react-hooks/exhaustive-deps
70
+ }, deps);
71
+ useLayoutEffect(() => {
72
+ handle.timeline?.seek((frame / fps) * 1000);
73
+ }, [frame, fps, handle]);
74
+ return handle;
75
+ }
76
+ /** `useAnimeTimeline` as a component: a `<div>` that scopes the selectors in `build`. */
77
+ export function AnimeTimeline({ build, deps, children, ...rest }) {
78
+ const scope = useAnimeTimeline(build, deps);
79
+ return createElement('div', { ...rest, ref: scope }, children);
80
+ }
81
+ //# sourceMappingURL=index.js.map
package/package.json CHANGED
@@ -1,6 +1,52 @@
1
1
  {
2
2
  "name": "@kinetographdev/anime",
3
- "version": "0.0.0-stage",
4
- "stub": true,
5
- "description": "Temporary package placeholder for staged publishing"
6
- }
3
+ "version": "0.2.5",
4
+ "description": "anime.js v4 for Kinetograph: a paused timeline seeked to the frame, so a frame looks the same alone or in sequence",
5
+ "license": "PolyForm-Small-Business-1.0.0",
6
+ "repository": {
7
+ "type": "git",
8
+ "url": "git+https://github.com/0xS4N4TG/kinetograph.git",
9
+ "directory": "packages/plugins/anime"
10
+ },
11
+ "homepage": "https://github.com/0xS4N4TG/kinetograph#readme",
12
+ "bugs": {
13
+ "url": "https://github.com/0xS4N4TG/kinetograph/issues"
14
+ },
15
+ "keywords": [
16
+ "video",
17
+ "remotion",
18
+ "motion-graphics",
19
+ "animejs",
20
+ "animation"
21
+ ],
22
+ "type": "module",
23
+ "exports": {
24
+ ".": {
25
+ "types": "./dist/index.d.ts",
26
+ "default": "./dist/index.js"
27
+ }
28
+ },
29
+ "files": [
30
+ "dist",
31
+ "!dist/**/*.map"
32
+ ],
33
+ "scripts": {
34
+ "build": "tsc -p tsconfig.json",
35
+ "test": "tsc -p tsconfig.test.json && vitest run --passWithNoTests"
36
+ },
37
+ "peerDependencies": {
38
+ "@kinetographdev/core": "^0.2.0",
39
+ "animejs": "^4.0.0",
40
+ "react": "^19.3.0"
41
+ },
42
+ "devDependencies": {
43
+ "animejs": "4.5.0",
44
+ "react": "19.3.1"
45
+ },
46
+ "engines": {
47
+ "node": ">=22"
48
+ },
49
+ "publishConfig": {
50
+ "access": "public"
51
+ }
52
+ }