Dynamic Panel (NG)

Originally inspired by the floating panel design in KDE Plasma 6, it presents a translucent floating bar effect when there are no windows nearby, and a solid panel style when windows are close. It supports GNOME's dark and light mode switching. You can set custom colors for dark and light modes respectively. And there are more settings!

Fork notice: This is a maintained fork of Dynamic Panel by velade, updated for GNOME Shell 50. The original project is at https://github.com/velade/dynamic-panel. All original credit belongs to the original author; see Credits.

Compatibility

• GNOME Shell 50 (tested on 50.2).
• For GNOME Shell 46–49, use the original upstream release (see Installation).

Known Issue

The GNOME panel experiences brief flickering during workspace transitions or when returning from the overview. This is caused by GNOME forcibly resetting panel styles during these actions. As this is an underlying GNOME behavior, there is currently no external fix available. Therefore, this flickering issue is listed as a known and temporarily unresolvable problem.

Floating Mode

When there are no windows near the top panel, it will be in floating mode.

You can combine various styles as you like, but improper combinations may not produce good visual effects.

Floating mode has a translucent effect and a built-in simple blur effect. If you want a more advanced and more controllable blur effect, it is recommended to use Blur my Shell's static pipeline for the panel — its dynamic mode does not render rounded corners. In the Blur my Shell pipeline for the panel, add the Corner effect (placed last) and set its radius to match the Border Radius you configure in this extension.

Effect when used with Blur my Shell

Solid Mode

When any window is close enough (almost touching) to the top panel, the top panel will become an opaque dock (the same as the default in GNOME, but you can apply custom colors to it), which can better blend with maximized windows, unlike themes that are always floating and have a "light leakage" phenomenon.

Settings

Open the preferences from the Extensions app, or run gnome-extensions prefs dynamic-panel-ng@jdneer.com. Settings are grouped into tabs: General, Floating Mode, Solid Mode, and Accessibility.

General

• Detection Method — how the extension decides when a window is "near" the panel (e.g. Window Close).
• Duration (ms) — length of the transition animation between floating and solid modes.
• Apply panel style to panel menu — extend the panel's style to the drop-down panel menus.
  • Entity Mode Keep Transparency — keep menus translucent even while the panel is in solid mode.
• Custom Colors — set custom colors for dark and light modes (expand to reveal).

Floating Mode

• Background Mode — how the floating background is drawn (e.g. Overall).
• Align — horizontal alignment of the floating panel (Left, Center, Right).
• Auto Width — size the panel to its contents; disables the manual Panel Width slider.
• Panel Width (%) — width of the floating panel relative to the screen.
• Border Radius (%) — roundness of the floating panel's corners.
• Opacity (%) — translucency of the floating panel.
• Blur effect — toggle the built-in simple blur.
• Top Margin (px) / Side Margin (px) — spacing between the panel and the screen edges (Side Margin applies only when Align is Left or Right — it is disabled for Center).

Installation

Quickstart

Recommended — GNOME Extensions (one click, activates immediately)

The simplest way to install, and the only method that takes effect right away with no log-out required, is from the GNOME Extensions website:

👉 Install Dynamic Panel (NG) from GNOME Extensions

Open that page in a browser with the GNOME Shell browser integration connector installed, then flip the toggle to On. The extension applies instantly.

Manual install (terminal)

Prefer the terminal? Download the latest release, verify its checksum, install it, and enable it — in one command:

curl -fsSL https://git.jdneer.com/jd/gnome-dynamic-panel-ng/raw/branch/main/install-from-release.sh | bash

Or, from a checkout of this repository, install the current source directly:

./install.sh

Both scripts copy the extension into ~/.local/share/gnome-shell/extensions/, compile the GSettings schema, and enable it. Because these are manual installs, on Wayland (the default on GNOME 50) you must log out and back in for GNOME Shell to load the extension.

1. From the Releases page (manual)

1. Download the latest dynamic-panel-ng@jdneer.com_vX.Y.Z.zip from the Releases page.
2. (Optional, recommended) Verify the download against its checksum:

   sha256sum -c dynamic-panel-ng@jdneer.com_vX.Y.Z.zip.sha256
   

3. Unzip all files to ~/.local/share/gnome-shell/extensions/dynamic-panel-ng@jdneer.com/.
   • If the directory does not exist, create it yourself.
   • Be careful not to nest! extension.js should be directly inside dynamic-panel-ng@jdneer.com, not in dynamic-panel-ng@jdneer.com/dynamic-panel/.
   • The directory name must be exactly dynamic-panel-ng@jdneer.com and cannot be changed, otherwise the extension will not show up in the list or take effect. GNOME requires the directory name to match the uuid in metadata.json.
4. Restart GNOME Shell so it picks up the new extension:
   • Wayland (the default on GNOME 50): log out and log back in. (The old Alt+F2 → r restart was X11-only and was removed in GNOME 50.)
5. Enable the extension in the Extensions app.

You can also build the zip yourself from a checkout with ./pack.sh.

2. From GNOME Extensions (older GNOME, 46–49)

This fork is published on GNOME Extensions for GNOME Shell 50: https://extensions.gnome.org/extension/10297/dynamic-panel-ng/ (see Quickstart).

For GNOME Shell 46–49, use the original upstream extension by velade: https://extensions.gnome.org/extension/7284/dynamic-panel/. This fork is what adds GNOME 50 support.

About Performance

Due to GNOME's own CSS and GJS, CSS3 transition tweening animations are actually ineffective for most properties, and the requestAnimationFrame frame-alignment function cannot be used either. Therefore, a fixed frame-interval loop is used to do frame-by-frame animation to achieve smooth movement, size changes, rounded-corner animation, etc. As a result there is a certain performance impact during animations, but there is no performance impact in a static state.

Translations

This extension ships UI translations for the following languages: English, German, French, Italian, Spanish, Brazilian Portuguese, Russian, Simplified Chinese, Japanese, and Korean. English and the original author's languages are human-maintained; the remaining locales are machine-assisted and may not be perfect. Corrections and additional languages are welcome — please open a pull request with an updated .po file under locale/.

Credits

This fork builds entirely on the work of the original author. Please support and credit them.

• Original author: velade — Dynamic Panel

Translation Contributors (in no particular order)

• Aleksandr Shamaraev — Russian
• Egor Vorontsov — Russian (corrected and improved)
• Amerey — Czech
• Ritam Saha — English (India)
• Marcos — Spanish (Spain)

Special Thanks (in no particular order)

• Thanks to Gonzague/Paul Fauchon's Transparent Top Bar (Adjustable transparency) for the idea; the implementation of window proximity detection largely refers to this extension.

License

See LICENSE.