Welcome to Vanilla Breeze
This bell pulls live notifications from /go/notify/messages — the same contract documented at /docs/concepts/service-contracts/. Static articles like this one are the no-JS / no-backend fallback.
screen-saver
A standalone web component that overlays an idle page with one of 17 effects. Five of those effects (bauhaus, memphis, art-deco, brutalist, kawaii) are designed to pair with the matching Vanilla Breeze theme — they read VB --color-* and --font-* tokens through the shadow DOM, so no extra wiring is needed.
Where to find it
- npm:
@profpowell/screen-saver - GitHub: ProfPowell/screen-saver
- License: MIT
Install
Via CDN:
HTML
<script type="module" src="https://unpkg.com/@profpowell/[email protected]/dist/screen-saver.js"></script>Or via npm:
BASH
npm install @profpowell/screen-saverJAVASCRIPT
import '@profpowell/screen-saver';Not currently bundled into Vanilla Breeze — wire it in yourself. There is no build coupling between the two repos; the interface is purely CSS custom properties.
Demos
Each demo below loads a Vanilla Breeze page with a single theme applied on <html data-theme="…"> and drops in a single <screen-saver> with the matching effect. Each iframe auto-activates the screen-saver on load so the themed effect is immediately visible. Move your cursor into a frame to dismiss; let it idle ~2 seconds to retrigger.
Bauhaus
Memphis
Art Deco
Brutalist
Kawaii
Recommended theme pairings
| Effect | Recommended VB theme | Requires slot text? |
|---|---|---|
bauhaus | bauhaus | yes |
memphis | memphis | no |
art-deco | art-deco | yes |
brutalist | brutalist | yes |
kawaii | kawaii | no |
The 12 non-themed effects (matrix, starfield, snow, fireworks, bounce3d, bubbles, pipes, mystify, plasma, tunnel, ascii-glitch, slideshow) work with any VB theme — use whichever fits the page.
The palette attribute
Six effects ship with a hardcoded rainbow palette: bounce3d, fireworks, bubbles, pipes, mystify, plasma. To make them cycle through VB semantic colors instead of the rainbow, opt in:
HTML
<screen-saver effect="bounce3d" palette="theme">Hello</screen-saver>The five themed effects above ignore this attribute — they always read VB tokens directly.
Quick reference
| Attribute / property | Purpose |
|---|---|
effect | Which of the 17 effects to render. Required. |
timeout | Idle seconds before activation. Defaults to 180. |
palette="theme" | For JS-palette effects: cycle through VB semantic tokens instead of the rainbow. |
--screen-saver-text-color | Override for text. Beats --color-text. |
--screen-saver-bg | Override for backdrop. Beats --color-background. |
--screen-saver-font-family | Override font. Beats --font-sans / --font-display. |
--screen-saver-font-size | Override font size. |
--screen-saver-z-index | Override stacking. Defaults are high. |
For the full token list see the README.
Usage
HTML
<html data-theme="bauhaus"> <body> <!-- your page content --> <screen-saver effect="bauhaus" timeout="180">Form follows function</screen-saver> </body></html>The element is a sibling of your content — it overlays the viewport when idle and dismisses on the next pointer or key event. Custom properties declared on :root (which is what VB themes do) inherit through the shadow boundary, so no piercing is required.
Reduced motion
Every effect respects prefers-reduced-motion: reduce:
- Most fall back to a static composition with no animation.
bauhaus,kawaii,memphislay out their sprites in a static grid.brutalistshows all words at once instead of slamming them in.art-decodrops the inhale/exhale scaling.