120 Repositories
JavaScript typing-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 minimal typing practice website with no features except typing. Inspired from Monkeytype. Do ⭐ this repository.
SenpaiType Introduction SenpaiType is a minimal typing practice website with no features except typing. Inspired from Monkeytype. Contributing Raise i
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
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
An app to test out your typing speed, save your progress and view statistics against them.
Introduction An app to test out your typing speed, save your progress and view statistics against them. Demo Check out the quick demo here. Getting St
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
A small library for creating typing animations.
A small library for creating typing animations. View a short video demonstration here. Installation npm i tiper-js Usage Initialization is really simp
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
A jquery plugin to determine when a user has stopped typing in a text field.
The official home for the TypeWatch jQuery plugin. TypeWatch calls a function when a user has typed text in an input, textarea and changes in div from
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
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
Don't waste time looking at what you are typing, spend time thinking about the meaning.
LETA Don't waste time looking at what you are typing, spend time thinking about the meaning. About You will be able to: Practice touch typing Pick bes
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
Format input text content when you are typing...
Cleave.js Cleave.js has a simple purpose: to help you format input text content automatically. Features Credit card number formatting Phone number for
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+)
Fix for Object.keys, which normally just returns an array of strings, which is not good when you care about strong typing
Welcome to ts-object-keys 👋 Fix for Object.keys, which normally just returns an array of strings, which is not good when you care about strong typing
Fix for Object.hasOwnProperty, which normally just returns a boolean, which is not good when you care about strong typing.
Welcome to ts-has-own-property 👋 Fix for Object.hasOwnProperty, which normally just returns a boolean, which is not good when you care about strong t
Typr is a full-stack web application designed for new developers to improve their typing skills. User Authentication, Multiplayer, and Statistics included.
Typr Typr is a full-stack web application designed for new developers to improve their typing skills. It includes Javascript, Ruby and Python typing p
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
Runtime object parsing and validation with static TypeScript typing.
TypeParse Runtime object transformation, parsing and validation with inferred static TypeScript typing. Install Using npm npm install typeparse Using
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 type speed checking website which lets you check your typing speed and shows the real-tme leaderboards with mongodb as DB and express as backend
This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn dev Open http://
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
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 JavaScript Typing Animation Library
Live Demo | View All Demos | View Full Docs | mattboldt.com Typed.js is a library that types. Enter in any string, and watch it type at the speed you'
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
Javascript library for typing animation
typebot Javascript library for typing animation Usage: include script src="typebot.js"/script And in js new typebot(element,speed,delay,text,blink
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.
A weather app done with React. Allows you to make a search for the current weather by simply typing "common knowledge" cities and save them to favourites on local storage.
Simpliest Weather React-App A weather app done with React. Allows you to make a search for the current weather by simply typing "common knowledge" cit
THE PROJECT IDEA is to create a platform where developers can improve on their typing speed and accuracy by playing a coding typing game in their preferred programming language, which will make developers both beginners and pros get more familiar with the syntax of their programming languages.
Typing Game for Developers to Boost their Typing Speed and Accuracy Read Blog Technologies Yarn React JS Html Css Features 🎹 Typing Area 🌟 Ranking ?
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 VS Code extension to practice and improve your typing speed right inside your code editor. Practice with simple words or code snippets.
Warm Up 🔥 👨💻 A VS Code extension to practice and improve your typing speed right inside your code editor. Practice with simple words or code snipp
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
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
A React component for creating typing animations.
react-typewriter A react component for animated typing text. Installation npm install --save react-typewriter Usage Pass in children to the TypeWrite
"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
magneticHover lets you trigger hover effect on the element when the cursor is near it, but not over it yet
magneticHover magneticHover lets you trigger hover effect on the element when the cursor is near it, but not over it yet. Examples https://codesandbox
:tada: Add a cute click effect to your mouse in your vuepress!
vuepress-plugin-cursor-effects 🎉 Add a cute click effect to your mouse in your vuepress! Document: moefy-vuepress LiveDemo: notev Install yarn add vu