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

[fael]

I'm using it to follow recent on-going activities that I'm currently interested in, such as my Gitlab Pipelines and Twitter.

Also, right now I'm watching the traffic in GMaps from home to an appointment that I have in a few hours.

I see myself also using old-school screensavers that I always wanted to be as wallpaper.

Another awesome tool from you. TY!

[pablopunk]

My Google Calendar setup:

calendar.google.com at 80% opacity:

header, button, .gboEAb {
  display: none !important;
}

body {
  width: 80vw !important;
  height: 80vh !important;
  margin: 10vh 10vw !important;
}

body, .tNDBE, .ef2wWc {
  background-color: transparent !important;
}

* {
  color: white !important;
  border: none !important;
}

[davidsharp]

I've currently got an invisible bitbar plugin that downloads the artwork of the track I'm listening to on Spotify and Plash just points at a HTML file containing an image tag with the downloaded image as the source.

https://gist.github.com/davidsharp/f789b067448ae3548707b232d39f2e6b

It's using some JXA to get the URL from Spotify, does a quick check to determine if it needs to download, curls it to a file and then whenever Plash reloads, the background will be the album art of whatever's currently playing.

I have slightly grander plans for this, it's more of a proof-of-concept at the moment than anything, as it looks a bit ugly, but I've been looking for a way to use my Spotify currently playing as my background for a while (previously I'd built a similar thing as an Electron app).

That said, if I could hook directly into Plash via Applescript/JXA to pass the URL from Spotify to Plash, that'd be ace.

edit ~ I've updated the index.html to reload the image itself, so plash doesn't need to reload the page at all

[sindresorhus]

@davidsharp That's very creative 👌

That said, if I could hook directly into Plash via Applescript/JXA to pass the URL from Spotify to Plash, that'd be ace.

1. https://github.com/sindresorhus/Plash/issues/44 (not likely to happen soon)
2. https://github.com/sindresorhus/Plash/issues/45 (I'll try to work on this soon)

I assume 2will work for you?

[davidsharp]

I assume 2will work for you?

I believe so! Should be able to just run that from the plugin, rather than reading and writing files 👌

[arekf]

Hi all, I am using Plash to show Flightradar24 in my vicinity. I just like to know what is above my head 😉 Sharing my custom CSS to hide some unwanted items there:

#navContainer, #leftCol, .site-brand, #fr24_SearchContainer, #fr24_ViewsToolbar, #fr24_ViewsDropdownContainer, img[src^="https://maps.gstatic.com/mapfiles/api-3/images/google_white"], .gmnoprint { display: none !important; }

I was thinking about going even further with it and make a custom HTML with iframes showing a "big picture" of the 50 km surroundings and somewhere in the corner put another one with close up look at the airport's runway. The problem is that CORS is preventing iframes from being loaded. Do you think it make sense to have an option to disable it?

Thanks for all the work on the app!

[sindresorhus]

The problem is that CORS is preventing iframes from being loaded. Do you think it make sense to have an option to disable it?

Would definitely be nice to be able to disable CORS, however, I haven't found any way to do it. If anyone know a way to do that, let me know.

[dombrant]

I made a website that fetches NASA's Astronomy Picture of the Day and sets it as the background image! This was inspired by Sindre's Bing Photo of the Day website:

https://github.com/dombrant/nasa-apod-request

[jocamero]

I use Plash to display a customized https://plan.foreflight.com/map (add lat+long to URL) and have a VFR chart with realtime weather and airport conditions (and animated satellite of clouds and radar of precipitation). I can quickly enable browsing mode to add in a proposed flight plan and watch the weather along the route.

I also use flightradar24.com to show a realtime map of nearby overhead aircraft.

Thanks for your work on this project! Really cool!

[raguay]

I just added a new widget to the PlashServer series mentioned above: http://www.customct.com/#/tutorials/plashserver/exchangewidget

It gives you an exchange rate display. Since I live in Thailand, I’m always checking the current rates and now you can too.

[Kiyozz]

I use Plash to show my team's Azure DevOps Board.

I use injected CSS to hide header and sidebar

.project-navigation.region-navigation.flex-column.flex-grow.collapsed,
.flex-row.flex-grow.region-header,
.vss-PivotBar--bar-two-line {
  display: none;
}

[gbougakov]

I use Plash with Bloomberg Watchlist. If you own stock or currency it is really useful for checking it's current price and your gains/losses

Custom CSS that hides all UI, ads, navbars, etc. (use with Invert Website Colors):

#leaderboard, nav, .datastrip, .navi-breaking-news, .bb-global-footer, .page-ad, .bb-that, #navi {
  display: none;
}

[raguay]

I just added a Text widget and a Corvid-19 widget to my Svelte Plash Server. The Corvid-19 widget is configurable to show any country stats. I fully documented the code, so you can change what you need to. For me, it now looks like:

I live in Thailand, but I’m from the USA. That is why I’m show those two locations. Have fun!

[mapninja]

Currently set to https://gisanddata.maps.arcgis.com/apps/opsdashboard/index.html#/bda7594740fd40299423467b48e9ecf6

[edaquinta]

IMHO this is a classic:

url: https://rezmason.github.io/matrix/

NOTE: took it from this github repo (not mine)... Kudos to the guy who made it.

https://github.com/Rezmason/matrix

[RhettButler108]

Real time sky with star signs and cind of satellite tracking:

https://stellarium-web.org/

[long-lazuli]

I'm using https://www.fioapp.co/app/ to show different hours for different timezone.

[EricRabil]

I wrote a live feed for what I'm doing on my Mac and other devices, it ties in any platform I connect it to. It uses a standard data model, and currently renders all Discord presence's as well as what I'm listening to on any Spotify device. https://github.com/EricRabil/PresenceBot (backend, runs on a VPS, tracks my activity) https://github.com/EricRabil/ericvue (hosted on gh-pages)

[jrappen]

URL:

http://www.3quarks.com/images/svg/german-clock.svg

Instructions:

http://www.3quarks.com/en/SVGClock/index.html

[DeltaOS2]

Re-use of Übersicht widgets

As a longtime, former Übersicht.app user, I rewrote all my widgets that I've used with Übersicht and integrated them into one webpage. Since the Apache-Server is running in the background anyway, it was easy to do. Here is a screenshot with 4 of my widgets (FuzzyTimeWithDate, openWeatherMap, osVersionUptime and calendar):