109 Repositories
JavaScript webgl-mouseover-effects Libraries
How to use socket.io in Unity WebGL
Setup Socket Client for Unity WebGL This is simply a guide with some code samples to get you started and is NOT a Unity package/plugin that you can im
An Exhibition Of Mathematical Beauty.
🪴 Fractal Garden 🪴 📐 An Exhibition Of Mathematical Beauty 📐 Fractals are awesome. They look beautiful and have intricate mathematical connections
jQuery Plugin for Ticker, News Ticker with Vertical, Horizontal, Marquee and Typewriting effects
AcmeTicker - News Ticker A very lightweight jQuery plugin for creating advanced news ticker. Demo: Gutentor News Ticker Ticker Type Vertical Horizonta
A web app to easily simulate 2D waves in your browser.
Wave Simulator Wave Simulator is a web app that allows to simulate 2D waves in your browser. Simply choose a background image, a color gradient and tw
Motionity is a free and open source animation editor in the web
Motionity The web-based motion graphics editor for everyone 📽 Motionity is a free and open source animation editor in the web. It's a mix of After Ef
A JavaScript library for advanced 2D slideshow with WebGL, that provides variety of beautiful effects
gl-slideshow An advanced 2D slideshow with WebGL, provides a variety of beautiful effects with GLSL power. Shaders are forked from https://gl-transiti
Tiny CSS framework with almost no classes and some pure CSS effects
no.css INTERACTIVE DEMO I am tired of adding classes to style my HTML. I just want to include a .css file and I expect it to style the HTML for me. no
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
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
Phaser is a fun, free and fast 2D game framework for making HTML5 games for desktop and mobile web browsers, supporting Canvas and WebGL rendering.
Phaser - HTML5 Game Framework Phaser is a fast, free, and fun open source HTML5 game framework that offers WebGL and Canvas rendering across desktop a
Smooth subdivision surface modifier for use with three.js BufferGeometry.
Three Subdivide This modifier uses the Loop (Charles Loop, 1987) subdivision surface algorithm to smooth modern three.js BufferGeometry. — Live Demo —
🐜 GPU-accelerated ant colony simulation
Ants simulation A simple ant colony GPU-accelerated simulation made with Three.js. Live demo Rules Ants can emit two types of pheromones: to-home pher
Interactive, thoroughly customizable maps in the browser, powered by vector tiles and WebGL
Mapbox GL JS is a JavaScript library for interactive, customizable vector maps on the web. It takes map styles that conform to the Mapbox Style Specif
jQuery plugin for zooming images on mouseover.
About Zoom A small jQuery plugin for zooming images on mouseover or mousedown. See the project page for documentation and a demonstration. Released un
CSS3 Animations with special effects
🎩 magic CSS3 Animations with special effects. (→ 3.1 kB gzip) Demo Checkout the demo for the animations here Table of Contents Installation Getting S
A Simple jQuery Plugin for Animating Scroll
AnimateScroll A Simple jQuery Plugin for Animating the Scroll Demo can be seen at http://plugins.compzets.com/animatescroll What is it exactly? Animat
CSS3 list scroll effects
stroll.js – because it scrolls, and trolls. A collection of CSS list scroll effects. Works in browsers with support for CSS 3D transforms including a
A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on
A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS.
iHover is a collection of hover effects using pure CSS, inspired by codrops article, powered by Sass.
Intro iHover is a collection of hover effects using pure CSS, inspired by this codrops article, powered by Sass. Demo: https://gudh.github.io/ihover/d
A flexible, memory compact, fast and dynamic CSG implementation on top of three-mesh-bvh
three-bvh-csg An experimental, in progress, flexible, memory compact, fast and dynamic CSG implementation on top of three-mesh-bvh. More than 100 time
little-planet Custom Element: interactive panorama viewer
little-planet This project is a Custom HTML Element (AKA Web Component) that renders an interactive view of a panoramic photo. Can be used with no J
FCIV.NET is a open source strategy game loosely based on Freeciv
FCIV.NET FCIV.NET is an open-source turn-based strategy game. It can be played in any HTML5 capable web-browser and features in-depth game-play and a
All-in-one package for maptalks webgl layers
@maptalks/gl-layers maptalks webgl 图层的汇总包，包含了@maptalks命名空间下webgl基础设施和所有webgl图层插件。 使用时无需再单独安装和引入其他webgl插件，而可以统一从此包中安装引用。 包含的插件 @maptalks/gl @maptalks/v
Globe.GL - A web component to represent data visualization layers on a 3-dimensional globe in a spherical projection
A web component to represent data visualization layers on a 3-dimensional globe in a spherical projection. This library is a convenience wrap
✨ ThreeJS Toys ⚡
✨ ThreeJS Toys - Made with 💙 Work in progress... Sponsors (Thanks 💙 !!!) Usage - npm npm install three threejs-toys Toys Particles Cursor - https:/
Ektogamat Three Graces Design Concept using threejs
In this project, I wanted to show that creating a fancy design like this using #threejs is not as difficult as it looks.
This project is an attempt at recreating the WebGL animation featured in the 2021 Linear release page.
Linear Vaporwave Three.js scene This project is an attempt at recreating the WebGL animation featured in the 2021 Linear release page. Demo Head over
Space Invaders in your browser with 3D WebGL. Built with BabylonJS.
Space Invaders A fun re-imagining of the 1978 classic by Tomohiro Nishikado and Taito. Play it here: https://spaceinvaders.viperfish.com.au Play in th
A JavaScript library for adding ripple effects to HTML elements based on mouse events.
About project Ripplejs is an open source javascript library created for the purpose of adding ripple effects to html elements based on mouse events. L
GPU-accelerated Augmented Reality for the web.
MARTINS.js WebAR engine Create amazing Augmented Reality experiences with MARTINS.js, a GPU-accelerated Augmented Reality engine for the web. Get star
Drawing Newton's fractal using pure js, rust-wasm, SIMDs, threads and GPU
Newton's fractal Runtime Newton's fractal renderer. Click to open in your browser Inspired by 3blue1brown's video about Newton's fractal. Drawing
A powerful javascript library to create amazing and smooth effects for the mouse cursor on your website.
Cuberto Mouse Follower A powerful javascript library to create amazing and smooth effects for the mouse cursor on your website. Dependencies GSAP v3 (
View maps, graphs, and tables of your save and compete in a casual, evergreen leaderboard of EU4 achievement speed runs. Upload and share your save with the world.
PDX Tools PDX Tools is a modern EU4 save file analyzer that allow users to view maps, graphs, and data tables of their save all within the browser. If
A various color Matrix filters and Presets for pixi.js
Pixi Color Effects A various color Matrix filters for pixi.js with TON of presets! DEMO Install # npm npm install pixi-color-effects # yarn yarn add
WebGL and GLSL projects 2022 🌬
Getting Started Node version used : 16.13.1 First install dependencies with: npm install # or yarn install Then, run the development server: npm run d
Easy Effect is a WYSIWYG Lottie animation editor, dedicated to helping you make dynamic effects easily.
Easy Effect 🖖 Introduction Easy Effect is a WYSIWYG animation editor based on Lottie. ✨ Feature 🌈 ease to use Anyone who want to create an animation
A community ran noodle effects library developed for remapper.
The all around modchart helper that contains functions and utilities created by the community. These scripts are designed to be used with Remapper. Ch
Spotify radio is an audio streaming app where you can add effects in real time.
Spotify Radio - Semana JS Expert 6.0 Spotify radio is an audio streaming app where you can add effects in real time. JS-Expert Project of the Week by
A library for efficiently drawing to a texture in p5 WebGL mode
p5.Framebuffer A library for efficiently drawing to a texture in p5 WebGL mode. A Framebuffer is kind of like a p5.Graphics: it lets you draw to a can
Generate sound effects and background music for good old-fashioned mini-games
Generate sound effects and background music for good old-fashioned mini-games
🧞♂️ Your magic WebGL carpet
⚠️ ⚠️ BETA! ⚠️ ⚠️ (Most likely I won't maintain this...) 🧞♂️ Aladino – your magic WebGL carpet Aladino is a tiny (around ~5kb gzipped) and dependenc
🧱 Easily extend native three.js materials with modular and composable shader units and effects
three-extended-material Easily extend native three.js materials with modular and composable shader units and effects. Usage npm install three-extended
Attempt to replicate the visuals of late 80s / early 90s flight simulators
Retro Fligh Simulator Quick and dirty attempt to replicate the visuals of late 80s / early 90s flight simulators, using as a reference MicroProse's F-
✂ Multiple scenes, one canvas! WebGL Scissoring implementation for React Three Fiber.
react-three-scissor Multiple scenes, one canvas! WebGL Scissoring implementation for React Three Fiber. scissor lets you render an infinite number of
A beautiful 3D Earth 🌏
Language: English | 中文简体 3D Earth is a beautiful component of earth flying line based on threejs look： Install npm install 3d-earth or yarn add 3d
[WIP] WebGL API implementation for Deno, built on GLFW using FFI.
Note I'm no longer working on this project because I have just realized macOS does not support OpenGL ES API, and adding Desktop GL backend to this mo
Little app for live coding effects for Matt Parker's xmas tree thing
Xmas Tree Lights App Little app for live coding and exporting effects for Matt Parker's Xmas tree experiment (2021 edition). You can check this out on
curtains.js is a lightweight vanilla WebGL javascript library that turns HTML DOM elements into interactive textured planes.
What is it ? Shaders are the new front-end web developpment big thing, with the ability to create very powerful 3D interactions and animations. A lot
Simple & lightweight (4kb gzipped) vanilla JavaScript library to create smooth & beautiful animations when you scroll.
lax.js Simple & lightweight (4kb gzipped) vanilla JavaScript library to create smooth & beautiful animations when you scroll. DEMO What's new w
A JavaScript API for drawing unconventional text effects on the web.
A JavaScript API for drawing unconventional text effects on the web. Home — Help Overview When applying effects to text on the web, designers have tra
A JavaScript library for advanced 2D slideshow with WebGL, that provides variety of beautiful effects
gl-slideshow An advanced 2D slideshow with WebGL, provides a variety of beautiful effects with GLSL power. Shaders are forked from https://gl-transiti
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
Vue-cursor-fx - 🖱 An animated custom cursor effects for interactive elements like navigation - w/ VueJS - SSR Compatible
🎉 Vue Cursor Fx An animated custom cursor effects for interactive elements like navigation - w/ VueJS - SSR Compatible Installation This package is a
Slickscroll - A Lightweight JavaScript library for quick and painless momentum & parallax scrolling effects.
Slickscroll is a JavaScript library that makes momentum & parallax scrolling quick and painless View Demo: slickscroll.musabhassan.com Momentum Scroll
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
Imagable - Create, Edit, Optimize And Add Effects to Images
Imagable Imagable is an open-source image editor build on top of Typescript and Node.js. We serve with next-gen tools and filters and effects to make
Playful and Colorful One-Page portfolio featuring Parallax effects and animations. Especially designers and/or photographers will love this theme! Built with MDX and Theme UI.
Gatsby Starter Portfolio: Cara Playful and Colorful One-Page portfolio featuring Parallax effects and animations. Using the Gatsby Theme @lekoarts/gat
Javascript game using Three.JS and WebGL, inspired by Geometry Dash, the Dinosaur Game, and a music video by our graphics professor (2021)
jumpy-abe By Sophia Oguri ([email protected]), Luke Kratsios ([email protected]), Isha Chirimar ([email protected]), Jacob Hocking ([email protected]
Real-time motion planner and autonomous vehicle simulator in the browser, built with WebGL and Three.js.
Dash Self-Driving Car Simulator Real-time motion planner and autonomous vehicle simulator in the browser, built with WebGL and Three.js. This project
3D web map rendering engine written in TypeScript using three.js
3D web map rendering engine written in TypeScript using three.js
Amazing-Js-Projects
Amazing-Js-Projects This project is a part of the following Open Source Program Levels & Points Level Points Level 0 5 Level 1 10 Level 2 20 Level 3 4
Adding volumetric effects to a built-in Three.js shader.
Magical Marbles in Three.js Adding volumetric effects to a built-in Three.js shader. Article on Codrops Demo Installation Install dependencies: yarn
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
A centralized location for my WebGL and other demos.
🔬 Experiments A centralized location for my WebGL and other demos. Launch Site My work is for and funded by the community. If you used this or found
Smooth WebGL Shader Transformations on Scroll
Rock the Stage with a Smooth WebGL Shader Transformation on Scroll A handy setup to create a smooth scroll based GLSL animation using Three.js and GSA
3D graph viewer powered by WebGL (three.js)
Graphosaurus A three-dimensional static graph viewer. (click the image to try it out) Demos EVE Online map Add nodes incrementally Documentation JSDoc
Open-source JavaScript charting library behind Plotly and Dash
Plotly.js is a standalone Javascript data visualization library, and it also powers the Python and R modules named plotly in those respective ecosyste
A lightweight 3D game engine for the web.
A lightweight 3D game engine for the web. Built with three.js and cannon-es.
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
Cool tips to design UI/UX on Leaflet maps.
Map Effects 100 Map Effects 100 has cool tips to design UI/UX on your Map. Map? Leaflet Quick Start git clone https://github.com/muxlab/map-effects-10
Some shape morphing hover effects on images using SVG clipPath.
Organic Shape Animations with SVG clipPath Some shape morphing hover effects using SVG clipPath on an image. Article on Codrops Demo Credits Anime.js
Some ideas for decorative link distortion effects using SVG filters.
Distorted Link Effects A couple of ideas for decorative link distortion effects using SVG filters on lines, circles and squares. Article on Codrops De
Live input Web Audio effects
Live Audio Input effects I whipped this app up to test live audio input, letting the user select a few common tunable effects and see (and hear) the e
Loading effects for assets including some built in animated reveals
Asset loading effects This is a library to show the loading progress of given assets and reveal them using various animations. Please give feedback, r
A little library that can be used for bursting particles effects on buttons and other elements
Particle Effects for Buttons Bursting particles effects for buttons. By Luis Manuel. Article on Codrops Demo Credits anime.js Basic usage The Particle
A bursting particles effects buttons component ✨💥❄️🌋
vue-particle-effect-buttons (demo) Bursting particle effect buttons for Vue. This library is a Vue portal of an awesome Codrops Article by Luis Manuel
Some experimental rain and water drop effects in different scenarios using WebGL, by Lucas Bebber.
Rain & Water Effect Experiments Some experimental rain and water drop effects in different scenarios using WebGL, by Lucas Bebber. Article on Codrops
Demonstration of different animation effects with AngularJS ngView directive.
ngView-animation-effects This is a simple demonstration of how easy you can make your ngView directive transition pages with nice animations. All you
"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
Simple styles and effects for enhancing text input interactions.
Text Input Effects Simple styles and effects for enhancing text input interactions. Article on Codrops Demo Integrate or build upon it for free in you
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 set of playful dragging effects for images using various techniques.
Image Dragging Effects A set of playful effects for dragging images. Article on Codrops Demo Installation Install dependencies: npm install Compile t
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
sync CSS 3D transformations to a WebGL scene
gl-css3d Synchronize CSS 3D transformations to a WebGL scene Usage: var createCSS3D = require('gl-css3d'); // pass an HTML DOM element node, such as
: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
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.
90's Cursor Effects "Knowing the codes" used to be all the rage, I want to bring a few back. A repo of the old effects that inspired creativity and th
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 set of effects for mouse-following image trails that show a random series of images.
Image Trail Effects A set of effects for mouse-following image trails that show a random series of images. Inspired by the effect seen on VLNC Studio.
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
The NASA WorldWind Javascript SDK (WebWW) includes the library and examples for creating geo-browser web applications and for embedding a 3D globe in HTML5 web pages.
Web WorldWind New versions of WorldWind released Web WorldWind 0.10.0 and WorldWind Java 2.2.0 are now available on GitHub. The new version of Web Wor
React friendly API wrapper around MapboxGL JS
react-map-gl | Docs react-map-gl is a suite of React components designed to provide a React API for Mapbox GL JS-compatible libraries. More informatio
WebGL2 powered geospatial visualization layers
deck.gl | Website WebGL2-powered, highly performant large-scale data visualization deck.gl is designed to simplify high-performance, WebGL-based visua
A WebGL accelerated JavaScript library for training and deploying ML models.
TensorFlow.js TensorFlow.js is an open-source hardware-accelerated JavaScript library for training and deploying machine learning models. ⚠️ We recent
JavaScript WebGL 3D map rendering engine
VTS Browser JS is a powerful JavaScript 3D map rendering engine with a very small footprint (about 163 kB of gziped JS code). It provides almost all f
An open-source JavaScript library for world-class 3D globes and maps :earth_americas:
CesiumJS is a JavaScript library for creating 3D globes and 2D maps in a web browser without a plugin. It uses WebGL for hardware-accelerated graphics
Run Keras models in the browser, with GPU support using WebGL
**This project is no longer active. Please check out TensorFlow.js.** The Keras.js demos still work but is no longer updated. Run Keras models in the
WebGL-accelerated ML // linear algebra // automatic differentiation for JavaScript.
This repository has been archived in favor of tensorflow/tfjs. This repo will remain around for some time to keep history but all future PRs should be
add some slide effects.
slidr.js A simple, lightweight javascript library for adding slide transitions to your page. No dependencies required. Tested on Chrome 26.0, Firefox