Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

Let’s build interactive Three.js User Interfaces 🫰 Uses react-three/handle, react-three/xr, and react-three/uikit - vanilla versions are available🍦 Works on any device inside and outside #WebXR Compose <uikit> with <handle> to control sizes, positions, rotations (Link in 🧵)

BelaBohlender's profile picture

Bela Bohlender

2,041 subscribers

47,422 Aufrufe • vor 1 Jahr •via X (Twitter)

Wissenschaft & TechnologieBildung#WebXR
LIVE

Anya Rossi• Live Now

Private livecam show

10 Kommentare

Profilbild von Bela Bohlender
Bela Bohlendervor 1 Jahr

Try it out yourself: Source Code: What is uikit? What is handle? How is this running in XR?

Profilbild von Bela Bohlender
Bela Bohlendervor 1 Jahr

Background music by Rockot from Pixabay Trying to make it a regular habit of donating to the musicians I use music from for my social media videos 💰

Profilbild von UserInterface
UserInterfacevor 3 Jahren

What is Web3? The Next Evolution of the Internet #tech #news

Profilbild von Nestor Rios Garcia
Nestor Rios Garciavor 1 Jahr

@threejs Magnificent Bela. I'll try it soon 🔥.

Profilbild von Stijn Spanhove
Stijn Spanhovevor 1 Jahr

@threejs Nice! Thanks for the examples 👀

Profilbild von Fred King
Fred Kingvor 1 Jahr

@threejs Worked on my Samsung flip 5! Nice.

Profilbild von Tidewater
Tidewatervor 1 Jahr

@threejs My goodness that is quite flavorful

Profilbild von Morten Haulik ᯅ
Morten Haulik ᯅvor 1 Jahr

@threejs Awesome🔥

Profilbild von Remus
Remusvor 1 Jahr

@threejs Does this work outside of XR environments? Meaning can you use this threeJS component in a regular webpage?

Profilbild von Bela Bohlender
Bela Bohlendervor 1 Jahr

@threejs sure, you can try it out yourself here

Ähnliche Videos

Shipping react-three/handle! The one to handle them all! 👌 Build intuitive 3D and XR cross-platform interactions with just one line of code. #R3F Three.js #WebXR
1:02

Shipping react-three/handle! The one to handle them all! 👌 Build intuitive 3D and XR cross-platform interactions with just one line of code. #R3F Three.js #WebXR

Bela Bohlender

18,660 Aufrufe • vor 1 Jahr

<mesh> <FakeGlowMaterial /> </mesh> A new component is coming. A very simple, easy-to-use, fake glow material. This can create a glow around the mesh without any post-processing. Available soon for vanilla #threejs and #react three fiber 😍 #threejsJourney
0:50

<mesh> <FakeGlowMaterial /> </mesh> A new component is coming. A very simple, easy-to-use, fake glow material. This can create a glow around the mesh without any post-processing. Available soon for vanilla #threejs and #react three fiber 😍 #threejsJourney

Anderson Mancini

26,438 Aufrufe • vor 2 Jahren

New WebGPU Glass Material is almost ready! It will be available for Three.js and Poimandres React Three Fiber. Lots of customization; it comes with a very beautiful and handy control panel. Live link and source code will be available on Monday 😊 #threejsJourney #creativecoding #webgpu
0:55

New WebGPU Glass Material is almost ready! It will be available for Three.js and Poimandres React Three Fiber. Lots of customization; it comes with a very beautiful and handy control panel. Live link and source code will be available on Monday 😊 #threejsJourney #creativecoding #webgpu

Anderson Mancini

18,924 Aufrufe • vor 2 Monaten

Excited to launch react-three/xr🤳🥽 Leverage the latest WebXR features, reuse your existing interactions, and advance what is possible in AR and VR on the Web. ↳ Turn your existing R3F app into an AR or VR experience with only a few lines of code. 🎉
0:52

Excited to launch react-three/xr🤳🥽 Leverage the latest WebXR features, reuse your existing interactions, and advance what is possible in AR and VR on the Web. ↳ Turn your existing R3F app into an AR or VR experience with only a few lines of code. 🎉

Bela Bohlender

40,180 Aufrufe • vor 2 Jahren

Opus 4.6 vs Gemini 3 Pro (3/9) prompt: Build a premium interactive isometric 3D cozy room using Vite + React + Three.js (react-three-fiber/drei), with all objects modeled in code (no external assets) and subtle ambient animations. Gemini looks good on initial impression but I feel like I have way more to work with opus here (opus also did light/dark mode and took a quarter of the time to make it).
0:26

Opus 4.6 vs Gemini 3 Pro (3/9) prompt: Build a premium interactive isometric 3D cozy room using Vite + React + Three.js (react-three-fiber/drei), with all objects modeled in code (no external assets) and subtle ambient animations. Gemini looks good on initial impression but I feel like I have way more to work with opus here (opus also did light/dark mode and took a quarter of the time to make it).

Dev Ed

77,206 Aufrufe • vor 8 Monaten

KIMI K3 BUILDS A 3D SPACEX LAUNCH ATLAS IN 2.5 HOURS A developer used Moonshot AI's Kimi K3 to build an interactive 3D globe visualizing 20 years of SpaceX launches. Built with React 19, Three.js, and custom GLSL shaders, it parses real data across 708 missions to play back live launch animations in under three hours.
0:36

KIMI K3 BUILDS A 3D SPACEX LAUNCH ATLAS IN 2.5 HOURS A developer used Moonshot AI's Kimi K3 to build an interactive 3D globe visualizing 20 years of SpaceX launches. Built with React 19, Three.js, and custom GLSL shaders, it parses real data across 708 missions to play back live launch animations in under three hours.

0xMarioNawfal

53,575 Aufrufe • vor 2 Monaten

🚀 I'm launching r3f-webgpu-perf today! "npm i r3f-webgpu-perf" One thing I missed while working with WebGPU in React Three Fiber was a performance monitor similar to r3f-perf. The existing tool is fantastic, but it doesn’t support the WebGPU renderer yet. So I decided to build one. ✅ Supports both WebGL and WebGPU ✅ Modern and customizable UI ✅ Lightweight and easy to integrate ✅ Built specifically for React Three Fiber My goal is to turn r3f-webgpu-perf into more than just a metrics dashboard. I want it to become a learning tool that provides real-time optimization suggestions based on the techniques I’ve developed while building hundreds of interactive 3D projects over the last two decades. A vanilla Three.js version is also planned. If you’re building with Three.js, React Three Fiber, or WebGPU, I’d love for you to try it and share your feedback. ⭐ GitHub: 📦 NPM: Every GitHub star helps make the tool better for the entire community. #threejs #creativecoding #webgpu #r3f
0:43

