Widgets & Appearance

The widget boards under Server Overview and Personal Home are a customisable 4-column grid. Every widget can span any size from 1x1 up to 4x4. Customize on each space shows or hides the hero blocks above the board (metric tiles, Molly insight, Timeline · weather, now playing, today, to-do, Drive, notes). The accent colour and Motion level live in Appearance (the coloured dot in the menu bar) and are saved to your profile.

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 layout (positions and sizes) is saved server-side as of 0.9.7, so it follows you across every browser or device you log in from. See Per-User Layout Sync for details on conflict handling and the offline localStorage cache. 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.

Background and accent colour

The background is always the live quasar scene (see The desktop); the animated wallpapers of earlier releases were retired with the Accretion redesign.

Open Appearance with the coloured dot in the menu bar (or Ctrl/⌘+K → Appearance). It has:

• Accent: Nebula (violet, default), Plasma (orange), Ion (blue) or Quasar (lime), plus a fifth Custom swatch once you’ve picked your own colour.
• Motion: Calm, Cinematic or Max (see below).
• Interface sounds: short sounds for navigation, notifications and errors.
• Light theme: switches between the dark and light palettes.
• Language: English, Русский, Español or Français, under Settings → Appearance → Language. See Languages.

All of these are saved to your profile and follow you to every device.

Custom accent (Theme Designer)

For a colour of your own, open the Theme designer (Ctrl/⌘+K → Theme designer, or the palette icon on the widget board). Pick one of the accent presets or any colour with the colour picker; the live preview shows the result, and applying it sets the Custom accent. Reset Customizations returns to Nebula. The designer’s glass-opacity and glow sliders are kept for older themes and don’t change the Accretion desktop.

Themes can only change the accent colour. There are no wallpapers, background images or animated backgrounds any more; if you had a custom theme colour before 0.11.0, it is kept as your custom accent.

The scene is light: the backing canvas is capped at 1.5× device pixel ratio, it pauses when the tab is hidden, and it steps down a motion level by itself after a few seconds of slow frames.

Motion levels

Appearance → Motion has three levels:

Components that predate the redesign read the same choice (Calm = Reduced).

Page-level effects

On Cinematic and Max, pages inside the desktop also use these effects:

• 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 Calm, the tilt angle shrinks to +/- 2 degrees, the idle shimmer is off, and the stagger compresses to 10 ms. Settings → Appearance also has an older Full / Reduced / Off switch for these page-level effects only; Off turns them off completely.

Usage for theme authors

If you are building a custom widget and want to respect the motion level (reduced when Appearance is on Calm, full otherwise):

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.
• The OS reduce motion setting selects Calm automatically.

Troubleshooting

Animation feels sluggish or fan spins up

Set Appearance → Motion to Calm. The desktop also drops a level automatically after about three seconds of frames slower than 35 FPS.

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 space (Overview or Home) and use Add widgets to put back anything that is missing.
2. Resize individual widgets back to the shape you want; sizes persist instantly.
3. If the board is hidden altogether, turn Widget board back on under Customize.

Related pages

• The desktop — modes, spaces, dock and Appearance
• Overview, Home and the widget board — hero blocks, Customize and the widget catalogue
• Control Panel — fleet-wide dashboards