The Collective #883

Hope you are having a glorious week so far!

Exciting news: Framer Motion (now simply Motion) is breaking free from its React-only roots, now evolving into a versatile, open-source tool with support for vanilla JavaScript and beyond. It’s fantastic to see such a well-loved library grow with the community’s backing!

Another highlight this week: Daniel Beauchamp’s single draw call firework effect in Three.js is a mind-blowing technique for creating realistic fireworks with minimal resources, definitely worth checking out!

Happy exploring!

Standout Web Design Picks

Want more inspiration? Browse the latest additions to our Webzibition 👉

_{From our sponsor}

Build a Penpot plugin and win up to $1,000!

Penpot, the free Open-Source design tool for design & code collaboration, has just launched its new Plugin System! To celebrate, enter the Penpot Plugins Contest, running from Nov 15 to Dec 15. Create and showcase your plugins for a chance to win one of the more than 20 cash prizes available. Whether you're a pro developer or a rookie at plugin building, we invite everyone to participate, contribute to the Penpot community and share their innovations. Imagine, build, and win!

Enter Plugins Contest! 👉

Course Discount

78% Off on Master 3D Scrollable Pages with Threejs & React Three Fiber

Learn to build immersive, scrollable 3D web pages with industry expert Anderson Mancini in this fresh, hands-on course. Perfect for those with React and Three.js experience, Anderson guides you step-by-step through design, custom effects, and seamless GSAP ScrollTrigger animations to bring your projects to life.

Use this discount link or apply this code FE74C191BCD0CD6F4D61

Valid until November 29, 2024

🎥 Framer Motion is now independent, introducing Motion

Framer Motion is now an independent project, rebranded as "Motion," expanding from a React-only library to a versatile, open-source animation solution with support for vanilla JavaScript and other frameworks, driven by community demand and new sponsorship support.

🎆 Fireworks in a single draw call

Daniel Beauchamp shares his technique for creating a realistic firework effect in 3D using Three.js with just a single draw call.

📏 Overflow Clip

This article by Ahmad Shadeed explains how the CSS property overflow: clip works, highlighting its advantages over overflow: hidden, and provides practical use cases for clipping content in specific directions, controlling overflow margins, and enhancing design elements without unwanted scroll behavior.

🧪 Usability testing: the complete guide

This article is a comprehensive guide to usability testing, covering why it’s essential, how to plan and conduct tests, different testing methods (in-person, remote, and unmoderated), and how to report findings, aimed at helping UX professionals improve user experience and make informed design decisions.

🔮 Will we care about frameworks in the future?

This article by Paul Kinlan questions whether AI tools like Replit could make traditional frameworks and structured code patterns obsolete in the future of software development.

🌐 Visualizing 13 million BlueSky users

Joel Gustafson describes his project that visualizes the social connections of over 13 million BlueSky users using a detailed, interactive graph, created with data from BlueSky’s WebSocket relay service.

📱 IMG_0416

This article takes a nostalgic look at the "Send to YouTube" feature on early iPhones, which allowed users to upload videos directly from the Photos app with just a couple of taps. From 2009 to 2012, this feature led to millions of videos being uploaded with default, barely-searchable titles like “IMG_XXXX,” creating an unexpected archive of unpolished, everyday moments.

🔢 NumberFlow for Vue

Max Barvian made a Vue component version for NumberFlow, designed to transition, format, and localize numbers with smooth animations and customization options.

🌴 Palm UI

Palm UI, formerly Framersections, offers over 400 free, beautifully designed website sections for Framer and Figma, with a new version that's bigger and better, already trusted by 1k+ designers and developers.

🌞 Sunlit

A CSS-focused project that recreates the effect of sunlight streaming through a window using progressive blurs, subtle animations, and custom transforms for a realistic light and shadow experience.

🎨 Creating an ASCII Shader Using OGL

(From our blog) Explore the world of shaders with this easy-to-follow guide to creating a custom ASCII art animation using WebGL, Perlin noise, and GLSL.

💻 Recreating the Mac Mini Effect Step-by-Step in Rive

(From our blog) Learn how to bring the Mac Mini animation to life using Rive’s powerful no-code tools, with tips on nested artboards, state machines, and faux 3D effects.

_{From our Sponsor}

Instantly add file uploads to your app with Pinata’s API

Pinata’s File API lets developers integrate file uploads and retrieval in just minutes. No complex setup, no configuration headaches—just fast and scalable file management.

Start building!

Video Vault

Animation Spotlight

Branding Concept

by Serhii Polyvanyi

Demo Corner

❓Did you know that…

…the first touchscreens were invented for air traffic control and physics labs? Back in the 1970s, engineers at CERN developed transparent touchscreens for particle accelerators, and early versions even helped air traffic controllers interact directly with data on their screens. Today’s touchscreens in smartphones and tablets owe a lot to these pioneering applications in science and aviation!