Template Reference¶
This document lists all available templates in What's Now Playing, organized by category with descriptions of their functionality.
Templates are HTML files that control how track information is displayed in various outputs like OBS, Discord, web browsers, and text files. For template variables, see Template Variables. For visual examples of templates in action, see the Gallery.
Special Templates¶
Gifwords¶
GIF word displays with fade effects
| Template | Description |
|---|---|
ws-gifwords-fade.htm |
GIF Words with Fade |
Special Layouts¶
Special purpose templates
| Template | Description |
|---|---|
ws-requests.htm |
Track Request Display |
Complex Templates¶
Complex Websocket¶
Complex WebSocket templates with multiple endpoints
| Template | Description |
|---|---|
ws-coverslideshow.htm |
Cover slideshow using multiple WebSocket endpoints |
Mtv Templates¶
Mtv Style¶
MTV-style layouts with customizable fade effects
| Template | Description |
|---|---|
ws-mtv-cover-nofade.htm |
MTV Style with Cover - No Fade |
ws-mtv-cover-fade.htm |
MTV Style with Cover - Fade Effects |
ws-mtv-nofade.htm |
MTV Style Text Only - No Fade |
ws-mtv-fade.htm |
MTV Style Text Only - Fade Effects |
Webgl Templates¶
Webgl Vinyl¶
WebGL-rendered spinning vinyl record with cover art texture
| Template | Description |
|---|---|
ws-webgl-vinyl.htm |
Spinning vinyl record with cover art and track info |
Webgl Spectrum¶
WebGL animated EQ spectrum bars lower-third
| Template | Description |
|---|---|
ws-webgl-spectrum.htm |
Animated EQ bars with artist and title overlay |
Webgl Hologram¶
WebGL scanline hologram panel with glitch text reveal
| Template | Description |
|---|---|
ws-webgl-hologram.htm |
Cyberpunk scanline panel with glitch text reveal on track change |
Webgl Wave¶
WebGL panel with animated wavy top edge and glow line
| Template | Description |
|---|---|
ws-webgl-wave.htm |
Dark panel with animated wavy top boundary and glow edge |
Webgl Particles¶
WebGL floating particles over transparent stream background
| Template | Description |
|---|---|
ws-webgl-particles.htm |
Floating particles over the stream with text overlay, no panel |
Webgl Cube¶
Rotating 3D cube textured with artist fanart images
| Template | Description |
|---|---|
ws-webgl-cube.htm |
Rotating 3D cube with artist fanart on each face, falls back to cover art |
Artist Templates¶
Artist Images¶
Artist artwork displays (logo, banner, thumbnail, fanart)
| Template | Description |
|---|---|
ws-artistlogo-nofade.htm |
Artist Logo Display |
ws-artistbanner-nofade.htm |
Artist Banner Display |
ws-artistthumb-nofade.htm |
Artist Thumbnail Display |
ws-justthecover.htm |
Just The Cover Image |
Artist Fanart¶
Artist fanart with special streaming endpoint
| Template | Description |
|---|---|
ws-artistfanart-nofade.htm |
Artist Fanart Display |
ws-artistfanart-conditional.htm |
Conditional Artist Fanart (audio only, transparent video) |
Artist Fanart Slideshow¶
Artist fanart slideshow cycling through multiple images with slide transition
| Template | Description |
|---|---|
ws-artistfanart-slideshow.htm |
Fanart slideshow cycling through multiple artist images |
Basic Templates¶
Basic Text¶
Simple text displays in various colors
| Template | Description |
|---|---|
ws-basicblack.htm |
Basic Black Text |
ws-basicblue.htm |
Basic Blue Text |
ws-basicwhite.htm |
Basic White Text |
ws-basicyellow.htm |
Basic Yellow Text |
Generic Dj Tryhard¶
The same boring titlecard every DJ uses because they lack creativity
| Template | Description |
|---|---|
ws-unoriginal-dj-clone.htm |
Congrats, you look exactly like every other DJ now |
ws-basic-bro-vibes.htm |
For when you want to blend into the crowd of indistinguishable DJs |
ws-cookie-cutter-dj.htm |
Mass-produced DJ aesthetic - now with 100% less personality! (Blue Edition) |
Anime Templates¶
Anime Effects¶
Templates using anime.js animations
| Template | Description |
|---|---|
ws-anime-elastic.htm |
Elastic scale animation with anime.js |
ws-anime-bounce.htm |
Bouncy animation with anime.js |
ws-anime-stagger.htm |
Advanced staggered animations with anime.js |
Effects Templates¶
Explode Effects¶
Text displays with explode effects using anime.js
| Template | Description |
|---|---|
ws-explodeblack.htm |
Black Text with Explode Effect |
ws-explodewhite.htm |
White Text with Explode Effect |
Spin Effects¶
Text displays with spin effects using anime.js
| Template | Description |
|---|---|
ws-spinblack.htm |
Black Text with Spin Effect |
ws-spinwhite.htm |
White Text with Spin Effect |
Slide Effects¶
Text displays with slide down/up effects
| Template | Description |
|---|---|
ws-slidedownup-black.htm |
Black Text with Slide Effects |
ws-slidedownup-white.htm |
White Text with Slide Effects |
Typing Effects¶
Typewriter effects with realistic mistakes using Typed.js
| Template | Description |
|---|---|
ws-typing-terminal.htm |
Terminal-style typing effect with mistakes |
ws-typing-amber.htm |
Amber terminal typing effect |
ws-typing-classic.htm |
Classic typewriter effect on paper |
Frosted Glass¶
CSS backdrop-filter frosted glass lower-third
| Template | Description |
|---|---|
ws-frosted-glass.htm |
Frosted glass panel using CSS backdrop-filter blur |
Matrix Rain¶
Matrix digital rain canvas effect with track info overlay
| Template | Description |
|---|---|
ws-typing-matrix.htm |
Matrix digital rain with falling katakana characters |
Static Templates¶
Basic Websocket¶
Basic WebSocket templates with real-time updates
| Template | Description |
|---|---|
ws-basic-web.htm |
Basic WebSocket Display |
ws-cover-title-artist.htm |
Cover, Title, Artist WebSocket Display |