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 https://github.com/sindresorhus/Plash/issues/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.

[sindresorhus]

@raguay Awesome! 👍

[sindresorhus]

Another use-case. Show your Dribbble feed for inspiration.

Set the URL to: https://dribbble.com and log in.

Then apply this CSS (in the Preferences) to remove the header and navbar:

body {
	padding-top: 0 !important;
}

#header,
.filter-subnav {
	display: none !important;
}

[sindresorhus]

Bing Photo of the Day as wallpaper: https://github.com/sindresorhus/plash-bing-photo-of-the-day