🚀 I'm launching r3f-webgpu-perf today! "npm i r3f-webgpu-perf" One thing I missed while working with WebGPU in React Three Fiber was a performance monitor similar to r3f-perf. The existing tool is fantastic, but it doesn’t support the WebGPU renderer yet. So I decided to build one. ✅ Supports both WebGL and WebGPU ✅ Modern and customizable UI ✅ Lightweight and easy to integrate ✅ Built specifically for React Three Fiber My goal is to turn r3f-webgpu-perf into more than just a metrics dashboard. I want it to become a learning tool that provides real-time optimization suggestions based on the techniques I’ve developed while building hundreds of interactive 3D projects over the last two decades. A vanilla Three.js version is also planned. If you’re building with Three.js, React Three Fiber, or WebGPU, I’d love for you to try it and share your feedback. ⭐ GitHub: 📦 NPM: Every GitHub star helps make the tool better for the entire community. #threejs #creativecoding #webgpu #r3f

Anderson Mancini

24,523 Aufrufe • vor 4 Monaten

this is pure f*cking treasure for motion design 20 GitHub repos to build a motion design studio with Opus 5.5 pick the tools for each layer: agent skills, animation, 3D, assets, sound and export 01 Remotion → turn React code into editable videos 02 Remotion Skills → give Claude Code official video workflows 03 Motion Canvas → animate diagrams and explainers in TypeScript 04 Motion AI Kit → give Claude Code Motion docs and guidance 05 Motion → animate live UI layouts and gestures 06 GSAP → sequence SVG and text with precise timelines 07 Anime.js → animate SVG paths, text and interface elements 08 GSAP Skills → teach Claude Code timelines and React cleanup 09 Rive Web → connect vector animations to app states 10 dotLottie Web → play and control Lottie animation assets 11 Three.js → build 3D shots with cameras and lighting 12 React Three Fiber → build 3D scenes as React components 13 Drei → reuse 3D cameras, text and controls 14 React Three Rapier → add collisions, joints and rigid bodies 15 React Postprocessing → add bloom, depth of field and finishing effects 16 SVGO → clean SVG files before animating 17 Satori → generate SVG title cards from JSX 18 Howler.js → control sound effects and fades in web demos 19 Mediabunny → encode and convert video in the browser 20 FFmpeg → encode, resize and inspect final exports the loop: brief → type → animate → build the scene → add sound → render → review → ship save this + read the article below to build your own motion design studio ⭣
0:30

this is pure f*cking treasure for motion design 20 GitHub repos to build a motion design studio with Opus 5.5 pick the tools for each layer: agent skills, animation, 3D, assets, sound and export 01 Remotion → turn React code into editable videos 02 Remotion Skills → give Claude Code official video workflows 03 Motion Canvas → animate diagrams and explainers in TypeScript 04 Motion AI Kit → give Claude Code Motion docs and guidance 05 Motion → animate live UI layouts and gestures 06 GSAP → sequence SVG and text with precise timelines 07 Anime.js → animate SVG paths, text and interface elements 08 GSAP Skills → teach Claude Code timelines and React cleanup 09 Rive Web → connect vector animations to app states 10 dotLottie Web → play and control Lottie animation assets 11 Three.js → build 3D shots with cameras and lighting 12 React Three Fiber → build 3D scenes as React components 13 Drei → reuse 3D cameras, text and controls 14 React Three Rapier → add collisions, joints and rigid bodies 15 React Postprocessing → add bloom, depth of field and finishing effects 16 SVGO → clean SVG files before animating 17 Satori → generate SVG title cards from JSX 18 Howler.js → control sound effects and fades in web demos 19 Mediabunny → encode and convert video in the browser 20 FFmpeg → encode, resize and inspect final exports the loop: brief → type → animate → build the scene → add sound → render → review → ship save this + read the article below to build your own motion design studio ⭣

beamnxw ./

24,914 Aufrufe • vor 7 Tagen

Opus 5.5 is f*cking insane for motion design 20 tools to build your own motion design studio with Opus 5.5 product demos. launch videos. animated explainers. interactive UI. build the video, tune the movement, shape the scene, add sound, ship. 01 Remotion ▸ turn React components into editable videos 02 Remotion Skills ▸ give your coding agent the official video workflow 03 Motion Canvas ▸ build animated explainers with TypeScript 04 Motion ▸ animate layouts, gestures and springs 05 GSAP ▸ coordinate complex sequences with timelines 06 Anime.js ▸ animate text, SVG and interface elements 07 Rive ▸ build characters that react to user input 08 Animations .dev ▸ study timing, easing and interaction details (paid course) 09 Carbon Motion ▸ plan movement around hierarchy and purpose 10 Easing Wizard ▸ preview curves and tune the feel of a transition 11 Google Fonts ▸ choose typefaces for titles and readable labels 12 Three.js ▸ build custom 3D scenes, lighting and cameras 13 React Three Fiber ▸ compose reusable 3D scenes in React 14 Spline ▸ design interactive 3D scenes visually 15 Poly Haven ▸ get CC0 models, materials and HDRIs 16 Blender ▸ model assets, animate objects and render scenes 17 SVGOMG ▸ clean vector assets before animating them 18 Pixabay Music ▸ find licensed music and sound effects 19 Mediabunny ▸ read, write and convert media in the browser 20 FFmpeg ▸ encode, resize and prepare the final export the loop: write the brief → choose the type → map the keyframes → build the scene → add sound → review the render → ship start with one product workflow. give every movement a job. save this, then read the full guide for Opus 5.5 Motion Engineering ↓
0:20

