TheatreJS keyframes and WebMMuxer video encoding

canvas recorder (use theRecorder.stop() to stop and save as .webm video)

This example records the live drawing on a canvas element to a WebM video file. It uses the `captureStream()` method on a canvas with the class `drawingArea` and a custom `MediaRecorder` object to capture the stream. The recorder collects data chunks via `ondataavailable` and, upon stopping, stops the video track and saves the recorded chunks as `test.webm` using a Blob and object URL. The source code relies on the canvas-recorder library from GitHub.

TTBD

61% 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.

61% match

Gist 1c55837a8248d790382976cbb62f37c1

This example displays a volumetric video of a person, loaded and played inside a WebGL scene using the Depthkit.js library. The code creates a script element to load the latest Depthkit.js version, then instantiates a `Depthkit` object to fetch a metadata text file and an MP4 video from a proxy URL. Once loaded, the resulting character is added to the A-Frame scene’s root object, and playback is initiated. The setup targets A-Frame’s boilerplate “hello world” page but fails on Mozilla Hubs due to its custom world-update logic.

60% match

Photobooth

This example creates a photobooth that captures images from a user's webcam and displays them in a gallery. The video monitor cycles through CSS filter effects—including grayscale, sepia, blur, hue rotations, and inversion—when clicked, while a hidden canvas draws the current video frame to generate snapshot images. The capture process uses the `navigator.getUserMedia` API for webcam streaming and the canvas element's `drawImage` and `toDataURL` methods to save frames as webp images. The animations are powered by JavaScript timers controlling the video element and canvas operations.

11wheel

Gist 324400fd51b08d5e22d9e2f3b164d087

An interactive WebXR scene displays a star model that animates through a sequence of scale and position changes. The star scales up and down while simultaneously jumping vertically, creating a looping visual effect. The code uses A-Frame and the anime.js library, specifically `AFRAME.ANIME.default.timeline`, to build two synchronized timelines: one targeting the star’s `object3D.scale` and another targeting its `object3D.position`. The star originates from a Google Poly asset loaded via `getFirstElementFromHash`. The animation restarts both timelines and seeks to a specific time offset to align the motion.

JavaScript tips

This animated slideshow presents JavaScript coding tips and techniques, covering ES6 modules, destructuring, monkey patching, node.js binary scripts, and animation patterns. The code examples demonstrate practical implementations using TweenMax for timeline-based animations, including a draw/anim pattern and a 1-second reference scaling approach. It also showcases event handling for CSS transitions and transform property detection. The rendering uses code blocks with syntax highlighting, and the animation presents each tip sequentially, with the source gist serving as the data for the displayed content.

Aabernier

Gist 0591ab79900b3fe44d8b1560e3c35f40

This example demonstrates a workflow for converting animated WebP files into GIF format. The script uses `iwatch` to monitor a directory for new WebP files, then extracts each frame with `webpmux` and converts the frames to PNG using ImageMagick’s `convert`. Finally, it assembles the PNG sequence into a GIF with `ffmpeg`, while cleaning up temporary files. The code relies on the WebP tools API, ImageMagick, and FFmpeg’s glob pattern to handle the batch conversion, showing a practical pipeline for format transformation.

Gist d9599cfc20b6d22a16a88e65dfa45115

Scrolleo demonstrates a scrolling-driven video playback technique, where page scroll position controls video frames with an inertial easing effect. The page presents two HTML5 videos that play and scrub as the user scrolls, mimicking Apple’s product page interactions. The implementation relies on the Scrolleo plugin, which uses `requestAnimationFrame` for smooth updates and applies an acceleration value to create momentum-based scrubbing. Videos are embedded directly in the page’s flow, with large vertical spacers ensuring ample scroll space. The code computes video timing based on scroll offset and duration, enabling frame-accurate control without explicit user interaction.

EEelsie