Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

Hey everyone!! New tutorial out!!! Create your own Papercraft web portfolios with three.js, Blender, React/React Three Fiber, and Krita! ✂️✂️✂️✂️📰📰🖋️🖋️🖋️ The video below has two example websites! Code, credits, and other files are here: #threejs #b3d #blender #r3f

andrewwoan's profile picture

Andrew Woan

1,676 subscribers

23,269 Aufrufe • vor 7 Monaten •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 Kommentare

Keine Kommentare verfügbar

Kommentare vom Original-Post werden hier angezeigt

Ähnliche Videos

Hey everyone! New beginner three.js and Blender tutorial out! Create a cozy cafe portfolio, a little bit of TSL too. Tutorial: Site: Code, Credits, Blender file, etc: #threejs #threejsJourney #tsl #b3d
0:39

Hey everyone! New beginner three.js and Blender tutorial out! Create a cozy cafe portfolio, a little bit of TSL too. Tutorial: Site: Code, Credits, Blender file, etc: #threejs #threejsJourney #tsl #b3d

Andrew Woan

19,072 Aufrufe • vor 6 Monaten

New video out on YouTube! Create a room portfolio with three.js and Blender. Beginner friendly course!! (see the folio in the video below~). Live Site: Featuring Bruno Simon's coffee smoke shader haha. Also featuring Denis Wipart's materials! Check them out here!!! They're amazing!!! #threejs #blender
1:03

New video out on YouTube! Create a room portfolio with three.js and Blender. Beginner friendly course!! (see the folio in the video below~). Live Site: Featuring Bruno Simon's coffee smoke shader haha. Also featuring Denis Wipart's materials! Check them out here!!! They're amazing!!! #threejs #blender

Andrew Woan

27,622 Aufrufe • vor 1 Jahr

R3F v10 has a fresh release in preview! ✧ First-class WebGPU and TSL support ✧ useFrame revamped with a new scheduler ✧ Multi-canvas out of the box ✧ Three essentials moved out of Drei directly into core ▶️ npm install @'react-three/fiber@alpha' We are eagerly deving what the next generation of frameworks should look like from WebGPU to agentic support. Shout out your feedback. For details check out: And if you want to learn more first-hand join us at our Threejs conf workshop!
0:31

R3F v10 has a fresh release in preview! ✧ First-class WebGPU and TSL support ✧ useFrame revamped with a new scheduler ✧ Multi-canvas out of the box ✧ Three essentials moved out of Drei directly into core ▶️ npm install @'react-three/fiber@alpha' We are eagerly deving what the next generation of frameworks should look like from WebGPU to agentic support. Shout out your feedback. For details check out: And if you want to learn more first-hand join us at our Threejs conf workshop!

Poimandres

11,009 Aufrufe • vor 1 Monat

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 ./

22,774 Aufrufe • vor 2 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 ./

14,575 Aufrufe • vor 3 Tagen

Introducing GGEZ: The Nextjs for ThreeJS Games It's an open source framework which adds all the missing pieces to vibe code better ThreeJS games It has full codex integration, so a $20 ChatGPT sub is enough to build games! Literally "bun run start" and you have the full development environment on localhost 0. GGEZ Runtime - Abstraction layer over physics libraries - Character Controllers - It's just ThreeJS, no magic - Load ggez scenes and animations automatically 1. Trident - a World Editor - Codex World agent - A full editor to build scenes - Including Mesh editing, vertex, edge, face - Terrain sculpting - Physics and Player Controller settings - It's just exporting json files and glb assets, no magic 2. Animation Studio - The best you can find on the web - Codex Animation agent - Build state machines and animation graphs - Multi dimensional blend trees - Clip Editor: Create new animations with codex or edit keyframes - Equipment Editor: Never miss the placement of your rifle anymore - ROOT MOTION SUPPORT 3. GGEZ CLI Yea relax, it works fully headless and you can just create new games with bunx create-ggez new-game But at this point just use vanilla threejs?? Anyways if you are like me and you can't guess with code where objects should be placed and you are fifty prompts deep into figuring out where that box should be placed, this is for you If you are an anti AI game developer who insists that this is slop, then just leave a raging comment below please it's good for the algo 🙏 The whole thing is absolutely experimental and things will break as i move very fast, but I will be building my game with it so i will make sure it becomes stable asap! Link to repo below
0:56

Introducing GGEZ: The Nextjs for ThreeJS Games It's an open source framework which adds all the missing pieces to vibe code better ThreeJS games It has full codex integration, so a $20 ChatGPT sub is enough to build games! Literally "bun run start" and you have the full development environment on localhost 0. GGEZ Runtime - Abstraction layer over physics libraries - Character Controllers - It's just ThreeJS, no magic - Load ggez scenes and animations automatically 1. Trident - a World Editor - Codex World agent - A full editor to build scenes - Including Mesh editing, vertex, edge, face - Terrain sculpting - Physics and Player Controller settings - It's just exporting json files and glb assets, no magic 2. Animation Studio - The best you can find on the web - Codex Animation agent - Build state machines and animation graphs - Multi dimensional blend trees - Clip Editor: Create new animations with codex or edit keyframes - Equipment Editor: Never miss the placement of your rifle anymore - ROOT MOTION SUPPORT 3. GGEZ CLI Yea relax, it works fully headless and you can just create new games with bunx create-ggez new-game But at this point just use vanilla threejs?? Anyways if you are like me and you can't guess with code where objects should be placed and you are fifty prompts deep into figuring out where that box should be placed, this is for you If you are an anti AI game developer who insists that this is slop, then just leave a raging comment below please it's good for the algo 🙏 The whole thing is absolutely experimental and things will break as i move very fast, but I will be building my game with it so i will make sure it becomes stable asap! Link to repo below

