日本語 | English
Official examples and starter templates for building live wallpapers with Fluxlay. Each directory is a standalone project that works directly with the @fluxlay/clidev / build / publish commands — copy one and edit freely as a starting point for your own wallpaper.
These examples are also the canonical home for patterns that are intentionally not in the @fluxlay/react SDK (such as WebGL helpers, drawing utilities, and other browser-API wrappers). The SDK is scoped to runtime-bridging APIs; everything else lives here as code you own.
📖 Documentation:Getting Started · CLI Reference · Manifest Reference · SDK Reference
| Example | Description | APIs used |
|---|---|---|
| hello-world | Minimal template — a starting point for new projects. | — |
| shader-basic | Shadertoy-compatible GLSL fragment shader rendered fullscreen. Includes a reusable <Shader /> component you can copy into your own project. | — (pure WebGL2) |
| mouse-follower | Star particles drifting toward your cursor with React Spring physics. | useMousePosition |
| gradient-waves | Layered gradient waves with time-of-day color shifts. | useMousePosition |
| particle-flow-field | Perlin-noise flow field with painterly particle trails. | useMousePosition |
| glass-cube | Refractive glass cube rendered with React Three Fiber. | useMousePosition |
| audio-visualizer | Circular frequency bars with now-playing media metadata. | useAudio, useMediaMetadata, useProperties |
| matrix-rain | Matrix-style digital rain reactive to CPU load. | useSystemMonitor |
| system-monitor | Cyberpunk HUD displaying CPU / memory / network metrics. | useSystemMonitor |
| monochrome-monitor | Minimal black-and-white system HUD with a bottom-edge audio spectrum strip and dark/light theme switch. | useSystemMonitor, useAudio, useMediaMetadata, useProperties |
| run-command | Desktop dashboard powered by macchina, pmset, curl. | useShell, shell / network manifest |
| dev-dashboard | Developer dashboard with GitHub PRs, Google Calendar, and a Pomodoro timer. Demonstrates proxiedFetch, openUrl, notify, and Mimo-driven clicks. | proxiedFetch, openUrl, notify, MimoProvider, useProperties |
In any example directory:
cd<example>
pnpm install
pnpm dev # Dev server with HMR, paired with the Fluxlay app
pnpm build # Produces wallpaper.fluxlay
pnpm publish # Publish to the Fluxlay store (requires login)Note
The dev server requires the Fluxlay desktop app and authentication via fluxlay login. See the getting started guide for the full walkthrough.
- Node.js 20+ / pnpm 10+
- macOS or Windows (per Fluxlay's supported platforms)
run-commandadditionally requiresmacchina,curl, andjq
Every example follows the same layout:
<example>/
├── fluxlay.yaml # Wallpaper manifest (name / slug / kind: web / properties, etc.)
├── package.json # Depends on @fluxlay/cli, @fluxlay/vite, @fluxlay/react
├── vite.config.ts # Configures the @fluxlay/vite plugin
├── index.html
└── src/main.tsx # Wallpaper entry point
See the manifest reference for the full fluxlay.yaml specification, and the Vite plugin reference for @fluxlay/vite options.
Each example is provided under the MIT License. Feel free to fork and modify them to build your own wallpapers.