cssscriptcom

[cssscriptcom]

Draggable Liquid Glass Effect with JavaScript and SVG Filters

liquid-glass.js is a tiny JavaScript library that creates a draggable, SVG filter-based liquid glass effect over your webpage. Inspired by Apple’s new Liquid Glass design concept. Features: Zero Dependencies: Pure vanilla JavaScript implementation SVG Filter-Based: Uses displacement mapping for hardware-accelerated rendering Draggable Interface: Interactive glass lens with mouse control Viewport…

[cssscriptcom]

Realistic Liquid Glass Distortion Effects with CSS and SVG

Yet another liquid glass effect implemented with CSS and SVG. It transforms HTML elements into realistic glass surfaces with physical distortion and refraction effects. This effect is built to replicate the fluid, refractive glass aesthetic seen in Apple’s iOS 26 and macOS 26 design language. Features: Pure CSS and SVG implementation (no JavaScript required) Realistic distortion using SVG…

[cssscriptcom]

Copy-Paste CSS Components Library for Modern Web - Open Props UI

Open Props UI is a PURE CSS component library that uses next-generation CSS features (like container queries, CSS layers, and OKLCH color spaces) to create highly customizable components you can copy and paste directly into your project. The library takes a refreshing approach to component distribution. Instead of importing a black-box library or NPM package, you take the provided HTML and CSS…

[cssscriptcom]

Create Apple Liquid Glass UI with Pure CSS & SVG Filter

This is a CSS and SVG implementation of an Apple Liquid Glass-style UI with a realistic liquid distortion effect. It recreates the look of frosted, distorted glass with specular highlights without the need for JavaScript. Features: Multi-layered glass effect: Combines backdrop filters, displacement mapping, and specular highlights for realistic depth SVG-based distortion filters: Uses fractal…

[cssscriptcom]

Tiny JS Library for Human-Readable Timestamps - little-timestamp

little-timestamp is a tiny timestamp formatting library (TypeScript) that transforms JavaScript Date objects into clean, human-readable strings like “2h ago” or “Jun 15”. The library has the ability to make smart decisions about when to show relative time versus absolute dates. For recent timestamps, it displays relative formats like “3m ago” or “5h from now.” For older dates, it switches to…

[cssscriptcom]

Add Numbering to Pre and Textarea - line-numbers Web Component

<line-numbers> is a lightweight web component that adds line numbers to <pre> and <textarea> elements. It even dynamically updates with <textarea> input. Features: Non-Selectable Numbers: The numbers are rendered in the Shadow DOM. Multi-element support: Works with both <pre> and <textarea> elements Real-time updates: Line numbers automatically adjust when adding or removing lines in…

[cssscriptcom]

Lightweight Data Chunking for JavaScript - Chonkify

Chonkify is a lightweight chunking utility that transforms arrays, strings, sets, maps, and async iterables into evenly-sized groups with minimal overhead. It handles splitting data structures into manageable chunks while maintaining proper Unicode support and async compatibility. Features: Works with arrays, strings, buffers, sets, maps, and typed arrays Async iterable support with for await…

[cssscriptcom]

Lightweight JavaScript Notification System - Simple Display Alert

Simple Display Alert is a lightweight JavaScript library that creates various customizable notifications like toast messages, success confirmations, error flags, or loading indicators. Features: Alert Types: Comes with pre-styled alerts for success, error, warning, info, and a loader. Positioning: You can place alerts in corners: top-left, top-right, bottom-left, or bottom-right. Animations:…

[cssscriptcom]

Add Interactive Zoom and Pan to Any SVG - svg-toolbelt

svg-toolbelt is a lightweight JavaScript library that adds interactive, zoomable, and pannable experiences to any SVG. Key Features: Smooth Zoom & Pan: Offers mouse-wheel zoom (to cursor), click-drag panning, pinch-to-zoom, touch-drag, and keyboard navigation (+/- for zoom, arrows for pan, 0 to reset). On-Screen Controls: Provides buttons for zoom in/out, reset, and fullscreen. These are…

[cssscriptcom]

Zero-Dependency Reactive DOM from JSON Data - Sprout

Sprout is a zero-dependency JavaScript library that transforms JSON data into reactive DOM elements. using native browser APIs. It uses standard HTML <template> elements with data attributes to create reactive interfaces that automatically update when underlying data changes. Features Declarative Templates: Uses native HTML <template> elements with data attributes Automatic Reactivity:…

[cssscriptcom]

Vanilla JS Library for Smooth Number Transitions - CounterAnime

CounterAnime is a vanilla JavaScript animation library that transforms static numbers into smooth sliding digit counters. It handles arbitrarily large numbers through BigInt support and creates smooth transitions when values change. This makes it perfect for scoreboards, real-time dashboards, digital clocks, financial interfaces, statistical counters, and more. Features: Smooth sliding…

[cssscriptcom]

Create Retro ASCII Text Art with BitmapIt JavaScript

BitmapIt is a lightweight JavaScript library that transforms plain text into customizable bitmap-style ASCII art representations. It’s ideal for creating retro terminal aesthetics, game interfaces, and nostalgic text displays in web applications. Features: Customizable display characters (e.g., blocks, symbols) Adjustable character width, height, and inter-character spacing Simple, clean API for…

[cssscriptcom]

Extract Clean Web Content with Defuddle.js

Defuddle is a web content extraction library that extracts the main content from web pages by removing clutter and standardizing HTML. Works both for Browser and Node.js. This library parses a given HTML document (or string), identifies & preserves the core article content, and strips away elements like sidebars, headers, footers, and other non-essential content. It serves as an enhanced…

[cssscriptcom]

Fast, Extensible, Touch-enabled Carousel & Slider JS Library - Smooothy

Smooothy is a lightweight, framework-agnostic JavaScript slider library for creating smooth, performant, interactive, touch-enabled carousels. It can help you handle the tricky parts of slider mechanics, like smooth scrolling, infinite looping, snapping, and touch interactions, while staying out of your way on styling and advanced features. Features: High Performance: It’s built on…

[cssscriptcom]

Social Share Buttons Plugin with Custom Popup Support - UniversalShare

UniversalShare is a lightweight JavaScript plugin that creates social media sharing buttons on your website from a simple div element. It supports 12+ major social platforms, multiple icon libraries, and flexible positioning options without requiring any external dependencies beyond your chosen icon set. Features: 12+ Built-in Platforms: Facebook, Twitter, LinkedIn, WhatsApp, Telegram, Reddit,…

[cssscriptcom]

1300+ Handcrafted, Pixel-style Minecraft UI Icons - McIcons.css

McIcons is a CSS icon library that provides 1300+ handcrafted, pixel-style, Minecraft-themed icons for your web project. The library is useful for Minecraft-related web projects or user interfaces that need blocky, retro icons. You can drop in an icon with a single line of HTML, no extra JS required. Features 1300+ handcrafted pixel-art icons covering Minecraft items, blocks, and UI elements CSS…

[cssscriptcom]

Interactive Radial Menus in JavaScript - Orbit Menu

Orbit Menu is a lightweight JavaScript library that transforms HTML elements into interactive radial menus. When you click its trigger, Orbit Menu pops out menu items in a circle around it. Click the trigger again, or click anywhere outside the menu, and the menu items will dismiss smoothly. This is helpful for UIs where screen space is at a premium or when you want a more dynamic way to present…