Gist 9e8c4fa996831859a1c099a9906f84e9

Gist 27b0eae72764e9e50963cdf7592e7849

This animation tracks avatar positions in a Mozilla Hubs virtual room over time. A JavaScript interval samples connected users every second, storing their networked IDs and Three.js position vectors in localStorage. The visualization reconstructs movement trails from these recorded snapshots, showing how participants navigate the shared 3D space. It uses the browser’s `setInterval` and `localStorage` APIs, with the Hubs network avatar attributes providing positional data for each connected client.

83% match

Gist 1866a62d3cb6c066d421a78abd1324e2

This visualization monitors GitHub presence lists by displaying the last four characters of each contributor’s hash in the browser console. It uses a mouseover event listener on presence-list items to extract and log the hash suffix. The code relies on the standard Document Object Model (DOM) API with `querySelectorAll` and `addEventListener`, and does not employ external libraries. The data source is the live presence list rendered by GitHub’s interface, making the example a lightweight, dependency-free tool for observing participant hashes during collaborative sessions.

74% match

Gist 44d38c33dc9ab38f123530e4db1c49b8

This example shows a live console log of participant names appearing in a Hub’s presence log, capturing each new addition with a Unix timestamp. A `MutationObserver` watches the DOM node matching `[class^=presence-log]` and, on every child-list mutation, iterates over added nodes to print `Date.now()` and the node’s text content. The code relies solely on the browser’s native `MutationObserver` API, with no external libraries or rendering. It provides a minimal, text-based trace of when users join or appear in the chat, useful for auditing participation over time.

73% match

Gist a0f917a785ce1a3d2b4ca98ec44c78c3

This example demonstrates a webcam video texture attached to a user’s avatar in a Mozilla Hubs room, with the video element repositioned and scaled to follow the avatar’s movements. The animation runs continuously via a `setInterval` that updates the video’s position and rotation relative to the avatar rig. It uses A-Frame’s `AFRAME.scenes`, the Networked-Aframe (NAF) API for taking ownership of the media element, and JavaScript DOM queries to locate the webcam element by its source hash. The rendering relies on React integration for the Hubs Cloud custom client.

72% match

Gist db569066a21ec6afce10f185d9c1f60b

This example demonstrates a text-based bot connecting to a Mozilla Hubs room, logging presence updates and chat messages, and sending a greeting after a delay. It uses the ReticulumClient and HubState classes from the Hubs Discord Bot libraries to establish a Phoenix channel connection, while HubStats and PresenceRollups track room occupancy over time. The bot reads configuration from dotenv files and logs timestamped events to the console, showing real-time hub activity without any visual rendering.

Gist c5f5efe89446d629dad8dba8cfe57dde

This visualization maps the positions of networked avatars in a 3D scene onto a 2D radar-style display using emoji. Every 500 milliseconds, a script queries all elements with the `networked-avatar` attribute, reads their Three.js `object3D.position`, and places corresponding emoji spans on the page using fixed positioning. The local user appears as a grinning emoji, while others use a default smiley. Zombie emoji are removed when their source avatar disappears. The code relies on DOM query selectors and the Three.js scene graph, with no external charting library.

Gist 20e943b854f7d56bb5c7bf168325aacc

Three users in a networked Hubs room share a virtual space where red laser objects and ring-shaped hubs orbit around avatars. The code uses A-Frame and the Networked-Aframe (NAF) API to synchronize positions and ownership of entities, with `setInterval` driving an animation loop that calls `attachObjAvatars` to reposition objects every 100 milliseconds. It also demonstrates `NAF.utils.takeOwnership` for controlling shared objects and `getElementsFromHash` to select media-loaded assets by their source URL. The scene shows mixed crowns and lasers attached above named staff avatars, with continuous rotation updates on the objects.

Gist a0b28a0f9e9463498f93690d50c763eb

This example shows a cross-platform remote camera control system, where Twitch chat messages physically move the camera rig in a Mozilla Hubs virtual room. A MutationObserver on the Twitch chat log captures new messages and timestamps, storing them via a placeholder JSON store, while a polling loop in Hubs fetches that history and triggers panning animations toward a Google Poly burger model or resets the camera to its origin. The camera movement uses the A-Frame animation timeline and Three.js’s `object3D.position`, with the camera identity toggled by modifying the Hubs user profile display name.