seen from United Kingdom
seen from China
seen from South Korea
seen from T1
seen from T1
seen from China
seen from Spain
seen from United States
seen from Russia
seen from Australia
seen from United States
seen from Slovakia
seen from United States
seen from Tunisia
seen from Türkiye
seen from United States
seen from United States
seen from United States
seen from United States
seen from United States
Animated AI Model & Reasoning Effort Selector - Model Picker
Model Picker is a Web Component that adds an animated AI model and reasoning effort selector to your webpage. The picker popover combines three model rows, five effort tiers, and a separate Ultra lever inside one compact control. The matrix responds to clicks, horizontal scrubbing, vertical drag handoff, touch input, and arrow-key navigation. Its trigger label updates after each committed…
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…
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,…
Relative Time Element for Time Ago Text
Relative Time Element is a web component that formats ISO timestamps as localized dates, relative time text, or duration strings. It helps you display readable time values such as “5 minutes ago,” “in 2 days,” or “on Apr 1, 2030” directly from HTML markup. The library works as a browser-first web component and uses the native Intl.DateTimeFormat and Intl.RelativeTimeFormat APIs. It’s ideal for…
Auto-Generated Skeleton Loader Web Component for Any Framework - phantom-ui
phantom-ui is a Web Component skeleton loader that measures your real DOM at runtime and generates animated shimmer placeholder blocks at the exact position of every leaf element. The library wraps any markup in a <phantom-ui> custom element. The loading attribute activates the shimmer overlay. Removing it reveals the actual content. Features Generates shimmer placeholders from real DOM…
Conditional Content Visibility with show-when Web Component
show-when is a Web Component library that shows or hides HTML content based on URL, browser, language, media, CSS feature, and network conditions. You can use it to create conditional content blocks in edit previews, feature demos, responsive notes, offline messages, and documentation pages. The library registers two custom elements: <show-when> and <hide-when>. The first element displays content…
Animated Icon Component Library for React/Vue/Svelte/Solid/Web Component
Animated Icons is an animated icon library that you can easily use as components in your React/Vue/Svelte/Solid/Web Component apps. It currently includes 3,640 icons total from three major SVG icon sets (Lucide, Heroicons, and Iconoir) and runs all animations through CSS transitions and keyframes. Features: Each icon accepts primaryColor and secondaryColor props or CSS custom properties for…
3D Card Flip with Touch & Mouse Drag – TouchFlip3D-Web
TouchFlip3D-Web is a vanilla JavaScript Web Component that flips HTML elements in 3D space in response to drag and touch gestures. It requires no external dependencies and uses the Shadow DOM to keep its internal styles completely isolated from the host page. Features: Touch gesture support: Responds to native touch events for smooth 3D rotation on mobile and tablet. Mouse drag support: Fully…
