pixelsrc 0.2.0

Pixelsrc - GenAI-native pixel art format and compiler
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89

<!-- Generated by scripts/generate-demos.sh -->
<!-- Do not edit manually - regenerate with: ./scripts/generate-demos.sh -->

# CSS Transform Demos

## Translate Transform

Position offset using translate(x, y), translateX(x), translateY(y).

<div class="demo-source">

```jsonl
{"type": "palette", "name": "arrows", "colors": {".": "#00000000", "{a}": "#4CAF50", "{b}": "#2196F3"}}
{"type": "sprite", "name": "arrow_right", "palette": "arrows", "grid": [". . {a} .", ". . {a} {a}", "{a} {a} {a} {a}", ". . {a} {a}", ". . {a} ."]}
{"type": "sprite", "name": "arrow_base", "palette": "arrows", "grid": [". {b} .", "{b} {b} {b}", ". {b} ."]}
{"type": "animation", "name": "slide_right", "keyframes": {"0%": {"sprite": "arrow_right", "transform": "translate(0, 0)"}, "100%": {"sprite": "arrow_right", "transform": "translate(8px, 0)"}}, "duration": "500ms", "timing_function": "ease-out"}
{"type": "animation", "name": "slide_down", "keyframes": {"0%": {"sprite": "arrow_base", "transform": "translateY(0)"}, "100%": {"sprite": "arrow_base", "transform": "translateY(4px)"}}, "duration": "400ms", "timing_function": "ease-in-out"}
{"type": "animation", "name": "slide_diagonal", "keyframes": {"0%": {"sprite": "arrow_base", "transform": "translate(0, 0)"}, "50%": {"sprite": "arrow_base", "transform": "translate(4px, 4px)"}, "100%": {"sprite": "arrow_base", "transform": "translate(0, 0)"}}, "duration": "800ms", "timing_function": "ease-in-out"}
```

</div>

<div class="demo-container" data-demo="translate">
</div>

## Rotate Transform

Rotation using rotate(deg) - pixel art supports 90, 180, 270 degrees.

<div class="demo-source">

```jsonl
{"type": "palette", "name": "shapes", "colors": {".": "#00000000", "{c}": "#E91E63", "{y}": "#FFEB3B"}}
{"type": "sprite", "name": "L_shape", "palette": "shapes", "grid": ["{c} .", "{c} .", "{c} {c}"]}
{"type": "sprite", "name": "arrow_up", "palette": "shapes", "grid": [". {y} .", "{y} {y} {y}", ". {y} ."]}
{"type": "animation", "name": "rotate_90", "keyframes": {"0%": {"sprite": "L_shape", "transform": "rotate(0deg)"}, "100%": {"sprite": "L_shape", "transform": "rotate(90deg)"}}, "duration": "300ms", "timing_function": "linear"}
{"type": "animation", "name": "rotate_180", "keyframes": {"0%": {"sprite": "L_shape", "transform": "rotate(0deg)"}, "100%": {"sprite": "L_shape", "transform": "rotate(180deg)"}}, "duration": "500ms", "timing_function": "ease-out"}
{"type": "animation", "name": "rotate_270", "keyframes": {"0%": {"sprite": "L_shape", "transform": "rotate(0deg)"}, "100%": {"sprite": "L_shape", "transform": "rotate(270deg)"}}, "duration": "700ms", "timing_function": "ease-in"}
{"type": "animation", "name": "spin_full", "keyframes": {"0%": {"sprite": "arrow_up", "transform": "rotate(0deg)"}, "25%": {"sprite": "arrow_up", "transform": "rotate(90deg)"}, "50%": {"sprite": "arrow_up", "transform": "rotate(180deg)"}, "75%": {"sprite": "arrow_up", "transform": "rotate(270deg)"}, "100%": {"sprite": "arrow_up", "transform": "rotate(360deg)"}}, "duration": "1000ms", "timing_function": "linear"}
```

</div>

<div class="demo-container" data-demo="rotate">
</div>

## Scale Transform

Scaling using scale(s), scale(x, y), scaleX(x), scaleY(y).

<div class="demo-source">

