Fluxlay Examples

日本語 | English

Official examples and starter templates for building live wallpapers with Fluxlay. Each directory is a standalone project that works directly with the @fluxlay/cli dev / 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

Examples

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

Usage

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.

Requirements

• Node.js 20+ / pnpm 10+
• macOS or Windows (per Fluxlay's supported platforms)
• run-command additionally requires macchina, curl, and jq

Project structure

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.

License

Each example is provided under the MIT License. Feel free to fork and modify them to build your own wallpapers.