Opus 5.5 is f*cking insane for motion design 20 tools to build your own motion design studio with Opus 5.5 product demos. launch videos. animated explainers. interactive UI. build the video, tune the movement, shape the scene, add sound, ship. 01 Remotion ▸ turn React components into editable videos 02 Remotion Skills ▸ give your coding agent the official video workflow 03 Motion Canvas ▸ build animated explainers with TypeScript 04 Motion ▸ animate layouts, gestures and springs 05 GSAP ▸ coordinate complex sequences with timelines 06 Anime.js ▸ animate text, SVG and interface elements 07 Rive ▸ build characters that react to user input 08 Animations .dev ▸ study timing, easing and interaction details (paid course) 09 Carbon Motion ▸ plan movement around hierarchy and purpose 10 Easing Wizard ▸ preview curves and tune the feel of a transition 11 Google Fonts ▸ choose typefaces for titles and readable labels 12 Three.js ▸ build custom 3D scenes, lighting and cameras 13 React Three Fiber ▸ compose reusable 3D scenes in React 14 Spline ▸ design interactive 3D scenes visually 15 Poly Haven ▸ get CC0 models, materials and HDRIs 16 Blender ▸ model assets, animate objects and render scenes 17 SVGOMG ▸ clean vector assets before animating them 18 Pixabay Music ▸ find licensed music and sound effects 19 Mediabunny ▸ read, write and convert media in the browser 20 FFmpeg ▸ encode, resize and prepare the final export the loop: write the brief → choose the type → map the keyframes → build the scene → add sound → review the render → ship start with one product workflow. give every movement a job. save this, then read the full guide for Opus 5.5 Motion Engineering ↓

beamnxw ./

15,408 Aufrufe • vor 8 Tagen

Build uncompromising high-performance, high-fidelity apps with React. What you see is not the Apple Messages app, nor is it meant to be 1:1. Rather it serves as an aspirational and real example of UI/UX that is possible. Every detail from the bubble animations to keyboard gestures to scroll view insets and safe areas to parallax timestamps required care and attention. Quality UIs come from caring hard. The little chat bubble tails that morph away when the next message animates in. Timestamps that scroll at a different rate than the bubbles. Peek gestures powered by UIKit that lift a chat bubble, tail and all, with a gentle haptic pulse. The subtle shadow of the text composer and responsively sliding down the keyboard in pixel-perfect concert. The composer shrinking its width to fit iPhone’s rounded bezel. The beautiful Liquid Glass refractions have the level of glassiness chosen by the user (new in iOS 27). Scroll view insets that adjust to fit the home bar and keyboard dynamically, creating a sense of depth as the chat bubbles are slightly visible as they scroll under the keyboard. Keeping the keyboard on screen if the prior screen already presented it. Sliding the keyboard and composer with the screen when the user drags to navigate back. I am excited to explore using the new iPhone Duo view controllers natively with React when the time comes. There is always room for innovation and improvement. This chat demo runs at 120 FPS on iOS 27 even on my phone that’s four versions old now. There are several approaches to high-performance lists. I explored a new Expo scroll view that uses the native gesture systems along with react-native’s VirtualView (codenamed “Fling” to reflect the speed of flinging a scroll view), which Meta’s React team designed to prioritize scroll momentum with React’s scheduler. There are tradeoffs with other scroll strategies for how the scroll views gracefully degrade, and they can be swapped out based on what’s best for your app’s use case. And, by virtue of using modern React, high-priority events like user gestures can preempt lower-priority ones like a network response. Let us dispel any myth that using React requires compromising on beautiful, smooth, user-friendly UI/UX that Uses the Platform. Let us dispel any myth frame-perfect UI coordination is not achievable. The Hermes thread and the UI thread can coordinate when needed, like for controlled text inputs. Let us dispel any myth that React Native’s performance is impacted by a bridge, let alone has a bridge. Bridgeless JSI and the Fabric renderer are here for apps that use the New Architecture. What about Android? The app runs and I’ll share a screenshot from my cloud agent’s emulator. With some attention to detail dedicated to Android I’m confident crafted UX is attainable. I’ve spent my tokens once and have a structural head start everywhere. One more thing! Most of this chat’s application code is written with , , , and other familiar elements. The styling is mostly CSS, including linear-gradient(), background-attachment: fixed, and semantic platform colors that adapt to dark mode. Not just appearance - CSS Animations and CSS Transitions run entirely natively. There are a handful of custom native components written in Swift and Kotlin, like the chat bubbles and a custom CAShapeLayer and UIBezierPath for the tails. Native coding is a first-class feature. The way to think about building beautiful apps this way is React and Native, not React vs. Native. Aspire high and raise your ambitions for what is possible!
2:49

Build uncompromising high-performance, high-fidelity apps with React. What you see is not the Apple Messages app, nor is it meant to be 1:1. Rather it serves as an aspirational and real example of UI/UX that is possible. Every detail from the bubble animations to keyboard gestures to scroll view insets and safe areas to parallax timestamps required care and attention. Quality UIs come from caring hard. The little chat bubble tails that morph away when the next message animates in. Timestamps that scroll at a different rate than the bubbles. Peek gestures powered by UIKit that lift a chat bubble, tail and all, with a gentle haptic pulse. The subtle shadow of the text composer and responsively sliding down the keyboard in pixel-perfect concert. The composer shrinking its width to fit iPhone’s rounded bezel. The beautiful Liquid Glass refractions have the level of glassiness chosen by the user (new in iOS 27). Scroll view insets that adjust to fit the home bar and keyboard dynamically, creating a sense of depth as the chat bubbles are slightly visible as they scroll under the keyboard. Keeping the keyboard on screen if the prior screen already presented it. Sliding the keyboard and composer with the screen when the user drags to navigate back. I am excited to explore using the new iPhone Duo view controllers natively with React when the time comes. There is always room for innovation and improvement. This chat demo runs at 120 FPS on iOS 27 even on my phone that’s four versions old now. There are several approaches to high-performance lists. I explored a new Expo scroll view that uses the native gesture systems along with react-native’s VirtualView (codenamed “Fling” to reflect the speed of flinging a scroll view), which Meta’s React team designed to prioritize scroll momentum with React’s scheduler. There are tradeoffs with other scroll strategies for how the scroll views gracefully degrade, and they can be swapped out based on what’s best for your app’s use case. And, by virtue of using modern React, high-priority events like user gestures can preempt lower-priority ones like a network response. Let us dispel any myth that using React requires compromising on beautiful, smooth, user-friendly UI/UX that Uses the Platform. Let us dispel any myth frame-perfect UI coordination is not achievable. The Hermes thread and the UI thread can coordinate when needed, like for controlled text inputs. Let us dispel any myth that React Native’s performance is impacted by a bridge, let alone has a bridge. Bridgeless JSI and the Fabric renderer are here for apps that use the New Architecture. What about Android? The app runs and I’ll share a screenshot from my cloud agent’s emulator. With some attention to detail dedicated to Android I’m confident crafted UX is attainable. I’ve spent my tokens once and have a structural head start everywhere. One more thing! Most of this chat’s application code is written with , , , and other familiar elements. The styling is mostly CSS, including linear-gradient(), background-attachment: fixed, and semantic platform colors that adapt to dark mode. Not just appearance - CSS Animations and CSS Transitions run entirely natively. There are a handful of custom native components written in Swift and Kotlin, like the chat bubbles and a custom CAShapeLayer and UIBezierPath for the tails. Native coding is a first-class feature. The way to think about building beautiful apps this way is React and Native, not React vs. Native. Aspire high and raise your ambitions for what is possible!

