-
particles-bg - React component for particles backgrounds
-
Civic Auth
Auth in Less Than 5 Minutes. Civic Auth comes with multiple SSO options, optional embedded wallets, and user management — all implemented with just a few lines of code. Start building today.
-
particles-bg-vue - A vue.js particles animation background component. Use it to make your website look cool.
-
sparticles - Vanilla particles which can be used in a background or in a container, very fast and lightweight.
-
jquery.ripples - Add a water ripple effect to your background using WebGL.
-
MorphingBackgroundShapes
A decorative website background effect where SVG shapes morph and transform on scroll.
MorphingBackgroundShapes - A decorative website background effect where SVG shapes morph and transform on scroll..
-
SegmentEffect
Background image segment effect as seen on [Filippo Bello's Portfolio](http://www.filippobello.com/portfolio).
SegmentEffect - Background image segment effect as seen on [Filippo Bello's Portfolio].
-
jquery-bgswitcher - Switch the background-image with using effect.
-
InfluxDB
InfluxDB high-performance time series database. Collect, organize, and act on massive volumes of high-resolution data to power real-time intelligent systems.
-
BackgroundScaleHoverEffect
Recreation of the background scale hover effect seen on the DDD Hotel website using CSS clip paths.
BackgroundScaleHoverEffect - Recreation of the background scale hover effect seen on the DDD Hotel website using CSS clip paths.
-
ImageGridMotionEffect - A motion hover effect for a background grid of images..
-
jquery.adaptive-backgrounds.js
🦎 A jQuery plugin for extracting the dominant color from images and applying the color to their parent.
jquery.adaptive-backgrounds.js - A simple jQuery plugin to extract the dominant color of an image and apply it to the background of its parent element.
-
fixed-background-effect - A simple template that takes advantage of the background-attachment CSS property to create a fixed background effect.
-
jquery-warpdrive-plugin
Warp drive is a lightweight jQuery plugin that helps you create a cool, interactive, configurable, HTML5 canvas based warp drive/starfield effect.
jquery-warpdrive-plugin - Warp drive is a lightweight jQuery plugin that helps you create a cool, interactive, configurable, HTML5 canvas based warp drive/starfield effect.
-
mouse-particles - AboutA mouse particle effect react component
-
ImageTrailEffects
A set of effects for mouse-following image trails that show a random series of images.
ImageTrailEffects - A set of effects for mouse-following image trails that show a random series of images.
-
webgl-mouseover-effects
Demos for the tutorial on how to achieve an interactive mouseover/hover effect
webgl-mouseover-effects - Demos for the tutorial on how to achieve an interactive mouseover/hover effect
-
cursor-effectss - Only 90's kids remember... well not really, but these beloved effects that would follow your mouse around will always be classic reminders of the old, beloved internet.
-
mouse-text-shadow - CSS shadow effect & JavaScript mouse move
-
vuepress-plugin-cursor-effects - Add a cute click effect to your mouse in your vuepress!
-
jquery-animate3d - jQuery plugin that gives elements a 3d mouse over effect
-
magnetic-hover
magneticHover lets you trigger the 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
-
react-tilt - Parallax tilt hover effect for React JS - tilt.js
-
-
Tarjetas-3D - Código del Tutorial de Tarjetas 3D usando HTML5 y CSS3
-
3dtransforms-3D - Intro to CSS 3D transforms
-
Makisu - An experimental CSS 3D dropdown concept, wrapped up in a jQuery plugin.
-
super-mario - Pure CSS animated 3D Super Mario Icon
-
CSS3D.js - This experimental renderer was built for the design of Acko.net. It lets you manage simple CSS 3D objects using Three.js.
-
Solar-System - Solar System data visualisation done in HTML/CSS and a bit of Javascript.
-
React spring - Open source, spring-physics based animation library for React that supports interpolations. Fast and easy to use.
-
css-space-shooter
An old-school arcade-style 3D shoot-em-up rendered entirely with CSS 3D transforms
css-space-shooter - An old-school arcade-style 3D shoot-em-up rendered entirely with CSS 3D transforms
-
photon - CSS 3D Lighting Engine photon.attasi.com
-
gl-css3d - Synchronize CSS 3D transformations to a WebGL scene
-
ImageTiltEffect
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.
ImageTiltEffect - A subtle tilt effect for images. The idea is to move and rotate semi-transparent copies with the same background
-
Magnifier - Javascript library enabling magnifying glass effect on an images
-
gl-react-image-effects - universal image app that uses different gl-react components
-
StickyImageEffect - A sticky image effect for a slideshow inspired by ultanoir's website.
-
HeatDistortionEffect - Animated haze distortion effect for images and text, with WebGL
-
ImageDraggingEffects - A set of playful dragging effects for images using various techniques..
-
FullImageReveal - A full image reveal effect with fancy thumbnail sliding.
-
diaporama
Discontinued 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.
-
FollowCursor - Rotate elements to create a following effect
-
react-native-kenburns-view - KenBurns Image Effect for React Native Applications
-
vintageJS - Add a retro/vintage effect to images using the HTML5 canvas element
-
ThumbnailGridExpandingPreview
A tutorial on how to create a thumbnail grid with an expanding image preview similar to the effect seen on Google Images.
ThumbnailGridExpandingPreview - A tutorial on how to create a thumbnail grid with an expanding image preview similar to the effect seen on Google Images.
-
gridder
A jQuery plugin that displays a thumbnail grid expanding preview similar to the effect seen on Google Images.
gridder - A jQuery plugin that displays a thumbnail grid expanding preview similar to the effect seen on Google Images..
-
MotionTransitionEffect - A speedy motion transition effect for an image slideshow.
-
tiltedpage_scroll
Create a beautiful 3D tilted effect on scroll with jQuery Tilted Page Scroll plugin
tiltedpage_scroll - Create a beautiful 3D tilted effect on scroll with jQuery Tilted Page Scroll plugin
-
power-mode-input - PowerModeInput can make your text input box more compelling
-
typewriterjs - A simple yet powerful native javascript plugin for a cool typewriter effect.
-
t.js - Lightweight $.Hypertext.Typewriter
-
shuffle-text - "shuffle-text" is JavaScript text effect library such as cool legacy of Flash.
-
react-typewriter - A React component for creating typing animations.
-
t-writer.js - Native typewriter effect, without compromises or dependencies.
-
Malarkey - Simulate a typewriter effect in vanilla JavaScript.
-
tinytyper - A tiny library for creating a typing effect on specified text element.
-
jquery.typer - The typewriter effect
-
Phaser-typewriter - A phaser helper for the typewriter effect
-
transitions - Transition effect for Cocos Creator
-
ModalWindowEffects
A set of experimental modal window appearance effects with CSS transitions and animations.
ModalWindowEffects - A set of experimental modal window appearance effects with CSS transitions and animations.
-
CSS3-hover-transition-effect - CSS3-hover-transition-effect | Cipher trick
-
Html_Transition_Effect_Demo - It's pretty hover effects on circles with CSS Transitions which is very useful in dashboard.
-
GlitchSlideshow - A slideshow that uses a CSS glitch effect for slide transitions.
-
image-mask-effect - An immersive transition effect powered by image masks and CSS transforms.
-
ngView-animation-effects
Demonstration of different animation effects with AngularJS ngView directive.
ngView-animation-effects - Demonstration of different animation effects with AngularJS ngView directive.
-
WobblySlideshowEffect
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.
WobblySlideshowEffect - 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.
-
RainEffect
Some experimental rain and water drop effects in different scenarios using WebGL, by Lucas Bebber.
RainEffect - Some experimental rain and water drop effects in different scenarios using WebGL, by Lucas Bebber.
-
aframe-rain - aframe-rain is Rainfall effect component for A-Frame which displays a lot of rain drop/splash objects by using instancing technique with good performance.
-
matrix-rain - The famous Matrix rain effect of falling green characters in a terminal
-
Rainbow - A text effect jquery plugin (tested with jQuery 1.6.3)
-
Snowstorm
Enterprise-grade JavaScript snow effect for the internets, setting CPUs on fire worldwide every winter since 2003.
Snowstorm - Enterprise-grade JavaScript snow effect for the internets, setting CPUs on fire worldwide every winter since 2003.
-
snowstorm - A Snow Effect component for React. Uses Snowstorm under the hood.
-
react-snow-effect - react-snow-effect.
-
snowy - A HTML5 snow effect with random generated snow flakes.
-
the-matrix-effect - The incredible effect of rain of letters in the style of the Matrix trilogy.
-
smoke.js - Small but good javascript smoke effect
-
MagneticButtons - A set of buttons with a magnetic interaction and a hover effect.
-
ElasticProgress
Creates a button that turns into a progress bar with a elastic effect. Based on the Dribbble shot "Download" by xjw
ElasticProgress - Creates a button that turns into a progress bar with a elastic effect. Based on the Dribbble shot
-
vue-particle-buttons - A bursting particles effects buttons component
-
nativescript-shine-button - NativeScript plugin that add shine effect to your button.
-
react-parallax-button - Bring your react buttons to next level with parallax effect.
-
RippleButton - A Kony Visualizer reusable component of a button with a Material Theme ripple effect.
-
ParticleEffectsButtons
A little library that can be used for bursting particles effects on buttons and other elements
ParticleEffectsButtons - A little library that can be used for bursting particles effects on buttons and other elements
-
Asset-Loading-Effects - Loading effects for assets including some built in animated reveals
-
fakeLoader.js
Discontinued 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.
fakeLoader - 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.
-
LoadEffect - Distributed Load Testing in Javascript-like Scripting Language.
-
three-dots - 🔮 CSS loading animations made by single element.
-
css-page-loader - Lightweight CSS loading animations to use when page loads
-
Audio-Input-Effects - Live Audio Input effects
-
beez
Discontinued 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)
-
soundbank - Simple Web Audio API based reverb effect.
-
SoundEffectManager
A simple sound effect manager for playing sounds using the awesome HTML 5 Web Audio API
SoundEffectManager - A simple sound effect manager for playing sounds using the awesome HTML 5 Web Audio API
-
soma-fm-player
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.
soma-fm-player - SomaFM Music Player Web-App
-
canvas-video-effects - Live Image Processing w/ getUserMedia() & Web Workers
-
chroma-cam - Green screen effect in your webcam
-
webcam-effects - Webcam Effects in Three.js
-
JS-Webcam-effects - Webcam effects
-
expo-chroma-key-camera - Live green-screen effect with Expo and THREE.js
-
ChuckClose-SparkAR - A simple example how to use Visual Shaders with JS in Spark AR.
-
bounty - Javascript and SVG odometer effect library with motion blur
-
DistortedLinkEffects - Some ideas for decorative link distortion effects using SVG filters
-
ui-snippets-menu-animations
Four different menu animations for menu button toggle between hamburger, cross and back icon.
menu-animations - Four different menu animations for menu button toggle between hamburger, cross and back icon.
-
circle-svg-animation - Circle SVG Animation
-
OrganicShapeAnimations - Some shape morphing hover effects on images using SVG clipPath.
-
FancyLetterAnimation
An experimental SVG letter animation inspired by the Dribbble shot ["Shading Letters in Illustrator"](https://dribbble.com/shots/2943049-Shading-Letters-in-Illustrator) by Jake Bartlett's. Powered by Julian Garnier's [anime.js](http://anime-js.com/).
FancyLetterAnimation - An experimental SVG letter animation inspired by the Dribbble shot "Shading Letters in Illustrator" by Jake Bartlett's. Powered by Julian Garnier's anime.js.
-
IsometricCityAnimation - This is a simple svg isometric city animation with GSAP
-
lazy-line-painter - Lazy Line Painter - A Modern JS library for SVG path animation
-
jquery-drawsvg - Lightweight, simple to use jQuery plugin to animate SVG paths
-
svg-animation - The Illusion of Life: An SVG Animation Case Study
-
fireworks - fireworks Particles engine in javascript
-
fireworks.js
Discontinued A silly JavaScript animation experiment, originally written in 2005. (by scottschiller)
silly fireworks - A silly JavaScript animation experiment, originally written in 2005.
-
fireworks-webgl - WebGL + Web Audio API = Sound-driven fireworks!
-
fireworks-vr - WebGL Fireworks with ThreeJS In action: https://qake.se/fw/index.html
-
skyrocket - Design and Display fireworks on HTML canvas with Skyrocket.js
-
cool-fireworks - a particle fireworks effect.
-
lottie-sample - Demo after effect animation on web using Lottie
-
webEffects - jQuery Parallax is a script that simulates the parallax effect as seen
-
MobileComponent - dynamic effect component on mobile web
-
frosted-glass
Discontinued ❄️ 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.
-
pickout - Cool and powerful effect to select fields. Javascript vanilla and ~2kb gzipped
-
dissolve-generator - Cool 2D dissolve effect generator
-
redux-reducer-side-effects - Easy to follow side effect library for redux reducers
-
starry.night - The Starry Night animation in put.io's hero banner
-
bad-tv-shader - Simulates a bad TV via horizontal distortion and vertical roll.
-
map-effects-100 - Cool tips to design UI/UX on Leaflet maps.
-
svg-Circus - Create cool animated SVG spinners, loaders and other looped animations in seconds.
-
jsfx - This is a JavaScript library for sound effect generation and is supported on most current browsers.
-
aquarelle - Aquarelle is a watercolor effect component.
-
glitch - A glitched effect for DOM elements.
-
spread - Spread is a small experiment leveraging simple CSS3D transforms to create a colored plane.
-
doom-fire-algorithm
Playground for the fire effect from DOOM. Really simple algorithm and all experiments are welcome!
firealgorithm - A playground of experiments related to the Doom fire effect implemented in JavaScript. Feel free to submit your experiment with a Pull Request.
-
MMM-EyeCandy
Animated images that are superficially attractive and entertaining but intellectually undemanding. Cool as all hell though!
EyeCandy - Animated images that are superficially attractive and entertaining but intellectually undemanding.
-
animatelo
Animatelo is a bunch of cool, fun, and cross-browser animations for you to use in your projects. This is a porting to Web Animation API of the fabulous animate.css project.
animatelo - Animatelo is a bunch of cool, fun, and cross-browser animations for you to use in your projects
-
Snap.svg - The JavaScript library for modern SVG graphics.
-
Svg.js - The lightweight library for manipulating and animating SVG.
-
Vivus - Library to make drawing animation on SVG.
-
Walkway - An easy way to animate SVG elements.
-
Raphael - JavaScript Vector Library.
-
Bonsai - BonsaiJS is a graphics library and renderer.
-
GSAP - JavaScript animation library.
-
TweenJS
A simple but powerful tweening / animation library for Javascript. Part of the CreateJS suite of libraries.
TweenJS - A simple but powerful tweening / animation library for JavaScript. Part of the CreateJS suite of libraries.
-
Mojs - The motion graphics toolbelt for the web.
-
Move.js - CSS3 backed JavaScript animation framework.
-
Velocity - Accelerated JavaScript animation.
-
Animateplus - A+ animation module for the modern web.
-
Animatic - CSS animations engine.
-
Just Animate - Making Animation Simple.
-
core
:rice: Interactive UI animation engine for the Web. Core renderer for Haiku Animator. (by HaikuTeam)
Haiku Core - Interactive UI animation engine for the Web. Core renderer for Haiku Animator.
-
Between.js - Lightweight JavaScript (ES6) tweening engine.
-
Progressbar.js - Responsive and slick progress bars.
-
Bezier easing - Cubic-bezier implementation for your JavaScript animation easings.
-
Glsl easings - Easing functions in GLSL.
-
ES6-tween - ES6 version of tween.js.
-
animate.css
Discontinued 🍿 A cross-browser library of CSS animations. As easy to use as an easy thing. [Moved to: https://github.com/animate-css/animate.css] (by daneden)
Animate.css - A cross-browser library of CSS animations. As easy to use as an easy thing.
-
Motion-ui - The powerful Sass library for creating CSS transitions and animations.
-
EaselJS
The Easel Javascript library provides a full, hierarchical display list, a core interaction model, and helper classes to make working with the HTML5 Canvas element much easier.
EaselJS - EaselJS is a library for building high-performance interactive 2D content in HTML5.
-
Fabric.js - JavaScript canvas library with animation support.
-
paper.js
The Swiss Army Knife of Vector Graphics Scripting – Scriptographer ported to JavaScript and the browser, using HTML5 Canvas. Created by @lehni & @puckey
Paper.js - The Swiss Army Knife of Vector Graphics Scripting – Scriptographer ported to JavaScript and the browser, using HTML5 Canvas.
-
Konva
Konva.js is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.
Konva - Konva.js is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.
-
Two.js - A renderer agnostic two-dimensional drawing api for the web with animation support.
-
Ocanvas - JavaScript library for object-based canvas drawing.
-
curtainsjs
curtains.js is a lightweight vanilla WebGL javascript library that turns HTML DOM elements into interactive textured planes.
Curtainsjs - Lightweight vanilla WebGL JavaScript library that turns HTML DOM elements into interactive textured planes.
-
Hover-effect - JavaScript library to draw and animate images on hover.
-
Pts.js - Pts is a typescript/javascript library for visualization and creative-coding.
-
tsParticles
tsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.
tsParticles - tsParticles is a lightweight typescript/javascript library for creating easily particles animations.
-
AOS - Animate on scroll library.
-
laxxx
Simple & lightweight (<4kb gzipped) vanilla JavaScript library to create smooth & beautiful animations when you scroll.
Laxxx - Simple & light weight (3kb minified & zipped) vanilla JavaScript plugin to create smooth & beautiful animations when you scrolllll!
-
Wow - Reveal CSS animation as you scroll down a page.
-
scrollreveal
Discontinued Animate elements as they scroll into view. [Moved to: https://github.com/jlmakes/scrollreveal] (by scrollreveal)
Scrollreveal - Animate elements as they scroll into view.
-
ScrollMagic - The JavaScript library for magical scroll interactions.
-
Motus - Animation library that mimics CSS keyframes when scrolling.
-
Sal - Performance focused, lightweight scroll animation library.
-
Typed.js - A JavaScript Typing Animation Library.
-
Typebot - JavaScript library for typing animation.
-
Blotter - A JavaScript API for drawing unconventional text effects on the web.
-
framer/motion
Discontinued Open source, production-ready animation and gesture library for React [Moved to: https://github.com/motiondivision/motion]
Motion - Open source, production-ready animation and gesture library for React.
-
SVGR - Transform SVGs into React components.
-
CodeRabbit
CodeRabbit: AI Code Reviews for Developers. Revolutionize your code reviews with AI. CodeRabbit offers PR summaries, code walkthroughs, 1-click suggestions, and AST-based analysis. Boost productivity and code quality across all major languages with each PR.