robot

44,009 Aufrufe • vor 6 Monaten

Claude Code can now make full videos from your terminal.. Not slideshows. Not text on screen.. Actual motion graphics with animations, transitions, custom photos, and background music. [ SHARED A TUTORIAL BELOW EDITED WITH THIS SETUP IN JUST 5mins ] ▫️Here's the setup: Claude Code + Remotion Remotion is a React based framework that renders video programmatically. You describe what you want in plain English, Claude writes the React components and Remotion renders it into a real MP4. What you can actually do with this: > Generate 9:16 vertical videos for TikTok / Reels / Shorts > Add animated text with viral hooks and safe zones > Pull live web screenshots directly into your scenes using Chrome MCP > Fact-check your content in real time with Perplexity MCP > Drop in your own photos and background music > Edit existing talking-head footage cut bloopers, add captions > Schedule posts to your socials straight from the terminal ▫️How to set it up (takes 5 minutes) : > Make sure you have Node.js installed ( node -v to check ) > Create a new Remotion project: npx create-video@latest Pick the Blank template, enable TailwindCSS, and install the Skills package when prompted. > Install dependencies: cd my-video npm install > Start the preview server: npm run dev > Open Claude Code in the same project folder: cd my-video claude That's it. You can now prompt videos in plain English. If you already have a Remotion project, just add the skill directly: npx skills add remotion-dev/skills This drops a SKILL.md into your project that gives Claude expert knowledge of Remotion.. animations, compositions, captions, assets, 3D content everything. Example prompt you can steal: "Create a 30-second 9:16 vertical video about the top 3 AI tools this week. Use animated text with a hook in the first 2 seconds. Add smooth transitions between scenes. Keep text in the safe zone for TikTok. Use a dark tech aesthetic with blue accent colors." Claude writes all the React code, renders a preview, you tweak with natural language, and export when ready. The crazy part is this whole pipeline is local, free (minus your Claude sub), and you never open a video editor. imo this kills CapCut for anyone making info-style content. You describe the video in English and get back a rendered MP4. try it now.
2:01

Claude Code can now make full videos from your terminal.. Not slideshows. Not text on screen.. Actual motion graphics with animations, transitions, custom photos, and background music. [ SHARED A TUTORIAL BELOW EDITED WITH THIS SETUP IN JUST 5mins ] ▫️Here's the setup: Claude Code + Remotion Remotion is a React based framework that renders video programmatically. You describe what you want in plain English, Claude writes the React components and Remotion renders it into a real MP4. What you can actually do with this: > Generate 9:16 vertical videos for TikTok / Reels / Shorts > Add animated text with viral hooks and safe zones > Pull live web screenshots directly into your scenes using Chrome MCP > Fact-check your content in real time with Perplexity MCP > Drop in your own photos and background music > Edit existing talking-head footage cut bloopers, add captions > Schedule posts to your socials straight from the terminal ▫️How to set it up (takes 5 minutes) : > Make sure you have Node.js installed ( node -v to check ) > Create a new Remotion project: npx create-video@latest Pick the Blank template, enable TailwindCSS, and install the Skills package when prompted. > Install dependencies: cd my-video npm install > Start the preview server: npm run dev > Open Claude Code in the same project folder: cd my-video claude That's it. You can now prompt videos in plain English. If you already have a Remotion project, just add the skill directly: npx skills add remotion-dev/skills This drops a SKILL.md into your project that gives Claude expert knowledge of Remotion.. animations, compositions, captions, assets, 3D content everything. Example prompt you can steal: "Create a 30-second 9:16 vertical video about the top 3 AI tools this week. Use animated text with a hook in the first 2 seconds. Add smooth transitions between scenes. Keep text in the safe zone for TikTok. Use a dark tech aesthetic with blue accent colors." Claude writes all the React code, renders a preview, you tweak with natural language, and export when ready. The crazy part is this whole pipeline is local, free (minus your Claude sub), and you never open a video editor. imo this kills CapCut for anyone making info-style content. You describe the video in English and get back a rendered MP4. try it now.

Axel Bitblaze 🪓

31,862 Aufrufe • vor 6 Monaten

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

