Forem: jQueryScript

GDPR Cookie Consent Banner With JS Examples & API

jQueryScript — Thu, 14 May 2026 05:38:22 +0000

Neiki's Cookie Banner: a vanilla JavaScript library that adds a GDPR-compliant cookie consent banner to any site with a single script tag.

Key features:

Bar, box, and modal layouts with light/dark/auto themes
Granular per-category consent with toggle controls
Google Consent Mode v2 integration built in
Script blocking via data attributes for third-party scripts
Versioned consent records for re-prompt on policy changes
Zero dependencies, MIT licensed

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

Better Design: 30+ Themed shadcn/ui Design Systems

jQueryScript — Thu, 14 May 2026 01:21:45 +0000

Better Design: an open source shadcn/ui registry with 31 themed design systems for React and Tailwind projects.

Key points:

Install components through the shadcn CLI.
Pick themes such as Linear, Stripe, Vercel, Notion, Supabase, Apple, and Figma.
Use themed components for dashboards, admin panels, SaaS apps, and product UIs.
Browse readable TSX source files before adding components to your app.

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

Azar Datepicker: Jalali & Gregorian Date Picker in Vanilla JS

jQueryScript — Wed, 13 May 2026 06:09:41 +0000

Azar Datepicker: a dependency-free JavaScript library for Persian (Jalali) and Gregorian date and time picking.

Key features:

Jalali and Gregorian calendars with runtime switching
Date, time, and datetime modes
Auto dark mode from OS preference or Bootstrap's data-bs-theme
Mobile modal and desktop dropdown layouts auto-detected
Min/max date boundary enforcement
HTML data attribute initialization, no JS required
One JS file, one CSS file. Zero dependencies.

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

readmore-lines: Read More/Less by Line Count (JS Library)

jQueryScript — Wed, 13 May 2026 05:41:43 +0000

ReadMore Lines: a lightweight vanilla JavaScript library for line-based text truncation with a read more / read less toggle.

Key features:

Truncates by rendered line count using CSS -webkit-line-clamp
Accessible toggle button with ARIA attributes and keyboard support
WeakMap instance tracking for safe cleanup and re-initialization
CSS custom properties for full button theming
~2.5KB minified, no dependencies

Great for blog cards, product pages, and comment threads where text length varies.

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

Bootstrap UI Sounds: Add Web Audio API Sound Feedback to Bootstrap 5

jQueryScript — Tue, 12 May 2026 06:07:41 +0000

Bootstrap UI Sounds: a JavaScript plugin that adds synthesized audio feedback to Bootstrap 5 components using the Web Audio API.

Key features:

Activates with a single data-ui-sounds attribute on any container
21 distinct sound presets: button clicks, modal open/close, switch toggle, form valid/invalid, carousel prev/next, and more
All audio is synthesized at runtime. No sound files needed.
Works with dynamically injected alerts via MutationObserver

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

Vanilla Scroll Sky: Pure CSS Scrollytelling with Sticky Image Reveals

jQueryScript — Tue, 12 May 2026 05:48:45 +0000

Vanilla Scroll Sky: a pure CSS utility that creates sticky image reveals and moving captions for scrollytelling pages.

Key features:

Sticky image stage
Scroll-driven image reveal
Optional moving captions
Per-section CSS Custom Properties
Reduced-motion support
Readable fallback for browsers with limited animation support

Useful for editorial stories, portfolio case studies, product pages, and long-form visual layouts.

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

framecn: Animated Video Components for React/Next.js

jQueryScript — Tue, 12 May 2026 02:09:31 +0000

framecn: React video components for code-based product videos with Editframe and the shadcn CLI.

It helps developers create product launch trailers, dashboard walkthroughs, AI generation scenes, terminal-to-browser demos, animated typography, and UI motion blocks from React component code.

Key points:

shadcn-style install command
Local component ownership
Editframe MP4 rendering
Timeline-based UI scenes
React and TypeScript workflow

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

Open Overlay: Add an Accessible Accessibility Panel via Web Component

jQueryScript — Mon, 11 May 2026 05:16:30 +0000

Open Overlay: a vanilla JavaScript Web Component that adds an accessibility settings widget to any HTML page.

Features:

Text size controls
Contrast modes
Dyslexia-friendly font option
Line height and letter spacing controls
Grayscale, saturation, and color vision filters
Reading guide
Focus, heading, and link highlighting
Text-to-speech
Chrome Prompt API support for alt text and plain language

Good for static sites, documentation pages, blogs, and content-heavy projects that need user-controlled accessibility tools.

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

Neiki Gallery: Responsive JS Image Gallery Lightbox Plugin

jQueryScript — Fri, 08 May 2026 05:39:58 +0000

Neiki's Gallery: a vanilla JavaScript image gallery and lightbox that packs a lot into one file.

Key features:

4 layouts: masonry, grid, mosaic, filmstrip
Glassmorphism lightbox with slideshow and Ken Burns
Before/after comparison slider
Story mode, picture-in-picture, EXIF overlay
In-lightbox image editor and freehand annotation
Plugin system with full lifecycle hooks
Video support: MP4, YouTube, Vimeo

No dependencies, auto-initializes on page load.

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

shadcn Dashboard Template: 30+ Pages for Vite and Next.js

jQueryScript — Fri, 08 May 2026 02:48:35 +0000

shadcn Dashboard + Landing Page Template — a free, open-source admin UI starter built on React 19, Tailwind CSS v4, and shadcn/ui.

What's inside:

Two dashboard variants and 30+ pages
App demos: Mail, Tasks, Chat, Calendar, Users
Full marketing landing page with 12+ sections
Live tweakcn theme customizer
Both Vite and Next.js versions
MIT licensed for commercial use

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

metal-fx: Animated WebGL Liquid Metal Effect For React

jQueryScript — Thu, 07 May 2026 14:54:49 +0000

metal-fx: a React component library that adds an animated WebGL liquid metal ring to buttons, chips, and icon controls.

Key points:

WebGL-based metal frame
Button and circle variants
Chromatic, silver, and gold presets
Auto, dark, and light themes
SSR-friendly React rendering
Dark-mode proximity reflections

Useful for premium CTAs, AI dashboards, chat controls, and product landing pages.

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

WebGL Chart: GPU-Backed Canvas Charting for JavaScript

jQueryScript — Thu, 07 May 2026 05:11:54 +0000

WebGL Chart: a JavaScript WebGL charting library that renders GPU-accelerated charts on an HTML canvas.

Key features:

Line, bar, area, bubble, range, and candlestick chart types
Real-time rolling charts with ring buffers
Mouse wheel zoom and drag-to-pan
Multi-axis support with right-side axis placement
Hover tooltips with snap-to-nearest-point markers
Annotations: vertical/horizontal lines, bands, boxes, and labels
Vanilla JS via CDN, plus Vue 3 and React wrappers

MIT license. No configuration object required. You control the buffers, scales, and render loop directly.

👉 Blog Post

👉 GitHub Repo

👉 Live Demo