What background graphics can I use behind a thread?

A product image with parallax depth, a rotating gallery of visuals, an animated SVG decor pattern, or a 3D model. The renderer animates the background automatically without extra configuration.

Can I use my own brand graphic?

Yes. Upload a brand graphic in styling settings and the renderer uses it as the default background pattern across the Weave.

Do background graphics affect mobile performance?

No, because they share the same activity-based render loop as the rest of the renderer. The background sleeps when the buyer is reading and only updates when something visible is changing.

Background Graphics

Background graphics turn flat content into immersive, cinematic screens. Instead of a plain color behind your text or cards, you can place a product image with parallax depth, a rotating gallery of visuals, or even a 3D model — all animated automatically by the renderer.

Where to find it

Open any component in the thread builder and look for the Background Graphic toggle. Enable it and a panel expands with type, fiber, fit, color, and animation settings.

Background graphics are per-component, so different sections of your thread can have different visual treatments.

Background types

Image

Puts a single product image behind the component. The renderer applies an automatic Ken Burns effect — a slow pan-and-zoom that brings the image to life — plus a parallax depth effect that responds to the viewer's scroll position.

Configure it with:

Image fiber — pick which image fiber to use, or leave it on Auto to let the system choose the best match.
Fit — choose Cover (fills the entire area, may crop), Contain (shows the full image, may letterbox), or Auto (picks the best fit based on the image's aspect ratio).
Rotation Y — the degree of 3D parallax tilt. A subtle 3° creates gentle depth; higher values make the effect more dramatic.

Gallery

An animated gallery that cycles through multiple product images with smooth transitions. Think of it as a cinematic slideshow playing behind your text or cards.

Configure it with:

Gallery images — select which image fibers to include. Leave empty to use all available images.
Layout — choose between Parallax (images shift with scroll depth) and Helix (images rotate in a spiral arrangement).
Augment with brand graphics — when enabled, the gallery mixes in decorative brand elements alongside your product images for a richer visual.

3D Model

Places an interactive 3D model behind the component. The model rotates slowly and responds to scroll position for a premium product showcase effect.

Configure it with:

3D Model fiber — select the model fiber to display.
Rotation Y — how many degrees the model rotates. Higher values create more dramatic rotation as the viewer scrolls.

Colors

Every background graphic has two color overrides:

Background color — the fill behind the image, gallery, or model. Your project's style colors appear as quick presets.
Text color — overrides the default text color for this specific component, ensuring readability against your chosen background.

Click the color swatch to open the picker. You can select from your project's primary, secondary, light, and dark color presets, or pick any custom color.

Seed

The Seed field controls the randomization of animated elements. Change it to get a different visual pattern while keeping all other settings the same. Leave it on Auto for the system's default.

Tips for great backgrounds

Use high-resolution images. The renderer scales and crops — starting with large images ensures sharpness at any viewport size.
Keep text readable. If your background is busy, override the text color to white or use a dark background tint.
Match your brand. Use the color presets from your Style tab to keep backgrounds consistent across all components.
Subtle rotation wins. A rotation Y of 2–5° adds premium depth without distracting from the content on top.

Next steps

To control colors, fonts, and layout across your entire Weave (not just individual backgrounds), see Styling Your Weave. For a full list of the components you can add backgrounds to, see the Component Reference.