CLAUDE CODE + GROK + JEV - THE FILE WHERE THREE HEADS CLOSE A TICKET IN 9 MINUTES FOR $1.74 a month of this costs $208.80, the same 120 merges by hand are 300 hours and $28,500 ticket → plan → patch → tests → review → merge Claude Code on Opus 5.5 writes the patch, Grok reads it back and argues, Jev holds the gate and merges only on green tests three heads, and not one of them is allowed to push code to prod on its own 38 files read, 3 touched, +412 lines, 48 tests, and the first four failed, so the patch went back two minutes twenty later it was 48 of 48, and only then did Jev open the gate out of 120 patches Claude Code and Grok signed off on 78 straight away and had a fight about the other 22 those 22 arguments are the product, because a reviewer that never objects is just decoration the meter clocked $208.80 for the month, and to catch the human bill it would have to keep running for another 136 months and here is the brutal part of this file: 6 of the 94 merged tickets came back with bugs every one of them sat in the part of the code the test suite has never read, because coverage there is 61% two models in the same blind spot is not two opinions, it is one mistake signed twice save this and paste it into Claude Code - let it run your ticket through these three heads ↓
1:11

CLAUDE CODE + GROK + JEV - THE FILE WHERE THREE HEADS CLOSE A TICKET IN 9 MINUTES FOR $1.74 a month of this costs $208.80, the same 120 merges by hand are 300 hours and $28,500 ticket → plan → patch → tests → review → merge Claude Code on Opus 5.5 writes the patch, Grok reads it back and argues, Jev holds the gate and merges only on green tests three heads, and not one of them is allowed to push code to prod on its own 38 files read, 3 touched, +412 lines, 48 tests, and the first four failed, so the patch went back two minutes twenty later it was 48 of 48, and only then did Jev open the gate out of 120 patches Claude Code and Grok signed off on 78 straight away and had a fight about the other 22 those 22 arguments are the product, because a reviewer that never objects is just decoration the meter clocked $208.80 for the month, and to catch the human bill it would have to keep running for another 136 months and here is the brutal part of this file: 6 of the 94 merged tickets came back with bugs every one of them sat in the part of the code the test suite has never read, because coverage there is 61% two models in the same blind spot is not two opinions, it is one mistake signed twice save this and paste it into Claude Code - let it run your ticket through these three heads ↓

Sprytix

12,400 Aufrufe • vor 12 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,565 Aufrufe • vor 1 Monat

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

Your AI isn't bad at design. It has just never seen good design. I've tested 100+ vibe coding resources this year. These are the 40 I actually kept, grouped by what you're stuck on. Bookmark this 🔖 1. 👑 Why it's different from everything below: - Every one is a complete prompt, not a snippet you wire up yourself - 3 steps: copy the prompt, paste it into your AI, launch it live - 600+ award-winning prompts, all in one place - Full source code to download and edit - Works with Claude Code, Cursor or v0 Built for founders and freelancers who want award-level sites without a design team or a week of tweaking. If you only open one link in this post, make it this one. 2. - design systems as markdown your agent can read 3. - ready-made prompts for dashboards and landing pages 4. - curated high-end sites 5. - real UI inspiration mapped to prompts 6. - 2,000+ real product styles with typography 7. - 2,600+ examples of how top design systems solve the same element 8. - curated collection of beautiful websites 9. - the best of web design, recognized and ranked 10. - showcase of the best animation websites 11. - curated landing pages 12. - mobile design patterns 13. - experimental web design projects 14. - navigation patterns 15. - footer layouts 16. - conversion-tested forms, popups and buttons 17. - curated hero sections 18. - the best pricing page examples 19. - community component marketplace that plugs into agents via MCP 20. - still the gold standard 21. - 200+ animated React and Tailwind components 22. - 150+ animated components and effects 23. - advanced interactions 24. - open-source UI elements 25. - animated components built on Motion and GSAP 26. - 2,000+ pre-built section blocks for shadcn/ui 27. - 150+ motion effects with React code and prompts 28. - micro-interactions 29. - glass refraction components 30. - lightweight animation engine 31. - the most popular web 3D library 32. - the standard online shader editor and community 33. - free interactive intro to fragment shaders 34. - full Three.js course with shader chapters 35. - 2,000+ hand-drawn illustrations 36. - 3D icons 37. - command-line AI coding agent 38. - AI-first code editor 39. - Vercel's prompt-to-component tool 40. - AI app builder in the browser Which one should I add next?
0:40

Your AI isn't bad at design. It has just never seen good design. I've tested 100+ vibe coding resources this year. These are the 40 I actually kept, grouped by what you're stuck on. Bookmark this 🔖 1. 👑 Why it's different from everything below: - Every one is a complete prompt, not a snippet you wire up yourself - 3 steps: copy the prompt, paste it into your AI, launch it live - 600+ award-winning prompts, all in one place - Full source code to download and edit - Works with Claude Code, Cursor or v0 Built for founders and freelancers who want award-level sites without a design team or a week of tweaking. If you only open one link in this post, make it this one. 2. - design systems as markdown your agent can read 3. - ready-made prompts for dashboards and landing pages 4. - curated high-end sites 5. - real UI inspiration mapped to prompts 6. - 2,000+ real product styles with typography 7. - 2,600+ examples of how top design systems solve the same element 8. - curated collection of beautiful websites 9. - the best of web design, recognized and ranked 10. - showcase of the best animation websites 11. - curated landing pages 12. - mobile design patterns 13. - experimental web design projects 14. - navigation patterns 15. - footer layouts 16. - conversion-tested forms, popups and buttons 17. - curated hero sections 18. - the best pricing page examples 19. - community component marketplace that plugs into agents via MCP 20. - still the gold standard 21. - 200+ animated React and Tailwind components 22. - 150+ animated components and effects 23. - advanced interactions 24. - open-source UI elements 25. - animated components built on Motion and GSAP 26. - 2,000+ pre-built section blocks for shadcn/ui 27. - 150+ motion effects with React code and prompts 28. - micro-interactions 29. - glass refraction components 30. - lightweight animation engine 31. - the most popular web 3D library 32. - the standard online shader editor and community 33. - free interactive intro to fragment shaders 34. - full Three.js course with shader chapters 35. - 2,000+ hand-drawn illustrations 36. - 3D icons 37. - command-line AI coding agent 38. - AI-first code editor 39. - Vercel's prompt-to-component tool 40. - AI app builder in the browser Which one should I add next?

