# vevet.js > vevet.js (vevetjs, npm: vevet) — client-side JavaScript library for creative web development, v5. Source of truth: documentation below (per-page .md links) and working examples (component demo pages — often /demos; Snap: basic-demos, advanced-demos, parallax-demos — or https://vevetjs.com/llms-full.txt). Do not invent undocumented props, methods, or events. ## docs ### base - [Callbacks](https://vevetjs.com/docs/base/Callbacks.md): Callbacks class — event listeners with one-or-multi-time execution, protection and delays. Vevet.js base. - [Module](https://vevetjs.com/docs/base/Module.md): Module — base class for Vevet.js components. Props, callbacks, updateProps, onDestroy, destroy. - [Responsive](https://vevetjs.com/docs/base/Responsive.md): Responsive — apply different props by viewport and device. Breakpoints, rules, Module integration. Vevet.js base. ### Canvas Canvas — Vevet.js class for HTML5 Canvas and 2D context. Simplifies canvas rendering and animation. - [Canvas](https://vevetjs.com/docs/Canvas.md): Canvas — Vevet.js class for HTML5 Canvas and 2D context. Simplifies canvas rendering and animation. - [Accessors](https://vevetjs.com/docs/Canvas/accessors.md): Canvas accessors — context, size getters. Vevet.js Canvas API reference. - [Callbacks](https://vevetjs.com/docs/Canvas/callbacks.md): Canvas callbacks — render and resize events. Vevet.js Canvas API reference. - [Methods](https://vevetjs.com/docs/Canvas/methods.md): Canvas methods — API reference. Vevet.js Canvas component. - [Props](https://vevetjs.com/docs/Canvas/props.md): Canvas props — configuration. Vevet.js Canvas API reference. ### CanvasMedia CanvasMedia — Vevet.js pre-rendering of media into canvas layer for animations, effects and transitions. - [CanvasMedia](https://vevetjs.com/docs/CanvasMedia.md): CanvasMedia — Vevet.js pre-rendering of media into canvas layer for animations, effects and transitions. - [Accessors](https://vevetjs.com/docs/CanvasMedia/accessors.md): CanvasMedia accessors — state getters. Vevet.js CanvasMedia API reference. - [Callbacks](https://vevetjs.com/docs/CanvasMedia/callbacks.md): CanvasMedia callbacks — media events. Vevet.js CanvasMedia API reference. - [Methods](https://vevetjs.com/docs/CanvasMedia/methods.md): CanvasMedia methods — API reference. Vevet.js CanvasMedia component. - [Props](https://vevetjs.com/docs/CanvasMedia/props.md): CanvasMedia props — configuration. Vevet.js CanvasMedia API reference. ### core Vevet.js Core — viewport detection, browser and OS detection, custom callbacks for page load and viewport changes. - [Core](https://vevetjs.com/docs/core.md): Vevet.js Core — viewport detection, browser and OS detection, custom callbacks for page load and viewport changes. - [CSS Variables](https://vevetjs.com/docs/core/css-vars.md): Vevet.js CSS variables — --vw, --vh, --svh, --scrollbar-width for viewport units and layout. - [Customization](https://vevetjs.com/docs/core/customization.md): Customize Vevet.js via window.VEVET_PROPS — override default settings before library initialization. - [Features](https://vevetjs.com/docs/core/features.md): Vevet.js features — device detection, application states, viewport changes, NPM usage and configuration. ### Cursor Cursor — Vevet.js smooth custom cursor with hover interactions. Position, size and appearance interpolation. - [Cursor](https://vevetjs.com/docs/Cursor.md): Cursor — Vevet.js smooth custom cursor with hover interactions. Position, size and appearance interpolation. - [Accessors](https://vevetjs.com/docs/Cursor/accessors.md): Cursor accessors — position, state getters. Vevet.js Cursor API reference. - [Callbacks](https://vevetjs.com/docs/Cursor/callbacks.md): Cursor callbacks — hover and move events. Vevet.js Cursor API reference. - [Demos](https://vevetjs.com/docs/Cursor/demos.md): Cursor demos and examples. Vevet.js Cursor component. - [Interfaces](https://vevetjs.com/docs/Cursor/interfaces.md): Cursor interfaces — TypeScript types. Vevet.js Cursor API reference. - [Methods](https://vevetjs.com/docs/Cursor/methods.md): Cursor methods — API reference. Vevet.js Cursor component. - [Props](https://vevetjs.com/docs/Cursor/props.md): Cursor props — configuration. Vevet.js Cursor API reference. ### intro Introduction to Vevet.js — a flexible JavaScript library for creative web development. Installation, core, components, and utils overview. - [Vevet.js](https://vevetjs.com/docs/intro.md): Introduction to Vevet.js — a flexible JavaScript library for creative web development. Installation, core, components, and utils overview. ### InView InView — Vevet.js visibility detection with IntersectionObserver. Viewport enter/leave, direction, CSS classes and animations. - [InView](https://vevetjs.com/docs/InView.md): InView — Vevet.js visibility detection with IntersectionObserver. Viewport enter/leave, direction, CSS classes and animations. - [Accessors](https://vevetjs.com/docs/InView/accessors.md): InView accessors — visibility state getters. Vevet.js InView API reference. - [Callbacks](https://vevetjs.com/docs/InView/callbacks.md): InView callbacks — visibility and direction events. Vevet.js InView API reference. - [Demos](https://vevetjs.com/docs/InView/demos.md): InView demos and examples. Vevet.js InView component. - [Methods](https://vevetjs.com/docs/InView/methods.md): InView methods — API reference. Vevet.js InView component. - [Props](https://vevetjs.com/docs/InView/props.md): InView props — configuration. Vevet.js InView API reference. ### Marquee Marquee — Vevet.js custom marquee component for smooth horizontal or vertical scrolling. - [Marquee](https://vevetjs.com/docs/Marquee.md): Marquee — Vevet.js custom marquee component for smooth horizontal or vertical scrolling. - [Accessors](https://vevetjs.com/docs/Marquee/accessors.md): Marquee accessors — state getters. Vevet.js Marquee API reference. - [Callbacks](https://vevetjs.com/docs/Marquee/callbacks.md): Marquee callbacks — render, resize, clone events. Vevet.js Marquee API reference. - [Demos](https://vevetjs.com/docs/Marquee/demos.md): Marquee demos and examples. Vevet.js Marquee component. - [Methods](https://vevetjs.com/docs/Marquee/methods.md): Marquee methods — API reference. Vevet.js Marquee component. - [Props](https://vevetjs.com/docs/Marquee/props.md): Marquee props — configuration. Vevet.js Marquee API reference. ### Pointers Pointers — Vevet.js pointer events manager. Track multiple pointers, pan/pinch/rotate via move callback, type-aware props. - [Pointers](https://vevetjs.com/docs/Pointers.md): Pointers — Vevet.js pointer events manager. Track multiple pointers, pan/pinch/rotate via move callback, type-aware props. - [Accessors](https://vevetjs.com/docs/Pointers/accessors.md): Pointers accessors — state getters. Vevet.js Pointers API reference. - [Callbacks](https://vevetjs.com/docs/Pointers/callbacks.md): Pointers callbacks — pointer events. Vevet.js Pointers API reference. - [Interfaces](https://vevetjs.com/docs/Pointers/interfaces.md): Pointers interfaces — TypeScript types. Vevet.js Pointers API reference. - [Methods](https://vevetjs.com/docs/Pointers/methods.md): Pointers methods — API reference. Vevet.js Pointers component. - [Props](https://vevetjs.com/docs/Pointers/props.md): Pointers props — configuration. Vevet.js Pointers API reference. ### Preloader Preloader — Vevet.js page preloader component for loading screen visibility and lifecycle. - [Preloader](https://vevetjs.com/docs/Preloader.md): Preloader — Vevet.js page preloader component for loading screen visibility and lifecycle. - [Accessors](https://vevetjs.com/docs/Preloader/accessors.md): Preloader accessors — state getters. Vevet.js Preloader API reference. - [Callbacks](https://vevetjs.com/docs/Preloader/callbacks.md): Preloader callbacks — lifecycle events. Vevet.js Preloader API reference. - [Demos](https://vevetjs.com/docs/Preloader/demos.md): Preloader demos — automatic hide on page load and manual hide control. Vevet.js Preloader component. - [Methods](https://vevetjs.com/docs/Preloader/methods.md): Preloader methods — API reference. Vevet.js Preloader component. - [Props](https://vevetjs.com/docs/Preloader/props.md): Preloader props — configuration. Vevet.js Preloader API reference. ### ProgressPreloader ProgressPreloader — Vevet.js preloader for tracking and displaying loading progress of images, videos and custom resources. - [ProgressPreloader](https://vevetjs.com/docs/ProgressPreloader.md): ProgressPreloader — Vevet.js preloader for tracking and displaying loading progress of images, videos and custom resources. - [Accessors](https://vevetjs.com/docs/ProgressPreloader/accessors.md): ProgressPreloader accessors — progress getters. Vevet.js ProgressPreloader API reference. - [Callbacks](https://vevetjs.com/docs/ProgressPreloader/callbacks.md): ProgressPreloader callbacks — loading events. Vevet.js ProgressPreloader API reference. - [Demos](https://vevetjs.com/docs/ProgressPreloader/demos.md): ProgressPreloader demos — load progress, resource weights, virtual resources, and line animation. Vevet.js ProgressPreloader. - [Methods](https://vevetjs.com/docs/ProgressPreloader/methods.md): ProgressPreloader methods — API reference. Vevet.js ProgressPreloader. - [Props](https://vevetjs.com/docs/ProgressPreloader/props.md): ProgressPreloader props — configuration. Vevet.js ProgressPreloader API reference. ### Raf Raf — Vevet.js requestAnimationFrame loop with FPS throttling, play/pause, FPS measurement and frame-rate-independent animations. - [Raf](https://vevetjs.com/docs/Raf.md): Raf — Vevet.js requestAnimationFrame loop with FPS throttling, play/pause, FPS measurement and frame-rate-independent animations. - [Accessors](https://vevetjs.com/docs/Raf/accessors.md): Raf accessors — FPS, duration getters. Vevet.js Raf API reference. - [Callbacks](https://vevetjs.com/docs/Raf/callbacks.md): Raf callbacks — frame events. Vevet.js Raf API reference. - [Demos](https://vevetjs.com/docs/Raf/demos.md): Raf demos — FPS monitoring, frame-rate-independent motion, damping, and throttling. Vevet.js Raf animation loop. - [Methods](https://vevetjs.com/docs/Raf/methods.md): Raf methods — play, pause, API reference. Vevet.js Raf component. - [Props](https://vevetjs.com/docs/Raf/props.md): Raf props — FPS, throttle options. Vevet.js Raf API reference. ### Scrollbar Scrollbar — Vevet.js customizable scrollbar for window or element. Scroll tracking, drag, auto-sizing and styling. - [Scrollbar](https://vevetjs.com/docs/Scrollbar.md): Scrollbar — Vevet.js customizable scrollbar for window or element. Scroll tracking, drag, auto-sizing and styling. - [Accessors](https://vevetjs.com/docs/Scrollbar/accessors.md): Scrollbar accessors — scroll position, progress getters. Vevet.js Scrollbar API reference. - [Callbacks](https://vevetjs.com/docs/Scrollbar/callbacks.md): Scrollbar callbacks — scroll events. Vevet.js Scrollbar API reference. - [Demos](https://vevetjs.com/docs/Scrollbar/demos.md): Scrollbar demos — window and element scrolling, horizontal axis, RTL, auto-hide, min thumb size. Vevet.js Scrollbar component. - [Methods](https://vevetjs.com/docs/Scrollbar/methods.md): Scrollbar methods — API reference. Vevet.js Scrollbar component. - [Props](https://vevetjs.com/docs/Scrollbar/props.md): Scrollbar props — configuration. Vevet.js Scrollbar API reference. ### ScrollProgress ScrollProgress — Vevet.js component for tracking scroll progress of a section. Scroll-based and parallax animations. - [ScrollProgress](https://vevetjs.com/docs/ScrollProgress.md): ScrollProgress — Vevet.js component for tracking scroll progress of a section. Scroll-based and parallax animations. ### Snap Snap — Vevet.js carousel handler with precise control over movement, snapping and interaction. Custom layout and styling. - [Snap](https://vevetjs.com/docs/Snap.md): Snap — Vevet.js carousel handler with precise control over movement, snapping and interaction. Custom layout and styling. - [Accessors](https://vevetjs.com/docs/Snap/accessors.md): Snap accessors — index, progress, state getters. Vevet.js Snap API reference. - [Advanced Demos](https://vevetjs.com/docs/Snap/advanced-demos.md): Snap advanced demos. Custom carousel patterns with Vevet.js Snap. - [Basic Demos](https://vevetjs.com/docs/Snap/basic-demos.md): Snap basic demos and examples. Vevet.js Snap carousel. - [Callbacks](https://vevetjs.com/docs/Snap/callbacks.md): Snap callbacks — onActiveSlide, onSwipe and more. Vevet.js Snap API reference. - [Methods](https://vevetjs.com/docs/Snap/methods.md): Snap methods — API reference. Vevet.js Snap carousel. - [Parallax](https://vevetjs.com/docs/Snap/parallax.md): Snap Parallax — parallax effects with Snap. Vevet.js Snap API reference. - [Parallax Demos](https://vevetjs.com/docs/Snap/parallax-demos.md): Snap parallax demos. Built-in parallax attributes for Vevet.js Snap carousels. - [Props](https://vevetjs.com/docs/Snap/props.md): Snap props — carousel configuration. Vevet.js Snap API reference. - [SnapSlide](https://vevetjs.com/docs/Snap/slide.md): SnapSlide — virtual slides in Snap. Vevet.js Snap carousel API reference. ### SplitText SplitText — split text into lines, words and letters. Resize support, HTML and emoji handling. Vevet.js. - [SplitText](https://vevetjs.com/docs/SplitText.md): SplitText — split text into lines, words and letters. Resize support, HTML and emoji handling. Vevet.js. - [Accessors](https://vevetjs.com/docs/SplitText/accessors.md): SplitText accessors — lines, words, letters getters. Vevet.js SplitText API reference. - [Callbacks](https://vevetjs.com/docs/SplitText/callbacks.md): SplitText callbacks — event hooks. Vevet.js SplitText API reference. - [Demos](https://vevetjs.com/docs/SplitText/demos.md): SplitText demos and examples. Vevet.js SplitText component. - [Methods](https://vevetjs.com/docs/SplitText/methods.md): SplitText methods — split, destroy. Vevet.js SplitText API reference. - [Props](https://vevetjs.com/docs/SplitText/props.md): SplitText props — configuration options. Vevet.js SplitText API reference. ### Swipe Swipe — Vevet.js component for swipe interactions, pointer tracking, direction detection, rotation, bounds, rubber-band, snap, scale and inertia. - [Swipe](https://vevetjs.com/docs/Swipe.md): Swipe — Vevet.js component for swipe interactions, pointer tracking, direction detection, rotation, bounds, rubber-band, snap, scale and inertia. - [Accessors](https://vevetjs.com/docs/Swipe/accessors.md): Swipe accessors — getters for coordinates and state. Vevet.js Swipe API reference. - [Callbacks](https://vevetjs.com/docs/Swipe/callbacks.md): Swipe callbacks — onStart, onMove, onEnd. Vevet.js Swipe API reference. - [Demos](https://vevetjs.com/docs/Swipe/demos.md): Swipe demos — pointer tracking, axis lock, rotation, bounds, inertia, rubber-band, direction detection, and image viewer examples. - [Interfaces](https://vevetjs.com/docs/Swipe/interfaces.md): Swipe interfaces — TypeScript types and interfaces. Vevet.js Swipe API reference. - [Methods](https://vevetjs.com/docs/Swipe/methods.md): Swipe methods — API reference. Vevet.js Swipe component. - [Props](https://vevetjs.com/docs/Swipe/props.md): Swipe props — configuration options for swipe component. Vevet.js Swipe API reference. ### Timeline Timeline — Vevet.js class for managing animations with easing, play, reverse, pause, and progress control. - [Timeline](https://vevetjs.com/docs/Timeline.md): Timeline — Vevet.js class for managing animations with easing, play, reverse, pause, and progress control. - [Accessors](https://vevetjs.com/docs/Timeline/accessors.md): Timeline accessors — progress, duration, state getters. Vevet.js Timeline API reference. - [Callbacks](https://vevetjs.com/docs/Timeline/callbacks.md): Timeline callbacks — onStart, onUpdate, onEnd. Vevet.js Timeline API reference. - [Methods](https://vevetjs.com/docs/Timeline/methods.md): Timeline methods — play, reverse, pause, reset and more. Vevet.js Timeline API reference. - [Props](https://vevetjs.com/docs/Timeline/props.md): Timeline props — mutable and static properties. Vevet.js Timeline API reference. ### utils Vevet.js utils — uid, closest, clamp and other lightweight utility functions. API reference. - [utils](https://vevetjs.com/docs/utils.md): Vevet.js utils — uid, closest, clamp and other lightweight utility functions. API reference. ## Optional - [GitHub repository](https://github.com/antonbobrov/vevet): Source code, issues, changelog - [npm package](https://www.npmjs.com/package/vevet): Install via npm install vevet - [TypeDoc API reference (v5)](https://vevetjs.com/v5/): Generated TypeScript API docs - [Full documentation export](https://vevetjs.com/llms-full.txt): All docs and demo code in one file — use when you need the complete export; prefer per-page .md from the index for focused reads - [AGENTS.md (for coding agents)](https://github.com/antonbobrov/vevet/blob/master/AGENTS.md): Rules for AI: docs + examples are source of truth; do not invent APIs --- # Full Documentation Content # Callbacks **Callbacks** is a typed event registry with support for one-time listeners, protected listeners, and delayed execution. It is used internally by **[Module](https://vevetjs.com/docs/base/Module/.md)** and all components. You can also instantiate it directly when building custom logic. ## Event map[​](#event-map "Direct link to Event map") Define events by extending `ICallbacksMap`. Each key is an event name; the value is the payload type passed to listeners on `emit`. Use `undefined` for events without a payload. ``` interface IMyCallbacks extends ICallbacksMap { init: undefined; update: { value: number }; } ``` ## In components[​](#in-components "Direct link to In components") Every **Module** owns a `callbacks` instance. Component constructor props such as `onMove` or `onDestroy` are registered on that instance (`onMove` → `move`). You can subscribe in two ways: * **Declarative** — pass `onEvent` functions in constructor props. * **Imperative** — call `instance.on('event', listener)` after creation. Both approaches use the same underlying **Callbacks** instance. See **[Module](https://vevetjs.com/docs/base/Module/.md)** for the component-level API. ## Constructor[​](#constructor "Direct link to Constructor") ``` new Callbacks(props?) ``` | Option | Type | Description | | ------ | ----- | ------------------------------------------------------------------- | | `ctx` | `Ctx` | Optional context forwarded as the second argument to every listener | Inside components, `ctx` is the module instance (`this`). ## Listener signature[​](#listener-signature "Direct link to Listener signature") Every listener receives two arguments: ``` (data, ctx) => void ``` * `data` — event payload from the map (`undefined` is passed explicitly when the event has no payload). * `ctx` — value from constructor `ctx` (the module instance in components). ## Methods[​](#methods "Direct link to Methods") | Method | Returns | Description | | ---------------------------- | ---------------- | ---------------------------------------------------------------- | | `on(target, fn, settings?)` | `() => void` | Registers a listener. Returned function removes it. | | `add(target, fn, settings?)` | `{ id, remove }` | Same as `on`, but also exposes the callback `id` for `remove()`. | | `emit(target, arg)` | `void` | Invokes all listeners for the event. | | `remove(id)` | `boolean` | Removes a listener by id. Protected listeners are skipped. | | `destroy()` | `void` | Clears all listeners. Further calls to `on` / `add` are no-ops. | | `list` | `ICallback[]` | Snapshot of registered listeners (for debugging). | Prefer `on()` when you only need a destructor. Use `add()` when you need the callback `id`. ## Settings[​](#settings "Direct link to Settings") Pass as the third argument to `on()` or `add()`: | Option | Type | Default | Description | | ----------- | --------- | ----------- | --------------------------------------------------------------------------------------- | | `once` | `boolean` | `false` | Remove the listener after the first execution. | | `protected` | `boolean` | `false` | Prevent manual removal via `remove()` or the `on()` destructor. Cleared on `destroy()`. | | `timeout` | `number` | `undefined` | Delay before the listener runs, in milliseconds. | | `name` | `string` | `undefined` | Optional label for debugging (`list`). | ## Example[​](#example "Direct link to Example") ``` import { Callbacks, ICallbacksMap } from 'vevet'; interface IMyCallbacks extends ICallbacksMap { init: undefined; update: { value: number }; } const callbacks = new Callbacks(); const remove = callbacks.on('update', ({ value }) => { console.log(value); }); callbacks.emit('update', { value: 1 }); remove(); callbacks.destroy(); ``` ## Typedoc[​](#typedoc "Direct link to Typedoc") For full API details and types, see **[Callbacks](https://vevetjs.com/v5/classes/Callbacks.html)** in Typedoc. --- # Module **Module** is the abstract base class for all Vevet.js components. It provides: * **Unified props** — static and mutable properties with a single `props` object. * **Callbacks** — built-in `destroy` and `props` events, plus custom events via **[Callbacks](https://vevetjs.com/docs/base/Callbacks/.md)**. * **Lifecycle** — `updateProps()`, `onDestroy()`, and `destroy()` with automatic cleanup. All components (Timeline, Swipe, Scrollbar, Marquee, etc.) extend **Module**. You can extend it to build your own modules. ## Constructor[​](#constructor "Direct link to Constructor") ``` new Module( props?: StaticProps & MutableProps, ); ``` * **props** — static and mutable properties, plus optional `onEvent` callbacks (e.g. `onDestroy`, `onResize`). Subclasses define defaults via `_getStatic()` and `_getMutable()`. ## Callbacks[​](#callbacks "Direct link to Callbacks") Every Module has at least these callbacks (see **[Callbacks](https://vevetjs.com/docs/base/Callbacks/.md)** for `on()`, settings, etc.): | Event | Payload | When | | --------- | ----------------------- | ------------------------------------------------------------------------------------ | | `destroy` | `undefined` | Before the module is destroyed and callbacks are cleared. | | `props` | `Partial` | After mutable props change via `updateProps()`. Diff of changed keys and new values. | Example: ``` const module = new Module({ weight: 70, onDestroy: () => console.log('destroyed'), onProps: () => console.log('props updated', module.props), }); module.updateProps({ weight: 72 }); // logs "props updated" and new props module.destroy(); // logs "destroyed" ``` Or using `.on()`: ``` const remove = module.on('props', () => console.log(module.props)); // later remove(); ``` ## Accessors[​](#accessors "Direct link to Accessors") | Accessor | Type | Description | | ------------- | ------------------------------- | ----------------------------------------------------------------------------------- | | `props` | `StaticProps & MutableProps` | Current properties. Do not mutate directly; use `updateProps()`. | | `prefix` | `string` | Class name prefix from core (e.g. for CSS class names). | | `name` | `string` | Constructor name (e.g. `"Timeline"`). | | `isDestroyed` | `boolean` | Whether the module has been destroyed. | | `callbacks` | `Callbacks` | The internal **[Callbacks](https://vevetjs.com/docs/base/Callbacks/.md)** instance. | ## Methods[​](#methods "Direct link to Methods") ### `updateProps(props)`[​](#updatepropsprops "Direct link to updatepropsprops") Updates mutable properties and emits the `props` callback. ``` module.updateProps({ weight: 75 }); ``` Does nothing if the module is already destroyed. ### `onDestroy(action)`[​](#ondestroyaction "Direct link to ondestroyaction") Registers a function to run when the module is destroyed (e.g. remove a class from an element). If the module is already destroyed, the action runs immediately. ``` module.onDestroy(() => element.classList.remove('active')); ``` ### `on(target, listener, settings?)`[​](#ontarget-listener-settings "Direct link to ontarget-listener-settings") Adds a callback for an event. Returns a function that removes the callback. See **[Callbacks](https://vevetjs.com/docs/base/Callbacks/.md)** for `settings` (e.g. `once`, `timeout`, `protected`). ``` const remove = module.on('props', () => {}); remove(); // unregister ``` ### `destroy()`[​](#destroy "Direct link to destroy") Destroys the module: emits `destroy`, clears callbacks, runs all `onDestroy` actions, and marks the instance as destroyed. Further calls to `updateProps` or `on` are no-ops. ``` module.destroy(); ``` ## Example[​](#example "Direct link to Example") Minimal custom module with typed props and callbacks: ``` import { Module, IModuleCallbacksMap, IModuleMutableProps, IModuleStaticProps, TModuleProps, } from 'vevet'; interface IMyCallbacks extends IModuleCallbacksMap { custom: { value: number }; } type TStatic = IModuleStaticProps & { title: string }; type TMutable = IModuleMutableProps & { count: number }; class MyModule extends Module { _getStatic() { return { ...super._getStatic(), title: '' }; } _getMutable() { return { ...super._getMutable(), count: 0 }; } constructor(props?: TModuleProps) { super(props); } } const m = new MyModule({ title: 'Hi', count: 1, onDestroy: () => console.log('destroyed'), onProps: () => console.log(m.props), }); m.updateProps({ count: 2 }); m.destroy(); ``` ## Typedoc[​](#typedoc "Direct link to Typedoc") For full API details and types, see **[Module](https://vevetjs.com/v5/classes/Module.html)** in Typedoc. --- # Responsive **Responsive** applies different property values based on viewport and device flags from `vevet`. Pass a **source** — a **[Module](https://vevetjs.com/docs/base/Module/.md)** instance or a plain object — and a list of **rules**. When the active breakpoint set changes, matching rule props are merged and applied. ## Source types[​](#source-types "Direct link to Source types") | Source | Behavior | | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | **Module** | Reads mutable props, writes merged values back via `updateProps()`. Manual `updateProps()` calls update the responsive baseline. Destroying the module also destroys **Responsive**. | | Plain object | Uses the object as initial state. The source object is **not** mutated — read `responsive.props` or use `onChange`. | ## Constructor[​](#constructor "Direct link to Constructor") ``` new Responsive( source: T, rules: TResponsiveRule[], onChange?: (props: TResponsiveProps) => void, ); ``` | Argument | Description | | ---------- | -------------------------------------------------------------------------------- | | `source` | **Module** instance or plain object. | | `rules` | Array of `{ at, props }` rules (see below). | | `onChange` | Optional. Called with merged `props` when the active breakpoint **set** changes. | ## Rules[​](#rules "Direct link to Rules") Each rule has the shape `{ at: query, props: partialProps }`. * **Multiple rules can match at once.** All active rules are merged in array order; later rules override earlier ones. * Updates run only when the set of matching `at` values changes (not on every resize tick with the same result). ### Query types (`at`)[​](#query-types-at "Direct link to query-types-at") | Query | When it matches | | ---------------- | ------------------------------------------------------------------------------------------------------- | | `'phone'` | `vevet.phone === true` | | `'tablet'` | `vevet.tablet === true` | | `'mobile'` | `vevet.mobile === true` (phone or tablet) | | `'non_mobile'` | `vevet.mobile === false` | | `'portrait'` | Viewport height > width | | `'landscape'` | Viewport width > height | | `'@media (...)'` | Custom media query via `window.matchMedia()`. Pass the full string, e.g. `'@media (min-width: 768px)'`. | Custom queries must contain `@media`. Any other string throws when **Responsive** is created. ## Accessors[​](#accessors "Direct link to Accessors") | Accessor | Type | Description | | -------- | --------------------- | ---------------------------------------------------------- | | `props` | `TResponsiveProps` | Current merged props (baseline + active rules). Read-only. | ## Methods[​](#methods "Direct link to Methods") ### `destroy()`[​](#destroy "Direct link to destroy") Removes the viewport listener and cleans up. Safe to call multiple times. When the source is a **Module**, **Responsive** also subscribes to the module `destroy` event and destroys itself automatically — a separate `responsive.destroy()` in teardown is optional. ``` responsive.destroy(); ``` ## Example — Module[​](#example-with-module "Direct link to Example — Module") ``` import { Marquee, Responsive } from 'vevet'; const marquee = new Marquee({ container: document.querySelector('.marquee'), gap: 20, }); const responsive = new Responsive(marquee, [ { at: '@media (min-width: 768px)', props: { gap: 50 } }, { at: '@media (min-width: 1200px)', props: { gap: 80 } }, ]); // Viewport crosses 768px / 1200px → marquee.updateProps({ gap: … }) marquee.destroy(); // responsive is destroyed automatically ``` ## Example — plain object[​](#example--plain-object "Direct link to Example — plain object") ``` const responsive = new Responsive( { count: 1, device: 'any' }, [ { at: 'mobile', props: { device: 'mobile' } }, { at: 'non_mobile', props: { device: 'desktop' } }, { at: '@media (min-width: 1024px)', props: { count: 3 } }, ], (props) => console.log(props), ); responsive.destroy(); ``` ## Typedoc[​](#typedoc "Direct link to Typedoc") For types and full API, see **[Responsive](https://vevetjs.com/v5/classes/Responsive.html)** in Typedoc. --- # Canvas The **Canvas** class simplifies working with an HTML5 Canvas element and its 2D rendering context. ## Basic Demo[​](#basic-demo "Direct link to Basic Demo") [Vevet Demo bNNbKXE](https://codepen.io/anton-bobrov/embed/bNNbKXE?default-tab=result) HTML ```
``` CSS ``` .container { position: relative; width: 200px; height: 200px; } ``` JavaScript ``` import { Canvas } from "vevet"; const instance = new Canvas({ container: document.getElementById("container") }); const render = ({ ctx, width, height }) => { ctx.beginPath(); ctx.fillStyle = "#f8f9ff"; ctx.fillRect(0, 0, width, height); ctx.closePath(); ctx.beginPath(); ctx.fillStyle = "#0D6EFD"; ctx.fillRect(10, 10, 50, 50); ctx.closePath(); }; instance.render(render); instance.on("resize", () => instance.render(render)); ``` [Open live demo ↗](https://vevetjs.com/pens/bNNbKXE) ## Overview[​](#overview "Direct link to Overview") This class provides a streamlined approach to handling a canvas by: * Automatically creating the `` element. * Managing resizing based on viewport or container size. * Offering access to useful properties like `width`, `height`, `dpr`, and `ctx`. * Supporting both automatic and manual resizing. * Implementing conditional rendering to prevent errors when the canvas is invisible or has zero size. ## Initialization[​](#initialization "Direct link to Initialization") note If the canvas or its container has zero width or height (e.g. `display: none`), rendering will be skipped automatically to prevent errors. Create a Canvas instance with auto-sizing: ``` const instance = new Canvas({ container: document.getElementById('container'), append: true, resizeOnInit: true, resizeOnRuntime: true, }); ``` Or predefined sizes: ``` const instance = new Canvas({ container: document.getElementById('container'), width: 300, height: 200, }); ``` Render your content: ``` const render = ({ ctx, width, height }) => { ctx.beginPath(); ctx.fillStyle = '#f8f9ff'; ctx.fillRect(0, 0, width, height); ctx.closePath(); ctx.beginPath(); ctx.fillStyle = '#0D6EFD'; ctx.fillRect(10, 10, 50, 50); ctx.closePath(); }; // instant render (will be cleared after resize) instance.render(render); // render on each resize instance.on('resize', () => instance.render(render)); ``` Destroy the canvas ``` instance.destroy(); ``` ## Best Practices[​](#best-practices "Direct link to Best Practices") * Always check `canRender` before performing expensive draw operations. * Prefer using the provided `render()` method instead of accessing `ctx` directly — it automatically guards against zero-size renders. * Use `resizeOnRuntime` only when necessary, as frequent resizes can be expensive. * When working with animations, combine `Canvas` with `Raf` utilities instead of manual `requestAnimationFrame`. * For high-performance scenes, consider limiting `dpr` to a fixed value instead of `'auto'`. --- # Accessors note All **[Module accessors](https://vevetjs.com/docs/base/Module/.md#accessors)** are available in this class. ### `canRender`[​](#canrender "Direct link to canrender") Type: `boolean` Checks if the canvas is ready to render. Returns `false` if the canvas `width` or `height` is `0`. ``` const canvas = new Canvas(); canvas.canRender; // true or false ``` ### `canvas`[​](#canvas "Direct link to canvas") Type: `HTMLCanvasElement` The canvas element instance. ``` const canvas = new Canvas(); canvas.canvas; // HTMLCanvasElement ``` ### `ctx`[​](#ctx "Direct link to ctx") Type: `CanvasRenderingContext2D` The 2D rendering context. ``` const canvas = new Canvas(); canvas.ctx; // CanvasRenderingContext2D ``` ### `dpr`[​](#dpr "Direct link to dpr") Type: `number` Current device pixel ratio. ``` const canvas = new Canvas(); canvas.dpr; // returns device pixel ratio ``` ### `height`[​](#height "Direct link to height") Type: `number` Canvas height (DPR applied). ``` const canvas = new Canvas(); canvas.height; // returns canvas height ``` ### `offsetHeight`[​](#offsetheight "Direct link to offsetheight") Type: `number` Height without DPR scaling. ``` const canvas = new Canvas(); canvas.offsetHeight; // returns canvas height without DPR applied ``` ### `offsetWidth`[​](#offsetwidth "Direct link to offsetwidth") Type: `number` Width without DPR scaling. ``` const canvas = new Canvas(); canvas.offsetWidth; // returns canvas width without DPR applied ``` ### `width`[​](#width "Direct link to width") Type: `number` Canvas width (DPR applied). ``` const canvas = new Canvas(); canvas.width; // returns canvas width ``` --- # Callbacks note All **[Module callbacks](https://vevetjs.com/docs/base/Module/.md#callbacks)** are available in this class. ### `resize`[​](#resize "Direct link to resize") Fires when the canvas is resized. ``` const canvas = new Canvas({ onResize: () => console.log('resize'), }); ``` or: ``` const destruct = canvas.on('resize', () => console.log('resize')); // Cancel the callback destruct(); ``` --- # Methods note All **[Module methods](https://vevetjs.com/docs/base/Module/.md#methods)** are available in this class. ### `render`[​](#render "Direct link to render") Renders content on the canvas **only if `canRender === true`**.
If the canvas has zero size, the render callback will be skipped. ``` const instance = new Canvas(); instance.render(({ canvas, ctx, dpr, width, height }) => { // Draw your scene here }); ``` ### `resize`[​](#resize "Direct link to resize") Triggers a canvas resize based on container or viewport dimensions. ``` const instance = new Canvas(); instance.resize(); ``` ### `updateProps`[​](#updateprops "Direct link to updateprops") Updates instance properties. ``` const instance = new Canvas(); instance.updateProps({ width: 100, height: 100, }); ``` ### `destroy`[​](#destroy "Direct link to destroy") Destroys the instance and cleans up resources. ``` const instance = new Canvas(); instance.destroy(); ``` --- # Props ## Static Props[​](#static-props "Direct link to Static Props") Static properties are set during initialization and cannot be modified later. ### `container`[​](#props.container "Direct link to props.container") * **Type:** `HTMLElement | null` * **Default:** `null` * Parent element used to determine canvas size. If `null`, it uses the viewport. ``` const canvas = new Canvas({ container: document.getElementById('container'), }); ``` ### `append`[​](#props.append "Direct link to props.append") * **Type:** `boolean` * **Default:** `true` * If `true`, appends the canvas to the `container`. Ignored if `container` is `null`. ``` const canvas = new Canvas({ append: false, }); ``` ### `resizeOnInit`[​](#props.resizeOnInit "Direct link to props.resizeOnInit") * **Type:** `boolean` * **Default:** `true` * Automatically adjusts canvas size on initialization. ``` const canvas = new Canvas({ resizeOnInit: true, }); ``` ### `resizeOnRuntime`[​](#props.resizeOnRuntime "Direct link to props.resizeOnRuntime") * **Type:** `boolean` * **Default:** `false` * Enables dynamic resizing based on viewport or container changes. * **Disabled by default** ``` const canvas = new Canvas({ resizeOnRuntime: true, }); ``` ### `viewportTarget`[​](#props.viewportTarget "Direct link to props.viewportTarget") * **Type:** `'width' | 'height' | 'both' | 'onlyWidth' | 'onlyHeight' | 'any' | 'trigger'` * **Default:** `'any'` * Defines which dimension(s) should trigger a resize. [Learn more](https://vevetjs.com/docs/core/features.md#vevetonresize) ``` const canvas = new Canvas({ viewportTarget: 'any', }); ``` ### `resizeDebounce`[​](#props.resizeDebounce "Direct link to props.resizeDebounce") * **Type:** `number` * **Default:** `0` * Debounce time (ms) for resize handling. ``` const canvas = new Canvas({ resizeDebounce: 0, }); ``` ## Mutable Props[​](#mutable-props "Direct link to Mutable Props") Mutable properties can be updated at runtime using `.updateProps()`. Adaptive props To apply different values by viewport or device, use **[Responsive](https://vevetjs.com/docs/base/Responsive/.md#example-with-module)** with this component as the source. Props will update automatically when breakpoints change. ### `width`[​](#props.width "Direct link to props.width") * **Type:** `'auto' | number` * **Default:** `'auto'` * Canvas width. Use `'auto'` to match the container's width. ``` const canvas = new Canvas({ width: 'auto', }); // change value canvas.updateProps({ width: 100, }); ``` ### `height`[​](#props.height "Direct link to props.height") * **Type:** `'auto' | number` * **Default:** `'auto'` * Canvas height. Use `'auto'` to match the container's height. ``` const canvas = new Canvas({ height: 'auto', }); // change value canvas.updateProps({ height: 100, }); ``` ### `dpr`[​](#props.dpr "Direct link to props.dpr") * **Type:** `'auto' | number` * **Default:** `'auto'` * Device Pixel Ratio (DPR). Use `'auto'` for automatic detection. ``` const canvas = new Canvas({ dpr: 'auto', }); // change value canvas.updateProps({ dpr: 100, }); ``` --- # CanvasMedia `CanvasMedia` is designed for **pre-rendering** media into a canvas layer. It does not replace video or image playback, but prepares rasterized content for performant reuse in animations, effects, and transitions. ## Basic Demo[​](#basic-demo "Direct link to Basic Demo") [Vevet Demo vEEBroM](https://codepen.io/anton-bobrov/embed/vEEBroM?default-tab=result) HTML ```