James Ide

140,825 Aufrufe • vor 1 Monat

this is pure f*cking treasure 20 GitHub repos to build your own motion design studio with Opus 5.5 storyboards. typography. assets. character states. keyframes. 3D. rendering here’s the stack from the first sketch to the final frame DESIGN + STORYBOARD 01 Penpot → layouts and reusable components 02 Excalidraw → sketch the storyboard 03 Fontsource → self-host your fonts 04 Lucide → consistent SVG icons ASSETS + CHARACTER ANIMATION 05 SVGO → clean the vector assets 06 sharp → resize, crop, and prepare images 07 Lottie-web → play vector animations 08 Rive Web → control character states TIMELINES + CHOREOGRAPHY 09 Motion → springs and layout transitions 10 GSAP → direct complex timelines 11 Anime.js → choreograph SVG and objects 12 Theatre.js → tune motion visually 3D + VISUAL POLISH 13 Three.js → build the 3D scene 14 React Three Fiber → compose 3D in React 15 Drei → cameras, lighting, and staging 16 Postprocessing → bloom and color grading PRODUCTION + EXPORT 17 Remotion → compose and render the video 18 Remotion Skills → give Claude Code the production playbook 19 FFmpeg → encode and package the output 20 Mediabunny → build browser media pipelines start with Remotion + its skills choose the assets, motion engine, and 3D modules your project needs the clever part: the composition lives in code change the copy, colors, timing, or format → render the next version the loop: brief → storyboard → assets → layout → animate → add depth → preview → refine → render save this, then read the full guide for Opus 5.5 Motion Engineering ↓
0:20

this is pure f*cking treasure 20 GitHub repos to build your own motion design studio with Opus 5.5 storyboards. typography. assets. character states. keyframes. 3D. rendering here’s the stack from the first sketch to the final frame DESIGN + STORYBOARD 01 Penpot → layouts and reusable components 02 Excalidraw → sketch the storyboard 03 Fontsource → self-host your fonts 04 Lucide → consistent SVG icons ASSETS + CHARACTER ANIMATION 05 SVGO → clean the vector assets 06 sharp → resize, crop, and prepare images 07 Lottie-web → play vector animations 08 Rive Web → control character states TIMELINES + CHOREOGRAPHY 09 Motion → springs and layout transitions 10 GSAP → direct complex timelines 11 Anime.js → choreograph SVG and objects 12 Theatre.js → tune motion visually 3D + VISUAL POLISH 13 Three.js → build the 3D scene 14 React Three Fiber → compose 3D in React 15 Drei → cameras, lighting, and staging 16 Postprocessing → bloom and color grading PRODUCTION + EXPORT 17 Remotion → compose and render the video 18 Remotion Skills → give Claude Code the production playbook 19 FFmpeg → encode and package the output 20 Mediabunny → build browser media pipelines start with Remotion + its skills choose the assets, motion engine, and 3D modules your project needs the clever part: the composition lives in code change the copy, colors, timing, or format → render the next version the loop: brief → storyboard → assets → layout → animate → add depth → preview → refine → render save this, then read the full guide for Opus 5.5 Motion Engineering ↓

beamnxw ./

36,754 Aufrufe • vor 4 Tagen

OpenAI, Anthropic and Microsoft all back the same standard for running apps inside AI chats. Booking .com, Figma, and Canva are already using it. Still, most developers have never heard of it. It's called MCP Apps. So, why does it matter? The next time someone buys from your website, they may never visit it. They'll ask ChatGPT or Claude, and the model decides how your product shows up. Usually as plain text, sometimes wrong, with none of the experience you built. That's the next shift in how people find you: - SEO was about Google finding your page. - AEO was about AI citing you. - MCP Apps are about your actual product showing up inside the chat. An MCP server returns data. An MCP App returns data plus an interactive UI, like hotel cards or an add-to-cart flow, right inside the chat. The model even knows what the user clicked. In this episode, we build an MCP app from start to finish with Julien, the lead maintainer of Skybridge, an open-source framework that lets you turn any React app into an MCP app. Chapters: 0:00 - Intro 2:44 - MCP servers vs MCP Apps 5:12 - Live demo: Booking .com in ChatGPT 9:24 - How MCP Apps work: context and shared state 15:43 - Skybridge and its devtools 17:48 - Live demo: an e-commerce app in ChatGPT 24:49 - Code walkthrough: MCP tools to React views 28:10 - Syncing UI state: "What's in my cart?" 32:16 - Agent skill to turn any React app → MCP App 37:52 - Outro Link to Skybridge GitHub repo: MCP Apps bring your website into the chat. WebMCP does the reverse and lets AI agents use your website through tools it exposes. I've also written a full article on it, quoted below.
40:22

