vevet
v4.3.0
Published
Vevet is a flexible JavaScript library designed for creative web development
Downloads
1,397
Maintainers
Readme
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
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.