Share your use-case

[sindresorhus]

There are probably a lot of cool use-cases for this app that I wouldn't think of. Please share your use-case here and I'll put the best ones in the readme and App Store description.

---

Here are some that I have found:

• https://windy.com - Weather map.
• https://trends.google.com/trends/hottrends/visualize?pn=p1
• http://matthew.wagerfield.com/flat-surface-shader/
• https://aresluna.org/polish-tv-clock/
• https://www.bryanbraun.com/after-dark-css/
• https://www.manifest.app/ - Notes.
• https://akirodic.com/p/jellyfish/
• https://codepen.io/ykob/full/zGpjeK
• https://www.airtightinteractive.com/demos/js/nebula/
• http://spielzeugz.de/html5/liquid-particles/
• https://alteredqualia.com/three/examples/webgl_cubes.html (Resource heavy!)
• https://mvkqs.csb.app (Resource heavy but fun. Works best when browsing mode is always enabled, until Support mousemove events even when not in browsing mode #16 is fixed)

More here:

• https://developer.mozilla.org/en-US/docs/Web/Demos_of_open_web_technologies

Resource heavy / noisy (better as screensaver #25):

• http://oos.moxiecode.com/js_webgl/forest/index.html
• http://oos.moxiecode.com/js_webgl/water_noise/
• http://www.iamnop.com/particles/
• https://mrdoob.com/lab/javascript/webgl/particles/magicdust.html
• https://mrdoob.com/lab/javascript/webgl/clouds/
• https://experiments.withgoogle.com/collection/chrome
• https://www.dwitter.net/top/month

[marcofugaro]

Animated creative code experiments. For example this or this. Or even this one but with the mousemove instead of click.

On a side note, is mouse interaction possible? Like at least the mousemove event?

[gbougakov]

GIPHY TV is awesome with this https://giphy.com/tv/search/chonky-cats

[sindresorhus]

On a side note, is mouse interaction possible? Like at least the mousemove event?

Possible to add support for that, yes. Can you open a separate issue about that?

[sindresorhus]

Someone suggested setting https://www.omfgdogs.com/ as the wallpaper 🤣

[pablopunk]

I quickly made https://time.pablopunk.com/ to display the time. Duuuuude that was so easy. I plan to do more stuff like this in the future, it's so powerful.

[gleich]

A great use case is using gitstalk. It's super fast so it works really well with Plash. Below is an example of how I use it (dark mode enabled and set the opacity to half):

[withoutwax]

Would it be possible to save multiple website and toggle them with ⌘ + number key?

[shanlh]

I found that the image directly using Unsplash may not be displayed completely in full screen, so I made https://plash-fullscreen.now.sh, you can display any image with the url parameter like this https://plash-fullscreen.now.sh?url=YOUR URL

[sindresorhus]

@shanlh Are you sure you used the correct resolution in the Unsplash URL parameter? It works perfectly for me and others.

Your thing is definitely useful so people don't have to manually input their resolution though. 👌

[shanlh]

@sindresorhus I use https://source.unsplash.com/random by default, only use background-size: cover; make it full screen, people can pass his own Unsplash link to url parameter for higher definition pictures.

[sindresorhus]

@pablopunk Would be cool to be able to customize the clock slightly. For example, not show seconds and choose the color of the background and the clock.

[pablopunk]

@sindresorhus you got it 😉

https://github.com/pablopunk/time#customize-options

Any more suggestions? I was thinking about text size and stuff like that

[sindresorhus]

@pablopunk Nice! I opened an issue with some feedback in your repo.

[JavaGT]

https://teamtrees.org/ with CSS as follows provides a nice, subtly animated wallpaper. NOTE: requires refreshing for counter updates.

#donationAmountCard,
.banner,
.bg-gradient-white-to-grey,
.bg-dark-blue {
display: none;
}

[sindresorhus]

Tip: The Plash web view background is transparent. So if you don't set a background color in your website or remove it from a website, your actual wallpaper will show through. This enables a lot of cool use-cases. You could, for example, place something interactive over your normal static wallpaper, or only show a dynamic wallpaper on part of the screen.

---

Example use-case.

Show Google Calendar on top of your normal wallpaper

1. Add https://calendar.google.com as a website.
2. Enable “Use print styles ”. (This simplifies the calendar layout) (This options requires macOS 11)
3. Add this to the "CSS" field:

* {
	background-color: transparent !important;
	color: white !important;
}

.QQYuzf,
.gboEAb,
header.NkK3Fc,
.Hrn1mc {
	display: none !important;
}

[role="grid"] * {
	border-color: rgba(255, 255, 255, 0.3) !important;
}

.tNDBE:not(.Wyo4Qe),
.SGWAac,
.QIadxc:last-child {
	border: none !important;
}

[data-chips-dialog] {
	background-color: rgba(0 0 0 / 80%) !important;
}

[pablopunk]

FYI I updated https://github.com/pablopunk/time with all the options you suggested @sindresorhus. Looking good!

[eccorley]

Really happy with how well it works with a gyrosco.pe dashboard (https://gyrosco.pe). The age updates in realtime and I can interact with it even with Browsing Mode disabled.

Thanks for another great tool @sindresorhus!

[sindresorhus]

Another nice thing you could do with the transparency support: Show a clock directly on top of your existing wallpaper:

Use this URL: https://time.pablopunk.com/?seconds&fg=white&bg=transparent&font=SFMono-Regular,Consolas,%27Liberation%20Mono%27,Menlo,monospace

[JavaGT]

Nice stock tracking on wallpaper using Sharsies

URL: https://app.sharesies.nz/portfolio
CSS:

[class^="Toolbar__right__"],
[class^="Modal__link__"],
[class^="ListMenuWithIcon__listing__"],
[class^="spacing__spaceBelow32__"],
[class^="Page__underline__"],
[class^="Toolbar__left__"],
[class^="ListFlyOutMenu__menu__"] {
  display: none !important;
}
#app > div {
  max-width: 100vw !important;
}
[class^="index__swipeableArea__"] > * {
  transform: none !important;
}
[class^="index__swipeableArea__"] > * > * {
  width: calc(100% / 3) !important;
}
[class^="index__controls__"] {
  opacity: 0 !important;
}
[class^="Toolbar__toolbar__"] > * {
  flex-grow: 1 !important;
}

[tobie]

…and another clock:

URL: http://www.helvetictoc.com/

CSS:

body.day, body.night { 
  background-color: transparent;
  color: white
}

div.screen {
  margin: 4%;
  font-size: 100px !important;
  bottom: 0;
  top: auto;
}

#colophon { display: none }

[ha404]

URL: https://calendar.google.com/

body {
	padding: 3% 53% 3% 3%;
	background: transparent !important;
}

header,
button {
	display: none !important;
}

.SGWAac {
	border: none !important;
}

[mirshko]

https://www.manifest.app/

Web based stickie notes

[patrickpistor]

A low poly town that has clouds and traffic that extends indefinitely. Use this custom CSS for the best effect.

#about-button {
    display: none;
}

https://demos.littleworkshop.fr/infinitown

[dixiklo9]

Tip: The Plash web view background is transparent. So if you don't set a background color in your website or remove it it from a website, your actual wallpaper will show through. This enables a lot of cool use-cases. You could, for example, place something interactive over your normal static wallpaper, or only show a dynamic wallpaper on part of the screen.

Example use-case. Show Google Calendar on top of your normal wallpaper:

1. Set https://calendar.google.com/ as URL.
2. In preferences, lower the opacity to 70%.
3. Add this as "Custom CSS":

* {
	background-color: transparent !important;
	color: white !important;
}

.QQYuzf,
.gboEAb,
header.NkK3Fc,
.Hrn1mc {
	display: none !important;
}

Can anyone help me to display the iCloud calendar without sidebar etc like the Google calendar? https://www.icloud.com/calendar/

[sindresorhus]

@dixiklo9 Go to https://www.icloud.com/calendar/ and select "Month" view.

Then use this CSS override:

* {
	background-color: transparent !important;
	color: white !important;
	border: 0 !important;
}

#sc1993,
.sc-view.main-header,
.sc-view.main-footer {
	display: none !important;
}

.sc-view.month-calendar {
	position: fixed !important;
}

And the result:

Right-click when in "Browsing Mode" and choose "Inspect Element" to be able to debug and tweak it further. For example, if you want the borders, you could remove border: 0 !important;.

[dixiklo9]

@dixiklo9 Go to https://www.icloud.com/calendar/ and select "Month" view.

Then use this CSS override:

* {
	background-color: transparent !important;
	color: white !important;
	border: 0 !important;
}

#sc1993,
.sc-view.main-header,
.sc-view.main-footer {
	display: none !important;
}

.sc-view.month-calendar {
	position: fixed !important;
}

And the result:

Right-click when in "Browsing Mode" and choose "Inspect Element" to be able to debug and tweak it further. For example, if you want the borders, you could remove border: 0 !important;.

Thank you very much for the CSS code and the tip for tweaking.
Just a short note. In the bottom row there is an overlap of the days with the dates. How to fix the bug?

[raguay]

I just started a tutorial series of making backgrounds
for Plash using Svelte and Nodejs. The first tutorial
is basic project setup and the beginnings with a random
background changer every 30 minutes, a Time display, and
the time display as a circle meter. I'll be adding more
to it over time. You can read there series here: https://www.customct.com/#/tutorials/plashserver/series

The GitHub repository has the current code for the project.

[KingMario]

Do you have the source code of this website? Thank you
@longyanjiang https://github.com/jonathontoon/manifest

[ced404]

Classic Matrix code rain, really good looking and some options: https://github.com/Rezmason/matrix

[zoealmonjob]

Hey there, I've been super impressed with Plash and really want to thank @sindresorhus for creating it! There's one issue I've been running into though, when I try to replicate this user's setup:

Desktop as a canvas: https://twitter.com/thesolarmonk/status/1469762780848820226

When I add sprout.place into Plash and log in, the interface works for about a second until I get this screen:

Does anyone have a clue what could be causing the issue, or if I need to add an extra bit of code somewhere?

In any case, I'll definitely continue using Plash. Thanks to the creator for their hard work, and to everyone here for sharing such cool ideas!

[liwuhou]

Classic Matrix code rain, really good looking and some options: https://github.com/Rezmason/matrix

It's pretty cool!!!

[liwuhou]

I found some cool sites, like programmer's music player:https://musicforprogramming.net/latest/

And the Rectangles :https://rectangles.app?full_screen=true

[blakegearin]

I realize this won't be a popular option, but figured it was worth mentioning.

Tabs for a Cause (source) was made as a new tab replacement showing some ads to raise money for charity. You can customize the background as well as display widgets like a clock, to-do lists, bookmarks, and search engine.

URL to use with Plash: https://tab.gladly.io/newtab/

[PavelSafronov]

https://slowroads.io/

Requires a bit of JS to start driving (or you can use the browsing mode):

function triggerMouseEvent (node, eventType) {
    var clickEvent = document.createEvent ('MouseEvents');
    clickEvent.initEvent (eventType, true, true);
    node.dispatchEvent (clickEvent);
}
function turnOnAutoDrive() {
    var targetNode = document.getElementById('autodrive-button'); 
    triggerMouseEvent (targetNode, "mouseover");
    triggerMouseEvent (targetNode, "mousedown");
    triggerMouseEvent (targetNode, "mouseup");
    triggerMouseEvent (targetNode, "click");
}

// get past the splash screen
document.getElementById('splash-loader').click();

// after everything is loaded, start auto-driving
setTimeout(() => {
    turnOnAutoDrive();
}, 10 * 1024);

[MiracleXYZ]

I cannot believe no one has yet pointed out MagicMirror², an awesome open source modular mirror platform. What it does is to create a web page that can display a lot of information, like time, weather, calendar, to-do list, stock prices, etc. It's initially designed for Raspberry Pi, but can run perfectly on Macs, making it a perfect match for Plash.

A screenshot after I have everything configured:

Installation

First install nodejs and npm. For example, using Homebrew

brew install nodejs

Then follow the instructions at Installation & Usage starting from Step 2:

cd ~
git clone https://github.com/MichMich/MagicMirror
cd MagicMirror/
npm run install-mm
cp config/config.js.sample config/config.js
npm run server

Then navigate to http://localhost:8080 - you should see a simple MagicMirror webpage up and running.

Start Server on Startup

If you close the terminal right now, the webpage will be down. Additional steps are needed to have the server run 24/7. Just follow the instructions at Autostarting your MagicMirror. The only modification is that the content of mm.sh should be

cd ./MagicMirror
npm run server

according to our use case.

Modify CSS

Navigate to directory css and copy custom.css.sample to custom.css. Make sure to add these lines:

