Visual tools

Collections

Responsive Image Breakpoints Generator - Easily generate the optimal responsive image dimensions
TypeIt - The Most Versatile JavaScript Animated Typing Utility on the Planet
imaskjs - vanilla javascript input mask
deck.gl - WebGL2 powered geospatial visualization layers
Golden Layout - A multi window layout manager for webapps
color - Javascript color conversion and manipulation library
timeago.js - 🕗 ⌛ timeago.js is a tiny(2.0 kb) library used to format date with *** time ago statement.
Cheetah Grid - The fastest open-source data table for web.
Shepherd - Guide your users through a tour of your app
Lexical is an extensible text editor framework that provides excellent reliability, accessibility and performance.
DFlex - A Drag-and-Drop library for all JavaScript frameworks implementing an enhanced transformation mechanism to manipulate DOM elements.
impress.js is a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com.
css-doodle - A web component for drawing patterns with CSS.
WinBox is a modern HTML5 window manager for the web.
Tesseract.js - Pure Javascript OCR for more than 100 Languages 📖🎉🖥
PhotoSwipe — JavaScript image gallery and lightbox
✨ Viselect - A high performance and lightweight library to add a visual way of selecting elements, just like on your Desktop.
OrgChart - It's a simple and direct organization chart plugin. Anytime you want a tree-like chart, you can turn to OrgChart.
Gource is a visualization tool for source control repositories.
svg-drawing - A canvas for easy sketching and replay, exportable in SVG format.

Canvas

Atrament - A small JS library for beautiful drawing and handwriting on the HTML Canvas.
img-comparison-slider - Image comparison slider. Compare images before and after. Supports React, Vue, Angular. - https://img-comparison-slider.sneas.io/
Viewer.js - JavaScript image viewer.
html2canvas - Screenshots with JavaScript
🍃 Leaflet - JavaScript library for mobile-friendly interactive maps

Scroll

LetMeScroll
Smooth Scrollbar - Customizable, Pluginable, and High-Performance JavaScript-Based Scrollbar Solution.
ScrollMovie is the library that enables you to animate background image as you scroll the window.
pushIn.js is a lightweight parallax effect, built with JavaScript, that simulates an interactive dolly-in or push-in animation on a webpage.

Animation

AutoAnimate is a zero-config, drop-in animation utility that adds smooth transitions to your web app. You can use it with Vue, React, or any other JavaScript application.

Create Page Transitions in Next.js with Framer Motion

import "../styles/globals.css"
import { motion } from "framer-motion"

function MyApp({ Component, pageProps, router }) {
  return (
    <motion.div
      key={router.route}
      initial="initial"
      animate="animate"
      variants={{
        initial: {
          opacity: 0,
        },
        animate: {
          opacity: 1,
        },
      }}
    >
      <Component {...pageProps} />
    </motion.div>
  )
}

export default MyApp

Calendar

tui-calendar - 🍞📅 A JavaScript calendar that is full featured. Now your service just got the customizable calendar.

graphic

TWGL: A Tiny WebGL helper Library
Delivering 3D Scenes to the Web - NY shares four demos that showcase the methods that it has found most useful for publishing photogrammetry to the web.
three.js postprocessing / pixel

Create Page Transitions in Next.js with Framer Motion

Calendar

graphic