Weekly Web Design & Development News: Collective #550
A collection of the latest and hottest design and development resources (Javascript libraries, CSS snippets, Free Graphic Design Resources, etc.) on the web from the last week (Week 17, 2024).
Web Design & Development News: Collective #550
pragmatic-drag-and-drop
Fast drag and drop for any experience on any tech stack.
shadcn-phone-input
Simple and formatted phone input component built with Shadcn UI.
shadcn-stepper
A complete stepper component built with Shadcn UI.
Progressive Blur
A React component to apply a drop-in progressive (gradient) backdrop blur to your React applications. Supports both radial and linear gradients.
LiftKit CSS
LiftKit CSS is the vanilla CSS version of Chainlift's LiftKit design system. It's a lightweight framework of utility classes that use golden ratio scaling to provide a uniquely "oddly-satisfying" look.
micro-ordinals
Minimal JS library for ordinals and inscriptions on top of scure-btc-signer.
Use it as a library in your JS code, or run an included CLI tool. Inscriptions allow uploading random files on BTC blockchain.
[Download]
decimal.js
An arbitrary-precision Decimal type for JavaScript.
- Integers and floats
- Simple but full-featured API
- Replicates many of the methods of JavaScript's Number.prototype and Math objects
- Also handles hexadecimal, binary and octal values
- Faster, smaller, and perhaps easier to use than JavaScript versions of Java's BigDecimal
- No dependencies
- Wide platform compatibility: uses JavaScript 1.5 (ECMAScript 3) features only
- Used under the hood by math.js
- Includes a TypeScript declaration file: decimal.d.ts
[Download]
Browser Signatures
A client-side library that generates custom browser signature, relying on the browser's navigator, window, and screen.
TornPaper
Creating torn edge and grunge paper effect using SVG and JavaScript.
Time-moji
A tiny JavaScript library that converts a DateTime object into Clock or Landscape emojis.
On-Scroll Blur Reveal Animations
A multi-select component designed with shadcn/ui.
LLM Scraper
An open-source TypeScript library that takes the messiness of webpages (HTML, Markdown, text, and even images) and turns them into structured data using Large Language Models (LLMs). It can be useful for tasks like web scraping, data mining, and content analysis.
[Download]
Knowledge Graph Generator
Enter some text and the language model will try to describe it as a knowledge graph.
Onscroll Animation: Dynamic Content Scroll with ScrollMagic
See the Pen Onscroll Animation: Dynamic Content Scroll with ScrollMagic by Yudiz Solutions Limited (@yudizsolutions) on CodePen.
CSS3 Speedometer Emoji Gauge for Rating Visualization
See the Pen CSS3 Speedometer Emoji Gauge for Rating Visualization by Vineeth.TR (@vineethtrv) on CodePen.
GSAP Observer Clip Path Slider
See the Pen GSAP Observer Clip Path Slider by GSAP (@GreenSock) on CodePen.
Tailwind - Team Profiles rotation with Theme Toggle
See the Pen Tailwind - Team Profiles rotation with Theme Toggle by Chris Bolson (@cbolson) on CodePen.
Outline-to-Fill Tab Icon Animations
See the Pen Outline-to-Fill Tab Icon Animations by Jon Kantner (@jkantner) on CodePen.
Try Outfit On Virtually With OUTFIT AI Dressing Room
Try on any outfit instantly with OUTFIT's AI-powered virtual dressing room. See how you'll look without ever having to change!
Build Websites like a Pro with Mobirise AI Website Generator
Build a modern website without coding using Mobirise AI. Generate your website in minutes and customize it to your liking. Try it now!
Transform Your Headshot Into A Unique 3D Minifigure – Minifigure AI
A free AI tool turns your headshot into a unique 3D minifigure! Create your mini-me and use it online.
Apple & Tiktok Icons & Login Buttons
A Figma social design kit with everything you need to integrate Apple and TikTok login buttons and icons into your designs.
[Download]
Brenzo Slab Font
A modern geometric slab serif font free for personal use.
[Download]