Himanshu Hingorani

51,555 Aufrufe • vor 2 Tagen

HERMES AGENT WITHOUT TOOLS IS A CHATBOT. WITH THEM IT BUILDS 3D TOWERS IN BLENDER, CHECKS STOCK PRICES, AND DRIVES VS CODE. tonbi JUST DROPPED THE FULL GUIDE. module 6 of his 10-part Hermes masterclass. best breakdown of the tool layer anyone has published. what you need to know: TOOLS vs SKILLS vs MCP skills = instructions (markdown, loaded into context) tools = callable functions (Python, agent emits call, Hermes executes) MCP = adapters to external systems (Blender, Stripe, Linear, Notion) every tool has three parts: → the function (does the real work) → the schema (what the model sees to decide when to call it) → the registry (makes the tool exist in the agent) the model never runs the function directly. it emits a structured request (tool name + JSON args). Hermes executes and returns the result. if the tool fails, the error goes back as JSON. the agent recovers instead of crashing. TOOL SETS CONTROL THE SURFACE hermes chat --tool-sets web # only web tools loaded. no files, no terminal. hermes chat --tool-sets safe # read-only: web search, vision, image gen. # no file writes. no terminal. no code execution. mid-session: /tools enable video /tools disable terminal or toggle in the dashboard: hermes dashboard → Skills → Tool Sets MCP SERVERS two transport types: STDIO (local subprocess) or HTTP (remote endpoint). add a server: hermes mcp # or ask: "add the MCP server for Blender" filter tools with include/exclude per server. keep only what you trust. security: → OAuth 2.1 PKCE (no long-lived tokens in config) → package scanning via api.osv. dev before launch → all MCP calls go through approval gates HERMES AS MCP SERVER hermes mcp serve exposes 10 tools via FastMCP. connect VS Code Copilot or Cursor to your running Hermes instance. BUILD YOUR OWN TOOL He built a stock price tool live: → Python function calling Finnhub API → schema with name, description, parameters → registered in tool_sets.py → agent calls it automatically when relevant any repeating API call in your workflow can become a native tool. full Hermes architecture deep-dive in the article 👇
26:15

HERMES AGENT WITHOUT TOOLS IS A CHATBOT. WITH THEM IT BUILDS 3D TOWERS IN BLENDER, CHECKS STOCK PRICES, AND DRIVES VS CODE. tonbi JUST DROPPED THE FULL GUIDE. module 6 of his 10-part Hermes masterclass. best breakdown of the tool layer anyone has published. what you need to know: TOOLS vs SKILLS vs MCP skills = instructions (markdown, loaded into context) tools = callable functions (Python, agent emits call, Hermes executes) MCP = adapters to external systems (Blender, Stripe, Linear, Notion) every tool has three parts: → the function (does the real work) → the schema (what the model sees to decide when to call it) → the registry (makes the tool exist in the agent) the model never runs the function directly. it emits a structured request (tool name + JSON args). Hermes executes and returns the result. if the tool fails, the error goes back as JSON. the agent recovers instead of crashing. TOOL SETS CONTROL THE SURFACE hermes chat --tool-sets web # only web tools loaded. no files, no terminal. hermes chat --tool-sets safe # read-only: web search, vision, image gen. # no file writes. no terminal. no code execution. mid-session: /tools enable video /tools disable terminal or toggle in the dashboard: hermes dashboard → Skills → Tool Sets MCP SERVERS two transport types: STDIO (local subprocess) or HTTP (remote endpoint). add a server: hermes mcp # or ask: "add the MCP server for Blender" filter tools with include/exclude per server. keep only what you trust. security: → OAuth 2.1 PKCE (no long-lived tokens in config) → package scanning via api.osv. dev before launch → all MCP calls go through approval gates HERMES AS MCP SERVER hermes mcp serve exposes 10 tools via FastMCP. connect VS Code Copilot or Cursor to your running Hermes instance. BUILD YOUR OWN TOOL He built a stock price tool live: → Python function calling Finnhub API → schema with name, description, parameters → registered in tool_sets.py → agent calls it automatically when relevant any repeating API call in your workflow can become a native tool. full Hermes architecture deep-dive in the article 👇

YanXbt

32,680 Aufrufe • vor 4 Monaten

