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

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

# CSS Keyframe Demos

## Percentage Keyframes

Animation using 0%, 50%, 100% keyframes with opacity and sprite changes.

<div class="demo-source">

```jsonl
{"type": "palette", "name": "demo", "colors": {".": "#00000000", "{bg}": "#1a1a2e", "{fg}": "#eeeeee"}}
{"type": "sprite", "name": "walk_1", "palette": "demo", "grid": ["{fg} . . .", ". {fg} . .", ". . {fg} .", ". . . {fg}"]}
{"type": "sprite", "name": "walk_2", "palette": "demo", "grid": [". . . {fg}", ". . {fg} .", ". {fg} . .", "{fg} . . ."]}
{"type": "animation", "name": "fade_walk", "keyframes": {"0%": {"sprite": "walk_1", "opacity": 0.0}, "50%": {"sprite": "walk_2", "opacity": 1.0}, "100%": {"sprite": "walk_1", "opacity": 0.0}}, "duration": "500ms", "timing_function": "ease-in-out"}
```

</div>

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

## From/To Keyframes

Animation using from/to aliases (equivalent to 0%/100%).

<div class="demo-source">

```jsonl
{"type": "palette", "name": "demo", "colors": {".": "#00000000", "{bg}": "#1a1a2e", "{dot}": "#ff6b6b"}}
{"type": "sprite", "name": "dot", "palette": "demo", "grid": [". {dot} .", "{dot} {dot} {dot}", ". {dot} ."]}
{"type": "animation", "name": "fade_in", "keyframes": {"from": {"sprite": "dot", "opacity": 0.0}, "to": {"sprite": "dot", "opacity": 1.0}}, "duration": "1s", "timing_function": "ease"}
```

</div>

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

## Sprite Changes at Keyframes

Animation that changes sprites at different keyframes (idle → jump → land → idle).

<div class="demo-source">

```jsonl
{"type": "palette", "name": "demo", "colors": {".": "#00000000", "{bg}": "#0f0f23", "{idle}": "#4a9eff", "{jump}": "#ffd93d", "{land}": "#6bcb77"}}
{"type": "sprite", "name": "char_idle", "palette": "demo", "grid": [". {idle} .", "{idle} {idle} {idle}", ". {idle} .", "{idle} . {idle}"]}
{"type": "sprite", "name": "char_jump", "palette": "demo", "grid": [". {jump} .", "{jump} {jump} {jump}", "{jump} {jump} {jump}", ". . ."]}
{"type": "sprite", "name": "char_land", "palette": "demo", "grid": [". . .", "{land} {land} {land}", "{land} {land} {land}", "{land} . {land}"]}
{"type": "animation", "name": "jump_cycle", "keyframes": {"0%": {"sprite": "char_idle"}, "25%": {"sprite": "char_jump"}, "75%": {"sprite": "char_land"}, "100%": {"sprite": "char_idle"}}, "duration": "800ms", "timing_function": "ease"}
```

</div>

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

## Transform Animations

Animations using CSS transforms (rotate, scale) at keyframes.

<div class="demo-source">

```jsonl
{"type": "palette", "name": "demo", "colors": {".": "#00000000", "{bg}": "#0a0a0f", "{star}": "#ffd93d"}}
{"type": "sprite", "name": "star", "palette": "demo", "grid": [". . {star} . .", ". {star} {star} {star} .", "{star} {star} {star} {star} {star}", ". {star} {star} {star} .", ". . {star} . ."]}
{"type": "animation", "name": "spin", "keyframes": {"0%": {"sprite": "star", "transform": "rotate(0deg)"}, "100%": {"sprite": "star", "transform": "rotate(360deg)"}}, "duration": 1000, "timing_function": "linear"}
{"type": "animation", "name": "pulse", "keyframes": {"0%": {"sprite": "star", "transform": "scale(1)", "opacity": 1.0}, "50%": {"sprite": "star", "transform": "scale(1.5)", "opacity": 0.5}, "100%": {"sprite": "star", "transform": "scale(1)", "opacity": 1.0}}, "duration": "2s", "timing_function": "ease-in-out"}
```

</div>

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