Skip to content
Barua UI v0.2
Foundations

Wallpapers

Every one of these is finished. The picture is sized, the blur behind the glass is already computed, and the accent and colour scheme the picture wants have been worked out and written down. Copy the snippet and the work is done — none of it happens again in anyone's browser.

What was worked out beforehand

Four things, each with exactly one answer per picture, so computing them per visitor is repeating a settled question:

  • The picture, capped at 2560px — nobody needs a 12-megapixel original to decorate with.
  • The blur, as a 64px copy. Drawn back at cover size it is the blur, so baked glass needs no backdrop-filter at all.
  • The accent, from a vibrancy-weighted hue histogram — the same algorithm Barua.adapt runs live, ported so the two agree exactly rather than approximately.
  • The scheme, from average luminance: a dark picture asks for light ink, and the reverse.

The snippets include a <link rel="preload">, which starts the download before the stylesheet gets round to asking. The wall is the first thing anyone sees; it should not wait its turn.

City

Baked glass over this picture

Blurred once, at build time.

1500×999 603 KB picture 1,986 B blur — 311× smaller wants light #ca9f5e
Paste this 
<!-- Start the picture downloading before the stylesheet asks for it -->
<link rel="preload" as="image" href="https://ui.barua.tz/wallpapers/city/full.jpg">

<style>
  :root {
    --b-wall-image: url("https://ui.barua.tz/wallpapers/city/full.jpg");
    --b-wall-blur:  url("https://ui.barua.tz/wallpapers/city/blur.jpg");
    --b-color-accent:       #ca9f5e;
    --b-color-accent-hover: #bc8a3e;
    --b-color-accent-text:  #b38237;
  }
</style>

<!-- baked: the blur is the 1,986-byte copy, not the GPU -->
<html class="b-has-wallpaper" data-wall-scheme="light" data-b-glass="baked">
  <body class="b-wall"> … </body>
</html>

Desk

Baked glass over this picture

Blurred once, at build time.

1500×1125 311 KB picture 2,058 B blur — 155× smaller wants light #c48564
Paste this 
<!-- Start the picture downloading before the stylesheet asks for it -->
<link rel="preload" as="image" href="https://ui.barua.tz/wallpapers/desk/full.jpg">

<style>
  :root {
    --b-wall-image: url("https://ui.barua.tz/wallpapers/desk/full.jpg");
    --b-wall-blur:  url("https://ui.barua.tz/wallpapers/desk/blur.jpg");
    --b-color-accent:       #c48564;
    --b-color-accent-hover: #b56c45;
    --b-color-accent-text:  #ad643e;
  }
</style>

<!-- baked: the blur is the 2,058-byte copy, not the GPU -->
<html class="b-has-wallpaper" data-wall-scheme="light" data-b-glass="baked">
  <body class="b-wall"> … </body>
</html>

Team

Baked glass over this picture

Blurred once, at build time.

1500×903 329 KB picture 2,289 B blur — 148× smaller wants light #da9c4b
Paste this 
<!-- Start the picture downloading before the stylesheet asks for it -->
<link rel="preload" as="image" href="https://ui.barua.tz/wallpapers/team/full.jpg">

<style>
  :root {
    --b-wall-image: url("https://ui.barua.tz/wallpapers/team/full.jpg");
    --b-wall-blur:  url("https://ui.barua.tz/wallpapers/team/blur.jpg");
    --b-color-accent:       #da9c4b;
    --b-color-accent-hover: #cc862a;
    --b-color-accent-text:  #c68024;
  }
</style>

<!-- baked: the blur is the 2,289-byte copy, not the GPU -->
<html class="b-has-wallpaper" data-wall-scheme="light" data-b-glass="baked">
  <body class="b-wall"> … </body>
</html>

Dune Light

Baked glass over this picture

Blurred once, at build time.

2560×1706 451 KB picture 1,682 B blur — 275× smaller wants light #b77540
Paste this 
<!-- Start the picture downloading before the stylesheet asks for it -->
<link rel="preload" as="image" href="https://ui.barua.tz/wallpapers/dune-light/full.jpg">

<style>
  :root {
    --b-wall-image: url("https://ui.barua.tz/wallpapers/dune-light/full.jpg");
    --b-wall-blur:  url("https://ui.barua.tz/wallpapers/dune-light/blur.jpg");
    --b-color-accent:       #b77540;
    --b-color-accent-hover: #955f34;
    --b-color-accent-text:  #b16f3a;
  }
</style>

<!-- baked: the blur is the 1,682-byte copy, not the GPU -->
<html class="b-has-wallpaper" data-wall-scheme="light" data-b-glass="baked">
  <body class="b-wall"> … </body>
</html>