I'm teaching a new course! AI Python for Beginners is a series of four short courses that teach anyone to code, regardless of current technical skill. We are offering these courses free for a limited time. Generative AI is transforming coding. This course teaches coding in a way that’s aligned with where the field is going, rather than where it has been: (1) AI as a Coding Companion. Experienced coders are using AI to help write snippets of code, debug code, and the like. We embrace this approach and describe best-practices for coding with a chatbot. Throughout the course, you'll have access to an AI chatbot that will be your own coding companion that can assist you every step of the way as you code. (2) Learning by Building AI Applications. You'll write code that interacts with large language models to quickly create fun applications to customize poems, write recipes, and manage a to-do list. This hands-on approach helps you see how writing code that calls on powerful AI models will make you more effective in your work and personal projects. With this approach, beginning programmers can learn to do useful things with code far faster than they could have even a year ago. Knowing a little bit of coding is increasingly helping people in job roles other than software engineers. For example, I've seen a marketing professional write code to download web pages and use generative AI to derive insights; a reporter write code to flag important stories; and an investor automate the initial drafts of contracts. With this course you’ll be equipped to automate repetitive tasks, analyze data more efficiently, and leverage AI to enhance your productivity. If you are already an experienced developer, please help me spread the word and encourage your non-developer friends to learn a little bit of coding. I hope you'll check out the first two short courses here!
3:40

I'm teaching a new course! AI Python for Beginners is a series of four short courses that teach anyone to code, regardless of current technical skill. We are offering these courses free for a limited time. Generative AI is transforming coding. This course teaches coding in a way that’s aligned with where the field is going, rather than where it has been: (1) AI as a Coding Companion. Experienced coders are using AI to help write snippets of code, debug code, and the like. We embrace this approach and describe best-practices for coding with a chatbot. Throughout the course, you'll have access to an AI chatbot that will be your own coding companion that can assist you every step of the way as you code. (2) Learning by Building AI Applications. You'll write code that interacts with large language models to quickly create fun applications to customize poems, write recipes, and manage a to-do list. This hands-on approach helps you see how writing code that calls on powerful AI models will make you more effective in your work and personal projects. With this approach, beginning programmers can learn to do useful things with code far faster than they could have even a year ago. Knowing a little bit of coding is increasingly helping people in job roles other than software engineers. For example, I've seen a marketing professional write code to download web pages and use generative AI to derive insights; a reporter write code to flag important stories; and an investor automate the initial drafts of contracts. With this course you’ll be equipped to automate repetitive tasks, analyze data more efficiently, and leverage AI to enhance your productivity. If you are already an experienced developer, please help me spread the word and encourage your non-developer friends to learn a little bit of coding. I hope you'll check out the first two short courses here!

Andrew Ng

1,226,422 Aufrufe • vor 2 Jahren

fine, i'll build it myself, open source ofc Launching Three-Maps, a rapid blockout editor for building game maps for threejs games: Create a floor plan in 2D, automatically generate 3D levels from it, edit them, export to .glb and use in your games (see end of video) Features: - Floorplan 2D: A 2D canvas to map out the floor - Edit Mode for Objects: Edit Vertices/Edges/Faces, extrude, bevel, fillet and chamfer - Brush Mode: Rapidly build map elements with a RealtimeCSG like experience. Cubes, Stairs, Doors, Arch, Cylinder, Custom polygons. Yes, you can even curve the stairs - Modifiers: Yes, you read that right, slap that array modifier on your pillar and call it a day - Terrain Generator: Perlin, Voronoi, you name it. Oh yes, you can rasterize it and edit every single vertex in edit mode. Keyboard shortcuts are mostly same as blender to activate that muscle memory (G/R/S, axis lock XYZ) Soon: - AI integration. Boot that MCP and directly connect your fav AI agent to build the floorplan, generate 3D maps and more (you will love how this movie ends) It's a little rough and in early, very early alpha so come and join as a contributor instead of calling it slop It's all vibe coded btw, i have no idea what the code does I need this to build my game, as i'm a total blender noob and threejs is great, so why not? Outshipping every CAD and 3D startup just because i want to build a game, that's how you accelerate
1:54

fine, i'll build it myself, open source ofc Launching Three-Maps, a rapid blockout editor for building game maps for threejs games: Create a floor plan in 2D, automatically generate 3D levels from it, edit them, export to .glb and use in your games (see end of video) Features: - Floorplan 2D: A 2D canvas to map out the floor - Edit Mode for Objects: Edit Vertices/Edges/Faces, extrude, bevel, fillet and chamfer - Brush Mode: Rapidly build map elements with a RealtimeCSG like experience. Cubes, Stairs, Doors, Arch, Cylinder, Custom polygons. Yes, you can even curve the stairs - Modifiers: Yes, you read that right, slap that array modifier on your pillar and call it a day - Terrain Generator: Perlin, Voronoi, you name it. Oh yes, you can rasterize it and edit every single vertex in edit mode. Keyboard shortcuts are mostly same as blender to activate that muscle memory (G/R/S, axis lock XYZ) Soon: - AI integration. Boot that MCP and directly connect your fav AI agent to build the floorplan, generate 3D maps and more (you will love how this movie ends) It's a little rough and in early, very early alpha so come and join as a contributor instead of calling it slop It's all vibe coded btw, i have no idea what the code does I need this to build my game, as i'm a total blender noob and threejs is great, so why not? Outshipping every CAD and 3D startup just because i want to build a game, that's how you accelerate

