Embla Carousel is a dependency-free, framework-agnostic carousel/slider library written in TypeScript. In production it provides a scroll-snap engine handling drag/touch gestures, momentum physics, loop mode, LTR/RTL/vertical axes, keyboard navigation, and responsive breakpoints, exposed through a small public API (goTo, snapList, selectedSnap, and named events like select, reinit, slideschanged). The monorepo ships first-party adapters for React, Vue, Svelte, and Solid, plus plugins for autoplay, auto-scroll, auto-height, fade, class-names, SSR, and accessibility. It also contains a Next.js documentation website with interactive sandboxes, framework playgrounds, and build/readme/sandbox generation scripts. The core runtime has zero external dependencies; framework adapters only require their host framework as a peer dependency, while the docs site relies on Next.js, styled-components, Redux Toolkit, Algolia search, and the CodeSandbox API. Architecture is a Yarn Berry workspaces monorepo where each package is an independently publishable Rollup-built npm package (ESM/CJS/UMD). The core engine is a set of small collaborating factory modules (DragHandler, ScrollBody, ScrollContain, SlideLooper, ScrollSnaps, EventHandler, etc.) composed by an Engine and driven by the top-level EmblaCarousel module. Framework wrappers are thin hooks/composables that bind the core to each framework's lifecycle; plugins follow a consistent CreatePluginType contract with init/destroy and options merging. Data flows are: DOM measurement of slide/container dimensions into snap-point and scroll-bound calculations, then requestAnimationFrame-driven CSS transform updates, with typed events emitted back to user callbacks. Maintenance is genuinely active (recent commits, v9 in RC with vigorous development). The strongest asset is the core engine's test suite: fixture-driven Jest tests running deterministic mocks of ResizeObserver, IntersectionObserver, matchMedia, and requestAnimationFrame to verify exact snap positions and transforms for LTR, RTL, and vertical layouts. The main hygiene issues are committed Next.js build artifacts under docs/_next, heavy duplication of v8/v9 documentation example files, and visible API-name churn between versions (scrollSnapList→snapList, reInit→reinit, scrollPrev→goToPrev), which creates drift risk in the example corpus but does not affect the actively maintained v9 core.
Swiper is a mature, modular touch slider library for the web, supporting hardware-accelerated transitions and a wide range of effects (fade, cube, coverflow, flip, cards, creative). It provides first-class framework bindings for React, Vue, and Web Components, each with its own package entry point. The core is a lightweight, event-driven class that manages slide positioning, touch/mouse input, loop mode, breakpoints, and responsive behavior. All optional features (navigation, pagination, scrollbar, zoom, virtual slides, autoplay, keyboard, mousewheel, a11y, etc.) are implemented as self-contained modules that augment the core via a consistent factory pattern and TypeScript declaration merging. The build pipeline produces ESM, IIFE, and minified bundles, along with per-module CSS and type declarations. The codebase is actively maintained with a comprehensive test suite covering SSR, cross-realm params, element DOM behavior, and consumer type resolution under multiple module resolution modes.
react-zoom-pan-pinch is a production React library (npm package, zero runtime dependencies beyond React) that adds zoom, pan, and pinch interactions to arbitrary HTML content. In production, TransformWrapper mounts a ZoomPanPinch imperative core instance that registers DOM event listeners (wheel, touch/pointer, keyboard) and shares state via React context; TransformComponent renders children with a CSS transform (translate/scale or configurable matrix) driven by that state. The data flow is: browser events → gesture handlers → state/bounds mutation → CSS transform on the content node, with ResizeObserver-driven recalculation when wrapper or content dimensions change. The package is consumed internally as: TransformWrapper/TransformComponent, auxiliary MiniMap, KeepScale, and Virtualize components, six hooks (useControls, useTransformEffect, useTransformInit, useTransformContext, useTransformComponent, useZoomPanPinch), and an imperative API (zoomIn, zoomOut, setTransform, resetTransform, fitToView, zoomToElement, panBy, clientToContent/contentToClient) exposed via ref, render props, or hooks.
Creepyface is a JavaScript library that makes HTML images follow the pointer (mouse/finger/touch) by switching between different angled images. It consists of a core library, React and custom element wrappers, and point provider plugins for dance, firefly, and tilt tracking. The repository also includes a Next.js website that demonstrates the library and allows users to create and share their own creepyfaces. The architecture uses a monorepo with Lerna/Yarn workspaces, featuring a clean separation between the core library logic, UI wrappers, and the demonstration site with its own backend for image processing and storage.
Hammer.js is a JavaScript library for detecting touch gestures in web applications. It provides a modular architecture with a Manager class that coordinates input handling (touch, mouse, pointer events) and gesture recognition (tap, double tap, press, pan, swipe, pinch, rotate). The library normalizes different input types into a consistent gesture recognition system, manages gesture lifecycle states, and handles touch-action CSS property polyfilling. It features an event-driven architecture where recognizers emit events when gestures are detected, which are forwarded to registered listeners. The library has no runtime dependencies, relying solely on standard web APIs.
This repository is a monorepo providing a React component library for swipeable views (carousels/ tabs) with touch and mouse support. It is split into multiple packages: `react-swipeable-views` (browser implementation), `react-swipeable-views-core` (shared utilities), `react-swipeable-views-utils` (higher-order components for auto-play, virtualize, and keyboard binding), and `react-swipeable-views-native` (experimental React Native support). The main component (`SwipeableViews`) uses CSS transitions and transforms to animate slides, with lazy loading and resistance effects. The HOCs provide composable enhancements: `autoPlay` adds timed auto-advance with visibility change handling, `virtualize` renders only a window of slides for large lists, and `bindKeyboard` enables arrow key navigation. The library is well-tested with mocha, chai, and sinon, and has a comprehensive documentation site built with Next.js. However, the codebase is dated (class components, outdated Babel and Next.js versions, no hooks) and maintenance appears stagnant, with many open issues and infrequent updates. The core utility functions are clean, reusable, and demonstrate good software engineering practices.
A library of custom React hooks for common DOM events, including hover, focus, click outside, touch, mouse position, window resize, and element resize via ResizeObserver. Each hook is an independent module that returns state and event handler bindings, following a consistent pattern of using `useMemo` for the bind object. The `useResizeObserver` hook demonstrates good lifecycle management by using `requestAnimationFrame` to debounce updates and cleaning up the observer. The `useClickOutside` hook supports multiple refs and properly cleans up event listeners. The library is built with TypeScript and uses the now-deprecated Pika build system for packaging. Tests are provided with Jest and React Testing Library. The codebase is simple and well-structured but has not seen active development since around 2020, and the build tooling is outdated.