A Tailwind CSS plugin for creating beautiful animations.

<!-- Add an animated fade and zoom entrance -->
<div class="animate-in fade-in zoom-in">...</div>

<!-- Add an animated slide to top-left exit -->
<div class="animate-out slide-out-to-top slide-out-to-left">...</div>

<!-- Control animation duration -->
<div class="... duration-300">...</div>

<!-- Control animation delay -->
<div class="... delay-150">...</div>

<!-- And so much more! -->

Install the plugin from npm:

npm install -D tailwindcss-animate

Then add the plugin to your tailwind.config.js file:

// @filename tailwind.config.js
module.exports = {
    theme: {
        // ...
    },
    plugins: [
        require("tailwindcss-animate"),
        // ...
    ],
}

• Basic Usage
  • Changing animation delay
  • Changing animation direction
  • Changing animation…

The world's #1 open source rich text editor.

Using an old version of TinyMCE? We recommend you to upgrade to TinyMCE 7 to continue receiving security updates, or consider TinyMCE 5 LTS if you need more time to upgrade.

Used and trusted by millions of developers, TinyMCE is the world’s most customizable, scalable, and flexible rich text editor. We’ve helped launch the likes of Atlassian, Medium, Evernote (and lots more that we can’t tell you), by empowering them to create exceptional content and experiences for their users.

With more than 350M+ downloads every year, we’re also one of the most trusted enterprise-grade open source HTML editors on the internet. There’s currently more than 100M+ products worldwide, powered by Tiny. As a high powered WYSIWYG editor, TinyMCE is built to scale, designed to innovate, and thrives on delivering results to difficult edge-cases.

You can access a full featured demo of…

Enables body scroll locking (for iOS Mobile and Tablet, Android, desktop Safari/Chrome/Firefox) without breaking scrolling of a target element (eg. modal/lightbox/flyouts/nav-menus).

Features:

• disables body scroll WITHOUT disabling scroll of a target element
• works on iOS mobile/tablet (!!)
• works on Android
• works on Safari desktop
• works on Chrome/Firefox
• works with vanilla JS and frameworks such as React / Angular / VueJS
• supports nested target elements (eg. a modal that appears on top of a flyout)
• can reserve scrollbar width
• -webkit-overflow-scrolling: touch still works

Aren't the alternative approaches sufficient?

• the approach document.body.ontouchmove = (e) => { e.preventDefault(); return false; }; locks the body scroll, but ALSO locks the scroll of a target element (eg. modal).
• the approach overflow: hidden on the body or html elements doesn't work for all browsers
• the position: fixed approach causes the body scroll to reset
• some approaches break inertia/momentum/rubber-band scrolling on iOS

LIGHT Package Size:

…

The all-in-one toolbox for developers. https://bazinga.tools

BAZINGA.TOOLS is the best all-in-one toolbox for all your needs...Bazinga!

—— Sheldon Lee Cooper

Your data won't leave your browser.

• ✅ No cookies
• ✅ No logging
• ✅ No IP fingerprinting
• ✅ No exception reports
• ✅ No popups
• ✅ Fully open source

First, install dependencies:

npm install

Second, run the development server:

npm run dev

Open http://localhost:3000 with your browser to see the result. The page auto-updates as you edit the file.

All tools are located at pages/. To add a new tool, just follow the convention of the exsiting tools. The tech stack is TypeScript + React + CSS Modules.

Your feedback and contributions are welcome!

• Add new tools
• Improve existing tools
• Support offline access
• Integrations (with Alfred, Raycast, Visual Studio Code...)

Griffel (German for stylus/pen) is CSS-in-JS with near-zero runtime, SSR support and styles defined with JavaScript objects.

🚀   Zero config start: Griffel has both runtime & build time implementations

🔥   Optional build time transforms to improve performance

💪   Type-safe styles via csstype

🧩   Uses Atomic CSS to reuse styles and avoid specificity issues with CSS

📝   Experimental CSS extraction with Webpack plugin

🐞   Debug using Griffel DevTools extension

npm install @griffel/react
# or
yarn add @griffel/react

