Loading video...

Video Failed to Load

Go Home

Coded with Grok 4 - An interactive 3D visualizer with real-time audio reactivity, built using Three.js. Demo/code in reply. 👇🔊

techartist_'s profile picture

Techartist

13,865 subscribers

1,475,993 views • 9 months ago •via X (Twitter)

Science & TechnologyEducationArts
LIVE

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

Coded with Grok 4 – morphing 3D wireframe geometries with responsive click/tap-to-pulse animations, built with Three.js. Demo/code in reply. 👇
0:26

Coded with Grok 4 – morphing 3D wireframe geometries with responsive click/tap-to-pulse animations, built with Three.js. Demo/code in reply. 👇

Techartist

1,005,826 views • 9 months ago

An interactive cyberpunk data visualization built with xAI's Grok 4 using Three.js. Clicking "Execute" morphs thousands of particles between three procedural forms. Dragging rotates the view and the on-screen switches toggle animations. Demo/code in the reply below. 👇
0:36

An interactive cyberpunk data visualization built with xAI's Grok 4 using Three.js. Clicking "Execute" morphs thousands of particles between three procedural forms. Dragging rotates the view and the on-screen switches toggle animations. Demo/code in the reply below. 👇

Techartist

1,421,014 views • 10 months ago

Digital Metamorphosis... Interactive real-time 3D particle display of 60,000 points that smoothly morph between shapes with bloom, motion trails and color themes, built with Grok 4 from xAI using Three.js and GLSL shaders.
0:36

Digital Metamorphosis... Interactive real-time 3D particle display of 60,000 points that smoothly morph between shapes with bloom, motion trails and color themes, built with Grok 4 from xAI using Three.js and GLSL shaders.

Techartist

13,295 views • 10 months ago

Coded with Grok 4 from xAI , built this Three.js demo using a 3D model from its examples. Imagine building on it for fun school learning or an immersive game/web experience. Grok 4's coding abilities open up creative possibilities for everyone.
0:28

Coded with Grok 4 from xAI , built this Three.js demo using a 3D model from its examples. Imagine building on it for fun school learning or an immersive game/web experience. Grok 4's coding abilities open up creative possibilities for everyone.

Techartist

58,303 views • 10 months ago

An interactive 3D particle system visualizing dynamic attractors. Coded with Grok 4 from xAI using Three.js and custom GLSL shaders for particle behavior and post-processing effects like Unreal Bloom. Click morphs between generative patterns.
0:42

An interactive 3D particle system visualizing dynamic attractors. Coded with Grok 4 from xAI using Three.js and custom GLSL shaders for particle behavior and post-processing effects like Unreal Bloom. Click morphs between generative patterns.

Techartist

14,276,434 views • 11 months ago

Interactive 3D particle simulation built with Three.js (WebGL), JavaScript (ES6), & GLSL shaders. Features shape morphing, post-processing (Bloom, custom effects), OrbitControls. Source code link in the reply below. 👇
0:50

Interactive 3D particle simulation built with Three.js (WebGL), JavaScript (ES6), & GLSL shaders. Features shape morphing, post-processing (Bloom, custom effects), OrbitControls. Source code link in the reply below. 👇

Techartist

29,367 views • 10 months ago

Prompted xAI's Grok 4 with the code from my quoted post and built this interactive 3D particle system with Three.js, GSAP, and WebGL. Features include shape morphing, bloom effects, and fluid animations.
0:36

Prompted xAI's Grok 4 with the code from my quoted post and built this interactive 3D particle system with Three.js, GSAP, and WebGL. Features include shape morphing, bloom effects, and fluid animations.

Techartist

106,082 views • 10 months ago

Multi-talented Filip ↟ shares an incredible article with us today: learn how he built a sci-fi-worthy 3D audio visualizer with Three.js, GSAP & Web Audio API — glowing shaders, draggable UI, and beats that shape the visuals in real time. 🎶🎧 👉
0:58

Multi-talented Filip ↟ shares an incredible article with us today: learn how he built a sci-fi-worthy 3D audio visualizer with Three.js, GSAP & Web Audio API — glowing shaders, draggable UI, and beats that shape the visuals in real time. 🎶🎧 👉

Codrops

15,391 views • 11 months ago

An interactive 3D visualization using Three.js and WebGL. Button click activates energy pulses in this dynamic cosmic portal with custom shaders and post-processing effects. Source code link in the reply below. 👇🏼
0:43

An interactive 3D visualization using Three.js and WebGL. Button click activates energy pulses in this dynamic cosmic portal with custom shaders and post-processing effects. Source code link in the reply below. 👇🏼

Techartist

15,679 views • 11 months ago

A dynamic 3D particle system built with Three.js, styled with Tailwind CSS, and enhanced by custom GLSL shaders. Features interactive pattern transitions, camera controls, and animation toggles for an immersive visual experience. Source code link in the reply below. 👇🏼
0:31

A dynamic 3D particle system built with Three.js, styled with Tailwind CSS, and enhanced by custom GLSL shaders. Features interactive pattern transitions, camera controls, and animation toggles for an immersive visual experience. Source code link in the reply below. 👇🏼

