Lattice Studio Guide

1. Create and preview

1. Start with Neon Tiles, or choose another of the 15 presets using its thumbnail. Returning visits restore your saved design.
2. Set the canvas size and Background color, then adjust dots, light, motion and cursor effects. Open Layers · advanced to edit individual layers.
3. Use Full screen to see the same design without the editor around it. Return with Escape or Return to editor.
4. Open Save & download to keep editable settings or export the result.

The preview plays automatically when you open or reload the editor, including when it restores a previously paused session. Pause freezes the pattern for your current visit, including trips to Guide or Settings. If your device requests reduced motion, the preview starts paused instead to respect that preference; select Play when you want to animate it.

Fullscreen scales the existing composition; it does not add dots or change the design size. Under Canvas, use Background color to choose any solid colour with the picker or a hex value. It starts pitch black. The colour stays with your design and its exports; website themes change only the surrounding controls.

On a wide screen, drag the controls panel’s right edge to make more editing space. The preview and panel stay centred together, and wider controls can use two columns. Focus the Editor width handle and use Left/Right to resize, Shift for larger steps, Home to reset or End for the widest layout. The Reset width button also restores the default. Resizing changes the workspace layout, not the artwork’s dimensions or dot count. Your preferred width is remembered in this browser; phones keep the stacked layout.

2. Dots and layers

Dot spacing and target count describe the same grid: changing one adjusts the other. The actual count is shown in the preview. Fill chooses how many grid positions contain dots: a target of 10,000 with 50% fill requests 5,000 visible dots, subject to the renderer’s capacity. Dot size is independent. Roundness moves between squares, rounded squares and circles; rotation turns them. Optional sphere shading gives the flat shapes a lit, rounded appearance.

Use 100% Fill for a solid grid of positions. Target count and performance limits adjust its spacing instead of scattering gaps through it; an exact count can leave a partial row at the edge. Lower Fill intentionally leaves gaps. A dot can also look absent when it is very dim: adjust Unlit dot color and Unlit dot brightness under Light to make the resting grid easier to see.

Choose a square or hexagonal grid, add jitter for irregular spacing, or use afterglow for fading trails. Afterglow fade time is how many animation seconds it takes a trail to halve in brightness; slower animation makes it fade more slowly in real time. Light controls also adjust the unlit dots, glow, contrast and colour changes.

Layers · advanced appears after Mouse interaction and gives each layer its own colour, brightness and motion. Plane makes travelling waves, Ripple makes expanding rings, Sweep rotates around a centre, Shimmer combines moving waves, and Pulse brightens and dims the whole field together.

Add combines light; Max keeps the stronger contribution; Mask reduces the light from earlier layers without adding a colour. Turn layers off individually to see what they contribute.

3. Motion and loops

The speed control reaches 0.001× for very slow movement. Use its slider for broad changes or enter a number for precision. Cursor effects keep their own response time, so slowing the background does not make your cursor feel sluggish.

Under Loop and frame rate, choose a pattern loop length and select Make pattern repeat to adjust layer speeds and colour drift into a repeating pattern. Repeat this after changing those values. The playback speed determines how long a complete loop takes in real time.

For video, Full loop records the complete repeating period; at very slow speeds this can take a long time. Short clip records your chosen duration without waiting for the full cycle. A clip’s start and end may not match.

The loop indicator checks the pattern’s mathematics. Browser recording and encoding can alter frame timing, so even a full loop is not guaranteed to have a frame-perfect join. Check the downloaded video in its intended player.

4. Cursor and clicks

Combine three independent groups: light around the cursor, movement of nearby dots, and clicking. For example, use Glow with Pull and click ripples together.

• Light around cursor: Off, Glow or Dim. Set its radius and strength; More cursor light settings contains softness and fade, plus colour for Glow.
• Movement of dots: Off, Push or Pull. Set its radius and strength independently of the light; More dot movement settings contains softness and fade. Push and Pull are alternatives; selecting one replaces the other.
• On click or tap: Off or Ripple, with its own strength and travel speed. More ripple settings contains width, fade and colour.

Settings for disabled effects stay out of the way. Try the enabled effects directly in the preview or fullscreen view; their response time remains independent of the background’s animation speed.

With Ripple enabled, hold the primary mouse button and move to leave repeated ripples along your path. A click still makes one ripple. The browser or wallpaper host must deliver the input for this to work.

PNG and ordinary video contain rendered pictures and cannot react to your future cursor movement. Live HTML and the Wallpaper Engine package keep the interactive code. Interaction also depends on whether the browser or wallpaper host forwards the pointer.

5. Presets and saved work

The 15 built-in presets include the original seven designs. Their thumbnails show the actual patterns. Save your own design with a name to keep it in this browser’s local preset list, then load it again when needed.

Undo and Redo help you compare edits. Section reset actions restore a group of settings; the small reset control beside a slider restores that value. Download Settings JSON for an editable copy you can move to another browser or device; Open settings restores it. Earlier saved designs are converted to the new interaction groups while retaining their existing effect.

The editor width is a separate local preference, so sharing a design does not change someone else’s workspace. The last session and named presets use local browser storage. Clearing site data removes them, and they do not sync between devices. Automatic saving is useful for returning to work; downloaded settings are your portable backup.

