Skip to Content
DocsCloud OSDashboard Customization

Dashboard Customization

The Personal and Server Home dashboards are a customisable 4-column grid. Every widget can span any size from 1x1 up to 4x4, the Customize picker ships five animated wallpapers, and a single Motion level controls the depth of the cinematic polish layer.

All of this is free on every plan.

Free-form widget sizing

The dashboard renders as a 4-column CSS grid with rows auto-sized to minmax(120px, auto). Widgets carry a {w, h} size descriptor and an allowedRange that bounds what shapes they accept:

Widget archetypeAllowed range
Most widgets (default)1..4 x 1..4
Single-value gauges (uptime, storage bar, countdown)1..2 x 1..1
Row-shaped metrics (clock, storage overview, disk I/O)1..4 x 1..2
Large monitoring panels (processes, ports, system-health)2..4 x 1..4

Widget sizes persist under the quazzar-widgets key in localStorage as {w, h} shapes. Legacy string values ("1x1", "2x1", "1x2", "2x2") from pre-0.6.35 installs are migrated transparently on first load.

Resizing a card

While hovering over a widget:

  1. Drag handle — the small diagonal handle at the card’s bottom-right corner. Drag it across the grid; a ghost outline snaps to cell boundaries and commits on release.
  2. Cycle button — the W x H button cycles through every allowed size in order. Convenient with the keyboard.
  3. Right-click menu — opens a context menu with quick actions:
    • Expand to full row
    • Shrink to 1 x 1
    • Square 2 x 2
    • Move up / Move down

Resizes commit immediately. Undo is a single size-cycle click or a context-menu undo.

Animated wallpapers

The Customize button on either Home page (or /theme-designer) opens the Theme Designer. Below the gradient presets sits a new Live wallpapers section with five Canvas renderers:

RendererDescription
Nebula DriftBreathing radial gradient orbs drifting slowly
Aurora WaveStacked sine-wave gradient bands, colour-cycling every ~20 s
Cosmic OrbitSoft particles orbiting a luminous centre
StarfieldThree parallax star layers with slow forward motion
RainfallDiagonal raindrops with subtle ripples on impact

Each thumbnail is a live 120x80 canvas running the renderer at low density. Clicking activates it full-screen as the viewport background.

Performance characteristics

Every renderer is designed to stay light:

  • DPR-aware — the canvas is scaled to devicePixelRatio so it looks crisp on retina displays without oversampling on regular ones.
  • Pauses when hidden — document.hidden (tab minimised or backgrounded) pauses the render loop.
  • Idle throttle — drops to ~30 FPS after 10 seconds of no pointer or keyboard activity.

On a typical laptop the idle wallpaper CPU is under 2% and GPU under 5%.

Motion levels

A single Motion picker controls the depth of every animation in the app. It appears in two places:

  • Theme Designer -> Motion card (top of the Customize picker).
  • Settings -> Appearance -> Motion card.

Three levels:

LevelEffect
Full (default)All cinematic effects at 60 FPS. Animated wallpapers at full density.
ReducedLower density, slower animations (~15 FPS). The browser’s prefers-reduced-motion media query selects this automatically.
OffStatic gradient only. All JS animations become no-ops; CSS transitions collapse to 1 ms.

The choice persists to localStorage under quazzar-motion. The effective level is mirrored to the DOM as :root[data-motion="..."] so plain CSS rules can gate heavy keyframes without a JS round-trip.

The default honours prefers-reduced-motion. A user who has asked the OS to reduce motion lands on Reduced automatically. They can override to Full or Off explicitly.

Cinematic motion surface

When Motion is set to Full, the following effects run app-wide:

  • Page transitions — fade + subtle zoom-in on every route mount.
  • Card hover tilt — up to +/- 6 degree pointer-tracked 3D tilt on dashboard widgets, with a specular highlight that follows the cursor.
  • Click ripples — primary buttons (Save, Create, Upgrade, Apply Theme) emit a radial ripple on pointerdown.
  • Idle shimmer — dashboard section headers acquire a slow horizontal shimmer after 15 seconds of inactivity. Stops on the next pointer move.
  • Parallax scrolling — widget cards drift at factors in [0.85, 1.15] so the grid breathes while you scroll.
  • Mount cascade — widgets enter with a 40 ms stagger via framer-motion when a dashboard first appears.
  • Button press scale — all buttons get active:scale(0.97) via a single CSS rule (120 ms ease-out).

On Reduced, the tilt angle shrinks to +/- 2 degrees, the idle shimmer is off, and the stagger compresses to 10 ms. On Off, everything collapses to static.

Usage for theme authors

If you are building a custom theme or widget and want to respect the motion level:

import { useMotionLevel, motionEnabled } from "@/lib/motion";
 
const level = useMotionLevel();
const enabled = motionEnabled(level); // true only on "full"

Or in plain CSS:

:root[data-motion="off"] .my-animation {
  animation: none;
  transition: none;
}
 
:root[data-motion="reduced"] .my-animation {
  animation-duration: 2s;
}

Keyboard and accessibility

  • Right-click menus on widgets are also reachable via the focus ring + Menu key (Shift+F10).
  • Resize drag commits on a single arrow-key step if the handle is keyboard-focused.
  • The Motion picker is a standard <fieldset> with a radio group, so screen readers announce the current level.

Troubleshooting

Animation feels sluggish or fan spins up

Drop the Motion level to Reduced, or switch the wallpaper to a gradient preset. On a small laptop GPU the Cosmic Orbit particle count can push frame times over 16 ms.

My custom widget layout disappeared after upgrade

The 0.6.35 migration rewrites legacy 1x1 / 2x1 / 1x2 / 2x2 strings as {w, h} shapes. If the layout looks wrong:

  1. Open the Theme Designer.
  2. Click Reset layout on either Home page.
  3. Resize individual widgets back to the shape you want; sizes persist instantly.

Animated wallpaper does not start

Some browsers throttle Canvas renderers behind a GPU blocklist. Open the browser’s GPU status page (chrome://gpu / about:support) and verify Canvas hardware acceleration is enabled. A software-only fallback runs at 15 FPS and is fine visually.

DashboardApp Store