sindresorhus commented 4 years ago

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):

caseypugh commented 4 years ago

HD video of a random window in the world https://window-swap.com/

jt3k commented 4 years ago

Typing Practice - https://www.keybr.com/

Take typing speed test, practice your touch typing skills, learn to type faster and with fewer errors with this free online typing tutor.

Plash Preferences

Custom CSS

I moved the window below to avoid attracting the attention of others when I practice typing at work.

header, aside, iframe {
  display: none;
}

main {
  display: flex;
  flex-direction: column;
  padding-top: 50vh;
  align-items
}

main > section {
  background-color: rgba(34, 33, 33, 0.8);
  border-radius: 50px;
  align-self: center;
}

html > body {
  background-color: rgba(34, 33, 33, 0.2);
}

html > body::before {
  background: transparent;
}

Site Settings

Simply turn on the Dark Mode (sun icon).

03.07.2021 updated css

ClaireBookworm commented 4 years ago

You can embed p5.js and openprocessing sketches, with links like this! openprocessing.org/sketch/816453/embed

It's animated and you can make your own animations. 🚀

keiferoh commented 3 years ago

I use Plash to display the status of my Home Assistant smart home devices.

abid-din-akqa commented 3 years ago

I created a custom dashboard using React, showing a greeting based on time of day, current time, currently playing Spotify track and Todos. Screen Shot 2020-11-24 at 2 49 43 PM

jasikpark commented 3 years ago

https://user-images.githubusercontent.com/10626596/104114664-8ac67500-52cc-11eb-9d88-fb872e10a71f.mov

from http://regl.party/

CatherineWong commented 3 years ago

Finally able to find a home for this exquisite corpse clock (randomly samples short story excerpts with breaks to create continutiy) that I'd originally planned for a tiny e-ink screen! https://exquisitetime.github.io/index.html

jkrobin commented 3 years ago

https://simply.fyi

Quotes scraped from Kindle highlights archive.

https://simply.fyi

wzso commented 3 years ago

Daily wallpaper from Bing: https://bing.biturl.top/?format=image&index=0

ced404 commented 3 years ago

https://earth.nullschool.net/

ced404 commented 3 years ago

https://squalid-insect.surge.sh/

nianchu99 commented 3 years ago

This is very interesting!!! https://theuselessweb.com/

bdmorin commented 3 years ago

@sindresorhus your first example http://twistori.com/#i_think is dead since about april2020 according to archive.org

sindresorhus commented 3 years ago

Plash 2 is out now.

I have updated my Google Calendar tip. It now looks much better on the desktop.

sindresorhus commented 3 years ago

Stock tracker

URL: https://stockstracker.app/userstocks.html?ticks=GBTC,VTI (Change the last part to the stocks you want to track)

Change the width in the CSS to adjust the width. And change right to left if you want it on the left side instead.

Without background

#stkList {
    position: absolute;
    right: 0;
    top: 0;
    width: 400px;
}

* {
    color: rgba(255, 255, 255, 0.8) !important;
}

.copyright {
    display: none !important;
}

With background

#stkList {
    background-color: white;
    position: absolute;
    right: 0;
    top: 0;
    width: 400px;
    border: 5px solid hotPink;
    border-radius: 5px;
}

.copyright {
    display: none !important;
}

west3rd commented 3 years ago

Very new to all of this, but I made my first "site" and it apparently works well with this great app: redwork.ca/time

I found that either adjusting the opacity looks great, or you could use: * { background-color: transparent !important; } in the CSS to make the background transparent.

Hope you enjoy it. Appreciate any feedback you could give a newbie.

spkane commented 3 years ago

Animated (moving) Flying Toasters (After Dark) in CSS https://www.bryanbraun.com/after-dark-css/all/flying-toasters.html

spkane commented 3 years ago

The FireEye Cyber Attack Map is another fun option. https://www.fireeye.com/cyber-map/threat-map.html

Proudspark commented 3 years ago

The ultimate window to the world: refresh for a random webcam view from a window somewhere on the globe. Amazing, love Plash for making this possible... (yes the trucks drive up and down the street)

https://www.window-swap.com/Window

Luis-Window

sindresorhus commented 3 years ago

Another one like the above: https://virtualvacation.us/window

weaming commented 3 years ago

Another one like the above: https://virtualvacation.us/window

This is good, but do not have a static URL of any the specific city.

raguay commented 3 years ago

Another one like the above: https://virtualvacation.us/window

This one is better due to less writing around the picture.

sindresorhus commented 3 years ago

@raguay The overlay content fades out though.

theodorjs commented 2 years ago

Would it be possible to remove the background and the text over the clock in fullscreen mode, from this word clock? https://www.timeanddate.com/wordclock/?fta=1632042129_bc303d7b1f21c36e_66448f6964bad614b0fa8ac04b92a3fb&n=2199

sindresorhus commented 2 years ago

@theodorjs You can add some CSS to hide elements:

.wrdck__link,
#zoombut[src$="zoomoutblack.png"] {
    display: none;
}

theodorjs commented 2 years ago

Thank you @sindresorhus That got rid of the unnecessary text in fullscreen mode.