robot 2.0

107,749 Aufrufe • vor 7 Monaten

I help street dogs and the most common question I get is… Why don’t you take them home or find them a home? The answer is because we feed about 800 at the moment. Poppy here is a really good example because I adore here and I thought I’d explain what she gets… ✂️ It took me 2 months to build up trust but I caught her and got her sterilized meaning no more suffering with puppies. 🩸 While getting that operation the vet discovered major complications (Pyometra) which was about to kill her. Luckily that’s all fixed up and her stitches came out this week. 👷🏽‍♂️ I found her a place with some migrant workers. They don’t own her but they tolerate her. Nothing bad will happen her there and she is safe from other dogs who were attacking her. 🛢️ We delivered her very own house. The locals are happy for her to live in it. She now has shelter and a safe place. 🥘 Poppy gets two wholesome home cooked meals per day delivered. 💊 She has preventative medicines to stop fleas and ticks 💉 She is up to date with all her shots 🥰 Although short she gets a little bit of love each day in passing which she has grown to enjoy. So this is the best solutions for as many dogs as I can do. It’s not perfect but it improves their lives massively and gives them a chance and some basics. All that only costs about $100 max. 🏡 I am always working on forever homes and have 5 getting their paperwork down ready to fly (Rodney, Hope, Lottie etc) but 800 dogs out there need instant solutions which is what these are. Quick wins for the dogs. It’s not perfect but it’s nice to know that Poppy is at least alive thanks to her operation, not suffering thanks to simple medicines and has shelter and is out of immediate danger. ✅
0:50

I help street dogs and the most common question I get is… Why don’t you take them home or find them a home? The answer is because we feed about 800 at the moment. Poppy here is a really good example because I adore here and I thought I’d explain what she gets… ✂️ It took me 2 months to build up trust but I caught her and got her sterilized meaning no more suffering with puppies. 🩸 While getting that operation the vet discovered major complications (Pyometra) which was about to kill her. Luckily that’s all fixed up and her stitches came out this week. 👷🏽‍♂️ I found her a place with some migrant workers. They don’t own her but they tolerate her. Nothing bad will happen her there and she is safe from other dogs who were attacking her. 🛢️ We delivered her very own house. The locals are happy for her to live in it. She now has shelter and a safe place. 🥘 Poppy gets two wholesome home cooked meals per day delivered. 💊 She has preventative medicines to stop fleas and ticks 💉 She is up to date with all her shots 🥰 Although short she gets a little bit of love each day in passing which she has grown to enjoy. So this is the best solutions for as many dogs as I can do. It’s not perfect but it improves their lives massively and gives them a chance and some basics. All that only costs about $100 max. 🏡 I am always working on forever homes and have 5 getting their paperwork down ready to fly (Rodney, Hope, Lottie etc) but 800 dogs out there need instant solutions which is what these are. Quick wins for the dogs. It’s not perfect but it’s nice to know that Poppy is at least alive thanks to her operation, not suffering thanks to simple medicines and has shelter and is out of immediate danger. ✅

Niall Harbison

289,950 Aufrufe • vor 3 Jahren

Hell froze over: announcing FormKit for React. Secretly framework-agnostic since inception, today we’re open sourcing the most popular Vue form library…for React. Why is this a big deal? 1. Forms are still hard. We (the creators of FormKit) thought form libraries were no longer necessary, given the trajectory of coding agents. It turns out we were wrong, and we learned this the hard way. Need repeating conditional fields nested 3 layers deep inside a dynamic component, with accessibility, validation, internationalization, and backend error placement? Turns out coding agents aren’t great at that. It’s table stakes for FormKit. 2. Single component. This matters more than you would think, but FormKit doesn’t ship lots of different components each with its own props. Instead, it has a single one: and unified props. This was done to provide a better DX to human engineers. It makes it easy to spot when a given component was part of the form’s data structure vs a presentational component. It turns out this matters even more to coding agents than humans. No matter where your coding agent is, whenever it sees “FormKit” it immediately knows “oh, that’s part of the form’s data”. 3. No plumbing. FormKit doesn’t require any manual data collection, event listening, or state tracking. It does all this for you on a heavily tested, framework agnostic, self-assembling graph. The only code your agent needs to write is declarative templates and submission handlers that respond to the state. 4. Dense colocation. FormKit’s syntax happens to be ideal for coding agents; nearly everything you need to know about a given input is *on* the input: Colocation dramatically improves the efficacy of coding agents. 5. DOM. FormKit, unlike most form frameworks in React, renders the actual DOM. This also increases colocation and best practices, meaning your coding agent is far more likely to produce consistent and high-quality output that looks and acts the way its supposed to. 6. Schema. FormKit’s own inputs are not written using Vue or React — instead, FormKit has its own render schema — think of it like an AST for the DOM — and you can modify it on the fly. It’s not very human-friendly to write, but it turns out most models are already pretty well trained on FormKit’s schema. Want your inputs to look a bit different on one form than another? No problem, your coding agent can easily make those changes *without* modifying the JSX structure at all. Oh, and any inputs you create for Vue work with React and vice versa. 7. Plugins. FormKit leans into the unstructured tree graph hard. The graph doesn’t just collect data, it also passes down configuration and plugins. Want one form to work a bit differently than another one? No problem — just add a plugin to the top of that form or group and its children will all receive that feature. You can even mass assign props and configuration this way. Of course, FormKit has been solving these exact issues for a long time, but it wasn’t until we started using it on our own projects with coding agents that we realized what a huge advantage it is. With so many people using coding agents with React, it made sense to unveil FormKit for what it has always been — a completely framework-agnostic form framework that happens to unlock your coding agents. ➡️
1:00