OpenAI, Anthropic and Microsoft all back the same standard for running apps inside AI chats. Booking .com, Figma, and Canva are already using it. Still, most developers have never heard of it. It's called MCP Apps. So, why does it matter? The next time someone buys from your website, they may never visit it. They'll ask ChatGPT or Claude, and the model decides how your product shows up. Usually as plain text, sometimes wrong, with none of the experience you built. That's the next shift in how people find you: - SEO was about Google finding your page. - AEO was about AI citing you. - MCP Apps are about your actual product showing up inside the chat. An MCP server returns data. An MCP App returns data plus an interactive UI, like hotel cards or an add-to-cart flow, right inside the chat. The model even knows what the user clicked. In this episode, we build an MCP app from start to finish with Julien, the lead maintainer of Skybridge, an open-source framework that lets you turn any React app into an MCP app. Chapters: 0:00 - Intro 2:44 - MCP servers vs MCP Apps 5:12 - Live demo: Booking .com in ChatGPT 9:24 - How MCP Apps work: context and shared state 15:43 - Skybridge and its devtools 17:48 - Live demo: an e-commerce app in ChatGPT 24:49 - Code walkthrough: MCP tools to React views 28:10 - Syncing UI state: "What's in my cart?" 32:16 - Agent skill to turn any React app → MCP App 37:52 - Outro Link to Skybridge GitHub repo: MCP Apps bring your website into the chat. WebMCP does the reverse and lets AI agents use your website through tools it exposes. I've also written a full article on it, quoted below.

Akshay 🚀

18,064 Aufrufe • vor 16 Tagen

Two new #threejs projects on the way 😍 Working on my own gem renderer with a custom refraction material in TSL for #WebGPU, combining Screen Space Reflections + SSGTAO for superior results, as this allows diamonds to generate reflections on the metal mesh. The performance is incredible, even on gems with over 200 diamonds. This time, without any additional libraries. Just React Three Fiber and a lot of magic with custom shaders in TSL. GemGPU™ will also come with a very minimalist gem and metal customization panel that hides and lets the jewelry be the star. I also created a beautiful new stats panel that completely hides in the scene when not needed. It provides relevant optimization information, a performance gauge, summary and expanded modes, and day/night toggle. In the video, you can also see SSGI in action, with a pearl that reflects, in real time, all the objects in the scene, just as the objects in the scene reflect the pearl. It's magical. There are still a few things to fix, but I'll share the live link soon. Stay tuned.
3:43

Two new #threejs projects on the way 😍 Working on my own gem renderer with a custom refraction material in TSL for #WebGPU, combining Screen Space Reflections + SSGTAO for superior results, as this allows diamonds to generate reflections on the metal mesh. The performance is incredible, even on gems with over 200 diamonds. This time, without any additional libraries. Just React Three Fiber and a lot of magic with custom shaders in TSL. GemGPU™ will also come with a very minimalist gem and metal customization panel that hides and lets the jewelry be the star. I also created a beautiful new stats panel that completely hides in the scene when not needed. It provides relevant optimization information, a performance gauge, summary and expanded modes, and day/night toggle. In the video, you can also see SSGI in action, with a pearl that reflects, in real time, all the objects in the scene, just as the objects in the scene reflect the pearl. It's magical. There are still a few things to fix, but I'll share the live link soon. Stay tuned.

Anderson Mancini

12,113 Aufrufe • vor 8 Monaten

BADLAB V2: WHERE YOUR MEDIOCRE CODING DREAMS GO TO DIE 🔊 Listen up, code peasants. While you've been copy-pasting Stack Overflow answers, we've been revolutionizing how fucking development works. BADLAB V2 just dropped, and it's not just another update – it's a fucking paradigm shift. Let me break this down for you smooth-brains: 1️⃣ BADLAB V2 makes it easier and faster to build web apps, games, smart contracts, and data visualizations: No-code deployment, run, and share - without the headaches. 2️⃣ What This Means for Users: You can build bigger, better, and more useful projects and tools. Works with all the tools you love: React, Web3, Three.js, d3, and more—whether you’re building games, dApps, automation tools, or interactive charts, the sky is the limit. 3️⃣ Smart automation does the hard work: AI writes code for you, making it easier to start building without deep technical expertise. 4️⃣ CDN-backed hosting: Your projects load fast and reliably because they run from Cloudflare CDN, not some sketchy server. And now? You can share your creations with friends. 5️⃣ Easier debugging & updates: No more jumping through hoops to update files or fix errors. 6️⃣ Bottom Line: If you want to build web apps, games, or blockchain projects without dealing with all the messy setup and technical headaches, BADLAB V2 makes it easy. 🆕 WHAT’S NEW: ✔️ Multi-file projects – Because one file isn’t enough for real developers. ✔️ File updates that don’t require a PhD – No unnecessary complexity. ✔️ Examples even a brain-dead monkey could follow – Clear and simple. ✔️ Support for every major file format – JS, JSON, Markdown, 3D models, and more. ✔️ React components that don’t look like digital vomit – Finally, code that makes sense. ✔️ Server-side bundling – Because we’re not savages. ✔️ CDN-backed deployment – No lag, no downtime, just pure speed. ⚠️ WEAPONS OF MASS CREATION: 💧 d3.js – Interactive charts that don’t look like Excel’s morning sickness. 💧 Three.js – 3D visuals that push browsers to their limits. 💧 Effector – Business logic that actually makes fucking sense. 💧 Kaboom.js – Build browser games that aren’t complete garbage. 💧 React-Three/Fiber – 3D meets React without the usual drama. 💧 Framer Motion – Animations that are smooth as hell (and don’t cause seizures). 💧 Ethers & Web3.js – Blockchain development for the mentally stable. 🎮 Want to See It in Action? 🔗 Try our BADLAB V2 Agent Here: – Let AI do the hard work for you. ♟ Play the 4D Chess Game Here: – While you're playing checkers, we're transcending dimensions. 🎙 Welcome to the future, you beautiful disasters. Try not to break anything important. 🧪💀 C₈H₁₁NO₂
3:40

