Load a photo or video in Apply → Contour
How does this motif sit on a real page?
MOTIF ENGINE

Pattern
as identity

SURFACE
then Accent
THEN INK
BRAND KIT
ON THE PAGE

Foreground
on field

THE PATTERN IS THE PHOTOGRAPH

Colour,
then form

motif.app

Foreground
on field

motif.app
BRAND KIT
surface  → field
accent   → marks
ink      → depth

Put the pattern on the page

It is the background of the layout — not a file in Downloads. Toggle UI off to tune the art, on to see it apply.

Export →

Motif

Looks

Works in this set

Works on this background

Controls

⚠ This colour vibrates against the background — similar brightness, opposing hues. Try a suggestion.

Presets

From your brand

Library

Colour spots

Drag the rings on the canvas — each ring pins its colour there.

Field

JPG or PNG — used as the backdrop layer.

Finish

Brand colours

Looks orbs, Application chrome, and “Works on this background” all read this kit. Tag Surface (field / card), Accent (marks in front), Ink (type / depth), then choose “Brand kit” in any palette.

Layer harmony

Each chip is a working set: field, marks, and ink that stays legal on both. Same chips live under Looks.

Pairing read

How each accent sits on each surface. Subtle / Balanced / Bold is the design read; ⚠ marks vibrating pairs. “Aa” means the pair is also legal for text (≥ 4.5:1) — only relevant when type is involved.

Project

Everything — all generator settings, background, brand — saves automatically in this browser. Presets are portable files per client.

Chrome

Shared across every Application scene. PNG of the artboard includes this layer when Application is on.

Copy

Edits the live scene. Line breaks are kept.

Contour

Sobel edge field → crosses on your photo or video (Archetype Inspect Window). Motif marks hide while media is loaded.

No source loaded

Video only — holds the pattern steady between frames.

Play

Glide is parallax on the marks — each pattern has its own planes. The field stays still. SVG and Code stay stills.

Ease