Guide and Settings retain the editor. Its animation pauses while hidden, and Home returns to the same design. An active recording is cancelled when the editor or tab becomes hidden.

6. Download your work

• PNG still: one frame at the selected canvas size, with pattern afterglow reconstructed and pointer effects excluded.
• Video: a full loop or a timed clip, using MP4 when supported and WebM otherwise. Lower recording resolution scales the same design. Keep the editor visible until it finishes.
• Live HTML: one self-contained page that animates the saved design and retains its cursor and click effects.
• Wallpaper Engine: a ZIP containing a local web wallpaper, its adjustable properties, editable settings and setup instructions.
• Settings: a JSON file for editing this design in Lattice Studio again.

Each format keeps your chosen background colour. Named presets and your automatically restored session keep it too.

Recording takes place in real time and uses device memory. Longer recordings and larger dimensions need more resources. Use a shorter clip or lower resolution if a recording cannot finish; resource protection may stop it before the browser runs out of memory.

7. Wallpaper Engine on Windows

Download the Wallpaper Engine ZIP, extract it into its own folder and follow the included README. Keep its files together so the supplied adjustable properties remain available. Wallpaper Engine’s official web wallpaper guide explains importing the main HTML file.

The package includes controls you can change from Wallpaper Engine, including the background colour, and supports the host’s frame-rate and pause settings. See its user properties guide for where those controls appear.

If the wallpaper pauses while another program is open, check Wallpaper Engine’s Performance settings and application rules. The host can pause or stop wallpapers for other applications, as described in its performance help. This does not establish that pointer input will pass through a foreground window.

Clicks inside another application may not reach the wallpaper, even when desktop clicks work. This release does not capture clicks globally through foreground windows. If needed, enable Input diagnostics in the exported wallpaper’s properties: it shows received click counts and playback state locally, helping distinguish missing input from a paused wallpaper. It is off by default and saves or sends no input history.

Dragging a desktop file can leave ripples when Wallpaper Engine delivers held movement or file-drag events to the wallpaper. Delivery during a Windows desktop file drag has not been verified. Lattice does not read the dragged file or take over its drop action.

Actual input delivery depends on your Windows and Wallpaper Engine setup; browser checks cannot verify it. Lattice Studio creates the files; Wallpaper Engine manages applying and removing them from your desktop.

8. Animated backgrounds on Android

Use a video export for Android. You can create and download it on your phone, then import it into the free Wallpaper Engine Android app; local video import does not need a PC or pairing. The app requires Android 10 or newer.

1. In the canvas target selector, choose 1170 × 2532 (phone) for a portrait design, or enter dimensions matching your phone. Check the framing in the preview.
2. Open Save & download. Choose Short clip and a duration, then Record video. Keep the editor visible until the download finishes. Short clip is practical for slow animation; Full loop waits for the complete cycle, which may take much longer. A short clip’s ends may not match.
3. Keep the downloaded video in your phone’s Downloads folder. If you made it on a computer, copy the video to the phone first.
4. Open Wallpaper Engine, choose Add → Import File, and select the video. Preview its framing, then use the checkmark to apply it. Confirm the home-screen or lock-screen options offered by Android.

MP4 or WebM availability depends on the recording browser; playback also depends on the phone’s supported formats and codecs. If a video will not import or play, convert it to a compatible MP4 file and try again. Renaming the extension does not convert it.

The video animates but cannot respond to touches or cursor movement. The Wallpaper Engine ZIP is a Windows web wallpaper; it is not the Android workflow described here. Lattice Studio cannot set your phone’s wallpaper directly.

Lock-screen support varies by phone and launcher. If the option is missing, Wallpaper Engine’s Android help explains how to long-press the preview checkmark to open Android’s wallpaper chooser. Its file-import help also explains Downloads-folder access.

9. Compatibility and source

WebGL gives the full renderer. The 2D fallback supports the dot shapes and rotation, with approximate glow and sphere shading and a lower dot limit, so it can look different. Video formats and practical export sizes depend on your browser and device.

Designs and exports are processed on your device, without accounts or design uploads. Loading the website initially requires a connection. The exported HTML and wallpaper files are separate local artifacts; this does not promise an offline installation of the website.

Download Lattice Studio 0.10.0 source. The included README explains running the standalone editor locally. The supplied renderer’s public-domain notice is preserved; the website and new integration use the existing MIT licence. Code notices do not impose a new licence on your exported images or videos.

Website settings

Main site and the named parents above the page follow the site’s hierarchy. Guide and Settings use local pages where available.

Settings lets you hide the header and choose Light, Light Gray, Dark or Pitch Black / OLED. Light Gray is the first-visit default. The parent row and footer remain available when the header is hidden.

Choose System, DM Sans, Outfit, or Outfit headings with DM Sans body text in Settings. The preview and interface change immediately. Outfit is the first-visit default; fonts are served by these websites. Your saved selection is preserved.

Theme, header and font preferences are shared across andrazdjuric.com websites in this browser. They contain no document data or visitor identifier and are separate from installed application settings.

Contact in the footer opens the main site’s contact options in a new tab. Use it for questions, problem reports or suggestions.

The shared interface rules explain navigation, link markers, themes, raised surfaces and control states.