Vivace

Vivace is a lively customizable lock screen built with React + TypeScript + Vite, powered by Tauri for native desktop integration, primarily to show different calendar dates. It runs as a lightweight desktop app and stores user preferences in %APPDATA%\Vivace\settings.json.

I use it as my personal lockscreen, because I don't like Windows ¯\_(ツ)_/¯

Plus, I wanted to learn a bit of Rust.

---

I don't plan to add anything else since I have everything I want (unless I get bored, I guess), but contributions are gladly welcome.

Preview

Multi-Calendar Support

Calendars

• Gregorian (default)
• French Revolutionary (Vive l’app Vivace!)
• Julian
• Buddhist
• Hebrew

(Feel free to suggest other calendars)

Customizable Profile Icon

Set your own avatar from settings.json in AppData/Roaming/Vivace: "avatar_path": <avatar-path.png>

For Development

Clone and install dependencies:

git clone https://github.com/willnjohnson/Vivace.git
cd Vivace
npm install

Run in development mode with hot reload:

npm run tauri dev

---

Building for Release

To create a production build and installer:

npm run tauri build

This will produce a platform-specific bundle under:

src-tauri/target/release/bundle/

• Windows: .msi installer (recommended for distribution)
• macOS: .dmg image
• Linux: .deb, .AppImage, or other packages

NOTE: I've only tested the build for Windows.

---

Configuration

Vivace reads its configuration from:

%APPDATA%\Vivace\settings.json

Example settings.json:

{
  "password": "hunter2",
  "background_type": "gradient",
  "background_value": "linear-gradient(135deg, #579945 0%, #764ba2 100%)",
  "avatar_path": "/fox_profile.png",
  "enabled_calendars": [
    "french_revolutionary",
    "gregorian",
    "julian",
    "buddhist",
    "jewish"
  ],
  "timeout_minutes": 1,
  "hotkey_combination": "Alt+L",
  "auto_lock_enabled": null,
  "auto_lock_minutes": null,
  "show_seconds": true,
  "date_format": "military",
  "theme": null,
  "sound_enabled": null,
  "sound_file": null
}

Modify this file to customize Vivace.

---

Tech Stack

• React + TypeScript
• Vite for lightning-fast HMR
• Tauri for cross-platform desktop bundling
• ESLint with TypeScript rules for code quality

---

Linting & Code Quality

Vivace uses ESLint with type-aware rules. Example config snippet:

export default tseslint.config([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      ...tseslint.configs.recommendedTypeChecked,
      ...tseslint.configs.stylisticTypeChecked,
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
    },
  },
])

You can also enable eslint-plugin-react-x and eslint-plugin-react-dom for stricter React rules.

---

License

MIT – feel free to modify and use Vivace in your own projects.