Parallax background

Separate a concept image into repeating layers, with scroll factors and an optional looping preview.

Concept imageThree scrolling layers

Speed 100 px/s

FarMiddleForeground

Show joins

Loading preview…

Make it yours

Give your agent the brief, author a workflow, or start by using the finished assets.

FX guide Workflow source

Build an FX workflow that separates

1this concept image into layers and prepares them for horizontal scrolling. Keep the foreground transparent, give each layer its own scroll factor, and deliver the images with a composition manifest. Plan offline first, then ask for a spending ceiling before generating layers or repainting any edge.

1 reference

Paste into your agent. Copy includes text and reference links; attach your own files to make it yours.

Shell

# From examples/looping-parallax in the FX repository.
# Install the CLI first: npm install -g grida
pip install grida
python fetch_showcase_input.py

grida fx plan workflows/meadow.yaml --inputs inputs/meadow.yaml --max-usd 10

# Start the local service for the browser viewer.
grida fx start --background

# After reviewing the plan, choose a provider spending ceiling.
grida fx run workflows/meadow.yaml --inputs inputs/meadow.yaml --live --max-usd 10 --open

The optional local video preview needs FFmpeg. The download retrieves the recorded concept image; a fresh live run generates new layers. Planning is offline; live runs use your provider account. The ceiling limits spending and does not guarantee completion.

JavaScript

const base = "https://fx-cdn.grida.co/showcase/showcases/412d71164da3e787e38babfa4d99c0497cac942bf796847b3ce6608a4c8c1835/parallax";
const scene = await fetch(base + "/manifest.json")
  .then((response) => response.json());

// In your renderer, each layer moves at its own rate.
for (const layer of scene.layers) {
  const image = new Image();
  image.src = base + "/" + layer.file;
  const x = -cameraX * layer.parallax;
  // Repeat the decoded image horizontally at x.
}

Consume the recorded files directly. No engine or provider call is needed to display them. Rendering excerpts assume your application's canvas or media setup.

HTML

<video src="https://fx-cdn.grida.co/showcase/runs/abe44ccedb750bf05633886c052545079f97aee6e83f7161b2611295e4249d3d/artifacts/ea4210c38afb6657b866ef08614e73b93cb11f6262262830b0fa343794c3c857.mp4"
  poster="https://fx-cdn.grida.co/showcase/runs/abe44ccedb750bf05633886c052545079f97aee6e83f7161b2611295e4249d3d/artifacts/bfd17c5cbafbcb220da9b45be0e72a9733778feef0759d4cfe446cb56f5c893d.png"
  autoplay muted loop playsinline></video>

An optional local render from the recorded workflow outputs. The original assets remain unchanged.

Repairing the wrap

The right edge meets the left at the center ticks. Dashed lines bound the repainted band. Drag across the join to compare.

How it comes together

A background becomes a place when its layers move at different speeds. This meadow begins with one concept image, then separates the sky, distance, and foreground into reusable scrolling layers. The camera belongs to the application that uses them.

01
Direct
Use the concept to establish the palette, shapes, and depth of the scene.
02
Separate
Draw a far layer, a middle distance, and a foreground with room to overlap.
03
Repeat
Prepare the edges for horizontal repetition; preserve each layer's transparency.
04
Compose
Record layer order, offsets, and scroll factors in a small manifest.
05
Preview
Optionally render the same layers into a looping video, without another provider call.

Take it from here

Real files from this run. Use them in your own renderer, prototype, or engine.

A good fit for

Illustrated side-scrolling scenes
Independent layers with transparent foregrounds
Local changes to offsets, order, and scroll speed

Production notes

The middle layer uses mirrored extension, so some landmarks repeat.

Demo manifest

Keep exploring

47-tile terrain atlas

Make it yours

Repairing the wrap

How it comes together

Direct

Separate

Repeat

Compose

Preview

Take it from here

A good fit for