--- title: "Getting kinetic with React Three Fiber" publication: "React Status" issue: 435 published_at: "2025-07-09" canonical_url: "https://react.statuscode.com/issues/435" --- Plus how Facebook serves up React, Unistyles 3.0, and a Next.js boilerplate app. | #​435 — July 9, 2025 [Read on the Web](https://react.statuscode.com/issues/) Together with [![Embrace\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,e_trim,w_1280,h_245/e_make_transparent/co_white,e_outline:15/pbgm3swuyhvj6v43zpgj.png)](https://embrace.io/blog/introducing-embrace-web-rum/?utm_source=newsletter&utm_medium=paid&utm_campaign=react-status-7-9-2025) ⚛️ React Status [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/sup4gjiel0xyxpb3rz9z.jpg)](https://tympanus.net/codrops/2025/07/09/how-to-create-kinetic-image-animations-with-react-three-fiber/) [How to Create Kinetic Image Animations with _React Three Fiber_](https://tympanus.net/codrops/2025/07/09/how-to-create-kinetic-image-animations-with-react-three-fiber/) — A fantastic visual effect for the Web (which can [try live here](https://tympanus.net/Tutorials/KineticImages/)) that’s explained in technical detail. It’s amazing what [React Three Fiber](https://r3f.docs.pmnd.rs/getting-started/introduction) 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](https://tympanus.net/codrops/tag/react-three-fiber/) if you want to create dramatic visual Web experiences. ▶[What Every React Developer Should Know About Signals](https://www.youtube.com/watch?v=VgGl9i-OBBI) — Ryan, the creator of [SolidJS](https://www.solidjs.com/), 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 [![\](https://res.cloudinary.com/cpress/image/upload/c_limit,w_480,h_480,q_auto/copm/16117161.png)](https://embrace.io/blog/introducing-embrace-web-rum/?utm_source=newsletter&utm_medium=paid&utm_campaign=react-status-7-9-2025) [Embrace Web RUM Provides User-Focused Observability](https://embrace.io/blog/introducing-embrace-web-rum/?utm_source=newsletter&utm_medium=paid&utm_campaign=react-status-7-9-2025) — 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](https://embrace.io/blog/introducing-embrace-web-rum/?utm_source=newsletter&utm_medium=paid&utm_campaign=react-status-7-9-2025). Embrace sponsor **IN BRIEF:** - [TypeScript 5.9 Beta](https://devblogs.microsoft.com/typescript/announcing-typescript-5-9-beta/) has been released. - [Nuxt](https://nuxt.com/) is to Vue.js as Next.js to React, so it's interesting to see [Vercel has acquired NuxtLabs](https://nuxtlabs.com/), the company directly maintaining Nuxt. This means Nuxt, Next.js, _and_ Svelte now all have close ties with Vercel. Vue's creator [Evan You is optimistic about this development.](https://x.com/youyuxi/status/1942601776919978285) - [A comparison of data egress costs](https://getdeploying.com/reference/data-egress) from about 40 popular providers and cloud services, including Vercel, AWS, Fly and Linode. - [@vitejs/plugin-rsc](https://www.npmjs.com/package/@vitejs/plugin-rsc) provides React Server Components support for Vite and is newly under the @vitejs organization. [The Story of Patreon’s Internationalization Overhaul](https://www.patreon.com/posts/133137028) — 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](https://www.lorenstew.art/blog/reactive-state-manager-with-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](https://barndoors.lumafield.com/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 [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/qp5pgbk1eisygy6dd3sn.jpg)](https://www.blocknotejs.org/) [BlockNote 0.33: A 'Notion-Like' Block-Based Text Editor](https://www.blocknotejs.org/) — A ProseMirror and TipTap-based editor that lets you drag and drop blocks, add real-time collaboration, [AI features](https://github.com/TypeCellOS/BlockNote/pull/1674), customizable ‘slash command’ menus, and more. There are [tons of examples](https://www.blocknotejs.org/examples) to enjoy. TypeCell [Server-Side Support for MCP in Next.js](https://go.clerk.com/K2wMQpC) — 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](https://www.reactnativecrossroads.com/posts/introducing-unistyles-3) — 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](https://reactnative.dev/architecture/fabric-renderer) renderer, and focused entirely on the New Architecture. Jacek Pudysz 💡 Jacek has [written more about Unistyles on the Expo blog](https://expo.dev/blog/unistyles-3-0-beyond-react-native-stylesheet) taking more of a look at Unistyles' benefits over other approaches. [Microsoft Open Sources Its GitHub Copilot Chat Extension](https://code.visualstudio.com/blogs/2025/06/30/openSourceAIEditorFirstMilestone) — 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 - [Next.js Boilerplate 5.0](https://nextjs-boilerplate.com/) – Boilerplate starter app for Next.js with auth, database support, i18n, forms, and more. - 📅 [React DayPicker 9.8](https://github.com/gpbl/react-day-picker/releases/tag/v9.8.0) – Customizable date picker. Now with better keyboard navigation. - 🔎 [React Scan 0.4](https://github.com/aidenybai/react-scan/releases/tag/v0.4.0) – Scan for performance issues and eliminate slow renders in your app. - [react-force-graph 1.48](https://github.com/vasturiano/react-force-graph) – Component for rendering force-directed graphs. - 📊 [Ant Design Charts 2.6](https://github.com/ant-design/ant-design-charts/releases/tag/2.6.0) – React chart library. [Demos and code samples.](https://ant-design-charts.antgroup.com/examples) - [Material UI 7.2](https://github.com/mui/material-ui/releases/tag/v7.2.0) – Independent React components using Material Design. - 🤖 [React ChatBotify 2.2](https://react-chatbotify.com/) – Library for creating chat bot experiences. - [stylex 0.14.0](https://stylexjs.com/blog/v0.14.0) – The styling system that powers Facebook itself. - ♟︎ [React Chessboard 5.1](https://github.com/Clariity/react-chessboard) – Render chess boards. ([Examples.](https://react-chessboard.vercel.app/?path=/docs/how-to-use-basic-examples--docs)) - 📊 [Recharts 3.1](https://github.com/recharts/recharts/releases/tag/v3.1.0) – D3-powered chart library for React. 📰 Classifieds ⚡️Add lightning-fast barcode & QR scanning to your web app with [STRICH](https://strich.io/?ref=react-status), a sleek JS library. Clear, predictable pricing. [Free trial and demo!](https://strich.io/?ref=react-status) --- ⚛️ [Join React Summit US to learn under the stars!](https://reactsummit.us/?utm_source=Newsletter&utm_medium=ReactStatus%20) 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: - Over on Reddit, an ex-Meta engineer posted an interesting comment about [how Meta / Facebook serves up React](https://www.reddit.com/r/reactjs/comments/1ltbw2e/how_does_facebook_serve_react_pages/n1pjs41/) as part of the main Facebook site. - [JS1024](https://js1024.fun/) is an annual JavaScript _code golfing_ contest. You've got till July 19 to submit a JavaScript program written in 1024 bytes or less on the theme of 'Creepy'. - [New versions of all maintained Node.js release lines](https://nodejs.org/en/blog/vulnerability/july-2025-security-releases) will be released next week due to some discovered security vulnerabilities. - [jsonrepair](https://github.com/josdejong/jsonrepair) is a Node library, CLI tool, and [basic online tool](https://josdejong.github.io/jsonrepair/) for fixing up invalid JSON documents so they'll parse. - [Deno 2.4 was released](https://deno.com/blog/v2.4), reintroducing its `deno bundle` bundler, improved [support for some Node globals](https://deno.com/blog/v2.4#simpler-node-globals), and improved Node.js API support generally. - James Sinclair [explores the differences between arrow functions and named functions](https://jrsinclair.com/articles/2025/whats-the-difference-between-named-functions-and-arrow-functions/) in JavaScript. Curated by Peter Cooper and Terence C. Gannon. A **[Cooperpress](https://cooperpress.com/)** publication. [Change your email address](https://react.statuscode.com/edit_subscription/*|UID|*) or[Stop getting this newsletter](https://react.statuscode.com/leave/*|UID|*) © Cooper Press Ltd · Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom