Forem: jQueryScript

LiquidGlass: WebGL-powered Liquid Glass Effects

jQueryScript — Thu, 23 Apr 2026 05:19:35 +0000

LiquidGlass: a JavaScript library that applies realistic liquid glass refraction, blur, chromatic aberration, and Fresnel lighting to any HTML element using WebGL shaders.

Key features:

Fragment shader-based glass refraction and specular highlights
Per-panel Gaussian blur and chromatic aberration
Layered compositing so glass panels see each other in refraction
Draggable floating panels via Pointer Events
Static DOM capture cached once; dynamic content flagged per-element
Works with live video, canvas elements, and animated content

Zero CSS tricks. The effect runs entirely in WebGL. Worth checking out for anyone building UI components with a physical glass aesthetic.

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

Copy-Paste Sci-Fi Components Built on Radix UI | SCIFICN/UI

jQueryScript — Thu, 23 Apr 2026 03:06:19 +0000

SCIFICN/UI: a React component library that applies a cassette futurism terminal aesthetic to a full set of copy-paste UI components.

Key details:

30+ components: charts, HUD panels, stat cards, node graphs, and a terminal emulator
Three runtime themes: SCI-FI (green phosphor), STAR WARS (blue holographic), ALIEN (warm bone)
Built on Radix UI and Tailwind CSS v4
Adds components via the shadcn CLI: npx shadcn@latest add @scificn/button
Source files copy directly into your project — no npm package, no version lock-in

Good for dashboards, monitoring screens, internal tools, and game style interfaces.

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

Mobile Swipe Menu: Vanilla JS Offcanvas Menu

jQueryScript — Wed, 22 Apr 2026 04:59:42 +0000

mobile-swipe-menu: a vanilla JavaScript library that adds touch-based swipe gesture control to offcanvas side navigation panels.

Key features:

Left and right slide modes
Configurable hook zone for edge-drag triggering
Full-body swipe detection option
Programmatic open, close, and toggle methods
Lifecycle callbacks: start, stop, drag, opened, closed
Vue and TypeScript compatible

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

tiks: Web Audio UI Sounds With No Audio Files

jQueryScript — Wed, 22 Apr 2026 03:58:28 +0000

tiks: a JavaScript library that generates UI sound effects at runtime using the Web Audio API.

No audio files. Every sound is synthesized from oscillators, noise buffers, and gain envelopes at the moment you call it.

Key features:

10 interaction sounds (click, toggle, success, error, warning, hover, pop, swoosh, notify)
Two built-in themes: soft (warm/rounded) and crisp (sharp/mechanical)
Custom theme API with full control over frequency, waveform, and filter parameters
React hook and Vue composable, both with auto-initialization
Tree-shakeable imports for minimal bundle impact

Good for design systems, PWAs, or any web UI that wants the tactile audio layer native apps have had for years.

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

shadcn/ui Calendar Component with Admin Timezone Support

jQueryScript — Wed, 22 Apr 2026 02:43:31 +0000

Calendar Scheduler: a React scheduling component built on shadcn/ui and date-fns that handles timezone-aware slot booking out of the box.

Key features:

Month, Week, Day, and Agenda view modes
Admin availability converts automatically to each viewer's local timezone
Configurable slot durations at 15, 30, or 60 minutes
Booked slot tracking in the rendered grid

Install it in one command via the shadcn registry, or copy the component folder manually. Works with any TypeScript-first React project that has Tailwind CSS configured.

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

React Native Spinner Set for Agent Screens

jQueryScript — Tue, 21 Apr 2026 07:10:55 +0000

expo-agent-spinners: a React Native spinner library that adds 54 terminal-style loaders to Expo apps and mobile agent UIs.

• 32 Braille spinners
• 15 ASCII styles
• 2 arrow loaders
• 6 emoji options
• Shared size, color, and style props
• Great fit for AI agent streams and CLI-style mobile screens

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

Two Direction Sticky Sidebar in Pure JavaScript

jQueryScript — Tue, 21 Apr 2026 05:10:58 +0000

Two Direction Sticky Sidebar: a pure JavaScript utility that adds bi-directional sticky behavior to any sidebar element.

Key features:

Tracks scroll direction and locks to the top or bottom of the viewport
Configurable top and bottom viewport gaps via data attributes
Mobile breakpoint support disables the effect on small screens
Live attribute updates reconfigure the sidebar at runtime
Frame-synced scroll handling for consistent visual performance

Add one attribute to your sidebar element and include the script. That's the full setup.

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

Linked lists using anchor-positioning

jQueryScript — Tue, 21 Apr 2026 04:12:47 +0000

Linked Lists with CSS anchor-positioning: a CSS-and-JavaScript pattern that draws position-aware two-segment connector lines between checked checkboxes and a selected radio button.

Key features:
• anchor-scope lets multiple checked checkboxes maintain independent connection lines at the same time
• Container style queries route connectors for above, below, and inline alignments
• Full theming through CSS custom properties
• Minimal JavaScript. All connector geometry runs in CSS
• Built-in light/dark mode support

👉 Blog Post

👉 Live Demo

Pittaya UI: Open-Source React Component Library Built on shadcn/ui

jQueryScript — Tue, 21 Apr 2026 02:08:20 +0000

Pittaya UI: an open-source React component library built on TypeScript, Tailwind CSS 4, Radix UI, and Shadcn UI.

Key highlights:

23+ production components, including Carousel, Multi-Select, Orbit Images, and Copy Button- CLI installation: npx pittaya add button pulls in any component as editable source
Full TypeScript coverage with IntelliSense and prop validation
Radix UI primitives for keyboard navigation, ARIA attributes, and screen reader support
Targets Next.js 15 and React 19 with Server Component defaults

Every component lands in your source tree as an editable file. Works alongside any existing Shadcn setup.

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

Devstarter: Next.js Portfolio Template with Cyberpunk UI

jQueryScript — Tue, 21 Apr 2026 01:31:35 +0000

Devstarter: a free, open-source one-page portfolio template built with Next.js 16, shadcn/ui v3.6, and Tailwind CSS 4.

Key highlights:

Cyberpunk aesthetic with neon green accents and monospace typography
Five pre-built sections: Hero, Projects, Skills, Blog, and Contact
Light and dark modes fully configured across all components
CSS Grid with Subgrid, view transitions, and backdrop blur — no JS library required
TypeScript 5.8 throughout, free for personal and commercial use

All customization runs through shadcn/ui's CSS custom property system. Change colors, fonts, and spacing with a few edits in globals.css.

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

Neiki Editor: Lightweight WYSIWYG Rich Text Editor

jQueryScript — Mon, 20 Apr 2026 05:35:28 +0000

Neiki Editor: a lightweight WYSIWYG JavaScript editor that replaces a textarea with a full rich text interface using one line of code.

Key features:

Full toolbar customization with separators and button reordering
Light and dark themes with localStorage persistence
Localization for 8 languages: English, Chinese, Japanese, German, French, Spanish, Portuguese, and Czech
Table editing with a right-click context menu for rows, columns, and cell merging
Plugin API for registering custom toolbar buttons with SVG icons
React, Vue, and PHP integration with a server-side sanitization helper

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

CalendarJS: date picker, scheduler, and timeline

jQueryScript — Mon, 20 Apr 2026 03:56:56 +0000

CalendarJS: a JavaScript calendar library that ships a date picker, a schedule grid, and a timeline in one package.

What stands out:

range and time selection
day, week, and weekdays scheduler views
drag editing with undo and redo
timeline layouts with monthly filtering
helper utilities for Excel style date values

👉 Blog Post

👉 GitHub Repo

👉 Live Demo