Hell froze over: announcing FormKit for React. Secretly framework-agnostic since inception, today we’re open sourcing the most popular Vue form library…for React. Why is this a big deal? 1. Forms are still hard. We (the creators of FormKit) thought form libraries were no longer necessary, given the trajectory of coding agents. It turns out we were wrong, and we learned this the hard way. Need repeating conditional fields nested 3 layers deep inside a dynamic component, with accessibility, validation, internationalization, and backend error placement? Turns out coding agents aren’t great at that. It’s table stakes for FormKit. 2. Single component. This matters more than you would think, but FormKit doesn’t ship lots of different components each with its own props. Instead, it has a single one: and unified props. This was done to provide a better DX to human engineers. It makes it easy to spot when a given component was part of the form’s data structure vs a presentational component. It turns out this matters even more to coding agents than humans. No matter where your coding agent is, whenever it sees “FormKit” it immediately knows “oh, that’s part of the form’s data”. 3. No plumbing. FormKit doesn’t require any manual data collection, event listening, or state tracking. It does all this for you on a heavily tested, framework agnostic, self-assembling graph. The only code your agent needs to write is declarative templates and submission handlers that respond to the state. 4. Dense colocation. FormKit’s syntax happens to be ideal for coding agents; nearly everything you need to know about a given input is *on* the input: Colocation dramatically improves the efficacy of coding agents. 5. DOM. FormKit, unlike most form frameworks in React, renders the actual DOM. This also increases colocation and best practices, meaning your coding agent is far more likely to produce consistent and high-quality output that looks and acts the way its supposed to. 6. Schema. FormKit’s own inputs are not written using Vue or React — instead, FormKit has its own render schema — think of it like an AST for the DOM — and you can modify it on the fly. It’s not very human-friendly to write, but it turns out most models are already pretty well trained on FormKit’s schema. Want your inputs to look a bit different on one form than another? No problem, your coding agent can easily make those changes *without* modifying the JSX structure at all. Oh, and any inputs you create for Vue work with React and vice versa. 7. Plugins. FormKit leans into the unstructured tree graph hard. The graph doesn’t just collect data, it also passes down configuration and plugins. Want one form to work a bit differently than another one? No problem — just add a plugin to the top of that form or group and its children will all receive that feature. You can even mass assign props and configuration this way. Of course, FormKit has been solving these exact issues for a long time, but it wasn’t until we started using it on our own projects with coding agents that we realized what a huge advantage it is. With so many people using coding agents with React, it made sense to unveil FormKit for what it has always been — a completely framework-agnostic form framework that happens to unlock your coding agents. ➡️

Justin Schroeder

11,705 Aufrufe • vor 6 Monaten

The number one question I get in the Claude Code / Cowork Community: "how do I share my Cowork skills with my team?" Here's the problem. You build a great skill. You zip it up. You drop it in Slack. Your teammate downloads it, uploads it, and maybe it works. Maybe they upload it wrong. Maybe you update the skill next week and nobody gets the new version. You're now maintaining skills through chat messages and hoping for the best. That doesn't scale. I just put out a video breaking down the three methods I've tested for sharing skills and plugins across a team. From dead simple to fully synced. Method 1: Shared drive (Google Drive, SharePoint, etc). You put your skill files in a shared folder. Teammates download and upload them into Cowork. It works, but updates are manual and there's no version control. Method 2: Built-in sharing on Team and Enterprise plans. You can share any skill directly with a colleague or publish it to your org directory. When you update the skill, everyone gets the update automatically. This is the easiest path if you're on a paid plan. The catch: there's no approval workflow for org-wide sharing, so set a clear owner. Method 3: GitHub repo. This is what I use. Your entire Cowork workspace -- skills, plugins, claude.md, folder structure, project files -- lives in a private repo. Teammates clone it. When you push an update, they pull it. Everyone stays in sync. You get version history, access control, and a single source of truth. The GitHub method sounds technical, but it's really just two steps: clone the repo, point Cowork at the folder. I walk through the whole thing in the video, including how to use .gitignore to keep personal files (like your morning briefing) out of the shared repo. This works for Cowork, Claude Code, and Open Codex. The infrastructure is the same. Full video linked below. If you've found a different approach that works for your team, I want to hear about it. Comment or reply and let's figure out the best practices together.
0:51

