The Collective #895

Here’s a fresh digest of our latest Collective news!

We hope you enjoy the links we have collected over the past week and learn something news and interesting!

Happy exploring! 💙

^{From our sponsor}

Agent.ai Builder Now Open—No Waitlist!

Agent.ai Builder is now open to everyone—no waitlist! Join over 10,000 new builders. Explore 12+ foundation models (GPT-4 Vision, Llama, Gemini, and more). Build AI Agents with no-code to full-code. APIs, webhooks, or Python. Build any type of agent—It's free, powerful, and fun!

Try it free

✨ Cursor spawning particles

Pavel Mazhuga showcases a cursor spawning particle effect using Three.js and TSL. Explore the live demo here and find the source code here.

^{particles / three-js / tsl / webgpu}

🧩 6 CSS Snippets Every Front-End Developer Should Know In 2025

Explore six essential CSS techniques for 2025: springy animations, typed properties, page transitions, dialog/popover effects, animations, and adaptive gradient text.

^{article / css}

🌍 Creating Static SVGs from GeoJSON

Michelle Barker shows how to convert GeoJSON to static SVGs using D3.js, detailing data fetching, scaling, and flipping paths for lightweight map creation.

^{article / d3-js / data-visualization / svg}

📅 2024 year in review

Shinya Fujino highlights Astro's 2024 growth, features, and future updates like sessions and responsive images.

^{article / astro}

🐭 Use Mouse Position to Change Scroll Speed

A dynamic scrolling effect using GSAP, where the scroll speed adjusts based on the mouse's distance from the center using timeScale() and mapRange(). Watch the full lesson video here.

^{gsap / javascript / tutorial / video}

🔀 Move elements around the DOM while preserving their state with moveBefore

Bramus showcases Node.prototype.moveBefore in Chrome 133, enabling DOM element moves while preserving state like focus and animations.

^{article / javascript}

📜 CSS scroll-state()

Adam Argyle introduces scroll-state() in Chrome 133, a new CSS feature that enables style changes based on scroll conditions like sticky, snapped, or scrollable elements.

^{article / css}

^{From our sponsor}

Unlock the full potential of your workday with cutting-edge AI strategies and actionable insights, empowering you to achieve unparalleled excellence in the future of work. Download the free guide today!

📽️ New View Transition Stuff

Jake Archibald and Surma discuss new features and future plans for the View Transition API, including cross-document transitions, scoped animations, and browser-specific updates.

^{video / view-transitions}

🌟 Top Pens of 2024 on CodePen

A collection of the most hearted Pens from 2024.

^{codepen / inspiration}

🔤 Making the this keyword less annoying

Dave Rupert explores ways to make the repetitive use of this in JavaScript less visually distracting, from dimming the color in VS Code to experimenting with custom glyphs in a ligature-enabled font.

^{article / javascript / typography}

🎥 Revealed: React’s experimental animations API

Matt Perry introduces React's experimental <ViewTransition /> API, enabling seamless and customizable animations between views using the browser's View Transition API.

^{animation / article / react / view-transitions}

⚙️ Introducing Werk

Simon Ask Ulsnes introduces Werk, a lightweight and portable build system inspired by make and just, designed for cross-platform compatibility and ease of use.

^{article / build-system / rust / tool}

🖼️ PixelGL

PixelGL is an interactive tool for experimenting with image deformation effects, allowing users to tweak settings through an intuitive interface.

^{three-js / tool / webgl}

^{From our sponsor}

Get Your Team Booked on 3.8 Million Podcasts Automatically

It's 2025. Want to finally be a regular podcast guest in your industry? PodPitch will make it happen. Even the beehiiv team uses it!

The best way to advertise isn't Meta or Google – it's appearing on podcasts your customers love.

PodPitch.com automates thousands of weekly emails for you, pitching your team as ideal guests.

Big brands like Feastables use PodPitch.com instead of expensive PR agencies.

Get your FREE personalized demo!

🚀 R3F WebGPU Post Processing

Anderson Mancini presents a demo integrating React Three Fiber, WebGPU, and post-processing effects, featuring a metallic Royal Naboo starship with screen space reflections.

^{react / three-js / webgpu}

📝 Simple Blog Example in Flask

Raymond Camden demonstrates building a simple blog viewer using Flask, showcasing basic routes, templates, and data handling with Python.

^{flask / python / tutorial}

🧪 Lab 77

A showcase of Sébastien Lempens' 3D projects, experiments & skills.

^{3d / three-js}

🍷 Fluted glass

A demo by Maxime Heckel showcasing a fluted glass post-processing effect with dynamic lighting.

^{three-js / webgl}