BADLAB V2: WHERE YOUR MEDIOCRE CODING DREAMS GO TO DIE 🔊 Listen up, code peasants. While you've been copy-pasting Stack Overflow answers, we've been revolutionizing how fucking development works. BADLAB V2 just dropped, and it's not just another update – it's a fucking paradigm shift. Let me break this down for you smooth-brains: 1️⃣ BADLAB V2 makes it easier and faster to build web apps, games, smart contracts, and data visualizations: No-code deployment, run, and share - without the headaches. 2️⃣ What This Means for Users: You can build bigger, better, and more useful projects and tools. Works with all the tools you love: React, Web3, Three.js, d3, and more—whether you’re building games, dApps, automation tools, or interactive charts, the sky is the limit. 3️⃣ Smart automation does the hard work: AI writes code for you, making it easier to start building without deep technical expertise. 4️⃣ CDN-backed hosting: Your projects load fast and reliably because they run from Cloudflare CDN, not some sketchy server. And now? You can share your creations with friends. 5️⃣ Easier debugging & updates: No more jumping through hoops to update files or fix errors. 6️⃣ Bottom Line: If you want to build web apps, games, or blockchain projects without dealing with all the messy setup and technical headaches, BADLAB V2 makes it easy. 🆕 WHAT’S NEW: ✔️ Multi-file projects – Because one file isn’t enough for real developers. ✔️ File updates that don’t require a PhD – No unnecessary complexity. ✔️ Examples even a brain-dead monkey could follow – Clear and simple. ✔️ Support for every major file format – JS, JSON, Markdown, 3D models, and more. ✔️ React components that don’t look like digital vomit – Finally, code that makes sense. ✔️ Server-side bundling – Because we’re not savages. ✔️ CDN-backed deployment – No lag, no downtime, just pure speed. ⚠️ WEAPONS OF MASS CREATION: 💧 d3.js – Interactive charts that don’t look like Excel’s morning sickness. 💧 Three.js – 3D visuals that push browsers to their limits. 💧 Effector – Business logic that actually makes fucking sense. 💧 Kaboom.js – Build browser games that aren’t complete garbage. 💧 React-Three/Fiber – 3D meets React without the usual drama. 💧 Framer Motion – Animations that are smooth as hell (and don’t cause seizures). 💧 Ethers & Web3.js – Blockchain development for the mentally stable. 🎮 Want to See It in Action? 🔗 Try our BADLAB V2 Agent Here: – Let AI do the hard work for you. ♟ Play the 4D Chess Game Here: – While you're playing checkers, we're transcending dimensions. 🎙 Welcome to the future, you beautiful disasters. Try not to break anything important. 🧪💀 C₈H₁₁NO₂

ARCH AI

44,480 Aufrufe • vor 1 Jahr

$PI launched three real products. Not another mining gimmick. Stuff outside businesses actually pay for Pi Network announced this on Pi2Day. And it’s worth paying attention to. For the first time, they’re actually shipping products that go beyond their own ecosystem. Three things launched. All three are designed to bring outside businesses and developers into $PI. Not just keep existing users mining on their phones. First, SoloHost. An open framework on Pi Desktop where developers can build and list self-hosted apps for local AI and distributed computing. Users discover them, install them, run them on their own machines. Your data stays on your device. No cloud. They launched a demo called Hermes, an open-source AI agent that runs entirely on your computer. Pi’s got over 420,000 Pioneer-operated nodes. Those can opt in to contribute compute for AI workloads and get paid in Pi. That’s basically a DePIN compute network that’s been building for years. Second, Pi Sign-in. Users can now sign into third-party websites and apps with their Pi account. QR code or browser. No new passwords. Businesses get access to tens of millions of verified users. Users get one less login. That’s Pi letting outside platforms tap the community. Third, PiVerify. Pi’s KYC and real-human check, which they’ve been running internally for years, is now available to external businesses. Need identity verification? Pay in Pi and use their system. That creates token demand from outside the ecosystem. Businesses paying in Pi for a service they actually need. The thread connecting all three is the same. Pi spent years building a massive user base and verification infrastructure. Now they’re packaging it as services outside companies pay for. Compute. Identity. Authentication. All paid in $PI. Pi still has a long road ahead. The token’s market performance hasn’t matched the community hype. There are legitimate questions about centralisation. And “mining” on your phone still makes a lot of crypto people uncomfortable. But 420,000 nodes is real infrastructure. Tens of millions of verified users is real distribution. And shipping three products in one day that create external demand for the token is more than most projects do in a year. Whether you believe in Pi or not, what they just shipped is the most concrete step they’ve taken toward actual utility. And in this market, shipping beats talking every single time
2:37

$PI launched three real products. Not another mining gimmick. Stuff outside businesses actually pay for Pi Network announced this on Pi2Day. And it’s worth paying attention to. For the first time, they’re actually shipping products that go beyond their own ecosystem. Three things launched. All three are designed to bring outside businesses and developers into $PI. Not just keep existing users mining on their phones. First, SoloHost. An open framework on Pi Desktop where developers can build and list self-hosted apps for local AI and distributed computing. Users discover them, install them, run them on their own machines. Your data stays on your device. No cloud. They launched a demo called Hermes, an open-source AI agent that runs entirely on your computer. Pi’s got over 420,000 Pioneer-operated nodes. Those can opt in to contribute compute for AI workloads and get paid in Pi. That’s basically a DePIN compute network that’s been building for years. Second, Pi Sign-in. Users can now sign into third-party websites and apps with their Pi account. QR code or browser. No new passwords. Businesses get access to tens of millions of verified users. Users get one less login. That’s Pi letting outside platforms tap the community. Third, PiVerify. Pi’s KYC and real-human check, which they’ve been running internally for years, is now available to external businesses. Need identity verification? Pay in Pi and use their system. That creates token demand from outside the ecosystem. Businesses paying in Pi for a service they actually need. The thread connecting all three is the same. Pi spent years building a massive user base and verification infrastructure. Now they’re packaging it as services outside companies pay for. Compute. Identity. Authentication. All paid in $PI. Pi still has a long road ahead. The token’s market performance hasn’t matched the community hype. There are legitimate questions about centralisation. And “mining” on your phone still makes a lot of crypto people uncomfortable. But 420,000 nodes is real infrastructure. Tens of millions of verified users is real distribution. And shipping three products in one day that create external demand for the token is more than most projects do in a year. Whether you believe in Pi or not, what they just shipped is the most concrete step they’ve taken toward actual utility. And in this market, shipping beats talking every single time

Rypto

66,702 Aufrufe • vor 1 Monat

