vevet

Vevet - a JavaScript Library for Creative Development

Vevet is a flexible JavaScript library designed for creative web development. It offers pre-built solutions like smooth scrolling, text splitting, custom cursors, and other interactive components, allowing developers to enhance the visual and functional aspects of their websites.

Vevet is highly customizable, seamlessly integrates into existing projects, and provides basic and advanced functionalities for developers aiming to boost site interactivity.

Links

• Demo
• Documentation

Library Contents

Core Features Demo / Docs:

• Device Detection
  • vevet.isPhone, vevet.isTablet, vevet.isDesktop, vevet.isMobile
• Browser Information
  • vevet.osName, vevet.browserName, vevet.isWebpSupported (Check WebP support)
• Page Load Detection
  • vevet.isPageLoaded, vevet.onPageLoad
• Viewport Management
  • vevet.viewport (Handles resize events efficiently)
    • width, height, sHeight, vw, vh, svh, isDesktop, isTablet, isPhone, isPortrait, isLandscape, dpr, lowerDpr

Animation:

• AnimationFrame Demo / Docs: Simplifies the use of requestAnimationFrame, offering custom FPS control.
• Timeline Demo / Docs: Helps create simple, timeline-based animations.

Graphics:

• Ctx2D Demo / Docs: Manages canvas creation and 2D context with automatic resizing.
• Ctx2DPrerender Demo / Docs: Optimizes texture handling by pre-rendering images for better performance.

Events:

• DraggerDirection Demo / Docs: Detects the direction of swipes.
• DraggerMove Demo / Docs: Ideal for building custom carousels with easy drag handling.
• ScrollView Demo / Docs: Manages elements' visibility in and out of the viewport.
• SectionScrollProgress Demo / Docs: Tracks scroll progress within a specific section.
• SlideProgress Demo / Docs: Helps you create a draggable carousel.

Components:

• CustomCursor Demo / Docs: Create a custom, smooth cursor for your website.
• Marquee Demo / Docs: Efficiently creates continuously running text.
• Preloader Demo / Docs: Hides content until the page is fully loaded.
• ProgressPreloader Demo / Docs: A more powerful version, displaying real-time loading progress.
• ScrollBar Demo / Docs: Customizes scrollbars by hiding default system bars.
• CustomScroll Demo / Docs: Provides simple and smooth scrolling functionality.
  • CustomScrollDragPlugin: Adds drag-based navigation to smooth scrolling.
  • CustomScrollKeyboardPlugin: Enables keyboard-based scrolling.
• SplitText Demo / Docs: Splits text into letters, words, or lines, offering high performance for animations, similar to SplitText or SplitType, but free and optimized.

Installation via NPM

To install Vevet, use the following command:

npm install vevet

Importing Styles

To use Vevet's styles, import them as follows:

Base Styles

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

Full Styles

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

Specific Component Styles

For example, to import styles for the custom cursor:

@import '~vevet/lib/styles/components/CustomCursor';

Example: Initializing a Component

Below is an example of how to initialize the CustomCursor component:

import { CustomCursor } from 'vevet';

const instance = new CustomCursor({
  container: document.getElementById('container')!,
});

Development Environment

• Node.js: v20.17.0

License

This project is licensed under the terms of the MIT license.