vevet

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 ↗

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.

• 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.