DEV Community: jQueryScript

Before/After Image Comparison Slider in JS

jQueryScript — Thu, 09 Apr 2026 05:09:33 +0000

Image Comparison Slider: a vanilla JavaScript component that lets users drag a handle to compare before/after images side by side.

Key features:

CSS clip-path reveal effect (GPU-composited)
Mouse drag, touch gestures, and full keyboard support
ARIA slider role for screen readers
Hover-animated labels for each side
Responsive with 16:9 aspect ratio enforcement
Works with any image pair, no dependencies

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

boring-avatars-vanilla: SVG Avatars from Any Username

jQueryScript — Thu, 09 Apr 2026 03:50:06 +0000

boring-avatars-vanilla: a vanilla JavaScript library that generates unique, deterministic SVG avatars from any username or string.

Key features:

6 visual variants: marble, beam, pixel, ring, sunset, bauhaus
Customizable color palette
Circular and square output
Works in browsers and Node.js
CDN script tag support via unpkg or jsDelivr

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

jal-co/ui: Open-Source React Component Library for Tailwind CSS

jQueryScript — Thu, 09 Apr 2026 02:22:55 +0000

jal-co/ui: an open-source React component library that ships components through a shadcn-compatible registry.

Key features:

30+ components covering code blocks, GitHub metrics, dev dashboards, and documentation layouts
Async server components for GitHub stats, npm badge data, and contributor grids fetched at build time via ISR
shadcn CLI installation: one command downloads the source into your project
No paywall, no npm package to version-track, no external dependencies as a default
Pretext-powered layout components that predict text dimensions without DOM measurement

Works with Next.js App Router and Tailwind CSS v4. Every component is editable source in your project. Registry at ui.justinlevine.me.

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

open-edit: Rich Text Editor for Modern Web Apps

jQueryScript — Wed, 08 Apr 2026 05:55:26 +0000

open-edit: a lightweight JavaScript WYSIWYG editor for web apps that need clean HTML output and a smaller editing surface.

Key points:

HTML and Markdown import/export
Configurable toolbar and status bar
Image upload hook
Callout, emoji, and slash command plugins
React and Vue friendly setup

Great for CMS fields, internal tools, docs, and comment editors.

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

Interactive WebGL Image Gallery with Distortion Effect

jQueryScript — Wed, 08 Apr 2026 04:34:40 +0000

WebGL Concave Gallery: a vanilla JavaScript class that renders an infinite, draggable image grid with a real-time concave distortion effect computed in GLSL shaders.

Key features:

Infinite scrollable grid with mouse, touch, and scroll wheel support
Live concave warp via a custom vertex shader (no CSS transforms)
Adjustable distortion strength and radius with keyboard shortcuts
Inertia-based panning with automatic momentum decay
Built-in fullscreen toggle

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

boneyard-js: CLI-Driven Skeleton UI for Any Framework

jQueryScript — Wed, 08 Apr 2026 02:46:20 +0000

boneyard is a skeleton loading framework that captures your real UI and turns it into matching placeholder screens.

Features:

• build time skeleton extraction from actual component layout
• responsive bone files for different viewport widths
• support for React, Vue, Svelte, Angular, and React Native
• fixture based capture for auth or API driven screens
• registry import so named skeletons resolve automatically

Good fit for cards, dashboards, content feeds, and screens where layout shift matters.

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

Dark Mode Toggle Plugin For Bootstrap 5

jQueryScript — Wed, 08 Apr 2026 02:27:55 +0000

Bootstrap Darkmode Toggle: a Bootstrap 5 plugin for adding a light and dark mode switch to your app.

It supports:

jQuery and vanilla JavaScript
user preference detection
local storage or cookie-based persistence
custom labels
custom color mode names
toggle and button layouts

Good fit for dashboards, docs sites, admin panels, and Bootstrap UI demos.

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

Math Curve Loaders: SVG CSS Loading Animations

jQueryScript — Tue, 07 Apr 2026 09:30:30 +0000

Math Curve Loaders: a plain HTML, SVG, CSS, and JavaScript loader gallery built around mathematical curves.

It includes:

particle trail motion
rose, Lissajous, cardioid, and hypotrochoid variants
modal previews
formula notes
copyable and downloadable HTML

Useful if you want a loader with more personality than a standard spinner.

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

The GridCN: shadcn/ui Components With Tron Aesthetics and 3D Effects

jQueryScript — Tue, 07 Apr 2026 05:48:57 +0000

The GridCN: a Tron: Ares-inspired design system built on shadcn/ui for React and Next.js.

Key highlights:

50+ fully styled shadcn/ui components with Tron visuals and neon accents
6 Greek god-inspired color themes (Ares, Tron, Clu, Athena, Aphrodite, Poseidon) using the oklch() color space
HUD-style components: radar displays, dossier cards, countdown timers, and status strips
Three.js 3D effects: interactive grid floors, particle systems, and fly-through tunnels
CSS glow, scanline, and pulse utilities tied to each active theme
Full TypeScript definitions throughout
Dynamic theme switching with persistent storage

Components install directly as editable source files. Open source, MIT licensed.

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

Smooth CSS Gradients with easing-gradients (A TailwindCSS Plugin)

jQueryScript — Tue, 07 Apr 2026 03:44:15 +0000

easing-gradients: a Tailwind CSS plugin that applies easing curves to gradient stop distribution. Linear gradients often show hard edges at the start or end. This plugin fixes that.

Key features:

Four preset curves (linear, in, out, in-out)
Custom cubic-bezier support
Works with Tailwind v4
No JavaScript, just CSS custom properties

Install with pnpm add easing-gradients, then add @plugin "easing-gradients" to your CSS file. Use classes like gradient-ease-in-out on any gradient background.

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

Material Symbols Picker: Variable Font Icon Picker

jQueryScript — Thu, 02 Apr 2026 08:42:09 +0000

Material Symbols Picker: a vanilla JavaScript library that attaches a full icon picker to any HTML input element and lets users browse and select icons from Google's Material Symbols font.

Key features:
• 2,500+ icons fetched from the official Google Fonts manifest
• Outlined, rounded, and sharp variant switching
• Search by icon name or descriptive tag
• Category filtering via a built-in dropdown
• Variable font axis controls: fill, weight, grade, and optical size
• Built-in light, dark, and auto themes
• Virtual scrolling for smooth performance at scale
• Full localization support

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

heerich.js: SVG Voxel Engine for 3D Scenes

jQueryScript — Thu, 02 Apr 2026 06:01:23 +0000

heerich.js: a JavaScript library that builds 3D voxel scenes and renders them as crisp SVG vectors.

Key features:

Four CSG-style boolean modes (union, subtract, intersect, exclude)
Oblique and perspective camera projections
Per-face SVG styling with position-driven callback support
Box, sphere, line, and custom fill shape primitives
Per-voxel axis scaling with configurable anchors
Full DOM interactivity through data attributes on every polygon
JSON serialization for save and restore

No WebGL, no canvas. Pure SVG output that scales to any resolution and works with standard DOM event listeners.

👉 Blog Post

👉 GitHub Repo

👉 Live Demo