202 Repositories
JavaScript side-effect Libraries
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
A server side agnostic way to stream JavaScript.
JS in JSN A server side agnostic way to stream JavaScript, ideal for: inline hydration network free ad-hoc dependencies bootstrap on demand libraries
browser-side require() the node.js way
browserify require('modules') in the browser Use a node-style require() to organize your browser code and load modules installed by npm. browserify wi
Marble.js - functional reactive Node.js framework for building server-side applications, based on TypeScript and RxJS.
Functional reactive Node.js framework for building server-side applications, based on TypeScript and RxJS. Ecosystem Name Description @marblejs/core F
A progressive Node.js framework for building efficient, scalable, and enterprise-grade server-side applications on top of TypeScript & JavaScript (ES6, ES7, ES8) π
A progressive Node.js framework for building efficient and scalable server-side applications. Description Nest is a framework for building efficient,
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
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
Demos for the tutorial on how to achieve an interactive mouseover/hover effect
Interactive Hover Effects with Three.js A simple tutorial on how to achieve an interactive mouseover/hover effect on images in some easy steps. Articl
A mouse particle effect react component
react-mouse-particles A mouse particle effect react component A very fun react library that can be used to create mouse particle effects, which are as
Warp drive is a lightweight jQuery plugin that helps you create a cool, interactive, configurable, HTML5 canvas based warp drive/starfield effect.
Warp drive jQuery plugin (jquery-warpdrive-plugin) Preview Description Warp drive is a lightweight jQuery plugin that helps you create a cool, interac
fixed-background-effect
Fixed Background Effect A simple template that takes advantage of the background-attachment CSS property to create a fixed background effect. Article
A motion hover effect for a background grid of images.
Image Grid Motion Effect A motion hover effect for a background grid of images. Article on Codrops Demo Installation Install dependencies: npm install
Recreation of the background scale hover effect seen on the DDD Hotel website using CSS clip paths.
Background Scale Hover Effect Recreation of the background scale hover effect seen on the DDD Hotel menu using CSS clip paths. Article on Codrops Demo
Switch the background-image with using effect.
jQuery.BgSwitcher Switch the background image with using effect. Demo http://rewish.github.io/jquery-bgswitcher/ Usage div class="box" pLorem ip
Background image segment effect as seen on [Filippo Bello's Portfolio](http://www.filippobello.com/portfolio).
Segment Effect Background image segment effect as seen on Filippo Bello's Portfolio. Article on Codrops Demo License Integrate or build upon it for fr
A decorative website background effect where SVG shapes morph and transform on scroll.
Morphing Background Shapes A decorative website background effect where SVG shapes morph and transform on scroll. Article on Codrops Demo This demo is
Add a water ripple effect to your background using WebGL.
jQuery Ripples Plugin By the powers of WebGL, add a layer of water to your HTML elements which will ripple by cursor interaction! Important: this plug
πΌ A pure client-side landing page template that you can fork, customize and host freely. Relies on Mailchimp and Google Analytics.
landing-page-boilerplate A pure client-side landing page template that you can freely fork, customize, host and link to your own domain name (e.g. usi
Gmail-like client-side drafts and bit more. Plugin developed to save html forms data to LocalStorage to restore them after browser crashes, tabs closings and other disasters.
Sisyphus Plugin developed to save html forms data to LocalStorage to restore them after browser crashes, tabs closings and other disasters. Descriptio
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
Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation
Aphrodite Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation. Support for colocating y
Client/server side PDF printing in pure JavaScript
pdfmake PDF document generation library for server-side and client-side in pure JavaScript. Check out the playground and examples. This is unstable ma
Quasar Framework - Build high-performance VueJS user interfaces in record time
Quasar Framework Build high-performance VueJS user interfaces in record time: responsive Single Page Apps, SSR Apps, PWAs, Browser extensions, Hybrid
browser-side require() the node.js way
browserify require('modules') in the browser Use a node-style require() to organize your browser code and load modules installed by npm. browserify wi
browser-side require() the node.js way
browserify require('modules') in the browser Use a node-style require() to organize your browser code and load modules installed by npm. browserify wi
Yet another JS code coverage tool that computes statement, line, function and branch coverage with module loader hooks to transparently add coverage when running tests. Supports all JS coverage use cases including unit tests, server side functional tests and browser tests. Built for scale.
Istanbul - a JS code coverage tool written in JS Deprecation Notice: this version of istanbul is deprecated, we will not be landing pull requests or r
Simple and elegant component-based UI library
Simple and elegant component-based UI library Custom components β’ Concise syntax β’ Simple API β’ Tiny Size Riot brings custom components to all modern
A declarative, HTML-based language that makes building web apps fun
A declarative, HTML-based language that makes building web apps fun π₯ Docs β Try Online β Contribute β Get Support Intro Marko is HTML re-imagined as
1KB lightweight, fast & powerful JavaScript templating engine with zero dependencies. Compatible with server-side environments like node.js, module loaders like RequireJS and all web browsers.
JavaScript Templates Contents Demo Description Usage Client-side Server-side Requirements API tmpl() function Templates cache Output encoding Local he
Client-side JavaScript PDF generation for everyone.
A library to generate PDFs in JavaScript. You can catch me on twitter: @MrRio or head over to my company's website for consultancy. jsPDF is now co-ma
:sunglasses: Everything you need to know about Client-side Storage.
awesome-web-storage Everything you need to know about Client-side Storage. Table of Contents Introduction Browser Support Cookies Pros Cons API Useful
JavaScript Client-Side Cookie Manipulation Library
Cookies.js Cookies.js is a small client-side javascript library that makes managing cookies easy. Features Browser Compatibility Getting the Library U
jStorage is a simple key/value database to store data on browser side
NB! This project is in a frozen state. No more API changes. Pull requests for bug fixes are welcomed, anything else gets most probably ignored. A bug
A navigation aid (aka, router) for the browser in 850 bytes~!
A navigation aid (aka, router) for the browser in 865 bytes~! Install $ npm install --save navaid Usage const navaid = require('navaid'); // Setup r
Micro client-side router inspired by the Express router
Tiny Express-inspired client-side router. page('/', index) page('/user/:user', show) page('/user/:user/edit', edit) page('/user/:user/album', album) p
Makes typing in input fields fun with CSS3 effects
Fancy Input Makes typing & deleting in input/Textarea fields exciting & fun with CSS3 effects. View Demo Page Basic use example: !-- ...previous page
Plupload is JavaScript API for building file uploaders. It supports multiple file selection, file filtering, chunked upload, client side image downsizing and when necessary can fallback to alternative runtimes, like Flash and Silverlight.
Plupload Plupload is a cross-browser multi-runtime file uploading API. Basically, a set of tools that will help you to build a reliable and visually a
File Upload widget with multiple file selection, drag&drop support, progress bar, validation and preview images, audio and video for jQuery. Supports cross-domain, chunked and resumable file uploads. Works with any server-side platform (Google App Engine, PHP, Python, Ruby on Rails, Java, etc.) that supports standard HTML form file uploads.
jQuery File Upload Contents Description Demo Features Security Setup Requirements Mandatory requirements Optional requirements Cross-domain requiremen
:musical_score: ts-audio is an agnostic library that makes it easy to work with AudioContext and create audio playlists in the browser
ts-audio Β· ts-audio is an agnostic and easy-to-use library to work with the AudioContext API and create Playlists. Features Simple API that abstracts
Text Neon Golden effect jQuery plug-in
novacancy.js novacancy.js is a text neon golden effect jQuery plugin. Demo Visit demo site Basic Usage Just use $('#no').novacancy(); or detail $('#no
Click effect inspired by Google's Material Design
Waves Click effect inspired by Google's Material Design http://fian.my.id/Waves/ Documentation Waves uses Situs to generate documentation. Here are so
Simple parallax scrolling effect inspired by Spotify.com implemented as a jQuery plugin
Parallax.js Simple parallax scrolling implemented as a jQuery plugin. http://pixelcog.com/parallax.js/ Please also check our v2.0.0-alpha! We'd be hap
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
jQuery plugin for creating interactive parallax effect
jquery.parallax What does jquery.parallax do? jquery.parallax turns nodes into absolutely positioned layers that move in response to the mouse. Depend
An intro page with a full width background image, a bold animated menu and an iOS-like blurred effect behind the navigation
Full Page Intro & Navigation An intro page, focused around a full width background image and a bold animated menu. And, for browsers that support it,
An upgradable boilerplate for Progressive web applications (PWA) with server side rendering, build with SEO in mind and achieving max page speed and optimized user experience.
React PWA v2 A highly scalable, Progressive Web Application foundation,boilerplate, with the best Developer Experience. Demo: https://demo.reactpwa.co
Quasar Framework - Build high-performance VueJS user interfaces in record time
Quasar Framework Build high-performance VueJS user interfaces in record time: responsive Single Page Apps, SSR Apps, PWAs, Browser extensions, Hybrid
A document head manager for React
React Helmet This reusable React component will manage all of your changes to the document head. Helmet takes plain HTML tags and outputs plain HTML t
:hourglass_flowing_sand: A higher order component for loading components with promises.
A higher order component for loading components with dynamic imports. Install yarn add react-loadable Example import Loadable from 'react-loadable'; i
Modern framework for fast, powerful React apps
FUSION.JS Modern framework for fast, powerful React apps What is it? fuΒ·sion β noun The process or result of joining two or more things together to fo
A declarative, HTML-based language that makes building web apps fun
A declarative, HTML-based language that makes building web apps fun π₯ Docs β Try Online β Contribute β Get Support Intro Marko is HTML re-imagined as
Simple and elegant component-based UI library
Simple and elegant component-based UI library Custom components β’ Concise syntax β’ Simple API β’ Tiny Size Riot brings custom components to all modern
mxGraph is a fully client side JavaScript diagramming library
NOTE 09.11.2020 : Development on mxGraph has now stopped, this repo is effectively end of life. Known forks: https://github.com/jsGraph/mxgraph https: