Weekly Web Design & Development News: Collective #632
Everything you need to know in development & design this week, rounded up for you (Week 48, 2025).
You'll find the most essential things right now: JavaScript & CSS libraries, useful code snippets, crucial web dev news & resources, curated AI tools, free design assets, and plenty of other good stuff we found!
Highlights:
- Recreate the hypnotic Balatro game shader effect with WebGL
- Style your browser console output using Tailwind CSS
- Extract any websites full design system (colors, fonts, spacing) in seconds
- 40+ Apple-inspired "Liquid Glass" UI components for Next.js
- High-performance text highlighting with the new CSS Custom Highlight API
- 40+ ready-to-use animated components built with Framer Motion
- Google releases Gemini 3 Pro and an agent-first dev platform
- 18 other useful dev tools and resources
- 3 sets of graphic design freebies
Subscribe to our newsletter to get a weekly list of new web dev resources in your inbox.
JavaScript & CSS
balatroShader - Recreate Balatro’s Animated Shader Effect with WebGL.
twlog - Beautiful Browser Console Output Using Tailwind CSS.
tiltEffect - Advanced Tilt Effect with Parallax Content in Vanilla JavaScript.
react-css-highlight - Modern Text Search and Highlight Library Using CSS Custom Highlight API.
elementsnap - DOM Element Capture Tool for Developers.
MotionOnScroll - High-Performance CSS Scroll Animations.
Searchable - Real-Time Table Search Library Under 1KB.
Framer Ground - 40+ Animated UI Compopnents with Framer Motion.
edge-next-starter - Full-Stack Next.js & Cloudflare Starter Template with D1 R2 KV.
Big Calendar - Feature-Rich Calendar UI with Next.js/TailwindCSS.
Auth CN - Better Auth Components for Next.js and Shadcn UI.
open-blog - Lightweight MDX Blogging Platform for Next.js.
Animated Header - Vercel-like Scroll-aware Header Nav for Next.js.
glass-ui - 40+ Apple Liquid Glass-inspired UI Components for Next.js.
expo-linear-like-bottom-tabs - Linear-style Floating Bottom Tab Bar for React Native.
draggable-video-control - Draggable, Liquid Glass-style Video Player Component for React Native.
react-horizontal-heatmap - React Horizontal Heatmap Component for Activity Visualization.
obug - A lightweight JavaScript debugging utility, forked from debug, featuring TypeScript and ESM support.
phone-mask - Ultra-lightweight international phone number formatter & validator with auto-sync to Google libphonenumber.
mirrow - A playground and production tooling for vector animators working with integrating motion, and interaction seemlessly into their workflow. .
react-template - Opinionated React setup to boostrap your web app.
next-js-boilerplate - Next.js Admin Dashboard Starter Template With Shadcn-ui.
claude-agent-template - A Next.js template for building AI agents with Vercel AI SDK, Claude Agent SDK, and custom MCP tools.
custom-ecom - A Next.js-based ecommerce admin panel built with shadcn/ui and Tailwind CSS. .
Discover more JavaScript & CSS Libraries →
Web Dev Tools & Resources
Free Markdown to Screenshot Converter - Create beautiful screenshots of AI prompts, code snippets, and Markdown content with syntax highlighting.
dembrandt - Extract any website’s full design system in few seconds - colors, typography, spacing, shadows, breakpoints. One command. No install.
check-projects - A fast, cross-platform CLI tool to check the git status of multiple projects organized by categories.
webvitals - Core Web Vitals Analysis Tool.
Stencil - Copy real components from the web, build in one click.
Color Generator - Generate beautiful color palettes for your design system.
Graphic Design Freebies
Modern Dashboard Templates - 50+ Free Modern Dashboard Templates for Figma.
Nature SVG Shapes - 336 Free Hand‑drawn Nature SVG Shapes.
Country Flag Icons - Country Flag Icons in Round and Rectangular Styles.
Discover more Graphic Design Freebies →
Curated AI Tools for Developers and Designers
Code Wiki - Google’s AI-Powered Solution for Code Understanding.
Google Antigravity - Agent-First Dev Platform with Gemini 3 Pro.
Logogenerator - Free AI Logo Generator for Small Business and Freelancers.
GitHub Repo Visibility Analyzer - Improve your GitHub repository's discoverability with smart topic tag analysis..
Gemini 3 Pro Image - Create and edit images with Nano Banana Pro, for studio-quality levels of precision and control..
Grok 4.1 Fast - xAI’s best tool-calling model with a 2M context window.
Gemini 3 Pro - Google’s most intelligent model that helps you bring any idea to life.
News & Articles
Keyframes Tokens: Standardizing Animation Across Projects. (Link)
Building AI Agents with Google Gemini 3 and Open Source Frameworks (Link)
When Everyone’s a Developer, How Do We Promote the Web Platform Over React? (Link)
The Grayscale Problem (Link)
JavaScript & CSS Snippets
ASCII Glitch Ripple Hover Effect
See the Pen ASCII Glitch Ripple Hover Effect by Bastou (@erevan) on CodePen.
Flip Text on Hover (Syntax challenge)
See the Pen Flip Text on Hover (Syntax challenge) by Chris Bolson (@cbolson) on CodePen.
Advanced Glassmorphism Navigation Bar
See the Pen Advanced Glassmorphism Navigation Bar by themrsami (@themrsami) on CodePen.
Liquid Glass Shader
See the Pen Liquid Glass Shader by shingidad (@shingidad) on CodePen.
- Prev: Weekly Web Design & Development News: Collective #631
- Next: None
