125 Repositories
JavaScript mouse-effect Libraries
a temporary solution to revert to the old ui. the new ui was put into effect since april
Revert-YouTube-UI a temporary solution to revert to the old ui. the new ui was put into effect since april and is slowly rolling out to users. Feature
A JavaScript plugin for creating a tickerboard effect. Plugin for React or vanilla JS.
ticker-board A JavaScript plugin for creating a tickerboard effect. See the Ticker Board page for more info. Importing it There are basically two ways
a JavaScript library that allows you to make a mouse interaction animation easily.
Cotton.JS is a JavaScript library that allows you to make a mouse interaction animation easily. Getting Started Download npm install cottonjs Manual
jQuery plugin for adding some effect to text
jquery.textroll.js DEMO and examples jQuery plugin for adding some effect to text : DEMO Usage Simple $(".someClass").textroll(); With Options
Small js library to animate some writing effect through a list of strings. It also supports settings for typo errors, to make it more human likely.
Write and Delete Small js library to animate some writing effect through a list of strings. It also supports settings for typo errors, to make it more
ezoom.js is a jQuery plugin for simple Image with zoom effect.
ezoom.js ezoom.js is a jQuery plugin for simple Image with zoom effect. This plugin in under development to support Next/Prev a gallery Images/SVG lat
Canvas-based JavaScript UI element implementing touch, keyboard, mouse and scroll wheel support.
pure-knob Initially a (circular) knob / dial control with mouse, wheel, touch and keyboard support, implemented in pure JavaScript. In addition, this
A simple and useful jquery plugin that allows you to create a Text Area Character Count Effect with limited warning.
jquery-character-counter A simple and useful jquery plugin that allows you to create a Text Area Character Count Effect with limited warning. #Demo Us
Fully controllable vanilla-js material design ripple effect generator.
Fully controllable vanilla-js material design ripple effect generator. This can be used with any JavaScript framework and/or any CSS framework. Demo I
A JavaScript library to shuffle the text content of a DOM element with an animated effect.
shuffle-letters.js A JavaScript library to shuffle the text content of a DOM element with an animated effect. NOTE: This library is a port to vanilla
jquery plugin to convert number inputs into knobs that can be adjusted by dragging with mouse or fingers
jquery-knobby is a jquery plugin to convert number input elements into turnable knobs that can be adjusted by cyclic dragging with mouse or fingers -
🦉The jQuery plugin "Stick to me" allows you to create exit-popups on your web page, so you can capture visitors just as they are about to leave.
🦉 The jQuery plugin "Stick to me" allows you to create exit-popups on your web page, so you can capture visitors just as they are about to leave. How
A very simple JavaScript library written in vanilla js for scrambling text.
Scrambling Text A very simple JavaScript library written in vanilla js for scrambling text. Demo Page Table of Contents Installation Examples Basic Ex
Flexible, powerful and modern library for creating the running horizontal blocks effect, also known as ticker or the «marquee effect».
Cuberto Reeller Flexible, powerful and modern library for creating the running horizontal blocks effect, also known as ticker or the «marquee effect».
Little Alpine.js plugin to add a typewriter effect to any HTML element.
⌨️ Alpine Typewriter ⌨️ An Alpine.js plugin to add a typewriter effect to any HTML element. 🚀 Installation CDN Include the following script tag in
Enable Acrylic/Glass effect for your VS Code.
Visual Studio Code Extension - Vibrancy Continued The original extension has been deprecated, this version will continue to be supported and receive c
Snowfall effect written in pure JavaScript. No additional libraries, no dependencies. Works in every modern browser.
pureSnow.js Snow falling slowly on a winter night. Probably the most calming and peaceful snowfall effect written in pure JS/CSS. (No SCSS). Inspired
Javascript library to animate images on hover.
Ripple Hover Effect Javascript library to animate images on hover. If this project help you, don't forget to star it. Codepen demo by Essam Abed Demo
A lightweight, efficient and easy-to-use Canvas library for building some cool particle effects.
JParticles · 中文 | English 官网：jparticles.js.org 特效列表 粒子运动 波纹运动 波纹进度条 雪花飘落 线条动画 介绍 JParticles（JavaScript Particles 的缩写）是一款基于 Canvas 的不依赖于其他库的轻量级 JavaScr
Smooth scrolling effect (while using mouse wheel). No jQuery or other unnecessary stuff needed.
scrooth Smooth scrolling effect (while using mouse wheel). No jQuery or other unnecessary stuff needed. Why? I needed that, and I was unable to find p
A simple waves effect library
jquery-waves A simple & lightweight waves effect plugin Installation You can install jquery-waves plugin using npm or include directly files install u
A JavaScript animation plugin for menus. It creates a div that moves when you mouse over an element, giving it an elastic animation.
Lava-Lamp Description: A JavaScript animation plugin for menus. It creates a div that moves when you mouse over an element, giving it an elastic anima
An open-source Typing-effect Library, That enables potential users to add a typing effect to mere DOM Elements.
Typing Effect Library An open-source Typing-effect Library I created. That enables potential users to add a typing effect to mere DOM Elements. Tool P
Simple fixed background parallax effect in vanilla js.
Simple Parallax Simple fixed background parallax effect in vanilla js. See demo on Codepen. JS Initialise the plugin. The first argument identifies th
Demonstration of liquid effect on HTML Canvas using Matter.js and SVG Filters (Blur + Contrast)
Canvas Liquid Effect Demonstration of liquid (or gooey) effect on HTML Canvas using Matter.js and SVG Filters (feGaussianBlur and feColorMatrix). DEMO
👇 Bread n butter utility for component-tied mouse/touch gestures in Solid.
solid-gesture solid-gesture is a port of @use-gesture/react which lets you bind richer mouse and touch events to any component or view. With the data
A jQuery plugin that adds cross-browser mouse wheel support.
jQuery Mouse Wheel Plugin A jQuery plugin that adds cross-browser mouse wheel support with delta normalization. In order to use the plugin, simply bin
A simple library to view large images up close using simple mouse interaction, and the full screen.
Intense Images A stand alone javascript library for viewing images on the full, full screen. Using the touch/mouse position for panning. Here's a demo
Sticker.js - A Javascript library that allows you to create a Sticker Effect.
Sticker.js A Javascript library that allows you to create a Sticker Effect. No dependencies Works in most of major browsers that support CSS 3 (IE10+)
👇 Bread n butter utility for component-tied mouse/touch gestures in Svelte.
svelte-gesture svelte-gesture is a library that lets you bind richer mouse and touch events to any component or view. With the data you receive, it be
A Deno library for interacting with the mouse 🖱️ keyboard ⌨️ and screen 💻
A Deno library for interacting with the mouse 🖱️ keyboard ⌨️ and screen 💻 . Litebot provides a simple API for creating kbm events, macros, & working with displays. Litebot leverages Deno's FFI to allow speedy low level control in C & C++ while having a typescript API exposed to the user.
A JavaScript library for adding ripple effects to HTML elements based on mouse events.
About project Ripplejs is an open source javascript library created for the purpose of adding ripple effects to html elements based on mouse events. L
A powerful javascript library to create amazing and smooth effects for the mouse cursor on your website.
Cuberto Mouse Follower A powerful javascript library to create amazing and smooth effects for the mouse cursor on your website. Dependencies GSAP v3 (
An experimental hover effect, where a content preview is shown while a mini map indicates the position of the cursor.
Hover Preview Effect with Mini Map An experimental hover effect, where a content preview is shown while a mini map indicates the position of the curso
Easy Effect is a WYSIWYG Lottie animation editor, dedicated to helping you make dynamic effects easily.
Easy Effect 🖖 Introduction Easy Effect is a WYSIWYG animation editor based on Lottie. ✨ Feature 🌈 ease to use Anyone who want to create an animation
A basic Typewriter effect.
Remotion video A basic Typewriter template. video.mp4 Commands Install Dependencies npm i Start Preview npm start Render video npm run build Upgrade R
A lightweight (1.7 kB) package to easily track mouse position in React.js
useMousePosition - a custom React hook A lightweight (1.7 kB) package to easily track mouse position in React.js Install npm install react-use-mouse-p
👨🏼🎨 It is a virtual blackboard, where you can make 🖌 drawings through 🖱 the mouse. You have the option to choose 🎨 colors and line thickness.
👨🏼🎨 Lets Draw 🎨 ÍNDICE 1. Lets-Draw 2. Realization of the Project 3. Technologies used 4. Authors 1. Lets-Draw 👨🏼🎨 It is a virtual blackboard
Effect hooks that support ref.current dependency
use-ref-deps-effect Effect hooks that support "ref.current" dependency Install npm i use-ref-deps-effect Example import { useRefDepsEffect } from 'use
This script produce the video scroll effect that we can find on the Apple Website's
Scrollable Sequence Description This script produce the video scroll effect that we can find on the Apple Website's. This script is inspired from the
AutoScroll is a plugin for BetterDiscord that brings the mouse wheel button autoscroll feature to the GNU/Linux and macOS client.
AutoScroll AutoScroll is a plugin for BetterDiscord that brings the mouse wheel button autoscroll feature to the GNU/Linux and macOS client. This plug
Bursting particle effect buttons for React 🎉
react-particle-effect-button (demo) Bursting particle effect buttons for React. This library is a React port of an awesome Codrops Article by Luis Man
A tiny javascript library for obfuscating and revealing text in DOM elements
baffle.js A tiny javascript library for obfuscating and revealing text in DOM elements. camwiegert.github.io/baffle ~1.8kb gzipped ⚡ Dependency-free ?
Javascript library to draw and animate images on hover
Hover effect Javascript library to draw and animate images on hover. If this project help you, you like this library or you just want to thank me, you
Make the content slide prettily across the screen with variable sizes of scrolling items, in any of four directions, pausing while the mouse is over the marquee, and all with vanilla JavaScript.
TEG Marquee Make the content slide prettily across the screen with variable sizes of scrolling items, in any of four directions, pausing while the mou
Liquideffect - Javascript Library for creating liquid effect on image and RGB effect on mouse direction.
LiquidEffect Javascript Library for creating liquid effect on image and RGB effect on mouse direction. Demo https://liquideffect.netlify.app/ Dependen
Atropos - Stunning touch-friendly 3D parallax hover effects
Atropos Atropos is a lightweight, free and open-source JavaScript library to create stunning touch-friendly 3D parallax hover effects. Available for J
TypeWriter - Create easily a TypeWriter effect for your website
TypeWriter Create easily a TypeWriter effect for your website Written by Luuk Walstra Discord: Luuk#8524 Github: https://github.com/Luuk-Dev Replit: h
The Ripple Effect (An Ethereum-Based Fundraiser App)
The-Ripple-Effect---An-Ethereum-Based-Fundraiser-App - The Ripple Effect is a ethereum based fundraising app that can not only be used to donate to a specific cause but also to allocate/distribute funds with total transparency. The frontend has been made on ReactJS with the backend on Solidity with the help of Ganache.
PackageInfo - chrome-extension which provides information about node packages, whenever you select the package name using mouse
PackageInfo chrome-extension which provides information about node packages, whenever you select the package name using mouse Whenever you surf throug
Interactive digital art with head-coupled perspective effect using Three.js and TensorFlow.js
Interactive digital frame with head-tracking using Three.js & TensorFlow.js Using TensorFlow.js and Three.js, this project is a prototype of an intera
A vanishing effect for particles and magic lovers using Threejs, GSAP and custom shaders.
Three.js Experiment - Vanishing Suzanne Demo version Get started First, you need nodejs on your computer to build the assets. Install dependencies: np
Demo of the tutorial on how to craft a fullscreen SVG crosshair mouse cursor with a special distortion effect on hover.
Crosshair Mouse Cursor Distortion Demo of the tutorial on how to craft a fullscreen SVG crosshair mouse cursor with a special distortion effect on hov
Taps provide source agnostic sync access to the input. Either it comes from mouse and/or touch, it is the same API. It assumes multiple instances of taps making your code multi-touch by design. Providing sync access instead of event-based, for best usage in real-time applications.
mr-Taps Taps provide source agnostic sync access to input. Either it comes from mouse and/or touch, it is the same API. It assumes multiple instances
Dragscroll is a micro library for drag-n-drop scrolling style
Dragscroll is a micro JavaScript library (910 bytes minified) which enables scrolling via holding the mouse button ("drag and drop" or "click and hold" style, online demo). It has no dependencies and is written in vanilla JavaScript (which means it works anywhere).
Playground for the fire effect from DOOM. Really simple algorithm and all experiments are welcome!
Doom Fire Algorithm Playground A playground of experiments related to the Doom fire effect implemented in JavaScript. Feel free to submit your experim
🎨 Aquarelle is a watercolor effect component. Javascript library by @Ramotion
Aquarelle About This project is maintained by Ramotion, Inc. We specialize in the designing and coding of custom UI for Mobile Apps and Websites. Look
Javascript Sound Effect Generator
This is a JavaScript library for sound effect generation and is supported on most current browsers. Generation speed is approximately 1s audio = 10ms
BadTV Effect for Three.js
Bad TV Shader for Three.js Simulates a bad TV via horizontal distortion and vertical roll. Screenshot Demo View Demo Uniforms time steadily increasing
Cool 2D dissolve effect generator
Dissolve Cool 2D dissolve effect generator (demo) This module exposes a generator for generating pseudorandom points over a 2D integer grid. The gener
Cool and powerful effect to select fields. Javascript vanilla and ~2kb gzipped
pickout Cool and powerful effect to select fields. Javascript vanilla and ~2kb gzipped. DEMO PAGE For syntax of the previous version click here How to
❄️ Add a live frosted glass blur effect over any type of web content, including text.
Frosted Glass ❄️ Add a live frosted glass blur effect over any type of web content, including text. ️️ Demos Install npm install frosted-glass --save
Javascript and SVG odometer effect library with motion blur
SVG library for transitioning numbers with motion blur JavaScript odometer or slot machine effect library for smoothly transitioning numbers with moti
This is a Vue.js web application for streaming radio stations from Somafm.com. This app uses the public SomaFM JSON channels API endpoint to pull in a list of stations and makes it easy to switch between stations. This app also uses Three.js and the HTML5 Web Audio Context API to sample audio data and create a visualizer effect for the selected station.
SomaFM Music Player Web-App This is a Vue.js web application for streaming radio stations from Somafm.com. This app uses the public SomaFM JSON channe
Simple Web Audio API based reverb effect.
soundbank-reverb Simple Web Audio API based reverb effect. Based on https://github.com/web-audio-components/simple-reverb by Nick Thompson. Intended f
100% web real-time audio experiment using smartphones as effect controller. (tech: Android Chrome + WebRTC + Web Audio API)
beez 100% web real-time audio experiment using smartphones as effect controller. (tech: Android Chrome + WebRTC + Web Audio API) The concept An Hive i
fakeLoader.js is a lightweight jQuery plugin that helps you create an animated spinner with a fullscreen loading mask to simulate the page preloading effect.
What is fakeLoader.js fakeLoader.js is a lightweight jQuery plugin that helps you create an animated spinner with a fullscreen loading mask to simulat
Creates a button that turns into a progress bar with a elastic effect. Based on the Dribbble shot "Download" by xjw
Elastic Progress Creates a button that turns into a progress bar with a elastic effect. Based on a Dribbble shot by xjw. By Lucas Bebber. Article on C
A set of buttons with a magnetic interaction and a hover effect.
Magnetic Buttons A small set of magnetic buttons with some fun hover animations. Inspired by the button animation seen on Cuberto. Article on Codrops
Small but good javascript smoke effect 🌬💨
Demo You can play with a live demo here → Installation Basic Copy the smoke.js file into your project and use it with a script tag: script src="smoke
The incredible effect of rain of letters in the style of the Matrix trilogy.
O Efeito Matrix O incrível efeito da chuva de letras no estilo da trilogia Matrix. "Cedo ou tarde, você vai aprender, assim como eu aprendi, que exist
A Snow Effect component for React.
react-snowstorm A Snow Effect component for React. Uses Snowstorm under the hood. Live Demo : http://burakcan.github.io/react-snowstorm Getting Starte
Enterprise-grade JavaScript snow effect for the internets, setting CPUs on fire worldwide every winter since 2003.
/** * DHTML Snowstorm! JavaScript-based Snow for web pages * -------------------------------------------------------- * Version 1.44.20131208 (Prev
The famous Matrix rain effect of falling green characters in a terminal
Matrix Rain The famous Matrix rain effect of falling green characters in a terminal with node. Installation npm install -g matrix-rain Usage usage: m
A-Frame Rainfall effect component
A-Frame Rain component aframe-rain is Rainfall effect component for A-Frame which displays a lot of rain drop/splash objects by using instancing techn
The slides in this slideshow wobble as they move. The effect is based on Sergey Valiukh's Dribbble shot and was made using Snap.svg and morphing SVG paths.
Wobbly Slideshow Effect The slides in this slideshow wobble as they move. The effect is based on Sergey Valiukh's Dribbble shot and was made using Sna
A slideshow that uses a CSS glitch effect for slide transitions.
Glitch Slideshow A slideshow that uses the CSS Glitch Effect to transition between slides. Article on Codrops Demo Credits Images by Unsplash.com imag
Transition effect for Cocos Creator
Transitions This project is based on Cocos Creator 2.3.0. Online Demo : http://2youyou2.com/transitions Usage Add transitions node to the scene, the t
A phaser helper for the typewriter effect
Phaser-typewriter A typewriter effect wrapper for Phaser.io Javascript library Initialize the typewriter anywhere in your game var typewriter = new Ty
The typewriter effect
#No documentation yet! (feel free to write a bit about it) Download Get the raw script, download the complete package or fork it on GitHub. Support @y
⌨️ A tiny library for creating a typing effect on specified text element.
⌨️ TinyTyper - a tiny library for creating a typing effect on specified text element. Demo Size (It's really tiny) Minimized: 2.9KB Gziped: 1.1KB Inst
:keyboard: Simulate a typewriter effect in vanilla JavaScript.
malarkey Simulate a typewriter effect in vanilla JavaScript. Flexible API allowing granular control Option to repeat the sequence indefinitely Allows
Native typewriter effect, without compromises or dependencies.
T-Writer.js Native typewriter effect, without compromises or dependencies. See a demo for ideas/examples. Why Creating a custom typewriter effect can
"shuffle-text" is JavaScript text effect library such as cool legacy of Flash.
ShuffleText This is the JavaScript library for text effect such as Flash contents. Setup Script Install script src="shuffle-text.js"/script NPM In
A simple yet powerful native javascript plugin for a cool typewriter effect.
TypewriterJS v2 NPM Repository JSFiddle Example Emoji Example CDN You can use the CDN version of this plugin for fast and easy setup. script src="htt
Create a beautiful 3D tilted effect on scroll with jQuery Tilted Page Scroll plugin
#Tilted Page Scroll by Pete R. Create a beautilful 3D tilted scrolling effect for your website with jQuery Tilted Page Scroll. Created by Pete R., Fou
A speedy motion transition effect for an image slideshow.
Motion Transition Effect A speedy motion transition effect for an image slideshow. Inspired by Ping Pong Slow Motion. Article on Codrops Demo Credits
A jQuery plugin that displays a thumbnail grid expanding preview similar to the effect seen on Google Images.
jQuery GRIDDER 1.4.2 ======= A jQuery plugin that displays a thumbnail grid expanding preview similar to the effect seen on Google Images. We have all
A tutorial on how to create a thumbnail grid with an expanding image preview similar to the effect seen on Google Images.
Thumbnail Grid with Expanding Preview A tutorial on how to create a thumbnail grid with an expanding image preview similar to the effect seen on Googl
Add a retro/vintage effect to images using the HTML5 canvas element
vintageJS Add a retro/vintage effect to images using the HTML5 canvas element. Installation $ npm install vintagejs How to use vintagejs is a functio
KenBurns Image Effect for React Native Applications
react-native-kenburns-view KenBurns Image Effect for React Native. Based on Image Component Image Component. Version: 4.1.0 Tested on React Native 0.6
image/video/content slideshow engine providing high quality animation effects including Kenburns Effect and GLSL Transitions.
Diaporama Diaporama is an image/video/content slideshow engine providing high quality animation effects including Kenburns effect and GLSL Transitions
A full image reveal effect with fancy thumbnail sliding.
Full Image Reveal Effect A full image reveal effect with fancy thumbnail sliding. Article on Codrops Demo Credits Images from Unsplash.com TweenMax by
Animated haze distortion effect for images and text, with WebGL.
Animated Heat Distortion Effects with WebGL A tutorial on how to use fragment shaders in WebGL to create an animated heat haze distortion effect on im
A sticky image effect for a slideshow inspired by ultanoir's website.
How to Create a Sticky Image Effect with Three.js A sticky image effect for a slideshow inspired by ultanoir's project showcase slideshow. Article on
Javascript library enabling magnifying glass effect on an images
Magnifier.js Javascript library enabling magnifying glass effect on an images. Demo and documentation Features: Zoom in / out functionality using mous
A subtle tilt effect for images. The idea is to move and rotate semi-transparent copies with the same background image in order to create a subtle motion or depth effect.
Image Tilt Effect A subtle tilt effect for images. The idea is to move and rotate semi-transparent copies with the same background image in order to c
Pure CSS Image Hover Effect Library
imagehover.css A Scaleable & Light Image Hover CSS Library Imagehover.css is a lovingly crafted CSS library allowing you to easily implement scaleable
Simple jQuery plugin for 3d Hover effect
jQuery Hover3d jQuery Hover3d is a simple hover script for creating 3d hover effect. It was my experiment on exploring CSS3 3d transform back in 2015
👓 Parallax tilt hover effect for React JS - tilt.js
React.js - Tilt.js React version of tilt.js Demo https://vx-demo.now.sh/gallery Install yarn: yarn add react-tilt npm: npm install --save react-tilt U