Tayangan Arsip #004

Anime Sports
Edit, Pixel Art

Satu elemen <canvas> 40×40 piksel, digambar ulang 60 kali per detik. Tidak ada video, tidak ada sprite sheet — cuma trigonometri, Math.sin, dan sedikit rasa rindu pada CRT lama.

Pasang di Situsmu Lihat Cara Kerja
<3 KBUkuran skrip inti
0Dependensi eksternal
60fpsrequestAnimationFrame
MODEL CH-40 / PIXELVISION
NOW SCANNING: ANIME_LOOP() REC
● SIARAN PIXEL LANGSUNG     KANVAS 40×40     NOL DEPENDENSI     RENDER DI BROWSER     ● SIARAN PIXEL LANGSUNG     KANVAS 40×40     NOL DEPENDENSI     RENDER DI BROWSER    
Tiga Teknik

Apa yang bikin layar itu hidup

Tiap frame cuma menghitung ulang posisi. Tidak ada aset gambar — semua garis, bola, dan kerlip lahir dari fungsi waktu t.

CH.01 — Speed Lines

Garis kecepatan berulang

Enam garis digambar dengan offset waktu yang bergeser, memberi ilusi kecepatan menuju bola tanpa animasi sprite.

for(i<6){
  off = (i*7 + t/40) % 50;
  line(0, off-10, 15, off);
}
CH.02 — Ball Spin

Rotasi & bobbing halus

Bola naik-turun lewat sin(t/260), sementara lima titik pentagon berputar mengikuti rot = t/500.

bob = sin(t/260)*1.5;
rot = t/500;
a = rot + i*(2π/5);
CH.03 — Sparkle Timer

Kerlip yang tidak sinkron

Tiap sparkle punya fase (ph) sendiri, jadi kerlipnya terasa acak walau semuanya pakai rumus sin yang sama.

a = 0.4 + 0.6*abs(
  sin(t/300 + s.ph)
);
Label Cartridge

Spesifikasi teknis

Ringan secara desain — cocok ditempel di landing page tanpa membebani waktu muat.

40×40Resolusi kanvas
6Warna dalam palet
rAFLoop render
OffImage smoothing
0Request jaringan
1File HTML statis
VanillaTanpa framework
~3KBSkrip animasi inti
Pasang

Tempel, tidak perlu build step

Salin potongan di bawah, taruh di mana pun dalam HTML-mu. Tidak ada npm install, tidak ada CDN.

embed.html

Tersalin ✓ 
<canvas id="scene" width="40" height="40" style="width:100%;image-rendering:pixelated"></canvas>
<script>
const ctx = document.getElementById('scene').getContext('2d');
ctx.imageSmoothingEnabled = false;
function draw(t){ /* speed lines, spin, sparkle — lihat kode lengkap */ }
function loop(t){ draw(t); requestAnimationFrame(loop); }
requestAnimationFrame(loop);
</script>
Unduh index.html