Techartist

14,014 views • 11 months ago

An interactive 3D simulation and visualization of a black hole, leveraging Three.js for rendering and custom GLSL shaders to achieve stunning details in the event horizon, starfield, and accretion disk. Coded using newly released Grok 4 from xAI
0:30

An interactive 3D simulation and visualization of a black hole, leveraging Three.js for rendering and custom GLSL shaders to achieve stunning details in the event horizon, starfield, and accretion disk. Coded using newly released Grok 4 from xAI

Techartist

2,986,019 views • 11 months ago

planking for penguins 🐧 a real-time exercise tracking game, coded with Grok 4 (xAI) this uses mediapipe AI vision to detect when the player has proper plank form (knees-hips-shoulders in a horizontal line, elbows low) also using Three.js for visuals and tonejs for audio this all runs in real-time in the browser, using a regular laptop + webcam 🔗 live demo below
0:40

planking for penguins 🐧 a real-time exercise tracking game, coded with Grok 4 (xAI) this uses mediapipe AI vision to detect when the player has proper plank form (knees-hips-shoulders in a horizontal line, elbows low) also using Three.js for visuals and tonejs for audio this all runs in real-time in the browser, using a regular laptop + webcam 🔗 live demo below

AA

244,071 views • 10 months ago

I'm making games with Grok 4 to force myself to work out > do a chin-up, save a cat > push-ups for puppies > planking for penguins coded with Grok 4 (built by xAI), using mediapipe AI vision and Three.js for animations body movement is tracked in real-time and scores are only counted when the exercise is done with proper form
0:32

I'm making games with Grok 4 to force myself to work out > do a chin-up, save a cat > push-ups for puppies > planking for penguins coded with Grok 4 (built by xAI), using mediapipe AI vision and Three.js for animations body movement is tracked in real-time and scores are only counted when the exercise is done with proper form

AA

175,362 views • 10 months ago

X-Rays visualizer using Three.js render targets + postprocessing shaders Live demo + github 👇
0:25

X-Rays visualizer using Three.js render targets + postprocessing shaders Live demo + github 👇

Jean Mazouni

24,511 views • 11 months ago

AI 3D workflows for web are getting scary good. Here is a demo with a large splat background (+LoD), mesh character, spatial audio, VR support, and lighting. I was able to create it in a few hours (repo in reply). built with Three.js spark World Labs Audio on :)
1:03

AI 3D workflows for web are getting scary good. Here is a demo with a large splat background (+LoD), mesh character, spatial audio, VR support, and lighting. I was able to create it in a few hours (repo in reply). built with Three.js spark World Labs Audio on :)

martin_casado

82,439 views • 6 months ago

Built a custom tool using Three.js 3RF by Poimandres to convert SVGs to 3D Models in real time ⚡️
0:24

Built a custom tool using Three.js 3RF by Poimandres to convert SVGs to 3D Models in real time ⚡️

Malay Vasa

221,839 views • 2 years ago

i'm making a musical instrument rotate your hands to change tempo and note cycles experimenting with an audio-reactive radial UI design created with grok 4, mediapipe AI vision, tonejs, Three.js 🔗 runs in real-time in the browser, link in comments
0:35

i'm making a musical instrument rotate your hands to change tempo and note cycles experimenting with an audio-reactive radial UI design created with grok 4, mediapipe AI vision, tonejs, Three.js 🔗 runs in real-time in the browser, link in comments

AA

14,429 views • 9 months ago

creating / controlling 3D shapes with hand gestures 👋💠 built with Three.js and MediaPipe computer vision 🔗 demo + code in the comments let me know of any requests for future demos / tutorials!
0:58

creating / controlling 3D shapes with hand gestures 👋💠 built with Three.js and MediaPipe computer vision 🔗 demo + code in the comments let me know of any requests for future demos / tutorials!

AA

221,466 views • 1 year ago

omg.. I can't believe Gemini 3 can do this it can generate an entire 3D interactive building facility management system(digital twin) using Three.js.. no code, just text prompt it analyse, simulate real time data to identify potential issues tutorial and prompts in comments
0:21

omg.. I can't believe Gemini 3 can do this it can generate an entire 3D interactive building facility management system(digital twin) using Three.js.. no code, just text prompt it analyse, simulate real time data to identify potential issues tutorial and prompts in comments

el.cine

680,528 views • 6 months ago

Holy moly, I finally vibe coded a website I’ve always dreamt of building 🥹 Nah, it’s not a Blender model. Not even for 3D podium. It’s pure geometry built using Three.js with color maps (albedo), spring-based physics, a hybrid DOM, real-time planar reflections, and more. Completely vibe coded all using Gemini 3 Pro in Google AI Studio!! Live:
0:22

Holy moly, I finally vibe coded a website I’ve always dreamt of building 🥹 Nah, it’s not a Blender model. Not even for 3D podium. It’s pure geometry built using Three.js with color maps (albedo), spring-based physics, a hybrid DOM, real-time planar reflections, and more. Completely vibe coded all using Gemini 3 Pro in Google AI Studio!! Live:

The Bugged Dev

159,802 views • 4 months ago