Original

Prerendered

``` CSS ``` .container { position: relative; width: 200px; height: 250px; background: var(--gradient-sunset, #000); } .source { display: block; width: 100px; height: auto; } ``` JavaScript ``` import { CanvasMedia } from "vevet"; const sourceImage = document.getElementById("source"); const handleLoad = () => { const instance = new CanvasMedia({ container: document.getElementById("container"), media: sourceImage, rule: "contain" }); }; if (sourceImage.complete) { handleLoad(); } else { sourceImage.onload = handleLoad; } ``` [Open live demo ↗](https://vevetjs.com/pens/vEEBroM) ## Initialization[​](#initialization "Direct link to Initialization") caution * The provided `media` **must be fully loaded** before initialization. * `CanvasMedia` does not handle media loading internally. Create a CanvasMedia instance and prerender an image inside it: ``` const instance = new CanvasMedia({ container: document.getElementById('container'), media: document.querySelector('img'), append: false, }); ``` Or video: ``` const instance = new CanvasMedia({ container: document.getElementById('container'), media: document.querySelector('video'), append: true, }); ``` Handle when your resource is rendered: ``` instance.on('render', () => { console.log('do something with your canvas', instance.canvas); }); ``` `render` also fires after `resize()` — for example when `rule` or canvas size changes. Destroy the canvas: ``` instance.destroy(); ``` ## Best Practices[​](#best-practices "Direct link to Best Practices") * Ensure media is loaded (`img.complete`, `video.readyState >= 2`) before creating `CanvasMedia`. * Use `CanvasMedia` for **visual reuse**, not as a replacement for `