> For the complete documentation index, see [llms.txt](https://contract-wizard.gitbook.io/contract-wizard/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://contract-wizard.gitbook.io/contract-wizard/consume/universal-music-player/visualizer.md). # Visualizer The visualizer is part of the music player. It displays a 3d render of dancing characters, and cool visuals. ## 3D Dance Party The visualizer has dancing 3d models in 3d worlds. There's about 90 hotkeys, 100 animations, 48 avatars, 15 skies, 15 grounds, 17 props, and 6 sound guns with 9 samples each to load and play around with. Camera, speed controls, all sorts of controls! {% embed url="" %} ## Layers of Effects There's the 3d world with dancing characters, but there's also 3 more layers of effects that add to the vibes and customization. ### Milkdrop Visualizer The classic visuals of the milkdrop visualizer. Over 500 presets. High resolution, runs great! ### Custom Shaders You can add in your own custom shader code with the shader mode. Just turn it on in the menu and click through a list of preset shaders, or open up the shader options and enter in your own custom code. ### YouTube Layer You can watch youtube videos by turning on YouTube mode, choose from a preset list of videos to vibe to, or choose your own custom link. Save your favorite videos for easy access later. ### Reacting to YouTube Tracks Playing a YouTube track in the player? The visualizer works with that too. The first time you open the visualizer on a YouTube track, the browser asks to share this tab's audio — that's the visualizer's sound feed. Accept it and everything reacts to the video: milkdrop presets, custom shaders, the whole scene. One prompt per visit to the site. While the visualizer isn't listening yet — you skipped the prompt, or sharing stopped — a **Capture** button appears in its toolbar. Press it to attach. Chrome's own "Stop sharing" control is the off switch. Tab-audio sharing needs Chrome or Edge on desktop. Other browsers run the visualizer as usual on web3 tracks, but it stays calm on YouTube ones. #### Move and Resize You can move each of these layers around up and down, change the height and width of each window, and even change the layering of these extra layers in front or behind the dancing avatars. You can do this with hotkeys or in the menus. ## Drag and Drop You can bring your own assets to the visualizer! Bring your custom avatars, animations, 3d models, and skyboxes! ***VRM***, ***FBX***, ***GLB***, and ***HDR*** supported! ### Avatars The visualizer supports adding avatars through ***VRM files***. Drag and drop any ***VRM*** avatar and it should start dancing. ### Animations Drag an animation in the ***FBX file format***, done to Mixamo standards, for easy custom animation support. If your animation works with Mixamo rigs, and is an ***FBX*** file, you will be able to easily drag and drop any animation to get the characters dancing. ### 3D Models Drag any 3D model that is a ***GLB file format*** and it will be accepted as a prop/model. Then you can move it up and down, change the scale, and force physically based lighting if you have pre baked lighting. ### Skyboxes Drag any ***HDR image*** that is 8k resolution or less and it will be used as the skybox, and it will light the characters, ground and model with your ***HDR***. I don't know why I can't use larger than 8k resolution right now, so no gigabyte sized skies for now! #### Pew Pew! In FPS Mode, press e. Then you can play with fun samples while listening. {% embed url="" %} --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://contract-wizard.gitbook.io/contract-wizard/consume/universal-music-player/visualizer.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.