How to make web wallpapers

A web wallpaper is a small local web page. It can use HTML, CSS, Canvas, SVG, and JavaScript.

1. 1. Create a folder. Put index.html, wallpaper.js, styles, and local images inside it. For properties, also copy wallpaper-runtime.js from the VKify catalog.
2. 2. Build the animation. It should fill the window, respond to resizing, and avoid creating a new timer every frame.
3. 3. Test locally. Serve the folder with a local HTTP server and open index.html in a browser.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>html, body { margin: 0; height: 100%; overflow: hidden; }</style>
  </head>
  <body>
    <canvas id="wallpaper"></canvas>
    <script src="wallpaper-runtime.js"></script>
    <script src="wallpaper.js"></script>
  </body>
</html>

Start with this template. Remove the wallpaper-runtime.js line if you do not need properties.

To expose settings in VKify and Wallpaper Engine, place `project.json` next to `index.html` and add the standard listener to JavaScript.

1. 1. Add the VKify bridge. Save https://vkify.ru/wallpapers/web/wallpaper-runtime.js next to index.html and load it before your own script, as shown above.
2. 2. Describe fields in `project.json`. VKify supports slider, bool, color, textinput, and combo.
3. 3. Use matching keys. A speed property in JSON must be read as properties.speed in the listener.
4. 4. Apply values immediately. Wallpaper Engine and VKify call applyUserProperties whenever the user changes a setting.
5. Colors. A color value is a string with three numbers from 0 to 1, such as 0.1 0.55 1. Convert it to RGB before using it in Canvas or CSS.

{
  "file": "index.html",
  "preview": "preview.png",
  "title": "My Wallpaper",
  "type": "web",
  "general": {
    "properties": {
      "speed": {
        "text": "Speed",
        "type": "slider",
        "value": 5,
        "min": 1,
        "max": 10,
        "step": 1,
        "order": 0
      },
      "accentcolor": {
        "text": "Accent color",
        "type": "color",
        "value": "0.1 0.55 1",
        "order": 1
      },
      "glow": {
        "text": "Glow",
        "type": "bool",
        "value": true,
        "order": 2
      }
    }
  }
}

const settings = { speed: 5, accentcolor: '0.1 0.55 1', glow: true };

window.wallpaperPropertyListener = {
  applyUserProperties(properties) {
    for (const key of Object.keys(settings)) {
      if (properties[key]?.value !== undefined) {
        settings[key] = properties[key].value;
      }
    }
  }
};

project.json and index.html must be in the same folder.

VKify loads web wallpapers by URL, so the browser must be able to access the entire folder.

1. 1. Upload the folder to HTTPS hosting. GitHub Pages, Cloudflare Pages, Netlify, or your own server will work.
2. 2. Check the direct link. The URL should end in index.html, open without authentication, and render instead of downloading.
3. 3. Paste the URL into VKify. If project.json is available next to it, extra properties appear automatically.
4. Verify the result. Reload VK, change every property, and ensure the animation keeps running after tab and window-size changes.

VKify → View → Background → Custom → Web wallpaper.