Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

vevet

antonbobrov4.1kMIT5.1.4TypeScript support: included

Vevet is a JavaScript library for creative development that simplifies crafting rich interactions like split text animations, carousels, marquees, preloading, and more.

creative, responsive, interactive, animations, canvas, prerendering, cursor, viewport, intersection, marquee, pointer-events, preloader, raf, scroll-progress, carousel, snap, split-text, swipe, timeline, os-detection, browser-detection, viewport-units, scrollbar

readme

Vevet.js is a flexible, client-side JavaScript library for creative web development.

The primary goal of Vevet is to simplify the creation of interactive components from scratch — be it text animations, carousels, or other interactive elements.

Documentation ↗

Changelog ↗

NPM Usage

npm install vevet

JavaScript:

import { vevet } from 'vevet';

console.log(vevet.version); // => 5.0.0

SCSS:

@import '~vevet/lib/styles/index';

CDN Usage

<script src="
https://cdn.jsdelivr.net/npm/vevet@5/lib/cdn/vevet.iife.min.js
"></script>

<script>
  console.log(Vevet.app.version); // => 5.0.0
</script>

Components

  • Canvas simplifies working with an HTML5 Canvas element and its 2D rendering context.

  • CanvasMedia enables pre-rendering of media assets (such as images and videos) onto a canvas.

  • Cursor is customizable custom cursor component with smooth animations and hover interactions.

  • InView is a visibility detection utility that leverages the IntersectionObserver API to monitor when elements enter or leave the viewport.

  • Marquee is custom marquee component that smoothly scrolls its child elements.

  • Pointers manages pointer events, including tracking multiple pointers, and emitting callbacks for pointer interactions.

  • Preloader manages the visibility and lifecycle of a loading screen.

  • ProgressPreloader calculates and displays the loading progress of resources (images, videos, custom elements).

  • Raf manages an animation frame loop with configurable FPS and playback controls.

  • ScrollProgress tracks the scroll progress of a specified section element.

  • Scrollbar is a custom scrollbar component.

  • Snap is a custom carousel handler.

  • SplitText splits text within a container into individual lines, words, and letters.

  • Swipe manages swipe interactions: tracks movement and detects direction, emits events on start, move, and end, supports inertia-based movement.

  • Timeline is a simple timeline class for managing animations with easing and precise progress control.

changelog

Changelog

5.1.3 (2025-11-07)

SplitText

  • better support of text direction and alignment (8919519)

5.1.2 (2025-10-21)

Marquee

  • add direction, totalSize & coord. Allow vertial animation (79c7b1a)

5.1.1 (2025-10-17)

closest

  • return target if values are empty (9b7eed3)

Swipe

  • fix velocity calculations (f017013)

Timeline

  • make duration always finite (c0cfc35)

5.1.0 (2025-10-15)

Cursor

  • fix animation start on enter & leave (8427330)

inRange

Module

  • skip undefined when merging props (c27d1d0)

onResize

  • use width viewport target by default (66f72fb)

Pointers

Snap

  • friction default value is 0 (1344ee7)
  • add freemode: sticky (eef91d8)
  • add getNearestMagnet method (9503c8e)
  • add isSwiping state (801894c)
  • add swipeInertiaStart, swipeInertiaEnd, swipeInertiaCancel & swipeInertiaFail callbacks (13081d9)
  • better interpolation of track values (1abde41)
  • better wheel logic; remove wheelNoFollowThreshold & add stickOnWheelEndThreshold (e38dc2d)
  • end short swipe without inertia when freemode is sticky (89ec054)
  • reveal render method (1034c7e)
  • update transition props, add easing, onStart, onUpdate, onEnd (f28d5c4)

Swipe

  • add inertiaDistanceThreshold (ac00113)
  • add inertiaFail & inertiaCancel callbacks (1fae9b6)

toPixels

5.0.11 (2025-07-15)

clamp

  • use real min-max values (b35331c)

Snap

  • add swipeInertiaDuration (cfeacee)
  • add swipeInertiaRatio (d63b420)
  • better logic when followWheel is false; add wheelNoFollowThreshold (077e8db)
  • better magnets (56c5974)
  • use inertia for scrollbale slides (47d387c)

Swipe

  • add velocityModifier & refactor inertia calculations (d17e5e8)
  • respect inertiaRatio when velocityModifier is used (5152f2f)
  • update default inertiaDuration (678131d)
  • update default inertiaRatio (a99e8f7)

5.0.10 (2025-06-07)

Snap

5.0.9 (2025-05-30)

Scrollbar

Snap

5.0.8 (2025-05-27)

Marquee

5.0.7 (2025-05-16)

Core

  • remove css presets duplicates (a320de1)

5.0.6 (2025-05-14)

Snap

  • fix closest magnets detection for non-loop sliders (78e7529)
  • reset targetIndex on timeline animation end, fix activeSlide callback triggering (e3b5f1f)

SplitText

  • add ignore prop (17f7b78)
  • better line splitting, respect rtl direction (a0652bf)
  • restore node styles on destroy (78a8799)

5.0.5 (2025-05-12)

  • Snap: optimize activeSlide calling (ead0cb6)
  • Rename getClosest to closest (1184214)

5.0.4 (2025-05-12)

  • Snap: better prev/next logic (8553bb3)
  • Utils: add getClosest (20a056e)
  • Snap/Track: add offset & loopCount (bbe58dc)

5.0.3 (2025-05-02)

5.0.2 (2025-04-14)

5.0.1 (2025-03-13)

  • Version 5 (#31)