```jsonl
{"type": "palette", "name": "dots", "colors": {".": "#00000000", "{d}": "#9C27B0", "{o}": "#FF9800"}}
{"type": "sprite", "name": "dot", "palette": "dots", "grid": ["{d}"]}
{"type": "sprite", "name": "square", "palette": "dots", "grid": ["{o} {o}", "{o} {o}"]}
{"type": "animation", "name": "scale_up", "keyframes": {"0%": {"sprite": "dot", "transform": "scale(1)"}, "100%": {"sprite": "dot", "transform": "scale(4)"}}, "duration": "600ms", "timing_function": "ease-out"}
{"type": "animation", "name": "scale_xy", "keyframes": {"0%": {"sprite": "square", "transform": "scale(1, 1)"}, "50%": {"sprite": "square", "transform": "scale(2, 1)"}, "100%": {"sprite": "square", "transform": "scale(2, 2)"}}, "duration": "800ms", "timing_function": "ease-in-out"}
{"type": "animation", "name": "scale_x_only", "keyframes": {"0%": {"sprite": "square", "transform": "scaleX(1)"}, "100%": {"sprite": "square", "transform": "scaleX(3)"}}, "duration": "400ms", "timing_function": "linear"}
{"type": "animation", "name": "scale_y_only", "keyframes": {"0%": {"sprite": "square", "transform": "scaleY(1)"}, "100%": {"sprite": "square", "transform": "scaleY(3)"}}, "duration": "400ms", "timing_function": "linear"}
{"type": "animation", "name": "pulse_scale", "keyframes": {"0%": {"sprite": "dot", "transform": "scale(1)", "opacity": 1.0}, "50%": {"sprite": "dot", "transform": "scale(2)", "opacity": 0.6}, "100%": {"sprite": "dot", "transform": "scale(1)", "opacity": 1.0}}, "duration": "1000ms", "timing_function": "ease-in-out"}
```

</div>

<div class="demo-container" data-demo="scale">
</div>

## Flip Transform

Flipping sprites using scaleX(-1) and scaleY(-1).

<div class="demo-source">

```jsonl
{"type": "palette", "name": "faces", "colors": {".": "#00000000", "{f}": "#795548", "{e}": "#FFFFFF", "{p}": "#000000"}}
{"type": "sprite", "name": "face_right", "palette": "faces", "grid": [". {f} {f} .", "{f} {e} {f} {f}", "{f} {f} {f} {f}", "{f} {f} {p} {f}", ". {f} {f} ."]}
{"type": "sprite", "name": "arrow_left", "palette": "faces", "grid": [". {f} .", "{f} {f} .", "{f} {f} {f}", "{f} {f} .", ". {f} ."]}
{"type": "animation", "name": "flip_horizontal", "keyframes": {"0%": {"sprite": "face_right", "transform": "scaleX(1)"}, "100%": {"sprite": "face_right", "transform": "scaleX(-1)"}}, "duration": "300ms", "timing_function": "ease-in-out"}
{"type": "animation", "name": "flip_vertical", "keyframes": {"0%": {"sprite": "face_right", "transform": "scaleY(1)"}, "100%": {"sprite": "face_right", "transform": "scaleY(-1)"}}, "duration": "300ms", "timing_function": "ease-in-out"}
{"type": "animation", "name": "flip_both", "keyframes": {"0%": {"sprite": "arrow_left", "transform": "scale(1, 1)"}, "50%": {"sprite": "arrow_left", "transform": "scale(-1, 1)"}, "100%": {"sprite": "arrow_left", "transform": "scale(-1, -1)"}}, "duration": "600ms", "timing_function": "linear"}
{"type": "animation", "name": "mirror_walk", "keyframes": {"0%": {"sprite": "face_right", "transform": "translate(0, 0) scaleX(1)"}, "50%": {"sprite": "face_right", "transform": "translate(8px, 0) scaleX(1)"}, "51%": {"sprite": "face_right", "transform": "translate(8px, 0) scaleX(-1)"}, "100%": {"sprite": "face_right", "transform": "translate(0, 0) scaleX(-1)"}}, "duration": "1000ms", "timing_function": "linear"}
```

</div>

<div class="demo-container" data-demo="flip">
</div>