Getting kinetic with React Three Fiber

дата:
Plus how Facebook serves up React, Unistyles 3.0, and a Next.js boilerplate app. |

#​435 — July 9, 2025

Read on the Web
Together with  Embrace
⚛️ React Status

How to Create Kinetic Image Animations with React Three Fiber — A fantastic visual effect for the Web (which can try live here) that's explained in technical detail. It's amazing what React Three Fiber can do and might inspire you to have a play for yourself..

Dominik Fojcik

💡 Codrops is a 'go to' for this sort of thing – they have a solid back-catalog of React Three Fiber tutorials if you want to create dramatic visual Web experiences.

▶  What Every React Developer Should Know About Signals — Ryan, the creator of SolidJS, put eight hours into making this ten minute video which is a good look at the state of signals in modern JavaScript code and compares them to React's approach.

Ryan Carniato

Embrace Web RUM Provides User-Focused Observability — Embrace Web RUM connects technical performance to user engagement. Get full session timelines, Core Web Vitals and JS exceptions in context, and user journey analysis with intelligent issue correlation. Learn more and get started for free today.

Embrace sponsor

IN BRIEF:

The Story of Patreon's Internationalization Overhaul — Content creator monetization platform Patreon had its own homegrown legacy i18n library for its React-based frontend, but overhauled it with a more modern (though unnamed) approach using codemods. The tale is told in an interesting way.

Val Booth (Patreon)

Building a Lightweight Reactive State Manager with ES6 Proxies — What if you didn't need a library for reactive state management? An interesting exploration of a built-in JavaScript mechanism for reacting to state changes. React doesn't use this approach under the hood (though Vue 3 does) but it's worth understanding.

Loren Stewart

📄 Rendering CT Scan Animations in the Cloud – Above, we touched on using React Three Fiber to render dramatic Web effects, but it can have scientific applications too. Noah Teuscher

🛠  Code, Tools & Libraries

BlockNote 0.33: A 'Notion-Like' Block-Based Text Editor — A ProseMirror and TipTap-based editor that lets you drag and drop blocks, add real-time collaboration, AI features, customizable 'slash command' menus, and more. There are tons of examples to enjoy.

TypeCell

Server-Side Support for MCP in Next.js — Enable your users to securely grant AI applications like Claude, Cursor, and others access to their data within your app.

Clerk sponsor

Unistyles 3.0: Powerful Styling for React Native Apps — Claims to be "the only styling library on the market that uses native code and C++ to get job done", it's tightly integrated with React Native's Fabric renderer, and focused entirely on the New Architecture.

Jacek Pudysz

💡 Jacek has written more about Unistyles on the Expo blog taking more of a look at Unistyles' benefits over other approaches.

Microsoft Open Sources Its GitHub Copilot Chat Extension — Even if you have no interest in AI, it offers a good look at how MS builds its own extensions and how a particularly large extension can be organized overall.

VS Code Team

📰 Classifieds

⚡️Add lightning-fast barcode & QR scanning to your web app with STRICH, a sleek JS library. Clear, predictable pricing. Free trial and demo!

⚛️ Join React Summit US to learn under the stars! Meet Addy Osmani, Amy Dutton, Tanner Linsley & more Nov 18 & 21 in NYC & online.

📢  Elsewhere in JavaScript

A roundup of some other interesting stories in the broader JavaScript landscape, in case you've missed them:

n

Комментарии

Отправить комментарий