[38;5;12m                                                                                                             [39m[38;2;255;187;0m[1m[4mawesome-web-effect[0m

[38;5;14m[1m![0m[38;5;12mAwesome[39m[38;5;14m[1m (https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)[0m[38;5;12m (https://github.com/sindresorhus/awesome)[39m

[38;2;255;187;0m[4m🚀 A series of exquisite and compact web page cool effects[0m

[38;5;12mIt's like decorating a beautiful Christmas tree in a room. Sometimes a small web page with cool effects will make your project shine. This is a very fun series, I want to collect those cool effects that are common on the page.[39m

[38;5;12mNot limited to any framework (react, vue, angular, etc.), as long as the effect can be simply inserted into the page, you can send it to me, I like them and hope you like them too.[39m

[38;5;12m![39m[38;5;14m[1mimg[0m[38;5;12m (https://github.com/lindelof/awesome-web-effect/blob/master/banner.jpg?raw=true)[39m


[38;2;255;187;0m[4mBackground Decoration[0m

[38;5;12m- [39m[38;5;14m[1mparticles-bg[0m[38;5;12m (https://github.com/lindelof/particles-bg) - React component for particles backgrounds[39m
[38;5;12m- [39m[38;5;14m[1mparticles-bg-vue[0m[38;5;12m (https://github.com/lindelof/particles-bg-vue) - A vue.js particles animation background component. Use it to make your website look cool.[39m
[38;5;12m- [39m[38;5;14m[1msparticles[0m[38;5;12m (https://github.com/simeydotme/sparticles) - Vanilla particles which can be used in a background or in a container, very fast and lightweight.[39m
[38;5;12m- [39m[38;5;14m[1mjquery.ripples[0m[38;5;12m (https://github.com/sirxemic/jquery.ripples) - Add a water ripple effect to your background using WebGL.[39m
[38;5;12m- [39m[38;5;14m[1mMorphingBackgroundShapes[0m[38;5;12m (https://github.com/codrops/MorphingBackgroundShapes) - A decorative website background effect where SVG shapes morph and transform on scroll..[39m
[38;5;12m- [39m[38;5;14m[1mSegmentEffect[0m[38;5;12m (https://github.com/codrops/SegmentEffect) - Background image segment effect as seen on [39m[38;5;14m[1mFilippo Bello's Portfolio[0m[38;5;12m .[39m
[38;5;12m- [39m[38;5;14m[1mjquery-bgswitcher[0m[38;5;12m (https://github.com/rewish/jquery-bgswitcher) - Switch the background-image with using effect.[39m
[38;5;12m- [39m[38;5;14m[1mBackgroundScaleHoverEffect[0m[38;5;12m (https://github.com/codrops/BackgroundScaleHoverEffect) - Recreation of the background scale hover effect seen on the DDD Hotel website using CSS clip paths.[39m
[38;5;12m- [39m[38;5;14m[1mImageGridMotionEffect[0m[38;5;12m (https://github.com/codrops/ImageGridMotionEffect) - A motion hover effect for a background grid of images..[39m
[38;5;12m- [39m[38;5;14m[1mjquery.adaptive-backgrounds.js[0m[38;5;12m (https://github.com/briangonzalez/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.[39m
[38;5;12m- [39m[38;5;14m[1mfixed-background-effect[0m[38;5;12m (https://github.com/CodyHouse/fixed-background-effect) - A simple template that takes advantage of the background-attachment CSS property to create a fixed background effect.[39m
[38;5;12m- [39m[38;5;14m[1mjquery-warpdrive-plugin[0m[38;5;12m (https://github.com/NiklasKnaack/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.[39m


[38;2;255;187;0m[4mMouse Effect[0m
[38;5;12m- [39m[38;5;14m[1mmouse-particles[0m[38;5;12m (https://github.com/lindelof/react-mouse-particles) - AboutA mouse particle effect react component[39m
[38;5;12m- [39m[38;5;14m[1mImageTrailEffects[0m[38;5;12m (https://github.com/codrops/ImageTrailEffects) - A set of effects for mouse-following image trails that show a random series of images.[39m
[38;5;12m- [39m[38;5;14m[1mwebgl-mouseover-effects[0m[38;5;12m (https://github.com/akella/webgl-mouseover-effects) - Demos for the tutorial on how to achieve an interactive mouseover/hover effect[39m
[38;5;12m- [39m[38;5;14m[1mcursor-effectss[0m[38;5;12m (https://github.com/tholman/cursor-effects) - 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.[39m
[38;5;12m- [39m[38;5;14m[1mmouse-text-shadow[0m[38;5;12m (https://github.com/Isa2008/mouse-text-shadow) - CSS shadow effect & JavaScript mouse move[39m
[38;5;12m- [39m[38;5;14m[1mvuepress-plugin-cursor-effects[0m[38;5;12m (https://github.com/moefyit/vuepress-plugin-cursor-effects) - Add a cute click effect to your mouse in your vuepress![39m
[38;5;12m- [39m[38;5;14m[1mjquery-animate3d[0m[38;5;12m (https://github.com/putnamn21/jquery-animate3d) - jQuery plugin that gives elements a 3d mouse over effect[39m
[38;5;12m- [39m[38;5;14m[1mmagneticHover[0m[38;5;12m (https://github.com/Halo-Lab/magneticHover) - magneticHover lets you trigger hover effect on the element when the cursor is near it, but not over it yet[39m
[38;5;12m- [39m[38;5;14m[1mreact-tilt[0m[38;5;12m (https://github.com/jonathandion/react-tilt) - Parallax tilt hover effect for React JS - tilt.js[39m
[38;5;12m- [39m[38;5;14m[1mhover3d[0m[38;5;12m (https://github.com/ariona/hover3d) - Simple jQuery plugin for 3d Hover effect[39m

[38;2;255;187;0m[4mCss 3D Effect[0m
[38;5;12m- [39m[38;5;14m[1mquintessential-css-cube[0m[38;5;12m (https://github.com/zachstronaut/quintessential-css-cube) - The Quintessential Responsive 3D CSS Cube[39m
[38;5;12m- [39m[38;5;14m[1mTarjetas-3D[0m[38;5;12m (https://github.com/falconmasters/Tarjetas-3D-con-HTML5-y-CSS3) - Código del Tutorial de Tarjetas 3D usando HTML5 y CSS3[39m
[38;5;12m- [39m[38;5;14m[1m3dtransforms-3D[0m[38;5;12m (https://github.com/desandro/3dtransforms) - Intro to CSS 3D transforms[39m
[38;5;12m- [39m[38;5;14m[1mMakisu[0m[38;5;12m (https://github.com/soulwire/Makisu) - An experimental CSS 3D dropdown concept, wrapped up in a jQuery plugin.[39m
[38;5;12m- [39m[38;5;14m[1mcube.less[0m[38;5;12m (https://github.com/sparanoid/cube.less) - 3D (animated) cube using only CSS (Less), originally used by LeanCloud[39m
[38;5;12m- [39m[38;5;14m[1msuper-mario[0m[38;5;12m (https://github.com/Cordobo/pure-css-super-mario) - Pure CSS animated 3D Super Mario Icon[39m
[38;5;12m- [39m[38;5;14m[1mCSS3D.js[0m[38;5;12m (https://github.com/unconed/CSS3D.js) - This experimental renderer was built for the design of Acko.net. It lets you manage simple CSS 3D objects using Three.js.[39m
[38;5;12m- [39m[38;5;14m[1mSolar-System[0m[38;5;12m (https://github.com/juliangarnier/3D-CSS-Solar-System) - Solar System data visualisation done in HTML/CSS and a bit of Javascript.[39m
[38;5;12m- [39m[38;5;14m[1mcss-space-shooter[0m[38;5;12m (https://github.com/michaelbromley/css-space-shooter) - An old-school arcade-style 3D shoot-em-up rendered entirely with CSS 3D transforms[39m
[38;5;12m- [39m[38;5;14m[1mphoton[0m[38;5;12m (https://github.com/thomasxiii/photon) - CSS 3D Lighting Engine photon.attasi.com[39m
[38;5;12m- [39m[38;5;14m[1mgl-css3d[0m[38;5;12m (https://github.com/deathcap/gl-css3d) - Synchronize CSS 3D transformations to a WebGL scene[39m

[38;2;255;187;0m[4mImage Effect[0m
[38;5;12m- [39m[38;5;14m[1mimagehover[0m[38;5;12m (https://github.com/ciar4n/imagehover.css) - Pure CSS Image Hover Effect Library[39m
[38;5;12m- [39m[38;5;14m[1mImageTiltEffect[0m[38;5;12m (https://github.com/codrops/ImageTiltEffect) - A subtle tilt effect for images. The idea is to move and rotate semi-transparent copies with the same background[39m
[38;5;12m- [39m[38;5;14m[1mMagnifier[0m[38;5;12m (https://github.com/mark-rolich/Magnifier.js) - Javascript library enabling magnifying glass effect on an images[39m
[38;5;12m- [39m[38;5;14m[1mgl-react-image-effects[0m[38;5;12m (https://github.com/gre/gl-react-image-effects) - universal image app that uses different gl-react components[39m
[38;5;12m- [39m[38;5;14m[1mStickyImageEffect[0m[38;5;12m (https://github.com/Anemolo/StickyImageEffect) - A sticky image effect for a slideshow inspired by ultanoir's website.[39m
[38;5;12m- [39m[38;5;14m[1mHeatDistortionEffect[0m[38;5;12m (https://github.com/lbebber/HeatDistortionEffect) - Animated haze distortion effect for images and text, with WebGL[39m
[38;5;12m- [39m[38;5;14m[1mImageDraggingEffects[0m[38;5;12m (https://github.com/codrops/ImageDraggingEffects) - A set of playful dragging effects for images using various techniques..[39m
[38;5;12m- [39m[38;5;14m[1mbgswitcher[0m[38;5;12m (https://github.com/rewish/jquery-bgswitcher) - Switch the background-image with using effect.[39m
[38;5;12m- [39m[38;5;14m[1mFullImageReveal[0m[38;5;12m (https://github.com/codrops/FullImageReveal) - A full image reveal effect with fancy thumbnail sliding.[39m
[38;5;12m- [39m[38;5;14m[1mdiaporama[0m[38;5;12m (https://github.com/gre/diaporama) - Diaporama is an image/video/content slideshow engine providing high quality animation effects including Kenburns effect and GLSL Transitions.[39m
[38;5;12m- [39m[38;5;14m[1mFollowCursor[0m[38;5;12m (https://github.com/bersLucas/FollowCursor) - Rotate elements to create a following effect[39m
[38;5;12m- [39m[38;5;14m[1mreact-native-kenburns-view[0m[38;5;12m (https://github.com/nHiRanZ/react-native-kenburns-view) - KenBurns Image Effect for React Native Applications[39m
[38;5;12m- [39m[38;5;14m[1mvintageJS[0m[38;5;12m (https://github.com/rendro/vintageJS) - Add a retro/vintage effect to images using the HTML5 canvas element[39m
[38;5;12m- [39m[38;5;14m[1mThumbnailGridExpandingPreview[0m[38;5;12m (https://github.com/codrops/ThumbnailGridExpandingPreview) - A tutorial on how to create a thumbnail grid with an expanding image preview similar to the effect seen on Google Images.[39m
[38;5;12m- [39m[38;5;14m[1mgridder[0m[38;5;12m (https://github.com/oriongunning/gridder) - A jQuery plugin that displays a thumbnail grid expanding preview similar to the effect seen on Google Images..[39m
[38;5;12m- [39m[38;5;14m[1mMotionTransitionEffect[0m[38;5;12m (https://github.com/codrops/MotionTransitionEffect) - A speedy motion transition effect for an image slideshow.[39m
[38;5;12m- [39m[38;5;14m[1mtiltedpage_scroll[0m[38;5;12m (https://github.com/peachananr/tiltedpage_scroll) - Create a beautiful 3D tilted effect on scroll with jQuery Tilted Page Scroll plugin[39m

[38;2;255;187;0m[4mInput Effect[0m
[38;5;12m- [39m[38;5;14m[1mpower-mode-input[0m[38;5;12m (https://github.com/lindelof/power-mode-input) - PowerModeInput can make your text input box more compelling[39m
[38;5;12m- [39m[38;5;14m[1mTextInputEffects[0m[38;5;12m (https://github.com/codrops/TextInputEffects) - Simple styles and effects for enhancing text input interactions.[39m
[38;5;12m- [39m[38;5;14m[1mtypewriterjs[0m[38;5;12m (https://github.com/tameemsafi/typewriterjs) - A simple yet powerful native javascript plugin for a cool typewriter effect.[39m
[38;5;12m- [39m[38;5;14m[1mt.js[0m[38;5;12m (https://github.com/mntn-dev/t.js) - Lightweight $.Hypertext.Typewriter[39m
[38;5;12m- [39m[38;5;14m[1mshuffle-text[0m[38;5;12m (https://github.com/ics-ikeda/shuffle-text) - "shuffle-text" is JavaScript text effect library such as cool legacy of Flash.[39m
[38;5;12m- [39m[38;5;14m[1mreact-typewriter[0m[38;5;12m (https://github.com/ianbjorndilling/react-typewriter) - A React component for creating typing animations.[39m
[38;5;12m- [39m[38;5;14m[1mt-writer.js[0m[38;5;12m (https://github.com/ChrisCavs/t-writer.js) - Native typewriter effect, without compromises or dependencies.[39m
[38;5;12m- [39m[38;5;14m[1mmalarkey[0m[38;5;12m (https://github.com/yuanqing/malarkey) - Simulate a typewriter effect in vanilla JavaScript.[39m
[38;5;12m- [39m[38;5;14m[1mtinytyper[0m[38;5;12m (https://github.com/lourenc/tinytyper) - A tiny library for creating a typing effect on specified text element.[39m
[38;5;12m- [39m[38;5;14m[1mjquery.typer[0m[38;5;12m (https://github.com/yckart/jquery.typer.js) - The typewriter effect[39m
[38;5;12m- [39m[38;5;14m[1mPhaser-typewriter[0m[38;5;12m (https://github.com/netgfx/Phaser-typewriter) - A phaser helper for the typewriter effect[39m

[38;2;255;187;0m[4mTransition Effect[0m
[38;5;12m- [39m[38;5;14m[1mtransitions[0m[38;5;12m (https://github.com/2youyou2/transitions) - Transition effect for Cocos Creator[39m
[38;5;12m- [39m[38;5;14m[1mModalWindowEffects[0m[38;5;12m (https://github.com/codrops/ModalWindowEffects) - A set of experimental modal window appearance effects with CSS transitions and animations.[39m
[38;5;12m- [39m[38;5;14m[1manimated-transition-effects[0m[38;5;12m (https://github.com/CodyHouse/animated-transition-effects) - A library of animated transition effects, powered by CSS Animations[39m
[38;5;12m- [39m[38;5;14m[1mCSS3-hover-transition-effect[0m[38;5;12m (https://github.com/Inaamhusain/CSS3-hover-transition-effect) - CSS3-hover-transition-effect | Cipher trick[39m
[38;5;12m- [39m[38;5;14m[1mHtml_Transition_Effect_Demo[0m[38;5;12m (https://github.com/chauhanvipul87/Html_Transition_Effect_Demo) - It's pretty hover effects on circles with CSS Transitions which is very useful in dashboard.[39m
[38;5;12m- [39m[38;5;14m[1mGlitchSlideshow[0m[38;5;12m (https://github.com/codrops/GlitchSlideshow) - A slideshow that uses a CSS glitch effect for slide transitions.[39m
[38;5;12m- [39m[38;5;14m[1mimage-mask-effect[0m[38;5;12m (https://github.com/CodyHouse/image-mask-effect) - An immersive transition effect powered by image masks and CSS transforms.[39m
[38;5;12m- [39m[38;5;14m[1mPageRevealEffects[0m[38;5;12m (https://github.com/codrops/PageRevealEffects) - Some ideas for modern multi-layer page transitions using CSS Animations.[39m
[38;5;12m- [39m[38;5;14m[1mngView-animation-effects[0m[38;5;12m (https://github.com/dfsq/ngView-animation-effects) - Demonstration of different animation effects with AngularJS ngView directive.[39m
[38;5;12m- [39m[38;5;14m[1mWobblySlideshowEffect[0m[38;5;12m (https://github.com/codrops/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.[39m

[38;2;255;187;0m[4mRain & Snow[0m
[38;5;12m- [39m[38;5;14m[1mRainEffect[0m[38;5;12m (https://github.com/codrops/RainEffect) - Some experimental rain and water drop effects in different scenarios using WebGL, by Lucas Bebber.[39m
[38;5;12m- [39m[38;5;14m[1maframe-rain[0m[38;5;12m (https://github.com/takahirox/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.[39m
[38;5;12m- [39m[38;5;14m[1mmatrix-rain[0m[38;5;12m (https://github.com/nojvek/matrix-rain) - The famous Matrix rain effect of falling green characters in a terminal[39m
[38;5;12m- [39m[38;5;14m[1mRainbow[0m[38;5;12m (https://github.com/DavianWolf/Rainbow.js) - A text effect jquery plugin (tested with jQuery 1.6.3)[39m
[38;5;12m- [39m[38;5;14m[1mSnowstorm[0m[38;5;12m (https://github.com/scottschiller/Snowstorm) - Enterprise-grade JavaScript snow effect for the internets, setting CPUs on fire worldwide every winter since 2003.[39m
[38;5;12m- [39m[38;5;14m[1msnowstorm[0m[38;5;12m (https://github.com/burakcan/react-snowstorm) - A Snow Effect component for React. Uses Snowstorm under the hood.[39m
[38;5;12m- [39m[38;5;14m[1mreact-snow-effect[0m[38;5;12m (https://github.com/jungledre/react-snow-effect) - react-snow-effect.[39m
[38;5;12m- [39m[38;5;14m[1msnowy[0m[38;5;12m (https://github.com/fforw/snowy) - A HTML5 snow effect with random generated snow flakes.[39m
[38;5;12m- [39m[38;5;14m[1mthe-matrix-effect[0m[38;5;12m (https://github.com/JefersonLucas/the-matrix-effect) - The incredible effect of rain of letters in the style of the Matrix trilogy.[39m
[38;5;12m- [39m[38;5;14m[1msmoke.js[0m[38;5;12m (https://github.com/bijection/smoke.js) - Small but good javascript smoke effect[39m

[38;2;255;187;0m[4mButton Effect[0m
[38;5;12m- [39m[38;5;14m[1mMagneticButtons[0m[38;5;12m (https://github.com/codrops/MagneticButtons) - A set of buttons with a magnetic interaction and a hover effect.[39m
[38;5;12m- [39m[38;5;14m[1mElasticProgress[0m[38;5;12m (https://github.com/codrops/ElasticProgress) - Creates a button that turns into a progress bar with a elastic effect. Based on the Dribbble shot[39m
[38;5;12m- [39m[38;5;14m[1mvue-particle-buttons[0m[38;5;12m (https://github.com/dreambo8563/vue-particle-effect-buttons) - A bursting particles effects buttons component[39m
[38;5;12m- [39m[38;5;14m[1mnativescript-shine-button[0m[38;5;12m (https://github.com/hamdiwanis/nativescript-shine-button) - NativeScript plugin that add shine effect to your button.[39m
[38;5;12m- [39m[38;5;14m[1mreact-parallax-button[0m[38;5;12m (https://github.com/venits/react-parallax-button) - Bring your react buttons to next level with parallax effect.[39m
[38;5;12m- [39m[38;5;14m[1mRippleButton[0m[38;5;12m (https://github.com/mig82/RippleButton) - A Kony Visualizer reusable component of a button with a Material Theme ripple effect.[39m
[38;5;12m- [39m[38;5;14m[1mcss-ripple-effect[0m[38;5;12m (https://github.com/mladenplavsic/css-ripple-effect) - Pure CSS (no JavaScript) implementation of Android Material design "ripple" animation.[39m
[38;5;12m- [39m[38;5;14m[1mParticleEffectsButtons[0m[38;5;12m (https://github.com/codrops/ParticleEffectsButtons) - A little library that can be used for bursting particles effects on buttons and other elements[39m

[38;2;255;187;0m[4mLoading Effect[0m
[38;5;12m- [39m[38;5;14m[1mPageLoadingEffects[0m[38;5;12m (https://github.com/codrops/PageLoadingEffects) - Modern ways of revealing new content using SVG animations.[39m
[38;5;12m- [39m[38;5;14m[1mAsset-Loading-Effects[0m[38;5;12m (https://github.com/ZachSaucier/Asset-Loading-Effects) - Loading effects for assets including some built in animated reveals[39m
[38;5;12m- [39m[38;5;14m[1mfakeLoader[0m[38;5;12m (https://github.com/joaopereirawd/fakeLoader.js) - 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.[39m
[38;5;12m- [39m[38;5;14m[1mLoadEffect[0m[38;5;12m (https://github.com/Auklets/LoadEffect) - Distributed Load Testing in Javascript-like Scripting Language.[39m
[38;5;12m- [39m[38;5;14m[1mWhirl[0m[38;5;12m (https://github.com/jh3y/whirl) - CSS loading animations with minimal effort![39m
[38;5;12m- [39m[38;5;14m[1mthree-dots[0m[38;5;12m (https://github.com/nzbin/three-dots) - 🔮 CSS loading animations made by single element.[39m
[38;5;12m- [39m[38;5;14m[1mArtWorx-xLoader[0m[38;5;12m (https://github.com/AnasTawfeek/ArtWorx-xLoader) - Pure css cross-browser loading animations.[39m
[38;5;12m- [39m[38;5;14m[1mcss-page-loader[0m[38;5;12m (https://github.com/Viglino/css-page-loader) - Lightweight CSS loading animations to use when page loads[39m

[38;2;255;187;0m[4mAudio Effect[0m
[38;5;12m- [39m[38;5;14m[1mAudio-Input-Effects[0m[38;5;12m (https://github.com/cwilso/Audio-Input-Effects) - Live Audio Input effects[39m
[38;5;12m- [39m[38;5;14m[1mbeez[0m[38;5;12m (https://github.com/gre/beez) - 100% web real-time audio experiment using smartphones as effect controller. (tech: Android Chrome + WebRTC + Web Audio API)[39m
[38;5;12m- [39m[38;5;14m[1msoundbank[0m[38;5;12m (https://github.com/mmckegg/soundbank-reverb) - Simple Web Audio API based reverb effect.[39m
[38;5;12m- [39m[38;5;14m[1mSoundEffectManager[0m[38;5;12m (https://github.com/HenrikJoreteg/SoundEffectManager) - A simple sound effect manager for playing sounds using the awesome HTML 5 Web Audio API[39m
[38;5;12m- [39m[38;5;14m[1msoma-fm-player[0m[38;5;12m (https://github.com/rainner/soma-fm-player) - SomaFM Music Player Web-App[39m

[38;2;255;187;0m[4mWebCam Effect[0m
[38;5;12m- [39m[38;5;14m[1mcanvas-video-effects[0m[38;5;12m (https://github.com/conorbuck/canvas-video-effects) - Live Image Processing w/ getUserMedia() & Web Workers[39m
[38;5;12m- [39m[38;5;14m[1mchroma-cam[0m[38;5;12m (https://github.com/rprieto/chroma-cam) - Green screen effect in your webcam[39m
[38;5;12m- [39m[38;5;14m[1mwebcam-effects[0m[38;5;12m (https://github.com/adamlamoglia/webcam-effects) - Webcam Effects in Three.js[39m
[38;5;12m- [39m[38;5;14m[1mJS-Webcam-effects[0m[38;5;12m (https://github.com/Gixxern/JS---Webcam-effects) - Webcam effects[39m
[38;5;12m- [39m[38;5;14m[1mexpo-chroma-key-camera[0m[38;5;12m (https://github.com/EvanBacon/expo-chroma-key-camera) - Live green-screen effect with Expo and THREE.js[39m
[38;5;12m- [39m[38;5;14m[1mchroma-key-camera[0m[38;5;12m (https://github.com/EvanBacon/expo-chroma-key-camera) - Live green-screen effect with Expo and THREE.js[39m
[38;5;12m- [39m[38;5;14m[1mhypersampler[0m[38;5;12m (https://github.com/positlabs/spark-hypersampler) - Hyhypeperersamamplplerer: a Spark AR camera effec[39m
[38;5;12m- [39m[38;5;14m[1mChuckClose-SparkAR[0m[38;5;12m (https://github.com/kamend/ChuckClose-SparkAR) - A simple example how to use Visual Shaders with JS in Spark AR.[39m

[38;2;255;187;0m[4mSVG Animations[0m
[38;5;12m- [39m[38;5;14m[1mbounty[0m[38;5;12m (https://github.com/coderitual/bounty) - Javascript and SVG odometer effect library with motion blur[39m
[38;5;12m- [39m[38;5;14m[1mDistortedLinkEffects[0m[38;5;12m (https://github.com/codrops/DistortedLinkEffects) - Some ideas for decorative link distortion effects using SVG filters[39m
[38;5;12m- [39m[38;5;14m[1mmenu-animations[0m[38;5;12m (https://github.com/tamino-martinius/ui-snippets-menu-animations) - Four different menu animations for menu button toggle between hamburger, cross and back icon.[39m
[38;5;12m- [39m[38;5;14m[1mcircle-svg-animation[0m[38;5;12m (https://github.com/crealime/circle-svg-animation) - Circle SVG Animation[39m
[38;5;12m- [39m[38;5;14m[1mOrganicShapeAnimations[0m[38;5;12m (https://github.com/codrops/OrganicShapeAnimations) - Some shape morphing hover effects on images using SVG clipPath.[39m
[38;5;12m- [39m[38;5;14m[1mFancyLetterAnimation[0m[38;5;12m (https://github.com/codrops/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.[39m
[38;5;12m- [39m[38;5;14m[1mIsometricCityAnimation[0m[38;5;12m (https://github.com/projapati66/Svg-IsometricCityAnimation) - This is a simple svg isometric city animation with GSAP[39m
[38;5;12m- [39m[38;5;14m[1mlazy-line-painter[0m[38;5;12m (https://github.com/camoconnell/lazy-line-painter) - Lazy Line Painter - A Modern JS library for SVG path animation[39m
[38;5;12m- [39m[38;5;14m[1mjquery-drawsvg[0m[38;5;12m (https://github.com/lcdsantos/jquery-drawsvg) - Lightweight, simple to use jQuery plugin to animate SVG paths[39m
[38;5;12m- [39m[38;5;14m[1msvg-animation[0m[38;5;12m (https://github.com/hellomichael/svg-animation) - The Illusion of Life: An SVG Animation Case Study[39m

[38;2;255;187;0m[4mFireworks[0m
[38;5;12m- [39m[38;5;14m[1mfireworks[0m[38;5;12m (https://github.com/jeromeetienne/fireworks.js) - fireworks Particles engine in javascript[39m
[38;5;12m- [39m[38;5;14m[1msilly fireworks[0m[38;5;12m (https://github.com/scottschiller/fireworks.js) - A silly JavaScript animation experiment, originally written in 2005.[39m
[38;5;12m- [39m[38;5;14m[1mfireworks-webgl[0m[38;5;12m (https://github.com/ondras/fireworks-webgl) - WebGL + Web Audio API = Sound-driven fireworks![39m
[38;5;12m- [39m[38;5;14m[1mfireworks-vr[0m[38;5;12m (https://github.com/Lallassu/fireworks) - WebGL Fireworks with ThreeJS In action: https://qake.se/fw/index.html[39m
[38;5;12m- [39m[38;5;14m[1mskyrocket[0m[38;5;12m (https://github.com/zarocknz/javascript-skyrocket) - Design and Display fireworks on HTML canvas with Skyrocket.js[39m
[38;5;12m- [39m[38;5;14m[1mcool-fireworks[0m[38;5;12m (https://github.com/PixxxeL/js-fireworks) - a particle fireworks effect.[39m

[38;2;255;187;0m[4mOther Effect[0m
[38;5;12m- [39m[38;5;14m[1mlottie-sample[0m[38;5;12m (https://github.com/codeaholicguy/lottie-sample) - Demo after effect animation on web using Lottie[39m
[38;5;12m- [39m[38;5;14m[1mwebEffects[0m[38;5;12m (https://github.com/AsmaBOUSSALEM/webEffects) - jQuery Parallax is a script that simulates the parallax effect as seen[39m
[38;5;12m- [39m[38;5;14m[1mMobileComponent[0m[38;5;12m (https://github.com/zhangmengxue/MobileComponent) - dynamic effect component on mobile web[39m
[38;5;12m- [39m[38;5;14m[1mfrosted-glass[0m[38;5;12m (https://github.com/adriancarriger/frosted-glass) - Add a live frosted glass blur effect over any type of web content, including text.[39m
[38;5;12m- [39m[38;5;14m[1mpickout[0m[38;5;12m (https://github.com/ktquez/pickout) - Cool and powerful effect to select fields. Javascript vanilla and ~2kb gzipped[39m
[38;5;12m- [39m[38;5;14m[1mdissolve-generator[0m[38;5;12m (https://github.com/transitive-bullshit/dissolve-generator) - Cool 2D dissolve effect generator[39m
[38;5;12m- [39m[38;5;14m[1mredux-reducer-side-effects[0m[38;5;12m (https://github.com/danrigsby/redux-reducer-side-effects) - Easy to follow side effect library for redux reducers[39m
[38;5;12m- [39m[38;5;14m[1mstarry.night[0m[38;5;12m (https://github.com/atesgoral/put.io.starry.night) - The Starry Night animation in put.io's hero banner[39m
[38;5;12m- [39m[38;5;14m[1mbad-tv-shader[0m[38;5;12m (https://github.com/felixturner/bad-tv-shader) - Simulates a bad TV via horizontal distortion and vertical roll.[39m
[38;5;12m- [39m[38;5;14m[1mmap-effects-100[0m[38;5;12m (https://github.com/muxlab/map-effects-100) - Cool tips to design UI/UX on Leaflet maps.[39m
[38;5;12m- [39m[38;5;14m[1msvg-Circus[0m[38;5;12m (https://github.com/alexk111/SVG-Circus) - Create cool animated SVG spinners, loaders and other looped animations in seconds.[39m
[38;5;12m- [39m[38;5;14m[1mjsfx[0m[38;5;12m (https://github.com/loov/jsfx) - This is a JavaScript library for sound effect generation and is supported on most current browsers.[39m
[38;5;12m- [39m[38;5;14m[1maquarelle[0m[38;5;12m (https://github.com/Ramotion/aquarelle) - Aquarelle is a watercolor effect component.[39m
[38;5;12m- [39m[38;5;14m[1mglitch[0m[38;5;12m (https://github.com/sjhewitt/glitch.js) - A glitched effect for DOM elements.[39m
[38;5;12m- [39m[38;5;14m[1mspread[0m[38;5;12m (https://github.com/roboshoes/spread) - Spread is a small experiment leveraging simple CSS3D transforms to create a colored plane.[39m
[38;5;12m- [39m[38;5;14m[1mfirealgorithm[0m[38;5;12m (https://github.com/filipedeschamps/doom-fire-algorithm) - A playground of experiments related to the Doom fire effect implemented in JavaScript. Feel free to submit your experiment with a Pull Request.[39m
[38;5;12m- [39m[38;5;14m[1mEyeCandy[0m[38;5;12m (https://github.com/mykle1/MMM-EyeCandy) - Animated images that are superficially attractive and entertaining but intellectually undemanding.[39m
[38;5;12m- [39m[38;5;14m[1manimatelo[0m[38;5;12m (https://github.com/gibbok/animatelo) - Animatelo is a bunch of cool, fun, and cross-browser animations for you to use in your projects[39m


[38;2;255;187;0m[4mContribute[0m
[38;5;12mContributions welcome! We welcome all contributions, especially by those who worked through the list and noticed some missing / unclear information! Please use the pull requests to discuss about the usefulness of a change.[39m

[38;2;255;187;0m[4mLicense[0m

[38;5;14m[1m![0m[38;5;12mCC-BY[39m[38;5;14m[1m (https://mirrors.creativecommons.org/presskit/buttons/88x31/svg/by.svg)[0m[38;5;12m (https://creativecommons.org/licenses/by/4.0/)[39m

[38;5;12mThis work is licensed under a [39m[38;5;14m[1mCreative Commons Attribution 4.0 International License[0m[38;5;12m (https://creativecommons.org/licenses/by/4.0/).[39m