This bot started with tiny $5 orders - and somehow pulled in over $200,000 on the 5-minute market. In just one week, it’s already cleared more than +$212,578 And the biggest single win? Only $745. But the wild part isn’t the size of any one trade - it’s how those tiny positions stack up into such an aggressive profit curve. From the outside, it looks like it’s running three simple plays: - Uses $5 to grab 1¢ outcomes - Exits early before expiration to lock in profit - Scales up to $250 on 25¢–50¢ positions Then pushes further with $500 into 50¢ outcomes. So this doesn’t look like a typical “elite” trading bot squeezing every edge with precision. It feels more like something is off inside Polymarket - creating these exaggerated, almost unnatural returns. And yet, right now, this account sits at #2 in weekly crypto profits. If it’s really hitting profitable trades this consistently - that’s not just a bot. That’s basically a money printer.
0:23

This bot started with tiny $5 orders - and somehow pulled in over $200,000 on the 5-minute market. In just one week, it’s already cleared more than +$212,578 And the biggest single win? Only $745. But the wild part isn’t the size of any one trade - it’s how those tiny positions stack up into such an aggressive profit curve. From the outside, it looks like it’s running three simple plays: - Uses $5 to grab 1¢ outcomes - Exits early before expiration to lock in profit - Scales up to $250 on 25¢–50¢ positions Then pushes further with $500 into 50¢ outcomes. So this doesn’t look like a typical “elite” trading bot squeezing every edge with precision. It feels more like something is off inside Polymarket - creating these exaggerated, almost unnatural returns. And yet, right now, this account sits at #2 in weekly crypto profits. If it’s really hitting profitable trades this consistently - that’s not just a bot. That’s basically a money printer.

Dekos

19,547 Aufrufe • vor 5 Monaten

is it legal? NVIDIA and Microsoft just open-sourced the pieces of a full 3D studio for Opus 5.5 15 github repos, sorted by what you want to make: GENERATE 3D ASSETS 01. TRELLIS.2 by Microsoft: -> one image in, a fully textured 3D asset out, about 3 seconds on an H100 02. Hunyuan3D-2.1 by Tencent: -> production-ready 3D assets with PBR textures 03. stable-fast-3d by Stability AI: -> one photo to a clean UV-unwrapped mesh, built for speed 04. meshy-mcp-server by Meshy: -> text or image to 3D, then remesh, retexture, rig and animate from your agent BUILD SCENES AND WORLDS 05. mcp-for-blender: -> prompt-driven modeling, scene building and edits in a live Blender 06. HY-World-2.0 by Tencent: -> text or a single image to a navigable 3D world 07. supersplat by PlayCanvas: -> inspect, edit, optimize and publish 3D Gaussian splats in the browser 08. kit-usd-agents by NVIDIA: -> edit Omniverse USD scenes in plain English, plus MCP servers for Kit and Isaac Sim MAKE A GAME 09. unity-mcp: -> run the Unity Editor in plain English: scenes, C# scripts, assets, tests, builds 10. godot-ai: -> 46 tools for a live Godot editor: scenes, scripts, signals, UI, particles 11. unreal-engine-mcp: -> drive a live Unreal Editor: actors, world building, Blueprints 3D ON THE WEB 12. editor-mcp-server by PlayCanvas: -> your agent builds PlayCanvas scenes and checks they actually run 13. three.js: -> the JavaScript 3D library itself, 115k stars on GitHub 14. react-three-fiber: -> build three.js scenes as reusable React components 15. threejs-skills: -> 10 three.js skills for Claude Code, from shaders to post-processing a full 3D pipeline, and every piece of it lives on github
0:20

is it legal? NVIDIA and Microsoft just open-sourced the pieces of a full 3D studio for Opus 5.5 15 github repos, sorted by what you want to make: GENERATE 3D ASSETS 01. TRELLIS.2 by Microsoft: -> one image in, a fully textured 3D asset out, about 3 seconds on an H100 02. Hunyuan3D-2.1 by Tencent: -> production-ready 3D assets with PBR textures 03. stable-fast-3d by Stability AI: -> one photo to a clean UV-unwrapped mesh, built for speed 04. meshy-mcp-server by Meshy: -> text or image to 3D, then remesh, retexture, rig and animate from your agent BUILD SCENES AND WORLDS 05. mcp-for-blender: -> prompt-driven modeling, scene building and edits in a live Blender 06. HY-World-2.0 by Tencent: -> text or a single image to a navigable 3D world 07. supersplat by PlayCanvas: -> inspect, edit, optimize and publish 3D Gaussian splats in the browser 08. kit-usd-agents by NVIDIA: -> edit Omniverse USD scenes in plain English, plus MCP servers for Kit and Isaac Sim MAKE A GAME 09. unity-mcp: -> run the Unity Editor in plain English: scenes, C# scripts, assets, tests, builds 10. godot-ai: -> 46 tools for a live Godot editor: scenes, scripts, signals, UI, particles 11. unreal-engine-mcp: -> drive a live Unreal Editor: actors, world building, Blueprints 3D ON THE WEB 12. editor-mcp-server by PlayCanvas: -> your agent builds PlayCanvas scenes and checks they actually run 13. three.js: -> the JavaScript 3D library itself, 115k stars on GitHub 14. react-three-fiber: -> build three.js scenes as reusable React components 15. threejs-skills: -> 10 three.js skills for Claude Code, from shaders to post-processing a full 3D pipeline, and every piece of it lives on github

Mnimiy

205,109 Aufrufe • vor 6 Tagen

In the early days of Waymo's service in Phoenix, they had a large number of roadside assistance vans traveling alongside their vehicles, each with two people inside. When the Waymo vehicle got stuck, one person would jump out of the RA van and drive the car. Today Waymo still has roadside assistance vans ready to help when a car has an issue, but they don't have to be directly with one car — issues are rare enough that a few roadside assistance vans can handle a much larger fleet. It's funny to see people take shots at Tesla for doing the same. Of course they're going to be careful with the first customer deployment. No, someone isn't secretly controlling the car from outside. The AI model on the car is driving the car. Go test drive any Tesla and find out for yourself. It doesn't need help from anyone, it can see and react to things before you do.
0:32

In the early days of Waymo's service in Phoenix, they had a large number of roadside assistance vans traveling alongside their vehicles, each with two people inside. When the Waymo vehicle got stuck, one person would jump out of the RA van and drive the car. Today Waymo still has roadside assistance vans ready to help when a car has an issue, but they don't have to be directly with one car — issues are rare enough that a few roadside assistance vans can handle a much larger fleet. It's funny to see people take shots at Tesla for doing the same. Of course they're going to be careful with the first customer deployment. No, someone isn't secretly controlling the car from outside. The AI model on the car is driving the car. Go test drive any Tesla and find out for yourself. It doesn't need help from anyone, it can see and react to things before you do.

