CSS & Javascript Codes @cssscriptcom - Tumblr Blog

Dark-first UI Component Framework With RTL Support - NYX

NYX is a dark-first CSS and vanilla JavaScript component framework that provides the layouts, controls, feedback patterns, overlays, data views, and motion effects required by modern web design. Its Luminous Depth design system combines glowing accents, translucent surfaces, gradients, and deep shadows across more than 100 components. The framework uses CSS to handle the design tokens, responsive…

#UI Component Library

AI Model Effort Selector with Magnetic Step Slider - ChatGPT Model Selector

ChatGPT Model Selector is a Vanilla JavaScript Web Component that creates a ChatGPT-inspired model picker and reasoning effort slider on your webpage. When you click on the Advanced button, the component opens a popover with five discrete tiers (Light, Medium, High, Extra High, Ultra) and an advanced slider control with magnetic dragging and a confetti celebration. See it in…

#range slider #Web Component

Claude-Style Effort Slider Web Component - Claude Model Selector

Claude Model Selector is a Web Component that adds a Claude-inspired effort level picker to your web page. It presents six discrete levels through an animated slider control with magnetic dragging, spring snapping, and keyboard interaction. The component is ideal for AI agents, developer tools, and configuration panels that need a compact control for choosing processing depth, quality, intensity,…

#range slider #Web Component

EaseMotion CSS: Animation-First UI Framework

EaseMotion CSS is an animation-first CSS framework that adds entrance effects, hover interactions, layout utilities, and reusable UI components through readable class names. Features: Human-readable animation and layout utilities. Entrance, exit, looping, and hover motion effects. Flexbox, grid, spacing, and alignment helpers. Button, card, navbar, marquee, chip, footer, and masonry styles. CDN,…

Liquid Glass: iOS-Style Refraction for Any Element

Liquid Glass is a tiny JavaScript library that adds Apple-style Liquid Glass effects with refraction, edge distortion, and a prism fringe to any DOM element. It’s ideal for translucent cards, floating navigation bars, buttons, toolbars, and compact overlays placed over visible page content. Chromium browsers get the real SVG refraction. Safari and Firefox receive an automatic frosted-blur…

#Liquid Glass

ds.css: Nintendo DS Lite UI Framework in Pure CSS

ds.css is a CSS framework that recreates Nintendo DS and DS Lite UI elements with themed colors, pixel-edged controls, patterned panels, and PictoChat-style messages. You can use it to build retro portfolio pages, nostalgia-driven landing pages, or internal tools with a handheld console look. How to use it: 1. Download the package and copy the contents of /css from the zip into your project, then…

Human-Friendly Time Ago Text in Vanilla JS - humantime-js

humantime-js is a dependency-free JavaScript utility that converts JavaScript Date objects into human-friendly timeago labels such as just now, 12 minutes ago, and yesterday. The library exposes a single synchronous function. You pass a JavaScript Date, and you immediately get a string you can render in a comment feed, a dashboard activity panel, a blog post byline, or any UI where raw timestamps…

#relative time

Tiny & Fast JavaScript Syntax Highlighting Library - Speed Highlight

Speed Highlight JS is a lightweight and fast JavaScript syntax highlighting library that converts code blocks into color-coded HTML using a small core engine and per-language tokenizers. You can use it to highlight code samples on documentation sites, blog posts, admin dashboards, and pages that display JavaScript, Python, SQL, YAML, or other source code. The library scans plain text inside a div…

#Syntax Highlighting

Filesize.js: Format Bytes as Readable File Sizes

filesize is a JavaScript file size formatting utility that converts byte and bit values into readable strings, such as 6.53 MiB or 1 Gbit. You can use it to display file sizes, storage usage, upload progress, and download totals across web and server applications. Features: Convert raw byte counts into readable file size labels. Format bit totals for bandwidth displays. Switch among SI, IEC, and…

Qrono: JavaScript Date Manipulation with DST Support

Qrono is a lightweight, dependency-free JavaScript date manipulation library that parses, compares, and adjusts dates with UTC as its default context. It’s designed for single-timezone applications that need UTC-first logic, reliable date arithmetic, and explicit control over ambiguous local clock times. You can use the library to build scheduling apps, event calendars, log processing tools, or…

Fuzzy Search & Autocomplete Library For JavaScript - fuzzy-search

fuzzy-search package is a JavaScript autocomplete library that performs fuzzy, substring, and prefix matching against indexed entities. You provide an array of objects with an identifier and one or more text terms. The library builds an internal index and returns ranked matches for a query string in well under 10 milliseconds. Features: Indexes objects through stable IDs and searchable…

#autocomplete

ThumbmarkJS: Client-Side Browser Fingerprinting in JavaScript

ThumbmarkJS is a free, popular JavaScript fingerprint library that generates browser fingerprints by combining canvas, WebGL, audio, font, and many other signals entirely on the client. You can use it to recognize returning visitors, distinguish human users from bots, and strengthen fraud detection workflows on your web apps. Features: Generates a visitor fingerprint hash from over 15 browser…

#Fingerprint

JavaScript Sun/Moon Position & Phase Calculator - SunCalc

SunCalc is a tiny, dependency-free JavaScript library that calculates sun position, sunlight phases (sunrise, sunset, twilight), moon position, moon illumination, and moonrise/moonset times for any location and date. It uses high‑precision astronomical formulas from Jean Meeus’ Astronomical Algorithm and matches the accuracy of timeanddate.com and the U.S. Naval Observatory. The library can help…

Interactive Text Annotation and Highlighting with Recogito Text Annotator

Recogito Text Annotator is a vanilla JavaScript library that adds interactive text annotation and highlight functionality to any web page. Each annotation stores a selected quote, character offsets, metadata bodies, and optional user details. You can control annotation creation, styling, filtering, and data serialization through a clean API. Features: Create interactive highlights from text…

#highlight #Text Annotation

Sonner-Style Stacked Toast Notifications in JavaScript - Toastry

Toastry is a lightweight, zero‑dependency JavaScript library that creates Sonner‑style stacked toast notifications. It supports default, success, error, warning, info, and loading states, plus swipe dismissal, action buttons, promise feedback, and global stack limits. Features: Stacks multiple messages in a compact card pile that expands on hover. Supports default, success, error, warning, info,…

#Toast Notification

Print ASCII Art in the Browser Console - ASCII Printer

ASCII Printer is a lightweight JavaScript library that prints colorful ASCII art directly into the devtool console. It packs a catalog of over 100 pieces organized into categories like animals, characters, things, and messages. Each piece comes with its own predefined color, and you can override colors with any valid CSS color value. Features: Select art by exact name, catalog ID, or a partial…

#ASCII #console

Interactive Pivot Tables in Vanilla JS and React - Pvotly

Pvotly is a framework-agnostic pivot table library that transforms flat records into cross-tab reports with drag-and-drop field arrangement, multiple aggregations, filtering, sorting, and export. You can use it as a React component, a vanilla JavaScript widget, or as a pure headless engine that computes the grid for a custom renderer. Features: Generates cross-tab reports from object records,…

#Pivot Table

Trending Blogs

Recently Viewed Blogs

CSS & Javascript Codes