Facial animation patches

Generate independent eye and mouth states as reusable patches, aligned to the original character image.

High-resolution face imageSix reusable face patches

Open eyes · RestPlay authored expressions

EyesMouth

Eyes and mouth are independent patches. The original transparency stays intact.

0.00 / 8.00 s

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 adds independent eye and mouth states to

1this face image. Find the face automatically, keep the source pixels outside each patch unchanged, and preserve the original alpha. Deliver native patches, offsets, and a small state manifest. Show me every combination and the animation. Plan offline before requesting a provider budget.

1 reference

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

Shell

# From examples/portrait-motion in the FX repository.
# Install the CLI first: npm install -g grida
uv sync
source .venv/bin/activate
python ../fetch_showcase_inputs.py .

grida fx plan workflow.yaml --inputs showcase.yaml --max-usd 40

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

# After reviewing the plan, choose a provider spending ceiling.
grida fx run workflow.yaml --inputs showcase.yaml --live --max-usd 40 --open

The download retrieves the recorded high-resolution face input. The optional source-workflow.yaml prepares that illustration separately; the facial workflow includes its own state specification and local registration helpers. 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/portrait-motion";
const face = await fetch(base + "/assets/face-manifest.json")
  .then((response) => response.json());

const [x, y] = face.offset_xy;
const closedEyes = face.patches.filter((patch) =>
  patch.state_id === "eyes_closed");

// At (x, y), replace RGB only where patch alpha is 255.
// Preserve the source frame's alpha; do not blend twice.
// Start from the canonical frame for each selection.

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.

Small patches, new expressions

The same native portrait with closed eyes and a smile composed from patches — The native portrait at rest and with closed eyes and a smile. Pixels outside the facial patches stay unchanged.

The native portrait with open eyes and a resting mouth — The native portrait at rest and with closed eyes and a smile. Pixels outside the facial patches stay unchanged.

How it comes together

A blink should change the eyes, not redraw the character. Starting with a native face crop, this workflow draws independent eye and mouth states, aligns them, and returns reusable patches. The surrounding pixels and original alpha stay intact.

01
Locate
Find the face and create a workspace without losing its original position.
02
Draw
Generate eye and mouth states together in a controlled sheet.
03
Register
Align each feature and check its boundaries against the source.
04
Compose
Return six native patches and verify all nine state combinations.

Take it from here

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

A good fit for

Unobstructed open eyes and a closed resting mouth
Independent blinks and simple mouth expressions
Replacing only the selected facial features

Production notes

The timeline is authored for demonstration. No speech audio or lip synchronization is included.

Demo manifest

Keep exploring

Transparent sprite loop

Make it yours

Small patches, new expressions

How it comes together

Locate

Draw

Register

Compose

Take it from here

A good fit for