Dusk Ridge

Baked glass over this picture

Blurred once, at build time.

2560×1706 231 KB picture 1,206 B blur — 197× smaller wants dark #bb6d4b
Paste this 
<!-- Start the picture downloading before the stylesheet asks for it -->
<link rel="preload" as="image" href="https://ui.barua.tz/wallpapers/dusk-ridge/full.jpg">

<style>
  :root {
    --b-wall-image: url("https://ui.barua.tz/wallpapers/dusk-ridge/full.jpg");
    --b-wall-blur:  url("https://ui.barua.tz/wallpapers/dusk-ridge/blur.jpg");
    --b-color-accent:       #bb6d4b;
    --b-color-accent-hover: #9c593b;
    --b-color-accent-text:  #ad603e;
  }
</style>

<!-- baked: the blur is the 1,206-byte copy, not the GPU -->
<html class="b-has-wallpaper" data-wall-scheme="dark" data-b-glass="baked">
  <body class="b-wall"> … </body>
</html>

Forest Fog

Baked glass over this picture

Blurred once, at build time.

2560×1706 625 KB picture 1,530 B blur — 418× smaller wants light no strong hue — keeps the stock accent
Paste this 
<!-- Start the picture downloading before the stylesheet asks for it -->
<link rel="preload" as="image" href="https://ui.barua.tz/wallpapers/forest-fog/full.jpg">

<style>
  :root {
    --b-wall-image: url("https://ui.barua.tz/wallpapers/forest-fog/full.jpg");
    --b-wall-blur:  url("https://ui.barua.tz/wallpapers/forest-fog/blur.jpg");
  }
</style>

<!-- baked: the blur is the 1,530-byte copy, not the GPU -->
<html class="b-has-wallpaper" data-wall-scheme="light" data-b-glass="baked">
  <body class="b-wall"> … </body>
</html>

Night Coast

Baked glass over this picture

Blurred once, at build time.

2560×1706 402 KB picture 1,432 B blur — 288× smaller wants dark #3e5da3
Paste this 
<!-- Start the picture downloading before the stylesheet asks for it -->
<link rel="preload" as="image" href="https://ui.barua.tz/wallpapers/night-coast/full.jpg">

<style>
  :root {
    --b-wall-image: url("https://ui.barua.tz/wallpapers/night-coast/full.jpg");
    --b-wall-blur:  url("https://ui.barua.tz/wallpapers/night-coast/blur.jpg");
    --b-color-accent:       #3e5da3;
    --b-color-accent-hover: #314a81;
    --b-color-accent-text:  #3b5ca5;
  }
</style>

<!-- baked: the blur is the 1,432-byte copy, not the GPU -->
<html class="b-has-wallpaper" data-wall-scheme="dark" data-b-glass="baked">
  <body class="b-wall"> … </body>
</html>

Salt Flat

Baked glass over this picture

Blurred once, at build time.

2560×1706 417 KB picture 1,240 B blur — 345× smaller wants light #c46f64
Paste this 
<!-- Start the picture downloading before the stylesheet asks for it -->
<link rel="preload" as="image" href="https://ui.barua.tz/wallpapers/salt-flat/full.jpg">

<style>
  :root {
    --b-wall-image: url("https://ui.barua.tz/wallpapers/salt-flat/full.jpg");
    --b-wall-blur:  url("https://ui.barua.tz/wallpapers/salt-flat/blur.jpg");
    --b-color-accent:       #c46f64;
    --b-color-accent-hover: #b55245;
    --b-color-accent-text:  #ad4b3e;
  }
</style>

<!-- baked: the blur is the 1,240-byte copy, not the GPU -->
<html class="b-has-wallpaper" data-wall-scheme="light" data-b-glass="baked">
  <body class="b-wall"> … </body>
</html>

Still Water

Baked glass over this picture

Blurred once, at build time.

2560×1706 326 KB picture 1,310 B blur — 255× smaller wants light #c48664
Paste this 
<!-- Start the picture downloading before the stylesheet asks for it -->
<link rel="preload" as="image" href="https://ui.barua.tz/wallpapers/still-water/full.jpg">

<style>
  :root {
    --b-wall-image: url("https://ui.barua.tz/wallpapers/still-water/full.jpg");
    --b-wall-blur:  url("https://ui.barua.tz/wallpapers/still-water/blur.jpg");
    --b-color-accent:       #c48664;
    --b-color-accent-hover: #b56c45;
    --b-color-accent-text:  #ad653e;
  }
</style>

<!-- baked: the blur is the 1,310-byte copy, not the GPU -->
<html class="b-has-wallpaper" data-wall-scheme="light" data-b-glass="baked">
  <body class="b-wall"> … </body>
</html>