DEV Community: jQueryScript

OpenSeadragon: Deep Zoom Image Viewer for the Web

jQueryScript — Sat, 20 Jun 2026 07:51:28 +0000

OpenSeadragon v6: a pure JavaScript image viewer for high-resolution images, deep zoom documents, IIIF sources, maps, and tiled image collections.

Key features:

Pan, zoom, rotate, flip, and fullscreen controls
DZI, IIIF, Zoomify, TMS, OSM, and custom tile sources
Navigator minimaps and image sequences
HTML overlays for labels, hotspots, and annotations
WebGL and canvas rendering support

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

Lightbox3: Gallery Lightbox for Modern Image Sets

jQueryScript — Wed, 17 Jun 2026 04:40:01 +0000

Lightbox3: a JavaScript library that creates modern image and gallery lightboxes with no jQuery dependency.

Features:

Full-size image overlays from thumbnail links.
Gallery grouping through HTML data attributes.
Pinch zoom, swipe navigation, and swipe-to-dismiss.
Spring-based open, close, and zoom animations.
CSS variables for overlay and caption styling.

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

liquid-glass-web-react: Apple-Style Liquid Glass Lens for Next.js

jQueryScript — Wed, 17 Jun 2026 01:59:36 +0000

liquid-glass-web-react adds an Apple-style liquid glass lens to React and Next.js apps.

Key features:

Live DOM refraction with SVG displacement.
Draggable lens support.
Typed props for size, radius, glow, blur, and chromatic aberration.
Imperative movement through setPosition().
Low-level DOM engine for custom integrations.

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

Create Smooth Text Transitions with Torph.js (No Dependencies)

jQueryScript — Tue, 16 Jun 2026 04:45:39 +0000

Torph: a JavaScript text animation library that morphs one string into another across React, Vue, Svelte, and vanilla JavaScript.

Key features:

Dependency-free text morphing.
CSS easing and spring motion.
Locale-aware segmentation.
Reduced-motion support.
Lifecycle callbacks.

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

chart.xkcd v2: JavaScript library that renders sketch-style charts using SVG

jQueryScript — Tue, 16 Jun 2026 03:32:20 +0000

chart.xkcd v2: a JavaScript library that renders sketch-style charts inside SVG elements.

It supports:

Line, bar, stacked bar, XY, pie, doughnut, radar, and combined charts.
CDN and npm setup.
Custom legends, ticks, colors, fonts, strokes, and backgrounds.
Optional cleaner output through the xkcd effect toggle.

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

Liquid Glass: WebGL2 Refraction Lens for Next.js and React

jQueryScript — Tue, 16 Jun 2026 02:30:49 +0000

Liquid Glass: a React component for adding an Apple-style Liquid Glass lens to hero sections and visual landing pages.

Key details:

Raw WebGL2 shader effect.
shadcn CLI install.
Typed React props.
Cursor-following lens, click ripples, and idle motion.
Static fallback when WebGL2 is unavailable.

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

Text Roll Animation for UI Labels with slot-text

jQueryScript — Mon, 15 Jun 2026 04:16:10 +0000

slot-text: a JavaScript library that adds rolling text animation to short UI labels.

Useful for:

Button feedback.
Status labels.
Command text.
Small counters.
React, Vue, Solid, Svelte, and vanilla JavaScript apps.

It has zero runtime dependencies, npm setup, configurable timing, roll direction, bounce, and per-character color support.

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

ifvisible.js: Track Active, Idle, and Hidden Page States

jQueryScript — Mon, 15 Jun 2026 03:12:37 +0000

ifvisible.js: a JavaScript library that detects if a user is actively viewing a page or has stepped away.

Key features:

Three page states: active, idle, and hidden
Named events for blur, focus, idle, wakeup, freeze, and resume
Configurable idle timeout (default: 30 seconds)
Smart intervals that pause automatically when the user goes idle
SSR-safe imports with bundled TypeScript types
Per-instance teardown via destroy() for SPA route changes

Works via npm, CDN, or browser global. Useful for pausing animations, stopping data polling, and triggering session timeouts based on real user attention.

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

Calligraph: Motion-Based Text Transitions for React Apps

jQueryScript — Sat, 13 Jun 2026 05:58:51 +0000

Calligraph: a React component for character-level text transitions powered by Motion.

Key features:

Shared characters slide into new positions.
New characters fade in.
Removed characters fade out.
Custom spring settings tune the transition.
Good fit for labels, headings, prices, and status text.

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

validation-enhancer: Custom HTML5 Form Validation Web Component

jQueryScript — Fri, 12 Jun 2026 05:40:36 +0000

validation-enhancer: a lightweight web component that upgrades native HTML5 form validation with inline errors, CSS state classes, and full accessibility support.

Key features:

Wrap any HTML form in <validation-enhancer>. No changes to individual inputs needed.
Inline error messages next to each field on focus-out and submit
.valid / .invalid CSS classes for input styling
aria-invalid and aria-live built in for screen readers
Optional Zod schema integration via <validation-enhancer-zod>
Scroll-to-first-error on submit with configurable scroll container support
MutationObserver support for dynamically added fields

Works with any HTML/JS project. Standard, minified, and ES2017 compat builds included.

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

Extend UI: React Document Components for Document

jQueryScript — Thu, 11 Jun 2026 04:12:15 +0000

Extend UI: an open-source React and shadcn/ui component library for document-heavy apps.

Key features:

PDF, DOCX, XLSX, and CSV viewers.
File upload, thumbnails, and Finder-style browsing.
Bounding box citations and review panels.
shadcn registry installs with editable local source.

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

qrGrid: Canvas and SVG QR Codes for React, Vue, and Angular

jQueryScript — Wed, 10 Jun 2026 06:14:56 +0000

qrGrid: a TypeScript JavaScript library that generates fully customizable QR codes with canvas and SVG rendering, framework components, and server-side support.

Key features:

Raw module grid output as a flat Uint8Array for custom rendering
Module styles: dots, smooth edges, and rounded corners
Gradient fills, per-zone finder colors, and center logo embedding
Native components for React, Vue 3, and Angular
Server-side SVG generation for Node.js (emails, PDFs, APIs)
CLI output for terminal display and SVG file export
Zero runtime dependencies, full TypeScript support

👉 Blog Post

👉 GitHub Repo

👉 Live Demo