:root {
  cursor: default; /* prevent cursor from disappearing in Browsing Mode */
  --color-background: transparent;

  --color-text: #fff;
  --color-text-dimmed: #fff;
  --color-text-bright: #fff;

  --gap-body-top: 20px;
  --gap-body-right: 60px;
  --gap-body-bottom: 60px;
  --gap-body-left: 80px;
}

Here I set --gap-body-left a little bit higher because I place my Dock on the left. For most cases, just set left equal to right and increase bottom. And feel free to modify other lines if needed.

Plash Setup

This should be easy. Just add http://localhost:8080 (port can be changed in config/config.js), no need to add any CSS or JS. Browse mode works as well.

More Customization

Modify config/config.js to configure the modules. And you can install third-party modules as well! Feel free to read MagicMirror² Documentation and customize your own MagicMirror, or rather, MagicDesktop!

Here's a list of modules I use in the screenshot:

• Built-in Modules: Clock, Weather, Compliments
• cbrooker/MMM-Todoist

---

Updates

On a Light Background

Add the following lines to css/custom.css to make the display clearer if you're on a light background.

.module {
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  padding: 10px;
}

[Terabyte1385]

How about NASA Image of the Day? That sounds like a reasonable use case.

[harshvardhaniimi]

How about NASA Image of the Day? That sounds like a reasonable use case.

#1 (comment)

[ilaoyao]

https://github.com/pablopunk/time
custom css:

#time {
position:absolute;
left:2rem;
bottom:-0.2rem;
font-weight:400;
font-size:3rem;
font-family:Copperplate;
color:#8A95A9;
/*background-color:#91A0A5;
opacity: 0.75;
padding:0 0.5rem 0 0.5rem;
*/
}

[xkloveme]

https://inftab.com

[rajatkantinandi]

Google calendar week view:
https://calendar.google.com/calendar/u/0/r/week

Set styles to make everything transparent except events, current day so that they are clearly visible. Also, hide scrollbar to make it cleaner.
CSS styles:

*:not([data-opens-details="true"]):not([data-opens-details="true"] *):not([aria-label*="today"]) {
	background-color: transparent !important;
	color: white !important;
}

.QQYuzf,
.gboEAb,
header.NkK3Fc,
.Hrn1mc {
	display: none !important;
}

*::-webkit-scrollbar {
  display: none;
}

Also, turn on Use print styles.

Screenshot:

[Holipori]

Simple but fun: I loaded a video as your dynamic live wallpaper, just like the Wallpaper Engine app in Windows.

I created a local website with the help of New Bing, which consists of only one file named 'index.html'. Use the code below and replace the video name with your own.

<html>
<head>
<style>
* {
  margin: 0;
  padding: 0;
}

video {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
}
</style>
</head>
<body>
<video src="video.mp4" autoplay loop muted></video>
</body>
</html>

[program247365]

This... https://floor796.com/

[PrayagS]

This... floor796.com

This one is awesome. I added the following under CSS rules to hide the header,

.header {
	visibility: hidden;
}

[program247365]

Another cool site for Plash - https://oimo.io/works/clock/

[danielfalbo]

Want your Macbook to look as if it just came out of Blade Runner 2049? Archillect TV.

archillecttv.mov

[praharshjain]

Use this to confuse people - https://wintest.andrewstech.me/

Use the below CSS to hide ads -

.adsbygoogle { display: none!important; width: 0px!important;; height: 0px!important; }

[simon-zk]

Use this to confuse people - https://wintest.andrewstech.me/

the ads makes it worthless

[praharshjain]

Use this to confuse people - https://wintest.andrewstech.me/

the ads makes it worthless

@simon-zk Added CSS to hide ads, also updated original comment with the CSS

[ProjectToronto]

I made this using chatgpt https://plashaddon.prjctkraken.repl.co/ and it works perfectly for this and I use "The drive youtube video" only issue is loops so feel free to improve it.

[ProjectToronto]

Fixed it just right click on the video and hit loop

[m1kx]

Hi, I just released the first version of a website, which can display animated apple music album covers in full screen, which can make really great wallpapers! You just have to input an album url (e.g. https://music.apple.com/us/album/eternal-atake-deluxe-luv-vs-the-world-2/1502707380) and select the desired resolution (both in browsing mode). The covers are saved in the background and you can iterate through them by double clicking. The url is https://cover.mikaco.de/.
Feel free to suggest features/improvements, I hope you like it :)