• Quick start
• API guide
• README

Check series episodes of Fluent UI Insights related to styling issues and Griffel 🎥

EP02: Styling	EP03: Griffel

This project welcomes contributions and suggestions, please see CONTRIBUTING.md to get started.

This project may contain trademarks or logos for projects, products, or services. Authorized use of Microsoft trademarks or logos is subject to and must follow…

dom-to-image is a library which can turn arbitrary DOM node into a vector (SVG) or raster (PNG or JPEG) image, written in JavaScript. It's based on domvas by Paul Bakaus and has been completely rewritten, with some bugs fixed and some new features (like web font and image support) added.

npm install dom-to-image

Then load

/* in ES 6 */
import domtoimage from 'dom-to-image';
/* in ES 5 */
var domtoimage = require('dom-to-image');

bower install dom-to-image

Include either src/dom-to-image.js or dist/dom-to-image.min.js in your page and it will make the domtoimage variable available in the global scope.

<script src="path/to/dom-to-image.min.js" />
<script>
  domtoimage.toPng(node)
  //...
</script>

All the top level functions accept DOM node and rendering options and return promises, which are fulfilled with corresponding…

A growing collection of useful helpers and fully functional, ready-made abstractions for @react-three/fiber.

If you make a component that is generic enough to be useful to others, think about CONTRIBUTING!

npm install @react-three/drei

import { PerspectiveCamera, PositionalAudio, ... } from '@react-three/drei'

import { PerspectiveCamera, PositionalAudio, ... } from '@react-three/drei/native'

The native route of the library does not export Html or Loader. The default export of the library is web which does export Html and Loader.

https://pmndrs.github.io/drei

Documentation has moved here

Documentation has moved here

Documentation has moved here

Documentation has moved…

A set of functions for drawing perfect arrows between points and shapes.

• getArrow - For point-to-point arrows.
• getBoxToBoxArrow - For rectangle-to-rectangle arrows.

👉 Demo

npm i perfect-arrows

or

yarn add perfect-arrows

The functions in this library provide only the information needed to draw an arrow. You'll need to draw the arrow yourself using your technology of choice. See below for an example React component with SVG.

The getArrow function accepts the position of two points and returns an array containing information for:

• three points: a start, end, and control point
• three angles: an end, start, and center

You can use this information to draw an arc and arrow-heads. You can use the options object to tweak the return values.

const arrow = getArrow(0, 0, 100, 200, {
  bow: 0,

LearnGitBranching is a git repository visualizer, sandbox, and a series of educational tutorials and challenges. Its primary purpose is to help developers understand git through the power of visualization (something that's absent when working on the command line). This is achieved through a game with different levels to get acquainted with the different git commands.

You can input a variety of commands into LearnGitBranching (LGB) -- as commands are processed, the nearby commit tree will dynamically update to reflect the effects of each command:

This visualization combined with tutorials and "levels" can help both beginners and intermediate developers polish their version control skills. A quick demo is available here https://pcottle.github.io/learnGitBranching/?demo

Or, you can launch the application normally here https://pcottle.github.io/learnGitBranching/

By default the application launches in "sandbox mode" with a basic repository already created. Here you can enter commands and mess around with a repository as much as…

The typical use case for this high speed Node-API module is to convert large images in common formats to smaller, web-friendly JPEG, PNG, WebP, GIF and AVIF images of varying dimensions.

It can be used with all JavaScript runtimes that provide support for Node-API v9, including Node.js (^18.17.0 or >= 20.3.0), Deno and Bun.

Resizing an image is typically 4x-5x faster than using the quickest ImageMagick and GraphicsMagick settings due to its use of libvips.

Colour spaces, embedded ICC profiles and alpha transparency channels are all handled correctly Lanczos resampling ensures quality is not sacrificed for speed.

As well as image resizing, operations such as rotation, extraction, compositing and gamma correction are available.

Most modern macOS, Windows and Linux systems do not require any additional install or runtime dependencies.

Visit sharp.pixelplumbing.com for complete installation instructions, API documentation, benchmark tests and changelog.

npm install