Animation Lab

Procreate layer extraction spike — testing per-layer animation from Full_Map.procreate

Animate in Speed 1x

1 — Map

Transition in: Border draws from opposite corners: lower-left grows upward and rightward, while upper-right grows downward and leftward until the full frame is revealed.
Procreate layers: 1-border.svg (PNG-derived SVG reference asset) Using the traced guide border instead of current Procreate-extracted border layers.
Procreate structure: Optimal Procreate structure for this stage (animation-first): - map-border-top: top horizontal border only - map-border-right: right vertical border only - map-border-bottom: bottom horizontal border only - map-border-left: left vertical border only - map-border-etching-top: texture/hatching that belongs only to the top edge - map-border-etching-right: texture/hatching that belongs only to the right edge - map-border-etching-bottom: texture/hatching that belongs only to the bottom edge (especially the heavier bottom hatching) - map-border-etching-left: texture/hatching that belongs only to the left edge This structure lets the lower-left corner animate the left + bottom edges while the upper-right corner animates the top + right edges. Do not include region-divider/grid lines, background texture, labels, or any interior marks in the Map stage layers.
Code animation: Use two opposing L-shaped clip paths over the border asset: lower-left reveals the left vertical + bottom horizontal, upper-right reveals the right vertical + top horizontal.
Open questions: Should both corners animate at exactly the same speed, or should one corner lead slightly to feel more hand-drawn?

2 — Possibilities

Transition in: Dots pop in one-by-one in randomized order, like stars appearing.
Procreate layers: dots-scattered (single layer, potrace outputs separate <path> per dot cluster)
Code animation: Find all <path> elements, randomize order, stagger opacity 0→1 with ~30ms delays.
Open questions: Should some dots pop in faster/slower? Any spatial clustering?

3 — Patterns

Transition in: Connection lines reveal path-by-path, sorted left-to-right.
Procreate layers: pattern-connections-a (main connections) pattern-connections-b (secondary connections)
Code animation: Path-by-path opacity stagger, sorted by x-position of bounding box center.
Open questions: Should lines draw from left→right (order→chaos) or radiate from center?

4 — Motions

Transition in: Motion lines fade in layer-by-layer with path stagger within each.
Procreate layers: motions-9a through 9d, motions-10, 11, 12, 14 (8 separate Procreate layers for motion arrows/spirals)
Code animation: Layer-by-layer reveal with path-by-path stagger within each layer.
Open questions: Should motion lines animate with direction (e.g. arrows growing outward)?

5 — Gold Motions

Transition in: Gold-colored motion elements fade in as a group.
Procreate layers: gold-motions-18 through 22 (5 separate Procreate layers)
Code animation: Same stagger approach as motions stage.
Open questions: These are gold in the original — should we tint the SVG paths?

1 — Map Stage 1 of 5

Guide-style Sequence

Each concept is paired with its own animated image, like the guide layout, instead of a single persistent scroll preview.

1 — Map

The map is the border around anything humans interact within: a workplace, a family, the culture at large, or any shared environment we move through.

Animation: Border draws from opposite corners: lower-left grows upward and rightward, while upper-right grows downward and leftward until the full frame is revealed.
Procreate structure: Optimal Procreate structure for this stage (animation-first): - map-border-top: top horizontal border only - map-border-right: right vertical border only - map-border-bottom: bottom horizontal border only - map-border-left: left vertical border only - map-border-etching-top: texture/hatching that belongs only to the top edge - map-border-etching-right: texture/hatching that belongs only to the right edge - map-border-etching-bottom: texture/hatching that belongs only to the bottom edge (especially the heavier bottom hatching) - map-border-etching-left: texture/hatching that belongs only to the left edge This structure lets the lower-left corner animate the left + bottom edges while the upper-right corner animates the top + right edges. Do not include region-divider/grid lines, background texture, labels, or any interior marks in the Map stage layers.

2 — Possibilities

A possibility is something unknown within the map that could be life-changing or mundane. Encountering one feels challenging and exhilarating at the same time.

Animation: Dots pop in one-by-one in randomized order, like stars appearing.

3 — Patterns

A pattern connects discovered possibilities into reliable, useful systems. The more connected a pattern becomes, the more predictable and useful it feels.

Animation: Connection lines reveal path-by-path, sorted left-to-right.

4 — Motions

These motion marks test how energy or attention might move through the map. They are less about static definition and more about directional feeling and emphasis.