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

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

# CSS Timing Function Demos

## Named Timing Functions

Animation easing using named timing functions: linear, ease, ease-in, ease-out, ease-in-out.

<div class="demo-source">

```jsonl
{"type": "palette", "name": "timing_demo", "colors": {".": "#00000000", "{bg}": "#1a1a2e", "{box}": "#4ecdc4"}}
{"type": "sprite", "name": "box_left", "palette": "timing_demo", "grid": ["{box}{box}....", "{box}{box}...."]}
{"type": "sprite", "name": "box_center", "palette": "timing_demo", "grid": ["..{box}{box}..", "..{box}{box}.."]}
{"type": "sprite", "name": "box_right", "palette": "timing_demo", "grid": ["....{box}{box}", "....{box}{box}"]}
{"type": "animation", "name": "linear_slide", "keyframes": {"from": {"sprite": "box_left"}, "to": {"sprite": "box_right"}}, "duration": "500ms", "timing_function": "linear"}
{"type": "animation", "name": "ease_slide", "keyframes": {"from": {"sprite": "box_left"}, "to": {"sprite": "box_right"}}, "duration": "500ms", "timing_function": "ease"}
{"type": "animation", "name": "ease_in_slide", "keyframes": {"from": {"sprite": "box_left"}, "to": {"sprite": "box_right"}}, "duration": "500ms", "timing_function": "ease-in"}
{"type": "animation", "name": "ease_out_slide", "keyframes": {"from": {"sprite": "box_left"}, "to": {"sprite": "box_right"}}, "duration": "500ms", "timing_function": "ease-out"}
{"type": "animation", "name": "ease_in_out_slide", "keyframes": {"from": {"sprite": "box_left"}, "to": {"sprite": "box_right"}}, "duration": "500ms", "timing_function": "ease-in-out"}
```

</div>

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

## Cubic Bezier Timing

Custom easing curves using cubic-bezier(x1, y1, x2, y2).

<div class="demo-source">

```jsonl
{"type": "palette", "name": "bezier_demo", "colors": {".": "#00000000", "{ball}": "#ff6b6b", "{trail}": "#ff6b6b40"}}
{"type": "sprite", "name": "ball_top", "palette": "bezier_demo", "grid": [".{ball}.", "{ball}{ball}{ball}", ".{ball}.", "...", "...", "..."]}
{"type": "sprite", "name": "ball_middle", "palette": "bezier_demo", "grid": ["...", ".{ball}.", "{ball}{ball}{ball}", ".{ball}.", "...", "..."]}
{"type": "sprite", "name": "ball_bottom", "palette": "bezier_demo", "grid": ["...", "...", "...", ".{ball}.", "{ball}{ball}{ball}", ".{ball}."]}
{"type": "animation", "name": "bounce_fall", "keyframes": {"0%": {"sprite": "ball_top", "opacity": 1.0}, "50%": {"sprite": "ball_bottom", "opacity": 1.0}, "100%": {"sprite": "ball_top", "opacity": 1.0}}, "duration": "800ms", "timing_function": "cubic-bezier(0.5, 0, 0.5, 1)"}
{"type": "animation", "name": "snap_ease", "keyframes": {"from": {"sprite": "ball_top"}, "to": {"sprite": "ball_bottom"}}, "duration": "300ms", "timing_function": "cubic-bezier(0.68, -0.55, 0.27, 1.55)"}
{"type": "animation", "name": "smooth_decel", "keyframes": {"from": {"sprite": "ball_top"}, "to": {"sprite": "ball_bottom"}}, "duration": "600ms", "timing_function": "cubic-bezier(0.25, 0.1, 0.25, 1.0)"}
```

</div>

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

## Steps Timing Function

Discrete step-based timing using steps(n) and step-start/step-end.

<div class="demo-source">

```jsonl
{"type": "palette", "name": "steps_demo", "colors": {".": "#00000000", "{f1}": "#ff6b6b", "{f2}": "#ffd93d", "{f3}": "#6bcb77", "{f4}": "#4d96ff"}}
{"type": "sprite", "name": "step1", "palette": "steps_demo", "grid": ["{f1}{f1}", "{f1}{f1}"]}
{"type": "sprite", "name": "step2", "palette": "steps_demo", "grid": ["{f2}{f2}", "{f2}{f2}"]}
{"type": "sprite", "name": "step3", "palette": "steps_demo", "grid": ["{f3}{f3}", "{f3}{f3}"]}
{"type": "sprite", "name": "step4", "palette": "steps_demo", "grid": ["{f4}{f4}", "{f4}{f4}"]}
{"type": "animation", "name": "steps_4", "keyframes": {"0%": {"sprite": "step1"}, "25%": {"sprite": "step2"}, "50%": {"sprite": "step3"}, "75%": {"sprite": "step4"}, "100%": {"sprite": "step1"}}, "duration": "1s", "timing_function": "steps(4)"}
{"type": "animation", "name": "steps_jump_start", "keyframes": {"from": {"sprite": "step1"}, "to": {"sprite": "step4"}}, "duration": "1s", "timing_function": "steps(4, jump-start)"}
{"type": "animation", "name": "steps_jump_end", "keyframes": {"from": {"sprite": "step1"}, "to": {"sprite": "step4"}}, "duration": "1s", "timing_function": "steps(4, jump-end)"}
{"type": "animation", "name": "step_start_instant", "keyframes": {"from": {"sprite": "step1", "opacity": 0.0}, "to": {"sprite": "step1", "opacity": 1.0}}, "duration": "500ms", "timing_function": "step-start"}
{"type": "animation", "name": "step_end_delayed", "keyframes": {"from": {"sprite": "step1", "opacity": 0.0}, "to": {"sprite": "step1", "opacity": 1.0}}, "duration": "500ms", "timing_function": "step-end"}
```

</div>

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