Skip to content

Commit 3dfcd0b

Browse files
andrinoffandrinoff
committed
feat: initial commit
1 parent 6981f6b commit 3dfcd0b

6 files changed

Lines changed: 948 additions & 0 deletions

File tree

‎.gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
node_modules
2+
dist
3+
dist*

‎.nojekyll‎

Whitespace-only changes.

‎CNAME‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
floatpane.andrinoff.com

‎index.html‎

Lines changed: 316 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,316 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>floatpane - Lightweight Wallpaper Selector for macOS</title>
7+
<link
8+
href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&display=swap"
9+
rel="stylesheet"
10+
/>
11+
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.11/clipboard.min.js"></script>
12+
<link
13+
rel="icon"
14+
type="image/svg+xml"
15+
href="https://github.com/floatpane/floatpane/raw/master/assets/icon.svg"
16+
/>
17+
<link rel="stylesheet" href="styles.css" />
18+
<meta
19+
name="description"
20+
content="A lightweight, floating wallpaper selector for macOS. Designed to work seamlessly with tiling window managers like Aerospace and yabai."
21+
/>
22+
<meta
23+
name="keywords"
24+
content="floatpane, macOS, wallpaper selector, tiling window manager, Aerospace, yabai, Electron, React"
25+
/>
26+
<meta name="author" content="andrinoff" />
27+
<meta
28+
property="og:title"
29+
content="floatpane - Lightweight Wallpaper Selector for macOS"
30+
/>
31+
<meta
32+
property="og:description"
33+
content="A lightweight, floating wallpaper selector for macOS. Designed to work seamlessly with tiling window managers like Aerospace and yabai."
34+
/>
35+
<meta
36+
property="og:image"
37+
content="https://github.com/floatpane/floatpane/raw/master/assets/icon.svg"
38+
/>
39+
</head>
40+
<body>
41+
<header>
42+
<nav class="container">
43+
<div class="logo">
44+
<svg
45+
width="48"
46+
height="48"
47+
viewBox="0 0 32 32"
48+
xmlns="http://www.w3.org/2000/svg"
49+
>
50+
<rect width="32" height="32" rx="6" fill="none" />
51+
<g
52+
stroke="#ffffff"
53+
stroke-width="1.5"
54+
fill="none"
55+
stroke-linecap="round"
56+
stroke-linejoin="round"
57+
>
58+
<path d="M5 16.5l9-4.5-2 11.5 3-4.5 5 2-8-14Z" />
59+
<path d="M7 22c2-2.5 4-2.5 6 0s4 2.5 6 0" />
60+
</g>
61+
</svg>
62+
<span>floatpane</span>
63+
</div>
64+
<ul class="nav-links">
65+
<li><a href="#features">Features</a></li>
66+
<li><a href="#installation">Installation</a></li>
67+
<li><a href="https://github.com/floatpane/floatpane">GitHub</a></li>
68+
</ul>
69+
</nav>
70+
</header>
71+
72+
<main>
73+
<section class="hero">
74+
<div class="container">
75+
<h1>floatpane</h1>
76+
<div class="css-typing">
77+
<p>The Ultimate</p>
78+
<p>macOS Wallpaper Manager.</p>
79+
</div>
80+
81+
<div class="badges">
82+
<span class="badge">MIT License</span>
83+
<span class="badge">macOS Only</span>
84+
<span class="badge">Electron + React</span>
85+
<span class="badge">⭐ <span id="github-stars">...</span></span>
86+
</div>
87+
88+
<a href="#installation" class="download-btn" id="download-link">
89+
<span>⬇</span>
90+
Download Latest (<span id="latest-version">...</span>)
91+
</a>
92+
</div>
93+
</section>
94+
95+
<section class="demo">
96+
<div class="container">
97+
<h2>Live Preview</h2>
98+
<div class="demo-terminal">
99+
<div class="terminal-header">
100+
<div class="terminal-dots">
101+
<div class="terminal-dot red"></div>
102+
<div class="terminal-dot yellow"></div>
103+
<div class="terminal-dot green"></div>
104+
</div>
105+
</div>
106+
<div class="terminal-body">
107+
<div class="command-line">
108+
<span class="prompt">~ $</span>
109+
<span class="command">open -a floatpane</span>
110+
</div>
111+
<div class="output">
112+
Launching floatpane... <br />
113+
Press Cmd+Shift+P to toggle the selector.
114+
</div>
115+
116+
<div class="demo-preview">
117+
<div class="floating-window">
118+
<div class="wallpaper-grid">
119+
<div class="wallpaper-thumb"></div>
120+
<div class="wallpaper-thumb"></div>
121+
<div class="wallpaper-thumb active"></div>
122+
<div class="wallpaper-thumb"></div>
123+
<div class="wallpaper-thumb"></div>
124+
<div class="wallpaper-thumb"></div>
125+
<div class="wallpaper-thumb"></div>
126+
<div class="wallpaper-thumb"></div>
127+
</div>
128+
<div class="demo-footer">
129+
<div class="demo-version">v1.2.0</div>
130+
<div class="demo-icons">
131+
<svg
132+
class="demo-icon"
133+
xmlns="http://www.w3.org/2000/svg"
134+
width="16"
135+
height="16"
136+
viewBox="0 0 24 24"
137+
fill="none"
138+
stroke="currentColor"
139+
stroke-width="2"
140+
stroke-linecap="round"
141+
stroke-linejoin="round"
142+
>
143+
<path
144+
d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"
145+
></path>
146+
</svg>
147+
<svg
148+
class="demo-icon"
149+
xmlns="http://www.w3.org/2000/svg"
150+
width="16"
151+
height="16"
152+
viewBox="0 0 24 24"
153+
fill="none"
154+
stroke="currentColor"
155+
stroke-width="2"
156+
stroke-linecap="round"
157+
stroke-linejoin="round"
158+
>
159+
<path
160+
d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"
161+
></path>
162+
</svg>
163+
</div>
164+
</div>
165+
</div>
166+
</div>
167+
</div>
168+
</div>
169+
</div>
170+
</section>
171+
<section class="features" id="features">
172+
<div class="container">
173+
<h2>Features</h2>
174+
<div class="features-grid">
175+
<div class="feature-card">
176+
<div class="feature-icon">🖼️</div>
177+
<h3>Instant Preview</h3>
178+
<p>
179+
Quickly preview wallpapers in a floating window without
180+
interrupting your workflow.
181+
</p>
182+
</div>
183+
<div class="feature-card">
184+
<div class="feature-icon">⚡</div>
185+
<h3>Blazing Fast</h3>
186+
<p>
187+
Built with performance in mind. Generates thumbnails on the fly
188+
for a smooth experience.
189+
</p>
190+
</div>
191+
<div class="feature-card">
192+
<div class="feature-icon">🧭</div>
193+
<h3>Tiling WM Friendly</h3>
194+
<p>
195+
Built to coexist peacefully with tiling window managers like
196+
yabai and Aerospace.
197+
</p>
198+
</div>
199+
<div class="feature-card">
200+
<div class="feature-icon">⌨️</div>
201+
<h3>Keyboard Driven</h3>
202+
<p>
203+
Navigate, select, and set wallpapers without ever touching your
204+
mouse.
205+
</p>
206+
</div>
207+
</div>
208+
</div>
209+
</section>
210+
211+
<section class="installation" id="installation">
212+
<div class="container">
213+
<h2>Installation</h2>
214+
<h3 style="text-align: center; margin-bottom: 2rem">
215+
Install with Homebrew (Recommended)
216+
</h3>
217+
<div class="demo-terminal" style="max-width: 800px; margin: 0 auto">
218+
<div class="terminal-header">
219+
<div class="terminal-dots">
220+
<div class="terminal-dot red"></div>
221+
<div class="terminal-dot yellow"></div>
222+
<div class="terminal-dot green"></div>
223+
</div>
224+
<button
225+
class="copy-btn header-copy-btn"
226+
data-clipboard-text="brew tap floatpane/floatpane && brew install floatpane && xattr -cr /Applications/floatpane.app"
227+
aria-label="Copy install commands"
228+
>
229+
<svg
230+
xmlns="http://www.w3.org/2000/svg"
231+
width="16"
232+
height="16"
233+
viewBox="0 0 24 24"
234+
fill="none"
235+
stroke="currentColor"
236+
stroke-width="2"
237+
stroke-linecap="round"
238+
stroke-linejoin="round"
239+
>
240+
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
241+
<path
242+
d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"
243+
></path>
244+
</svg>
245+
<span>Copy All</span>
246+
</button>
247+
</div>
248+
<div class="terminal-body">
249+
<div class="command-line">
250+
<span class="prompt">~ $</span>
251+
<span class="command">brew tap floatpane/floatpane</span>
252+
</div>
253+
<div class="command-line">
254+
<span class="prompt">~ $</span>
255+
<span class="command">brew install floatpane</span>
256+
</div>
257+
<div class="command-line">
258+
<span class="prompt">~ $</span>
259+
<span class="command"
260+
>xattr -cr /Applications/floatpane.app</span
261+
>
262+
</div>
263+
</div>
264+
</div>
265+
<h3 style="text-align: center; margin-top: 3rem; margin-bottom: 2rem">
266+
Or, Manually Install
267+
</h3>
268+
<div class="install-steps">
269+
<div class="install-step">
270+
<div class="step-number">1</div>
271+
<div class="step-content">
272+
<h3>Download</h3>
273+
<p>
274+
Grab the latest <code>.dmg</code> from the
275+
<a
276+
href="https://github.com/floatpane/floatpane/releases"
277+
id="install-link"
278+
>releases page</a
279+
>.
280+
</p>
281+
</div>
282+
</div>
283+
<div class="install-step">
284+
<div class="step-number">2</div>
285+
<div class="step-content">
286+
<h3>Install</h3>
287+
<p>
288+
Open the <code>.dmg</code> and drag
289+
<strong>floatpane.app</strong> into your
290+
<code>/Applications</code> folder.
291+
</p>
292+
</div>
293+
</div>
294+
<div class="install-step">
295+
<div class="step-number">3</div>
296+
<div class="step-content">
297+
<h3>Launch</h3>
298+
<p>
299+
Use the global shortcut <code>Cmd+Shift+P</code> to launch
300+
floatpane anytime.
301+
</p>
302+
</div>
303+
</div>
304+
</div>
305+
</div>
306+
</section>
307+
</main>
308+
309+
<footer>
310+
<div class="container footer-content">
311+
<p>&copy; 2025 floatpane. MIT Licensed.</p>
312+
</div>
313+
</footer>
314+
<script src="script.js"></script>
315+
</body>
316+
</html>

0 commit comments

Comments
 (0)