Create Example Wallpapers

Create: Example Wallpapers (Showcase)

Sucrose ships a set of Showcase wallpapers — fully authored, working examples that double as the best learning material for creators. They are real wallpaper folders under src/Bundle/Sucrose.Bundle/Showcase/ in the source tree, and they appear in your Library after install. This page walks through the most instructive ones and points out exactly which authoring feature each one demonstrates: the manifest, audio reactivity, the system-status API, customization controls, and cross-engine compatibility patterns. Open these folders alongside the creator guides to see the JSON and JavaScript in practice.

Contents

• How to find them
• Anatomy of a Showcase wallpaper
• Neo Matrix
• Fluid Simulation
• Simple System
• Music Tunnel
• Living Room
• Ray Music Visualizer
• What to learn from each
• See also

How to find them

The authored examples live in the source repository under src/Bundle/Sucrose.Bundle/Showcase/, each in its own folder (for example Neo Matrix-1, Fluid Simulation-1, Simple System-1). After installing Sucrose they are imported into your Library automatically, so you can also apply, customize, and inspect them from the Portal. To study one as a creator, open its folder and read its SucroseInfo.json, SucroseCompatible.json, and SucroseProperties.json next to the worked schemas in Create Package Format, Create JS Bridge, and Create Customization Controls. See Managing Library for how Showcase items reach your Library.

Anatomy of a Showcase wallpaper

Every example below is a Web wallpaper ("Type": 2), so each folder contains:

• SucroseInfo.json — the required manifest (title, author, type, source HTML, tags, localization).
• The entry HTML named by Source (for example Matrix.html, Fluid.html, System.html) plus its JS/CSS/assets.
• SucroseCompatible.json — present when the wallpaper consumes live audio/system data.
• SucroseProperties.json — present when the wallpaper exposes customization controls.
• Thumbnail.jpg / Preview.gif — preview images named in the manifest (these examples use thumbnail.jpg and preview.gif).
• License.txt — referenced by the manifest License field.

Neo Matrix

Author: Mohammad Mahdi Nazari. Source: Matrix.html, Type: 2. The classic falling-glyph Matrix rain, heavily customizable and audio-reactive.

What it teaches:

• Rich customization controls. Its SucroseProperties.json is the reference example used throughout the creator docs — sliders (ui_rain_matrixspeed), a color picker (ui_color_matrixcolor, value #FF00FF00), a textbox (ui_characters_customcharset), a dropdown (ui_color_colormode), and label controls used as section dividers (folder_rain). It also ships a PropertyLocalization block. See Create Customization Controls.
• Cross-engine audio detection. Its JavaScript is the canonical compatibility pattern: it probes window.wallpaperRegisterAudioListener (Wallpaper Engine / Lively) first and falls back to window.SucroseAudioData for Sucrose. See Create Compatibility.
• Localization in the manifest. Its SucroseInfo.json carries a Localization map with per-language Title/Description.

Fluid Simulation

Author: Dani John. Source: Fluid.html, Type: 2. A WebGL fluid simulation that reacts to system audio and the cursor.

What it teaches:

• Minimal audio opt-in. Its SucroseCompatible.json is a single hook:

  { "SystemAudio": "SucroseAudioData({0});" }

  This is the smallest possible audio-reactive setup — declare one hook, implement SucroseAudioData(obj), read obj.Data. See Create Audio API.

• Interactivity. It responds to the cursor, demonstrating that Web wallpapers receive forwarded mouse input when the desktop is focused. See Create Web Architecture and Type-Web.

• Silence handling. It treats Data[0] === 0 as silence — the recommended check for the FFT spectrum.

Simple System

Author: Dani John. Source: System.html, Type: 2. A minimal dashboard that charts live hardware readings.

What it teaches:

• The System Status API. Its SucroseCompatible.json requests exactly the four categories it draws:

  {
    "SystemMemory":    "SucroseMemoryData({0});",
    "SystemGraphic":   "SucroseGraphicData({0});",
    "SystemNetwork":   "SucroseNetworkData({0});",
    "SystemProcessor": "SucroseProcessorData({0});"
  }

  It demonstrates reading Now (CPU/GPU load), computing total RAM as MemoryUsed + MemoryAvailable, and converting network Download bytes/s to MB/s. See Create System API.

• Request only what you render. It is the model for declaring just the hooks you use, and nothing else.

Music Tunnel

Author: Dani John. Source: Tunnel.html, Type: 2. An infinite, audio-driven tunnel.

What it teaches:

• Audio-driven visuals at scale. Like Fluid Simulation, its SucroseCompatible.json declares "SystemAudio": "SucroseAudioData({0});", and the whole effect is driven from the FFT spectrum.
• Customization on top of audio. It also ships a SucroseProperties.json, showing how to combine user controls with an audio-reactive effect.

Living Room

Author: Dani John. Source: Room.html, Type: 2. A scene with music, a visualizer, and a clock.

What it teaches:

• Combining multiple capabilities. It declares "SystemAudio": "SucroseAudioData({0});" for the visualizer and ships a SucroseProperties.json for user options — a good example of a richer, composite wallpaper.
• A clock element illustrates the kind of widget that pairs naturally with the SucroseDateData callback documented in Create System API.

Ray Music Visualizer

Author: Aprotonix (License: MIT). Source: Visualizer.html, Type: 2. An audio spectrum visualizer that reacts to system sound.

What it teaches:

• A focused audio visualizer. Its SucroseCompatible.json is "SystemAudio": "SucroseAudioData({0});" — a clean reference for turning obj.Data directly into a spectrum display.
• Customization controls. It ships a SucroseProperties.json, so you can study how a visualizer exposes color/style options to the user.

What to learn from each

Showcase	Type	Audio	System data	Custom controls	Best for learning
Neo Matrix	Web	Yes	—	Yes (rich)	Controls + cross-engine detection + localization
Fluid Simulation	Web	Yes	—	Yes	Minimal audio opt-in + interactivity
Simple System	Web	—	Yes (CPU/GPU/RAM/Net)	—	The System Status API
Music Tunnel	Web	Yes	—	Yes	Audio-driven visuals + controls
Living Room	Web	Yes	—	Yes	Composite wallpaper (audio + clock + options)
Ray Music Visualizer	Web	Yes	—	Yes	A focused spectrum visualizer

📷 Screenshot needed: The Portal Library showing the shipped Showcase wallpapers (Neo Matrix, Fluid Simulation, Simple System, Music Tunnel, Living Room, Ray Music Visualizer).

See also

• Create Package Format — the SucroseInfo.json manifest these examples use
• Create Audio API — SucroseAudioData (Fluid Simulation, Music Tunnel, Ray, Living Room)
• Create System API — the system callbacks (Simple System)
• Create Customization Controls — SucroseProperties.json (Neo Matrix is the reference)
• Create Compatibility — the cross-engine detection pattern (Neo Matrix)
• Create Step By Step — author your own from scratch
• Managing Library — how Showcase items appear in your Library