andreaswilli commented 2 years ago

I made a website to show the weather using Minecraft screenshots.

https://andreaswilli.github.io/minecraft-weather/

pasanglamatamang commented 2 years ago

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

Add https://calendar.google.com as a website.

Enable “Use print styles ”. (This simplifies the calendar layout) (This options requires macOS 11)

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;
}

pasanglamatamang commented 2 years ago

how can you add an outline border on the box for the current day

jacklaing commented 2 years ago

This is my ideal use case: https://louie.co.nz/25th_hour/

A beautiful animated wallpaper that can change with the time.

Unfortunately it moves too quickly to be a true reflection of time passing, so I wondered if there's something I can do with custom CSS/JS to slow it down to a 24h interval.

Anyone know how?

spkane commented 2 years ago

@jacklaing I start by contacting the developer. His contact info is on https://louie.co.nz/

jacklaing commented 2 years ago

@spkane thanks for the advice.

The designer very kindly responded with a direction that may work.

Basically it's just running off a CSS animation duration of 60s at the moment, simply changing that to 24hrs - 86400s might do the trick but possibly not, but as soon as you start the program it would load at midnight which would negate the purpose of changing it. If you wanted to do it you would need to run js to get the current time of day, change the class of the body at 4 intervals for each scene, then change all the transitions to reference the new classes rather than a 60s global timer.

This is outside my area of expertise so I'll leave it here in case anyone more knowledgeable sees this, likes the wallpaper, and wants to try it for themselves.

I wonder if the Reload Interval preference may help here if it could be updated to also include a reload time (midnight) but I suspect that wouldn't address what happens when you load Plash up at a time that isn't midnight.

P.S. the designer also shared a gorgeous updated version of the animation https://louie.co.nz/lakeside2019v2/

stracker-phil commented 2 years ago

Great app! We're using it to display a Team-Dashboard from Google Sheets in the background. That way, we cannot forget to open (or review) the dashboard sheet, as it's always part of the desktop :)

Here's a sample:

The CSS to adjust the sheet:

:root{width:600px;margin:0}
body{background:transparent!important}
#docs-chrome{display:none}

agentcooper commented 2 years ago

Great app, thank you!

For https://manifest.app (sticky notes) you can use custom CSS to make background transparent:

body { background: transparent !important; }

#grid { display: none; }

sindresorhus commented 2 years ago

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

liwuhou commented 2 years ago

I made a website to show the weather using Minecraft screenshots.

https://andreaswilli.github.io/minecraft-weather/

use this css styles:

body {
    overflow: hidden;
}

etwodev commented 2 years ago

'Littlelist's Tokyo' by Glen Fox https://threejs.org/examples/webgl_animation_keyframes.html

CSS to remove extremeties:

#info {
    display: none;
}

#container div canvas {
    opacity: 0;
}

hisamafahri commented 2 years ago

Fancy Digital Clock by Cory on Codepen (added some changes)

Preview:

Link: https://codepen.io/hisamafahri/full/gOGevVo

CSS:

header#main-header {
  display: none !important;
}

etwodev commented 2 years ago

Sketchfab (Setting 3D Objects as Wallpaper) I'll be using this project for comparison

1) Select your project

2) Open inspect element and find the embed url of the project

3) Add 'transparent=1&annotation=0&annotations_visible=0&' after 'embed?' (You can also add "autospin=1" which spins the 3D model automatically): https://sketchfab.com/models/3baba9e13bfd4233935729f109d0e13b/embed?transparent=1&annotation=0&annotations_visible=0&autostart=1&internal=1&tracking=0&ui_infos=0&ui_snapshots=1&ui_stop=0&ui_theatre=1&ui_watermark=0

4) Add the following to the CSS

.controls {
    display: none !important;
}

5) You're done!

greenido commented 2 years ago

I build this: https://photos-4-zwift.glitch.me/ long time ago :) A simple web app to watch some photos while you are training on Zwift.

pasanglamatamang commented 2 years ago

Does anybody knows a quote website to display quotes on the screen?

jkrobin commented 2 years ago

Does anybody knows a quote website to display quotes on the screen?

https://simply.fyi was previously shared as an example of on-screen display of quotations.

jkrobin commented 2 years ago

https://simply.fyi is a quote display site that has already been mentioned as a splash use case.

From: Pasang Lama Tamang @.***> Sent: Monday, February 28, 2022 1:57 PM To: sindresorhus/Plash Cc: jkrobin; Comment Subject: Re: [sindresorhus/Plash] Share your use-case (#1)

Does anybody knows a quote website to display quotes on the screen?

— Reply to this email directly, view it on GitHubhttps://github.com/sindresorhus/Plash/issues/1#issuecomment-1054564767, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AH6AYRTAKKKAFJKI7NFD2Y3U5PARXANCNFSM4KEWZIGA. Triage notifications on the go with GitHub Mobile for iOShttps://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Androidhttps://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub. You are receiving this because you commented.Message ID: @.***>

sindresorhus commented 2 years ago

I have enabled discussions on this repo, so you can now share your use-case there instead and there's also a category for asking questions: https://github.com/sindresorhus/Plash/discussions