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

Package detail

vevet

antonbobrov1.9kMIT5.0.11TypeScript 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 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.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)