The number one question I get in the Claude Code / Cowork Community: "how do I share my Cowork skills with my team?" Here's the problem. You build a great skill. You zip it up. You drop it in Slack. Your teammate downloads it, uploads it, and maybe it works. Maybe they upload it wrong. Maybe you update the skill next week and nobody gets the new version. You're now maintaining skills through chat messages and hoping for the best. That doesn't scale. I just put out a video breaking down the three methods I've tested for sharing skills and plugins across a team. From dead simple to fully synced. Method 1: Shared drive (Google Drive, SharePoint, etc). You put your skill files in a shared folder. Teammates download and upload them into Cowork. It works, but updates are manual and there's no version control. Method 2: Built-in sharing on Team and Enterprise plans. You can share any skill directly with a colleague or publish it to your org directory. When you update the skill, everyone gets the update automatically. This is the easiest path if you're on a paid plan. The catch: there's no approval workflow for org-wide sharing, so set a clear owner. Method 3: GitHub repo. This is what I use. Your entire Cowork workspace -- skills, plugins, claude.md, folder structure, project files -- lives in a private repo. Teammates clone it. When you push an update, they pull it. Everyone stays in sync. You get version history, access control, and a single source of truth. The GitHub method sounds technical, but it's really just two steps: clone the repo, point Cowork at the folder. I walk through the whole thing in the video, including how to use .gitignore to keep personal files (like your morning briefing) out of the shared repo. This works for Cowork, Claude Code, and Open Codex. The infrastructure is the same. Full video linked below. If you've found a different approach that works for your team, I want to hear about it. Comment or reply and let's figure out the best practices together.

JJ Englert

16,176 Aufrufe • vor 6 Monaten

Hi everyone! Just rolled out access for NoSpoon Studios to the first 110 folks or so. Huge thanks to Karan and Amit at Luma - thanks to them, I have a few more people that had commented getting complimentary beta access soon as well :). These videos are created with a single agent that does everything from concept to completion (including editing the video together). Therer are longer options too, but for the sake of cost and this demo, you'll be working with 20s max generations. The entire agent was built to only run Ray2 as the video model. My stack is this custom agent of mine (using OAI) > Ray2 for the video > Replit for the app for now. In the meantime, for those with access: here's a video tutorial on how to use the site. I'm quite exhausted, but here's the gist: 1. Sign up (and remember your password lol). Beta testers got free credits, but these are a bit limited - rolling out to a few more peeps but have to budget and need to expand my current code (which means redeploying - so expect more of you to have 2 free credits and access tmr! I have to find out the max I can allot with budget). 2. Just hit "generate short video" without anything in the prompt box and the agent will start immediately with the logline. Be very patient, wait about 6-8 minutes, and it will continue to output all of the scenes and processing - it's very important you do not refresh or navigate away from that tab at this time. You'll see your final video generated and displayed at the bottom of your screen once complete, along with a watermark (paid users don't have a watermark). You can also access your loglines and videos in your history tab, too :). You must refresh the page only after your generation in order to generate a new video - otherwise you'll lose your generation (annoying I know). 3. You can also input your own custom prompt! Control the story this way. Single words work great even, like "thriller" or "spy thriller set in greece" or even "black and white film noir" etc etc. It's not as great with animated styles yet for consistency, just a heads up. 4. I'm exhausted, I'm sure there's a lot I'm missing. But welcome to the NoSpoon Studios soft beta! More soon! Feel free to share your generations if you are already in. I'll see you all tomorrow night :) <3 Thanks everyone! More soon.
5:25

Hi everyone! Just rolled out access for NoSpoon Studios to the first 110 folks or so. Huge thanks to Karan and Amit at Luma - thanks to them, I have a few more people that had commented getting complimentary beta access soon as well :). These videos are created with a single agent that does everything from concept to completion (including editing the video together). Therer are longer options too, but for the sake of cost and this demo, you'll be working with 20s max generations. The entire agent was built to only run Ray2 as the video model. My stack is this custom agent of mine (using OAI) > Ray2 for the video > Replit for the app for now. In the meantime, for those with access: here's a video tutorial on how to use the site. I'm quite exhausted, but here's the gist: 1. Sign up (and remember your password lol). Beta testers got free credits, but these are a bit limited - rolling out to a few more peeps but have to budget and need to expand my current code (which means redeploying - so expect more of you to have 2 free credits and access tmr! I have to find out the max I can allot with budget). 2. Just hit "generate short video" without anything in the prompt box and the agent will start immediately with the logline. Be very patient, wait about 6-8 minutes, and it will continue to output all of the scenes and processing - it's very important you do not refresh or navigate away from that tab at this time. You'll see your final video generated and displayed at the bottom of your screen once complete, along with a watermark (paid users don't have a watermark). You can also access your loglines and videos in your history tab, too :). You must refresh the page only after your generation in order to generate a new video - otherwise you'll lose your generation (annoying I know). 3. You can also input your own custom prompt! Control the story this way. Single words work great even, like "thriller" or "spy thriller set in greece" or even "black and white film noir" etc etc. It's not as great with animated styles yet for consistency, just a heads up. 4. I'm exhausted, I'm sure there's a lot I'm missing. But welcome to the NoSpoon Studios soft beta! More soon! Feel free to share your generations if you are already in. I'll see you all tomorrow night :) <3 Thanks everyone! More soon.

Kiri

15,518 Aufrufe • vor 1 Jahr