ElectrobunでmacOSネイティブの背景ブラーを有効にする

Tool
ElectrobunでmacOSネイティブの背景ブラーを有効にする

ElectrobunでmacOSネイティブの背景ブラーを有効にする

Electrobun向けに macOS ネイティブの「Vibrancy（背景ブラー）」とウィンドウ操作性を取り戻すサンプルプロジェクト。透明ウィンドウでもネイティブの影を復元し、トラフィックライト（ウィンドウの赤黄緑ボタン）をカスタムヘッダーに正しく配置するなど、見た目と操作感をネイティブアプリに近づける実装例を TypeScript / React / Tailwind の軽量UIと組み合わせて提供します。Bun を用いた設定ファイルや、Electrobun 固有のウィンドウ設定を示す構成が含まれ、デスクトップアプリのUX向上に役立つリファレンスです。

https://github.com/mayfer/electrobun-macos-native-blur

概要

このリポジトリは、Electrobun（Electronライクなデスクトップ環境）で macOS ネイティブの背景ブラー（Vibrancy）やウィンドウ周りのネイティブ表現を再現するためのサンプル実装です。主な狙いは、透明ウィンドウで失われがちなウィンドウシャドウの復元、NSVisualEffectView を使ったブラー効果、トラフィックライトの正しい位置合わせとカスタムドラッガブルヘッダーの実現にあります。UI は React と Tailwind でシンプルに保ち、ネイティブ効果が目立つように設計されています。Bun のセットアップと Electrobun 固有の設定例が含まれているため、ネイティブ風の見た目を短時間で試せます。

GitHub

リポジトリの統計情報

  • スター数: 17
  • フォーク数: 1
  • ウォッチャー数: 17
  • コミット数: 4
  • ファイル数: 13
  • メインの言語: TypeScript

主な特徴

  • macOS の NSVisualEffectView を使ったネイティブな背景ブラー（Vibrancy）を再現
  • 透明ウィンドウでもウィンドウシャドウを復元する工夫
  • トラフィックライト（赤/黄/緑ボタン）のネイティブ配置をカスタムヘッダー上で実現
  • React + Tailwind でシンプルな UI を提供し、ネイティブ効果を優先

技術的なポイント

このプロジェクトは、Electron 相当のランタイムである Electrobun 上で macOS ネイティブ API を活用するアプローチを示します。まず重要なのは NSVisualEffectView を用いることで、macOS のシステムレベルのブラー（vibrancy）をウィンドウ背景に適用している点です。透明なウィンドウ（background が clear）にすると通常ウィンドウの影が失われますが、本プロジェクトではウィンドウのシャドウを明示的に復元する手法を導入しており、これにより視覚的な深みを維持します。

タイトルバーを透明化してカスタムヘッダー（ドラッグ可能領域）を実装する際、トラフィックライトの位置ずれが発生するため、ネイティブのボタンを正しく再配置する処理も含まれます。これにより、ユーザーはウィンドウ操作（閉じる/最小化/フルスクリーン）の挙動に違和感を覚えません。UI は React と Tailwind で構成されていますが、意図的に要素を最小限に留め、ネイティブのブラーやシャドウが際立つよう配慮されています。

技術スタックとしては TypeScript を中心に、Bun を用いたパッケージ管理（bun.lock）が含まれており、electrobun.config.ts の設定ファイルからウィンドウオプションやネイティブ統合のパラメータを制御します。こうした設定とネイティブ API の組み合わせにより、Web ベースの UI とネイティブ表示の良いところ取りが可能です。サンプルは軽量で実験的な性質ですが、デスクトップアプリで「見た目の違和感」を解消し、ネイティブ感を高めるための実践的なヒントが得られます。

プロジェクトの構成

主要なファイルとディレクトリ：

  • .gitignore: file
  • README.md: file
  • bun.lock: file
  • electrobun.config.ts: file
  • llms.txt: file

…他 8 ファイル

まとめ

Electrobunでネイティブ風UIを実現するための実用的なサンプル集で、カスタムウィンドウの実装やVibrancy適用の参考になるリポジトリです（50字）。

リポジトリ情報：

READMEの抜粋：

Native macOS Vibrancy Electrobun App

This project is centered on a custom native macOS window experience in Electrobun:

  • Native macOS vibrancy (NSVisualEffectView)
  • Native traffic-light button alignment with a custom draggable header
  • Native window shadow restoration on transparent windows
  • React/Tailwind UI kept simple so native effects stay visible
image

##…