Sleeping Cat Screensaver
Minimal screensaver with a sleeping cat and live clock progress bar.
Installation
1. Run the following command in your terminal:
npx shadcn@latest add https://refinery.abhii.me/r/sleeping-cat-screensaver.jsonAPI Reference
| Name | Type | Description |
|---|---|---|
| bgColor | string | Background color class for the screen. |
| brandText | string | Brand label above the clock. |
| imageSrc | string | Image URL for the sleeping cat. |
| imageAlt | string | Alt text for the cat image. |
Usage Recommendations
Use soft, light backgrounds to preserve the calm tone.
See the 'Usage Hints' section on the left to learn how to apply screensaver into your app.
You can also use it as your 404 page with some additions on top.
It uses geist pixel typography for brandText and time display, so geist is included as a dependency. But, if you just want to use your own font, you can remove the geist import and apply your own font classes to the brandText and time elements in the component file.
Design Notes
I update the time on a short interval and derive the progress bar from the current second of the minute. Motion handles the soft fade-in, while the image uses a gentle pulse so the screen does not feel completely static. You can replace the image and brand label to turn it into a calm idle state for your own app.