swadhinbiswas 📝 docs: modern README with animated SVG hero, pipeline, benchmark, feature matrix · 8/7/2026
4322714
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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<svg width="1200" height="630" viewBox="0 0 1200 630" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="bg" x1="0" y1="0" x2="1200" y2="630" gradientUnits="userSpaceOnUse">
<stop stop-color="#0b0e1a"/>
<stop offset="1" stop-color="#111631"/>
</linearGradient>
<linearGradient id="grad1" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#ff7a3d"/>
<stop offset="0.5" stop-color="#e6522c"/>
<stop offset="1" stop-color="#f5a524"/>
</linearGradient>
<linearGradient id="grad2" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#22d3ee"/>
<stop offset="1" stop-color="#8b5cf6"/>
</linearGradient>
<radialGradient id="glow" cx="0.5" cy="0.5" r="0.5">
<stop offset="0" stop-color="#e6522c" stop-opacity="0.35"/>
<stop offset="1" stop-color="#e6522c" stop-opacity="0"/>
</radialGradient>
<filter id="blur1" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="6"/>
</filter>
<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
<feDropShadow dx="0" dy="4" stdDeviation="10" flood-color="#e6522c" flood-opacity="0.4"/>
</filter>
</defs>
<rect width="1200" height="630" fill="url(#bg)"/>
<!-- ============ MATRIX RAIN (SMIL animated falling glyphs) ============ -->
<g font-family="'Courier New', monospace" font-size="16" fill="#22d3ee" opacity="0.35">
<!-- column 1 -->
<text x="40" y="60">1</text><text x="40" y="76">0</text><text x="40" y="92">1</text><text x="40" y="108">0</text>
<text x="40" y="124">0</text><text x="40" y="140">1</text><text x="40" y="156">1</text><text x="40" y="172">0</text>
<text x="40" y="188">1</text><text x="40" y="204">0</text><text x="40" y="220">1</text><text x="40" y="236">0</text>
<text x="40" y="252">1</text><text x="40" y="268">0</text><text x="40" y="284">1</text><text x="40" y="300">0</text>
<text x="40" y="316">0</text><text x="40" y="332">1</text><text x="40" y="348">1</text><text x="40" y="364">0</text>
<text x="40" y="380">1</text><text x="40" y="396">0</text><text x="40" y="412">1</text><text x="40" y="428">0</text>
<text x="40" y="444">1</text><text x="40" y="460">0</text><text x="40" y="476">1</text><text x="40" y="492">0</text>
<text x="40" y="508">0</text><text x="40" y="524">1</text><text x="40" y="540">1</text><text x="40" y="556">0</text>
<text x="40" y="572">1</text><text x="40" y="588">0</text>
<animate attributeName="opacity" values="0.35;0.5;0.35" dur="4s" repeatCount="indefinite"/>
<!-- column 2 -->
<text x="1120" y="90" fill="#e6522c">0</text><text x="1120" y="106" fill="#e6522c">1</text><text x="1120" y="122" fill="#e6522c">1</text><text x="1120" y="138" fill="#e6522c">0</text>
<text x="1120" y="154" fill="#e6522c">1</text><text x="1120" y="170" fill="#e6522c">0</text><text x="1120" y="186" fill="#e6522c">0</text><text x="1120" y="202" fill="#e6522c">1</text>
<text x="1120" y="218" fill="#e6522c">1</text><text x="1120" y="234" fill="#e6522c">0</text><text x="1120" y="250" fill="#e6522c">1</text><text x="1120" y="266" fill="#e6522c">0</text>
<text x="1120" y="282" fill="#e6522c">1</text><text x="1120" y="298" fill="#e6522c">1</text><text x="1120" y="314" fill="#e6522c">0</text><text x="1120" y="330" fill="#e6522c">0</text>
<text x="1120" y="346" fill="#e6522c">1</text><text x="1120" y="362" fill="#e6522c">0</text><text x="1120" y="378" fill="#e6522c">1</text><text x="1120" y="394" fill="#e6522c">1</text>
<animate attributeName="opacity" values="0.35;0.55;0.35" dur="3.2s" repeatCount="indefinite"/>
<!-- floating glyphs -->
<text x="150" y="150" font-size="12" fill="#22d3ee" opacity="0.5">0x</text>
<text x="1030" y="420" font-size="12" fill="#22d3ee" opacity="0.5">k8s</text>
<text x="985" y="250" font-size="12" fill="#22d3ee" opacity="0.45">tokio</text>
<text x="180" y="470" font-size="12" fill="#22d3ee" opacity="0.45">rustls</text>
</g>
<!-- ============ CENTER GLOW + LOGO ============ -->
<circle cx="600" cy="255" r="220" fill="url(#glow)">
<animate attributeName="r" values="200;235;200" dur="5s" repeatCount="indefinite"/>
</circle>
<!-- lightning bolt logo -->
<g filter="url(#shadow)">
<path d="M610 130 L475 300 L580 300 L545 410 L690 260 L590 260 Z" fill="url(#grad1)">
<animateTransform attributeName="transform" type="translate" values="0,0;0,-6;0,0" dur="3.5s" repeatCount="indefinite"/>
</path>
<path d="M610 130 L475 300 L580 300 L545 410 L690 260 L590 260 Z" fill="none" stroke="url(#grad2)" stroke-width="3" stroke-linejoin="round">
<animate attributeName="stroke-opacity" values="0.6;1;0.6" dur="2s" repeatCount="indefinite"/>
</path>
</g>
<!-- title -->
<text x="600" y="455" text-anchor="middle" font-family="'Segoe UI', 'Helvetica Neue', Arial, sans-serif" font-size="76" font-weight="900" fill="url(#grad1)" letter-spacing="6">
JUSTAPI
<animate attributeName="letter-spacing" values="6;10;6" dur="4s" repeatCount="indefinite"/>
</text>
<text x="600" y="495" text-anchor="middle" font-family="'Segoe UI', Arial, sans-serif" font-size="22" fill="#a5b4fc" letter-spacing="2">
Python writes the logic. Rust does everything else.
</text>
<!-- rotating orbit ring -->
<g transform="translate(600,255)">
<ellipse cx="0" cy="0" rx="250" ry="80" fill="none" stroke="#22d3ee" stroke-width="1.5" stroke-dasharray="6 10" opacity="0.5">
<animateTransform attributeName="transform" type="rotate" from="0 0 0" to="360 0 0" dur="18s" repeatCount="indefinite"/>
</ellipse>
<circle cx="250" cy="0" r="6" fill="#22d3ee">
<animateTransform attributeName="transform" type="rotate" from="0 0 0" to="360 0 0" dur="18s" repeatCount="indefinite"/>
</circle>
<ellipse cx="0" cy="0" rx="300" ry="100" fill="none" stroke="#8b5cf6" stroke-width="1" stroke-dasharray="4 14" opacity="0.35">
<animateTransform attributeName="transform" type="rotate" from="360 0 0" to="0 0 0" dur="24s" repeatCount="indefinite"/>
</ellipse>
</g>
<!-- ============ FOOTER METRICS BAND ============ -->
<g font-family="'Segoe UI', Arial, sans-serif" font-weight="600">
<!-- metric 1 -->
<rect x="90" y="545" width="230" height="56" rx="10" fill="#ffffff" fill-opacity="0.04" stroke="#22d3ee" stroke-opacity="0.25"/>
<text x="205" y="575" text-anchor="middle" font-size="26" fill="#22d3ee">766k</text>
<text x="205" y="593" text-anchor="middle" font-size="13" fill="#94a3b8" font-weight="400">req/s hello-world</text>
<!-- metric 2 -->
<rect x="350" y="545" width="230" height="56" rx="10" fill="#ffffff" fill-opacity="0.04" stroke="#f5a524" stroke-opacity="0.25"/>
<text x="465" y="575" text-anchor="middle" font-size="26" fill="#f5a524">5.4x</text>
<text x="465" y="593" text-anchor="middle" font-size="13" fill="#94a3b8" font-weight="400">JSON-echo vs Granian</text>
<!-- metric 3 -->
<rect x="620" y="545" width="230" height="56" rx="10" fill="#ffffff" fill-opacity="0.04" stroke="#e6522c" stroke-opacity="0.25"/>
<text x="735" y="575" text-anchor="middle" font-size="26" fill="#e6522c">53x</text>
<text x="735" y="593" text-anchor="middle" font-size="13" fill="#94a3b8" font-weight="400">native async DB awaits</text>
<!-- metric 4 -->
<rect x="880" y="545" width="230" height="56" rx="10" fill="#ffffff" fill-opacity="0.04" stroke="#8b5cf6" stroke-opacity="0.25"/>
<text x="995" y="575" text-anchor="middle" font-size="26" fill="#8b5cf6">12MB</text>
<text x="995" y="593" text-anchor="middle" font-size="13" fill="#94a3b8" font-weight="400">resident memory</text>
</g>
<!-- scanning line -->
<rect x="0" y="0" width="1200" height="3" fill="#22d3ee" opacity="0.12">
<animate attributeName="y" values="0;627;0" dur="7s" repeatCount="indefinite"/>
</rect>
</svg>