Whole Mars Catalog

95,641 Aufrufe • vor 8 Monaten

Data encryption is now live on Veilnet. Available in @veilnet/mcp-server@0.3.0. Any blob — file, dataset, config, recovery codes, contract draft, research note, agent memory — can now be encrypted on your device, shipped to Veilnet as ciphertext, and fetched back later without the decryption key ever leaving your machine. Three new MCP tools are live: data_store({ label, data }) encrypt + store data on Veilnetdata_fetch({ id }) fetch + decrypt locallydata_list() list stored ids With labels kept encrypted, the flow is simple: user data → encrypted locally → ciphertext stored on Veilnet → key remains on user device → agent fetches when needed → local decryption onlyVeilnet sees encrypted blobs. Your AI agent gets persistent private memory and secure storage.The provider does not need the raw data. This works in Claude Code, Claude Desktop, Cursor, Continue, and Cline. Install: npm i -g @veilnet/mcp-server Bootstrap your key at: → Agent tab Then ask any MCP-aware agent:“store this encrypted on Veilnet.”Docs:docs.veilnet.toPrivate prompts protected what users ask. Private MCP protected what agents run. Wallet Context protected what agents read. Encrypted data storage now protects what agents remember and reuse. All powered by $VEILNET
0:29

Data encryption is now live on Veilnet. Available in @veilnet/[email protected]. Any blob — file, dataset, config, recovery codes, contract draft, research note, agent memory — can now be encrypted on your device, shipped to Veilnet as ciphertext, and fetched back later without the decryption key ever leaving your machine. Three new MCP tools are live: data_store({ label, data }) encrypt + store data on Veilnetdata_fetch({ id }) fetch + decrypt locallydata_list() list stored ids With labels kept encrypted, the flow is simple: user data → encrypted locally → ciphertext stored on Veilnet → key remains on user device → agent fetches when needed → local decryption onlyVeilnet sees encrypted blobs. Your AI agent gets persistent private memory and secure storage.The provider does not need the raw data. This works in Claude Code, Claude Desktop, Cursor, Continue, and Cline. Install: npm i -g @veilnet/mcp-server Bootstrap your key at: → Agent tab Then ask any MCP-aware agent:“store this encrypted on Veilnet.”Docs:docs.veilnet.toPrivate prompts protected what users ask. Private MCP protected what agents run. Wallet Context protected what agents read. Encrypted data storage now protects what agents remember and reuse. All powered by $VEILNET

Veilnet

11,761 Aufrufe • vor 4 Monaten

Destra Network| $DSYNC Introducing Destra Zone: 𝐘𝐨𝐮𝐫 𝐏𝐨𝐜𝐤𝐞𝐭-𝐒𝐢𝐳𝐞𝐝 𝐊𝐞𝐲 𝐭𝐨 𝐃𝐢𝐠𝐢𝐭𝐚𝐥 𝐏𝐫𝐢𝐯𝐚𝐜𝐲. Destra Zone device is designed to safeguard your personal data and ensure a secure internet experience no matter where you are, by establishing a protected Wi-Fi hotspot that connects to existing networks, Destra Zone acts as a mediator, managing all your DNS requests and shielding your online activities from potential attackers. Unlike traditional solutions, Destra Zone offers more than just a VPN. It features an AI-driven firewall to detect and block malicious DNS requests and leverages the Destra Network's decentralized DNS network for enhanced security. With the power of the Destra network, this device provides a comprehensive defense against cyber threats, keeping your internet traffic confidential and secure. Additionally, Destra Zone allows you to monitor the servers and domains with which your devices are communicating, giving you control over your digital interactions. Over the past few weeks, we have been prototyping designs for the Destra Zone and are in the final iterations of hardware design. We chose multiple microcontroller units and started testing to finalize the best option that balances power efficiency, processing capability, and cost-effectiveness. These tests ensure that the device can handle high volumes of DNS requests and complex AI-driven threat detection algorithms seamlessly. As much as on functionality, we are also focusing on the durability and reliability of the device, making sure it outlasts all your electronic devices. We've started the patent filing process and are currently in patent search stage with the USPTO and are expecting to ship the first batch of Destra Zone beta devices to the beta testers from the community in three months.
0:47

Destra Network| $DSYNC Introducing Destra Zone: 𝐘𝐨𝐮𝐫 𝐏𝐨𝐜𝐤𝐞𝐭-𝐒𝐢𝐳𝐞𝐝 𝐊𝐞𝐲 𝐭𝐨 𝐃𝐢𝐠𝐢𝐭𝐚𝐥 𝐏𝐫𝐢𝐯𝐚𝐜𝐲. Destra Zone device is designed to safeguard your personal data and ensure a secure internet experience no matter where you are, by establishing a protected Wi-Fi hotspot that connects to existing networks, Destra Zone acts as a mediator, managing all your DNS requests and shielding your online activities from potential attackers. Unlike traditional solutions, Destra Zone offers more than just a VPN. It features an AI-driven firewall to detect and block malicious DNS requests and leverages the Destra Network's decentralized DNS network for enhanced security. With the power of the Destra network, this device provides a comprehensive defense against cyber threats, keeping your internet traffic confidential and secure. Additionally, Destra Zone allows you to monitor the servers and domains with which your devices are communicating, giving you control over your digital interactions. Over the past few weeks, we have been prototyping designs for the Destra Zone and are in the final iterations of hardware design. We chose multiple microcontroller units and started testing to finalize the best option that balances power efficiency, processing capability, and cost-effectiveness. These tests ensure that the device can handle high volumes of DNS requests and complex AI-driven threat detection algorithms seamlessly. As much as on functionality, we are also focusing on the durability and reliability of the device, making sure it outlasts all your electronic devices. We've started the patent filing process and are currently in patent search stage with the USPTO and are expecting to ship the first batch of Destra Zone beta devices to the beta testers from the community in three months.

Destra Network

31,348 Aufrufe • vor 2 Jahren