Skip to main content
100%

Gist bb77ce7178ad897fb479533651191948

✓ Published0🌍 Public
UUtopiah
Last edited May 18, 2020
Created on May 18, 2020

This example pairs a dat.GUI control panel with two GSAP timelines to animate text in a Mozilla Hubs scene. It shows a FizzyText object whose message can be edited live, while sliders for “jump_anim” and “scale_anim” scrub through pre-defined timeline animations. The sliders call `tl_scale.seek(value*1000)` and `tl_jump.seek(value*1000)` on change, mapping slider positions to millisecond offsets. The code also positions the GUI with `gui.domElement.style.marginRight`, demonstrating direct DOM styling alongside the animation controls.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 0249b783d54041950693e61274d62dcc

The example shows a 3D model loaded from Google Poly being controlled through a dat.GUI interface inside Mozilla Hubs, an A-Frame-based social VR environment. A text label displays “dat.gui x Mozilla Hubs” alongside sliders and toggles. The scale slider adjusts the model’s uniform size via `object3D.scale.setScalar`, and the visibility toggle hides or shows the object. The code uses A-Frame’s `media-loader` component to fetch the model, `networked` for multi-user sync, and dat.GUI’s `onChange` callbacks to update the Three.js scene graph.

UUtopiah
70% match
Loading thumbnail…

Gist 8b0b98e2a3e4a0c32263ad0790c632d6

This example shows an interactive neumorphism-inspired control panel rendered in the browser. It uses D3.js to drive a force-directed network layout of soft, extruded UI elements, with each node and edge drawn as a separate SVG path. The code relies on D3’s `forceSimulation` for physics-based positioning and `transition.attrTween` for smooth color and shape morphing. The rendering approach is CSS-driven, leveraging box-shadow and background gradients to simulate the neumorphic raised and inset effects. The design is based on the neumorphism.io style guide, with the source data being a static JSON of element definitions.

MMistyBlunch
66% match
Loading thumbnail…

Gist b4bdcd5422cc8c12b97fac3776955cb2

This animated presentation showcases a slide deck within Mozilla Hubs, a virtual reality environment, using Three.js and AFRAME to load and position image-based slides in 3D space. The slides, sourced from Unsplash and Twitter, display content about the author’s work with the European Parliament, UNICEF, and Hubs scripting. A custom `slides` object controls navigation via `nextSlide()`, scaling the active slide, and can auto-advance or drop all content using `startAutoPresent()` and `dropAllContent()`. The `media-loader` and `networked` components handle asset loading and sharing in the scene.

UUtopiah
65% match
Loading thumbnail…

Gist a8eb67fdfa76e1f3188f

This example demonstrates a scrolling visualization where sections of text trigger changes in a fixed graphic. The page uses D3’s custom `graphScroll` function to monitor scroll position, highlighting the active text section and applying CSS classes to the visualization to indicate whether it is fixed, scrolling, or below the viewport. The graphic responds to scroll progress, with sections becoming active as the user moves through the page, and the visualization dynamically updates its position relative to the viewport. Rendered with SVG and animation, the piece creates a scroll-driven storytelling experience where the graphic stays pinned while the text scrolls past.

BBenHeubl
64% match
Loading thumbnail…

DatGUI Demo

This example showcases dat.GUI, a lightweight JavaScript library for creating on-screen control panels that manipulate variables in real time. The code instantiates a GUI object and populates it with a variety of input types, including text fields, checkboxes, buttons, sliders with defined minimum, maximum, and step values, dropdown menus, and color pickers. It also demonstrates organizing controls into nested folders and using the `remember()` method to preserve state. No data visualization occurs; the demo focuses exclusively on the GUI's API and its handling of different parameter formats like CSS strings, RGB arrays, and HSV objects.

Ddvinubius
64% match
Loading thumbnail…

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.

UUtopiah
64% match
Loading thumbnail…

SVG text experiment - Interactive tool

This interactive tool arranges text cards around a central, dynamically generated phrase, drawing words from a CSV taxonomy of themes like body, material, and action. Users can adjust settings such as card count, theme, and pattern to remix content in real time. The visualization uses D3.js to load data, render SVG, and transition text, while GSAP’s TimelineMax and TextPlugin handle card rotation and path-based text animation. Center text updates recursively via D3 transitions, creating a generative brainstorming interface.

LLaurens
63% match
Loading thumbnail…

Codu_presentation

A click-driven narrative presentation demonstrates text animation and custom Svelte components for storytelling. It uses GSAP with TextPlugin to sequence title and subtitle changes, while animating SVG circles through different states: initially as a row, then collapsing to zero, and finally repositioning into a bar chart with axes. The visualization references geographic data via a CSV file containing positional coordinates and color groups. On the final step, a video embedded from GitHub appears to complement the narrative flow.

Rrudi.oreillymeehan@gmail.com
62% match