Your desktop, alive and transparent.
Official interactive showcase for WallpaperLive and TransparentBar.
Showcase · Real Test Data · Features · Design Identity · Tech Stack · Quick Start · Vercel Deploy · Support
LivelyDesk is the official unified web portal for two high-performance, native Windows desktop utilities created by @Raflyf:
- WallpaperLive: Native Windows live wallpaper engine. Plays local videos (MP4, WebM, GIF, MKV) with hardware-accelerated D3D11 decoding via native libmpv and an in-app 3x3 thumbnail library. Playback auto-pauses for maximized or fullscreen apps; resource-use snapshots are documented below.
- TransparentBar: Native Rust taskbar transparency with legacy and XAML taskbar support. The tray controls an optional maximized-window connector, its grid pattern and color transitions, startup at sign-in (off by default), and GitHub release checks.
The website presents a desktop demo video, native-app screenshots, and resource-use captures before download.
Latest WallpaperLive captures were supplied on 9 November 2026. Values below reproduce the author's resource-use documentation and screenshot source record. They show separate moments on one Windows setup, not a controlled benchmark.
| State captured in Task Manager | Memory shown | CPU shown | Scope |
|---|---|---|---|
| 4K cache preparation (v0.1.6) | 437.5 MB | 42.4% | App plus background cache worker during temporary conversion |
| Cache ready, 3x3 panel open (v0.1.6) | 41.4 MB – 47.4 MB | 1.3% – 2.5% | Two captures: 41.4 MB / 2.5% CPU and 47.4 MB / 1.3% CPU |
| Desktop live playback (v0.1.6) | 37.8 MB | 1.5% | Active wallpaper with Task Manager visible; disk 0 MB/s, network 0 Mbps |
| Fullscreen/maximized auto-pause (v0.1.5 capture) | 4.5 MB | 0% | Earlier paused snapshot reused in the latest documentation |
The earlier v0.1.5 tray-playback capture from 8 November 2026 shows 20.3 MB / 0.5% CPU. It is not a new v0.1.6 measurement. The retained source figure shows the original v0.1.5 tray and auto-pause captures unchanged.
Cache preparation is temporary; its app-and-worker row is not steady playback usage. Task Manager rounds CPU values, so displayed 0% does not prove zero work. Its Memory column does not establish total private allocation, all process-tree memory, or dedicated VRAM. Media, codec, display resolution, driver, and cache state affect usage. These captures do not measure GPU utilization or guarantee a RAM ceiling or GPU/VRAM savings.
The website displays these values in the table only; the source crop is retained for attribution.
| Host process memory | CPU | Disk | Network |
|---|---|---|---|
| 3.9 MB | 0% | 0 MB/s | 0 Mbps |
Values follow the updated TransparentBar README and its v0.2.4 Task Manager crop. The row covers the host process only, excluding the bridge loaded inside Explorer. CPU is rounded; these are capture-time values, not a benchmark or upper limit. The two projects were captured separately.
TransparentBar requires Windows 10 or 11 on x64; ARM64 is not supported. Its connector supports primary and secondary bottom-docked taskbars with auto-hide off. Fullscreen windows hide the connector; display sleep and session lock pause sampling. Keep the portable executable and its versioned bridge DLL together. Select Exit to restore the saved taskbar appearance.
The first tab keeps the existing desktop demo video. Other tabs show the v0.1.6 native library, TransparentBar detail, and the retained v0.1.5 Task Manager tray/auto-pause figure. The updated figure uses the author’s Burnt Orange metric annotations; Task Manager photo bands and measurements are unchanged. It is bundled locally and displayed at its native aspect ratio. Photo provenance. Capture versions remain historical, not the current download version.
- Interaction motion: Repeat-on-entry scroll reveals for all content groups, including headings, cards, bars, controls, and footer, desktop hover lifts, button press feedback, animated showcase captions, and smooth FAQ expansion. Reveal uses CSS and two IntersectionObserver boundaries: enter 32px inside the viewport, reset only 160px outside. This prevents moving elements from repeatedly restarting at the edge. Elements fade from zero opacity and move 44px (56px for the headline), without nested reveal transforms. Motion stays enabled regardless of device reduced-motion preference by product choice. CSS animations pause while the page is hidden. Only the outer reveal group animates, preventing nested transform conflicts. The demo video pauses when offscreen, hidden by another tab, or the window loses focus; visibility resumes playback from the current position. Manual pause remains respected while scrolling.
- Smooth scrolling: Lenis smooths wheel input and section navigation with one shared scroll engine. Touch scrolling stays native. Its frame loop runs only during input/inertia, stops when idle, and is canceled while the page is hidden. Keyboard scrolling can interrupt inertia. No canvas, blur, or scroll-linked React state.
- Light and dark themes: Navbar switch keeps Cream
#F3EEE3, Ink Black#111111, and Burnt Orange#D9541E. Dark is the default; an explicitly saved light theme is preserved when browser storage is available. - Official product icons: Current WallpaperLive and TransparentBar logos are bundled unchanged, including their original colors. Icon sources.
- Resource usage: Task Manager captures cover cache preparation, desktop playback, and auto-pause.
- Bilingual Support (ID / EN): Indonesian and English have separate URLs. The language switch follows the selected page language.
- Shared release metadata: Hero versions and download cards use the same GitHub
/releases/latestresponse on page load. Drafts and prereleases are excluded from the current version. Installer links and decimal MB sizes follow that release; cumulative counts include.exeand.zipassets across paginated public releases. API errors show unavailable status and link to GitHub’s latest release, never an invented or hardcoded fallback version. No continuous polling. - Support options: Separate Yapp and Saweria cards with cream and ink surfaces inside a shared frame, side by side on wider screens and stacked on phones. The navbar and hero Support buttons scroll to these cards rather than opening a payment platform. Each card opens its own platform, where the contribution amount is chosen.
The LivelyDesk mark uses layered desktop panels, copper-colored edges, a wallpaper wave, and a translucent taskbar. Browser icons, header, and footer share the design. WallpaperLive and TransparentBar retain their own product icons.
| Role | Color | Hex Code | Purpose |
|---|---|---|---|
| Cream | Sand White | #F3EEE3 |
Main background, clean light cards, soft borders |
| Ink Black | Deep Charcoal | #111111 |
Editorial headings, dark surfaces, monitor bezels |
| Burnt Orange | Vibrant Accent | #D9541E |
Action buttons, highlighted badges, active state indicators |
- Framework: React 19 + TypeScript
- Bundler: Vite 6
- Styling: Tailwind CSS v4
- Icons: Lucide React
- Typography: Bricolage Grotesque, Plus Jakarta Sans, JetBrains Mono
- Deployment: Vercel (Zero-config static deployment via
vercel.json)
The English guide and Indonesian guide cover installation, local media, playback, taskbar controls, updates, data handling, and troubleshooting. The Docs link in the navbar and footer follows the selected language.
Guide content records the upstream README revisions in docSources. Update both languages together when those instructions change. Vite renders the content into HTML at build time using the documentation renderer; it does not fetch remote documentation during a build. Both guides remain readable without JavaScript. The shared static-page script handles saved theme, language preference, and the mobile table of contents. Product pages and Docs use the homepage's reveal and Lenis smooth-scroll modules, including repeated reveals, hover/press feedback, idle/hidden-page suspension, and native touch scrolling. In-page links retain their hash and keyboard focus, the sidebar scrolls independently, and print output stays visible. Back/forward cache restores motion without duplicate listeners. Video and release-fetch code stays on the homepage.
The guide routes /doc and /doc/id use explicit rewrites in vercel.json, alongside the home and product language routes. Unknown paths retain normal 404 behavior; the Google verification file is unchanged. Local Vite serves directory pages with a trailing slash, including /doc/ and /doc/id/.
- Home: English and Indonesia.
- WallpaperLive: English and Indonesia, covering live wallpaper apps for Windows 10/11 and local video/GIF playback.
- TransparentBar: English and Indonesia, covering transparent taskbar setup and compatibility.
Vite renders the homepage from the same React components it hydrates in the browser. The route selects the language; saved theme and live release data load after hydration. Returning to / with a saved Indonesian preference opens /id; choosing EN explicitly clears that preference before navigation. Fresh visitors receive the same English HTML regardless of user agent. Product and guide pages keep static HTML and enhance it with the shared theme and motion script. Content remains visible when JavaScript is unavailable. Crawlers and visitors receive the same content; no user-agent routing, invented reviews, or hidden keyword lists. Canonicals, reciprocal language alternatives, product schema, internal links, and sitemap.xml use the published URLs.
Query wording was checked against public Google autocomplete on 10 November 2026: live wallpaper Windows, transparent taskbar, wallpaper bergerak, and taskbar transparan. These suggestions establish phrasing, not search volume, difficulty, or current rankings. The app pages do not promise downloadable wallpaper collections or a taskbar solution without running an app.
After publishing, review Search Console indexing and queries for the new URLs. Compare impressions, clicks, and position over time; neither a sitemap nor these changes guarantees indexing or a top result. See Google's SEO Starter Guide.
# Clone the repository
git clone https://github.com/Raflyf/LivelyDesk.git
cd desktop-suite-web
# Install dependencies
bun install
# or
npm install
# Start local development server
bun run dev
# or
npm run devbun run build
# or
npm run build- Connect
Raflyf/LivelyDeskto the existing Vercel projectdesktop-suite-webwith Production Branchmain. - Use the Vite preset and output directory
dist. - Enable GitHub deployment records in Project Settings > Git (
gitProviderOptions.createDeployments: "enabled"). Vercel records deployment state and the production URL in GitHub. - Push to
mainand verify the resulting deployment SHA and production website.
The native Git integration handles deployment; no parallel Actions deployment or CLI upload is needed. Creating a GitHub environment alone does not deploy the website.
WallpaperLive and TransparentBar are free, open-source Windows apps.
If you find these projects helpful, consider supporting their ongoing development:
- Tip directly via QRIS, Card, E-Wallet, or USDT at yapp.ink/raflyf.
- Support through Saweria (BuyMatcha).
LivelyDesk’s original website code and documentation are licensed under MIT. Copyright (c) 2026 Raflyf.
The showcased applications remain separately licensed:
Third-party dependencies retain their own licenses. Product logos, screenshots, demo videos, and wallpaper artwork are not automatically covered by LivelyDesk’s MIT license; their original rights and permissions remain in force. See icon sources and figure sources.