# vevet.js > vevet.js (npm: vevet) — client-side JavaScript library for creative web development. v5 · import { vevet, SplitText, Snap } from "vevet". All components extend Module. API: component sections below. Working examples: Demos pages (HTML/CSS/JS included). Full export: llms-full.txt. ## docs ### base - [Callbacks](https://vevetjs.com/docs/base/Callbacks/): Callbacks class — event listeners with one-or-multi-time execution, protection and delays. Vevet.js base. - [Module](https://vevetjs.com/docs/base/Module/): Module — base class for Vevet.js components. Props, callbacks, updateProps, onDestroy, destroy. - [Responsive](https://vevetjs.com/docs/base/Responsive/): 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/): Canvas — Vevet.js class for HTML5 Canvas and 2D context. Simplifies canvas rendering and animation. - [Accessors](https://vevetjs.com/docs/Canvas/accessors): Canvas accessors — context, size getters. Vevet.js Canvas API reference. - [Callbacks](https://vevetjs.com/docs/Canvas/callbacks): Canvas callbacks — render and resize events. Vevet.js Canvas API reference. - [Methods](https://vevetjs.com/docs/Canvas/methods): Canvas methods — API reference. Vevet.js Canvas component. - [Props](https://vevetjs.com/docs/Canvas/props): 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/): CanvasMedia — Vevet.js pre-rendering of media into canvas layer for animations, effects and transitions. - [Accessors](https://vevetjs.com/docs/CanvasMedia/accessors): CanvasMedia accessors — state getters. Vevet.js CanvasMedia API reference. - [Callbacks](https://vevetjs.com/docs/CanvasMedia/callbacks): CanvasMedia callbacks — media events. Vevet.js CanvasMedia API reference. - [Methods](https://vevetjs.com/docs/CanvasMedia/methods): CanvasMedia methods — API reference. Vevet.js CanvasMedia component. - [Props](https://vevetjs.com/docs/CanvasMedia/props): 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/): 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): Vevet.js CSS variables — --vw, --vh, --svh, --scrollbar-width for viewport units and layout. - [Customization](https://vevetjs.com/docs/core/customization): Customize Vevet.js via window.VEVET_PROPS — override default settings before library initialization. - [Features](https://vevetjs.com/docs/core/features): 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/): Cursor — Vevet.js smooth custom cursor with hover interactions. Position, size and appearance interpolation. - [Accessors](https://vevetjs.com/docs/Cursor/accessors): Cursor accessors — position, state getters. Vevet.js Cursor API reference. - [Callbacks](https://vevetjs.com/docs/Cursor/callbacks): Cursor callbacks — hover and move events. Vevet.js Cursor API reference. - [Demos](https://vevetjs.com/docs/Cursor/demos): Cursor demos and examples. Vevet.js Cursor component. - [Interfaces](https://vevetjs.com/docs/Cursor/interfaces): Cursor interfaces — TypeScript types. Vevet.js Cursor API reference. - [Methods](https://vevetjs.com/docs/Cursor/methods): Cursor methods — API reference. Vevet.js Cursor component. - [Props](https://vevetjs.com/docs/Cursor/props): 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): 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/): InView — Vevet.js visibility detection with IntersectionObserver. Viewport enter/leave, direction, CSS classes and animations. - [Accessors](https://vevetjs.com/docs/InView/accessors): InView accessors — visibility state getters. Vevet.js InView API reference. - [Callbacks](https://vevetjs.com/docs/InView/callbacks): InView callbacks — visibility and direction events. Vevet.js InView API reference. - [Demos](https://vevetjs.com/docs/InView/demos): InView demos and examples. Vevet.js InView component. - [Methods](https://vevetjs.com/docs/InView/methods): InView methods — API reference. Vevet.js InView component. - [Props](https://vevetjs.com/docs/InView/props): 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/): Marquee — Vevet.js custom marquee component for smooth horizontal or vertical scrolling. - [Accessors](https://vevetjs.com/docs/Marquee/accessors): Marquee accessors — state getters. Vevet.js Marquee API reference. - [Callbacks](https://vevetjs.com/docs/Marquee/callbacks): Marquee callbacks — scroll events. Vevet.js Marquee API reference. - [Demos](https://vevetjs.com/docs/Marquee/demos): Marquee demos and examples. Vevet.js Marquee component. - [Methods](https://vevetjs.com/docs/Marquee/methods): Marquee methods — API reference. Vevet.js Marquee component. - [Props](https://vevetjs.com/docs/Marquee/props): 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/): 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): Pointers accessors — state getters. Vevet.js Pointers API reference. - [Callbacks](https://vevetjs.com/docs/Pointers/callbacks): Pointers callbacks — pointer events. Vevet.js Pointers API reference. - [Interfaces](https://vevetjs.com/docs/Pointers/interfaces): Pointers interfaces — TypeScript types. Vevet.js Pointers API reference. - [Methods](https://vevetjs.com/docs/Pointers/methods): Pointers methods — API reference. Vevet.js Pointers component. - [Props](https://vevetjs.com/docs/Pointers/props): 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/): Preloader — Vevet.js page preloader component for loading screen visibility and lifecycle. - [Accessors](https://vevetjs.com/docs/Preloader/accessors): Preloader accessors — state getters. Vevet.js Preloader API reference. - [Callbacks](https://vevetjs.com/docs/Preloader/callbacks): Preloader callbacks — lifecycle events. Vevet.js Preloader API reference. - [Demos](https://vevetjs.com/docs/Preloader/demos): Preloader demos and examples. Vevet.js Preloader component. - [Methods](https://vevetjs.com/docs/Preloader/methods): Preloader methods — API reference. Vevet.js Preloader component. - [Props](https://vevetjs.com/docs/Preloader/props): 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/): ProgressPreloader — Vevet.js preloader for tracking and displaying loading progress of images, videos and custom resources. - [Accessors](https://vevetjs.com/docs/ProgressPreloader/accessors): ProgressPreloader accessors — progress getters. Vevet.js ProgressPreloader API reference. - [Callbacks](https://vevetjs.com/docs/ProgressPreloader/callbacks): ProgressPreloader callbacks — loading events. Vevet.js ProgressPreloader API reference. - [Demos](https://vevetjs.com/docs/ProgressPreloader/demos): ProgressPreloader demos and examples. Vevet.js ProgressPreloader. - [Methods](https://vevetjs.com/docs/ProgressPreloader/methods): ProgressPreloader methods — API reference. Vevet.js ProgressPreloader. - [Props](https://vevetjs.com/docs/ProgressPreloader/props): 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/): Raf — Vevet.js requestAnimationFrame loop with FPS throttling, play/pause, FPS measurement and frame-rate-independent animations. - [Accessors](https://vevetjs.com/docs/Raf/accessors): Raf accessors — FPS, duration getters. Vevet.js Raf API reference. - [Callbacks](https://vevetjs.com/docs/Raf/callbacks): Raf callbacks — frame events. Vevet.js Raf API reference. - [Demos](https://vevetjs.com/docs/Raf/demos): Raf demos and examples. Vevet.js Raf animation loop. - [Methods](https://vevetjs.com/docs/Raf/methods): Raf methods — play, pause, API reference. Vevet.js Raf component. - [Props](https://vevetjs.com/docs/Raf/props): 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/): Scrollbar — Vevet.js customizable scrollbar for window or element. Scroll tracking, drag, auto-sizing and styling. - [Accessors](https://vevetjs.com/docs/Scrollbar/accessors): Scrollbar accessors — scroll position, progress getters. Vevet.js Scrollbar API reference. - [Callbacks](https://vevetjs.com/docs/Scrollbar/callbacks): Scrollbar callbacks — scroll events. Vevet.js Scrollbar API reference. - [Demos](https://vevetjs.com/docs/Scrollbar/demos): Scrollbar demos and examples. Vevet.js Scrollbar component. - [Methods](https://vevetjs.com/docs/Scrollbar/methods): Scrollbar methods — API reference. Vevet.js Scrollbar component. - [Props](https://vevetjs.com/docs/Scrollbar/props): 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/): 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/): Snap — Vevet.js carousel handler with precise control over movement, snapping and interaction. Custom layout and styling. - [Accessors](https://vevetjs.com/docs/Snap/accessors): Snap accessors — index, progress, state getters. Vevet.js Snap API reference. - [Advanced Demos](https://vevetjs.com/docs/Snap/advanced-demos): Snap advanced demos. Custom carousel patterns with Vevet.js Snap. - [Basic Demos](https://vevetjs.com/docs/Snap/basic-demos): Snap basic demos and examples. Vevet.js Snap carousel. - [Callbacks](https://vevetjs.com/docs/Snap/callbacks): Snap callbacks — onActiveSlide, onSwipe and more. Vevet.js Snap API reference. - [Methods](https://vevetjs.com/docs/Snap/methods): Snap methods — API reference. Vevet.js Snap carousel. - [Parallax](https://vevetjs.com/docs/Snap/parallax): Snap Parallax — parallax effects with Snap. Vevet.js Snap API reference. - [Parallax Demos](https://vevetjs.com/docs/Snap/parallax-demos): Snap parallax demos. Built-in parallax attributes for Vevet.js Snap carousels. - [Props](https://vevetjs.com/docs/Snap/props): Snap props — carousel configuration. Vevet.js Snap API reference. - [SnapSlide](https://vevetjs.com/docs/Snap/slide): 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/): SplitText — split text into lines, words and letters. Resize support, HTML and emoji handling. Vevet.js. - [Accessors](https://vevetjs.com/docs/SplitText/accessors): SplitText accessors — lines, words, letters getters. Vevet.js SplitText API reference. - [Callbacks](https://vevetjs.com/docs/SplitText/callbacks): SplitText callbacks — event hooks. Vevet.js SplitText API reference. - [Demos](https://vevetjs.com/docs/SplitText/demos): SplitText demos and examples. Vevet.js SplitText component. - [Methods](https://vevetjs.com/docs/SplitText/methods): SplitText methods — split, destroy. Vevet.js SplitText API reference. - [Props](https://vevetjs.com/docs/SplitText/props): 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/): 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): Swipe accessors — getters for coordinates and state. Vevet.js Swipe API reference. - [Callbacks](https://vevetjs.com/docs/Swipe/callbacks): Swipe callbacks — onStart, onMove, onEnd. Vevet.js Swipe API reference. - [Demos](https://vevetjs.com/docs/Swipe/demos): Swipe demos and examples. Vevet.js Swipe component. - [Interfaces](https://vevetjs.com/docs/Swipe/interfaces): Swipe interfaces — TypeScript types and interfaces. Vevet.js Swipe API reference. - [Methods](https://vevetjs.com/docs/Swipe/methods): Swipe methods — API reference. Vevet.js Swipe component. - [Props](https://vevetjs.com/docs/Swipe/props): 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/): Timeline — Vevet.js class for managing animations with easing, play, reverse, pause, and progress control. - [Accessors](https://vevetjs.com/docs/Timeline/accessors): Timeline accessors — progress, duration, state getters. Vevet.js Timeline API reference. - [Callbacks](https://vevetjs.com/docs/Timeline/callbacks): Timeline callbacks — onStart, onUpdate, onEnd. Vevet.js Timeline API reference. - [Methods](https://vevetjs.com/docs/Timeline/methods): Timeline methods — play, reverse, pause, reset and more. Vevet.js Timeline API reference. - [Props](https://vevetjs.com/docs/Timeline/props): 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/): 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 as markdown in a single file - [AGENTS.md (for coding agents)](https://github.com/antonbobrov/vevet/blob/master/AGENTS.md): Repository guide for AI coding assistants --- # Full Documentation Content # Callbacks **Callbacks** class manages event listeners with support for one-time execution, protection, and delays. It's used internally in the **[Module](https://vevetjs.com/docs/base/Module/)** and all components, but you can also instantiate it independently: ``` // Define the interface for callback events interface ICallbacks { init: undefined; update: { value: number; }; } // Create a Callbacks instance const callbacks = new Callbacks(); // Register a basic callback for "init" const removeSimpleCallback = callbacks.on('init', () => { console.log('callback on init'); }); // Register a protected callback (cannot be removed manually) const protectedCallback = callbacks.on( 'init', () => { console.log('protected callback'); }, { protected: true }, ); // Register a one-time callback const removeOnceCallback = callbacks.on( 'init', () => { console.log('one-time callback'); }, { once: true }, ); // Register a delayed callback (executes after 1000ms) const removeDelayedCallback = callbacks.on( 'init', () => { console.log('delayed callback'); }, { timeout: 1000 }, ); // Emit the "init" callbacks callbacks.emit('init', undefined); // Register a callback with an argument and emit it const onUpdate = callbacks.on('update', ({ value }) => { console.log('update', value); }); callbacks.emit('update', { value: 0 }); // Remove a specific callback removeSimpleCallback(); // Attempting to remove a protected callback (no effect) protectedCallback(); // List all registered callbacks console.log(callbacks.list); // Remove all callbacks callbacks.destroy(); ``` ### Learn more in the [Typedoc](https://vevetjs.com/vevet/v5/classes/Callbacks)[​](#learn-more-in-the-typedoc "Direct link to learn-more-in-the-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/)**. * **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, onCallbacks?: TModuleOnCallbacksProps, ); ``` * **props** — initial static and mutable properties. Subclasses define defaults via `_getStatic()` and `_getMutable()`. * **onCallbacks** — optional object of callbacks keyed by `onEventName` (e.g. `onDestroy`, `onProps`). These are registered on the internal Callbacks instance. ## Callbacks[​](#callbacks "Direct link to Callbacks") Every Module has at least these callbacks (see **[Callbacks](https://vevetjs.com/docs/base/Callbacks/)** for `on()`, settings, etc.): | Event | Payload | When | | --------- | ----------- | --------------------------------------------------------- | | `destroy` | `undefined` | Before the module is destroyed and callbacks are cleared. | | `props` | `undefined` | After mutable props are updated via `updateProps()`. | 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/)** 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/)** 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, IModuleStaticProps, IModuleMutableProps, } 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?: TStatic & TMutable, onCallbacks?: any) { super(props, onCallbacks); } } 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. You pass a **source** (a **[Module](https://vevetjs.com/docs/base/Module/)** instance or a plain object) and a list of **rules**. When the active breakpoint changes, the matching rule’s `props` are merged into the source and (for Module) applied via `updateProps()`. Use it to change component options by screen size (e.g. Marquee `gap`, Snap `slidesPerView`) or to drive any key-value state from breakpoints. ## Constructor[​](#constructor "Direct link to Constructor") ``` new Responsive( source: T, rules: TResponsiveRule[], onChange?: (props: TResponsiveProps) => void, ); ``` * **source** — a **[Module](https://vevetjs.com/docs/base/Module/)** instance or a plain object. For Module, only its **mutable** props are read and updated; for a plain object, the object is used as-is. * **rules** — array of `{ at: query, props: partialProps }`. The first matching rule (and any following matches) are merged in order; later rules override earlier ones. * **onChange** — optional callback called with the current merged `props` whenever the active breakpoint set changes. ## Query types (`at`)[​](#query-types-at "Direct link to query-types-at") Rules are matched when the given condition is true. Supported `at` values: | 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. Pass the full string, e.g. `'@media (min-width: 768px)'`. `window.matchMedia()` is used to test it. | Only one rule per condition is typically needed; multiple rules can match at once and their `props` are merged in array order. ## Accessors[​](#accessors "Direct link to Accessors") | Accessor | Type | Description | | -------- | --------------------- | ---------------------------------------------------------------------- | | `props` | `TResponsiveProps` | Current merged props (initial source props + active rules). Read-only. | ## Methods[​](#methods "Direct link to Methods") ### `destroy()`[​](#destroy "Direct link to destroy") Removes the viewport listener and cleans up. When the source is a **Module**, Responsive subscribes to its `destroy` and is typically destroyed together with the module (e.g. in the same `useEffect` cleanup). Does nothing if already destroyed. ``` responsive.destroy(); ``` ## Example — plain object[​](#example--plain-object "Direct link to Example — plain object") Use a plain object as source to drive your own state from breakpoints: ``` const responsive = new Responsive( { width: 'any', count: 1, device: 'any', }, [ { at: 'tablet', props: { device: 'tablet' } }, { at: 'phone', props: { device: 'phone' } }, { at: 'mobile', props: { device: 'mobile' } }, { at: 'non_mobile', props: { device: 'desktop' } }, { at: 'landscape', props: { width: 'landscape' } }, { at: 'portrait', props: { width: 'portrait' } }, { at: '@media (min-width: 1024px)', props: { count: 3 } }, ], (props) => { console.log('Active props:', props); }, ); // Read current props console.log(responsive.props); // Cleanup when done responsive.destroy(); ``` ## Example — with Module (e.g. Marquee)[​](#example-with-module "Direct link to Example — with Module (e.g. Marquee)") Pass a Module instance so Responsive updates its mutable props when breakpoints change: ``` 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 }, }, ]); // When viewport crosses 768px or 1200px, marquee.updateProps() is called // with the merged props (e.g. { gap: 50 } or { gap: 80 }). // Cleanup: destroy Responsive and the module marquee.on('destroy', () => responsive.destroy()); // or in your teardown: marquee.destroy(); responsive.destroy(); ``` Initial props come from the Module’s current mutable props. Responsive overrides them when a rule matches and keeps them in sync on viewport resize. ## 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 `context`. * 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/#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/#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/#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#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/#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: linear-gradient(35deg, rgb(255, 127, 135) 0%, rgb(244, 214, 157) 100%); } .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); }); ``` 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 `