Animacja deszczu kodu Matrix
Generuj ikoniczną animację deszczu kodu Matrix (zielone znaki spływające w dół). Canvas JS lub CSS. Konfiguruj prędkość i kolory.
-
1Wprowadź dane
Wpisz treść, wklej tekst lub załaduj plik z dysku. -
2Kliknij przycisk
Narzędzie natychmiast przetworzy Twoje dane w przeglądarce. -
3Pobierz wynik
Skopiuj gotowy tekst lub zapisz plik na urządzeniu.
return "Wynik gotowy w 0.1s";
}
Kolumny znaków
floor(szerokość / rozmiar czcionki)
Znaki w puli
puste pole = domyślna pula (82 znaki)
Prędkość klatki
setInterval co 35 ms
Wygaszanie (fade)
alfa tła co klatkę — mniejsze = dłuższe smugi
Poświata
shadowBlur na znakach (glow)
Płótno
skalowane o devicePixelRatio
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Deszcz kodu Matrix</title>
<style>body{margin:0;padding:24px;background:#000000;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;} .wrap{width:800px;max-width:100%;height:450px;border-radius:18px;overflow:hidden;} canvas{display:block;width:100%;height:100%;} </style>
</head>
<body>
<div class="wrap"><canvas id="matrix"></canvas></div>
<script>(function(){
var cfg = {"charset":"アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ","width":800,"height":450,"fontSize":16,"speed":35,"fade":0.08000000000000000166533453693773481063544750213623046875,"textColor":"#00ff66","bgColor":"#000000","glow":true,"glowStrength":16,"fullpage":false};
var canvas = document.getElementById("matrix");
var ctx = canvas.getContext("2d");
var dpr = window.devicePixelRatio || 1;
var cols = 0; var drops = [];
function rgbFromHex(hex){ return [parseInt(hex.slice(1,3),16), parseInt(hex.slice(3,5),16), parseInt(hex.slice(5,7),16)]; }
function resize(){
var rect = canvas.getBoundingClientRect();
canvas.width = Math.floor(rect.width * dpr);
canvas.height = Math.floor(rect.height * dpr);
ctx.setTransform(dpr,0,0,dpr,0,0);
cols = Math.max(1, Math.floor(rect.width / cfg.fontSize));
drops = new Array(cols).fill(1);
}
var chars = Array.from(cfg.charset); function pickChar(){ return chars[Math.floor(Math.random()*chars.length)]; }
function draw(){
var rect = canvas.getBoundingClientRect();
var rgb = rgbFromHex(cfg.bgColor);
ctx.fillStyle = "rgba("+rgb[0]+","+rgb[1]+","+rgb[2]+","+cfg.fade+")";
ctx.fillRect(0,0,rect.width,rect.height);
ctx.font = cfg.fontSize + "px monospace";
ctx.fillStyle = cfg.textColor;
if(cfg.glow){ ctx.shadowColor = cfg.textColor; ctx.shadowBlur = cfg.glowStrength; } else { ctx.shadowBlur = 0; }
for(var i=0;i<drops.length;i++){
ctx.fillText(pickChar(), i*cfg.fontSize, drops[i]*cfg.fontSize);
if(drops[i]*cfg.fontSize > rect.height && Math.random()>0.975) drops[i] = 0;
drops[i]++;
}
}
resize(); window.addEventListener("resize", resize); setInterval(draw, cfg.speed);
})();</script>
</body></html>
| Grupa | Znaki | Liczba |
|---|---|---|
| Katakana (japońska sylabaria) | アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン | 46 |
| Cyfry | 0123456789 | 10 |
| Wielkie litery łacińskie | ABCDEFGHIJKLMNOPQRSTUVWXYZ | 26 |
| Razem | puste pole „Zestaw znaków” = ta domyślna pula; własne znaki wpiszesz w formularzu (białe znaki są zwijane do spacji) | 82 |
W każdej klatce każdy znak jest losowany na nowo (Math.random w generowanym skrypcie) — animacja nigdy się nie zapętla i nie odtwarza dokładnie tego samego przebiegu; nie ma tu ziarna do odtworzenia układu.
| Parametr | Zakres | Co robi / koszt wydajnościowy |
|---|---|---|
| Szerokość × wysokość | 200–3840 × 200–2160 px | rozmiar płótna canvas; bitmapa skalowana o devicePixelRatio — większe płótno = więcej pikseli do przemalowania co klatkę |
| Rozmiar czcionki | 8–64 px | decyduje o liczbie kolumn: floor(szerokość / czcionka); mniejsza czcionka = więcej kolumn i znaków |
| Prędkość | 10–120 ms | interwał setInterval; 10 ms to ok. 100 klatek/s — najcięższy wariant dla CPU/GPU |
| Wygaszanie (fade) | 0,01–0,35 | alfa prostokąta tła malowanego co klatkę; mniejsza wartość = dłuższe, wolno gasnące smugi |
| Poświata (glow) | wyłączona lub siła 0–40 px | shadowBlur w canvas — najdroższa pojedyncza opcja; przy dużych wartościach wyłącz ją na słabszych urządzeniach |
| Zestaw znaków | do 5000 znaków | pula losowanych glifów; brak limitu kolumn poza szerokością płótna |
| Tryb pełnoekranowy | tak / nie | pełny HTML: pozycja fixed na całym oknie zamiast ramki o zadanych wymiarach |
Dostajesz dwa kody: fragment (embed) do wklejenia w istniejącą stronę oraz pełny dokument HTML z gotową animacją. Kolumna po dojściu do dna wraca na górę z 2,5% prawdopodobieństwem w każdej klatce (Math.random() > 0,975) — stąd nierówne, naturalne smugi.
Deszcz kodu Matrix — kultura, licencja i praktyka
Skąd się wziął ten efekt
Zielone glify spadające kolumnami utrwalił film „Matrix” (1999) — motyw „digital rain” stał się potem jednym z najczęściej klonowanych elementów kultury popularnej. Sama estetyka (katakana + monospace) to dziś wspólny język wizualny sci-fi, a nie właściwość jednego utworu.
Kod jest Twój
Generator pisze całą animację od zera (canvas 2D + setInterval) i nie zawiera żadnego kodu ani materiałów z filmu — wygenerowany fragment możesz osadzać i modyfikować we własnych projektach bez zobowiązań licencyjnych, jak każdą funkcję napisaną na zamówienie.
Wydajność w praktyce
Najpierw ograniczaj to, co kosztuje najwięcej: poświatę (shadowBlur), krótki interwał (10 ms) i małą czcionkę na szerokim płótnie. Na telefonie bezpieczna baza to 16–20 px czcionki, interwał 33–50 ms i wyłączony glow; płótno 3840 × 2160 zostaw na desktop.
Dostępność i UX
Ciągła animacja w tle rozprasza i męczy wzrok — trzymaj treść na wierzchu z własnym, stałym kontrastem (nie licz na czytelność „przez” deszcz). Wygenerowany kod nie obsługuje prefers-reduced-motion; jeśli potrzebujesz, dodaj własny warunek zatrzymujący interwał dla użytkowników z ograniczonym ruchem.
Wskazówka: kafelki nad wynikiem liczą kolumny, rozmiar puli znaków, częstość klatek, wygaszanie i poświatę — dokładnie te wartości, które trafiają do wygenerowanego kodu.
Oceń to narzędzie:
Powiązane narzędzia
Inne narzędzia, które mogą Ci się przydaćAnimacja deszczu kodu Matrix — efekt kaskadowego kodu
Animacja deszczu kodu Matrix to interaktywna wizualizacja słynnego efektu "cyfrowego deszczu" z serii filmów Matrix. Obserwuj kaskadujące kolumny znaków na czarnym tle — dokładnie tak, jak w kultowych scenach otwarcia filmów Wachowskich.
Skąd pochodzi efekt deszczu kodu?
Efekt "deszczu kodu" (ang. digital rain, Matrix code) po raz pierwszy pojawił się w filmie "Matrix" (1999) w reżyserii rodzeństwa Wachowskich jako wizualna reprezentacja "Matrixa" — symulowanej rzeczywistości. Oryginalne animacje filmowe zostały stworzone przez Simona Whiteley'a, który inspirował się japońską kulturą — znaki w filmie to odbicia znaków z gotowanej japońskiej sushi na tablicy (podobno od przepisu żony). Efekt stał się jednym z najbardziej rozpoznawalnych elementów estetyki cyberpunk i hakerskiej popkultury.
Jak działa animacja?
Animacja jest zaimplementowana w JavaScript z użyciem Canvas API. Algorytm: definiuje kolumny znaków na całej szerokości ekranu, każda kolumna ma niezależną pozycję Y i losową prędkość, znaki są losowo wybierane z zestawu (katakana, cyfry, litery), nowe znaki pojawiają się na szczycie z jasno-zielonym kolorem ("głowa"), starsze znaki stopniowo bledną do ciemnej zieleni, po osiągnięciu dołu kolumna resetuje się losowo. Efekt jest renderowany na znaczniku <canvas> w pętli requestAnimationFrame.
Personalizacja animacji
Możesz dostosować: zestaw używanych znaków (katakana, ascii, cyfry, custom), szybkość spadania kolumn, gęstość kolumn, kolor (klasyczna zieleń, niebieski, czerwony lub własny), rozmiar czcionki oraz efekt głębi (różne odcienie dla pierwszego i tła). Animacja działa w trybie fullscreen — idealna jako wygaszacz ekranu lub tło podczas prezentacji.
Implementacja własnej animacji Matrix
Efekt jest łatwy do zaimplementowania samodzielnie w JavaScript: potrzebujesz canvas, tablicy pozycji Y dla każdej kolumny i funkcji rysującej znaki z fadingiem. Kod zajmuje ok. 30–50 linii i jest świetnym projektem dla uczących się programowania grafiki. Nasz generator pozwala eksperymentować z parametrami bez pisania kodu.
Najczęściej zadawane pytania
Czy animacja Matrix zużywa dużo zasobów CPU?
Animacja jest zoptymalizowana — używa requestAnimationFrame (synchronizuje się z odświeżaniem monitora) i Canvas 2D (akceleracja sprzętowa w nowoczesnych przeglądarkach). Na typowym komputerze zużywa 2–5% CPU. Dla słabszych urządzeń możesz zmniejszyć liczbę kolumn lub prędkość animacji.
Jak zapisać animację Matrix jako wideo lub GIF?
W Chrome możesz użyć Screen Recorder (Ctrl+Shift+I → Recording). Alternatywnie narzędzia jak OBS Studio, LICEcap (GIF) lub ffmpeg pozwalają nagrać animację canvas. Programowo można użyć MediaRecorder API do nagrania canvas stream: canvas.captureStream(30) zwraca strumień wideo.
Jakie znaki są używane w oryginalnym efekcie Matrix?
W oryginale filmowym użyto mieszanki katakany (japońskiego syllabary — ァ, カ, サ, タ...), cyfr i lustrzanych liter łacińskich. Whiteley dosłownie skanował znaki z japońskich receptur sushi. Nasz generator domyślnie używa katakany, ale można przełączyć na ASCII lub cyfry.
Czy mogę użyć efektu Matrix na swojej stronie internetowej?
Tak — efekt Matrix jest wolny do użycia. Implementacja w canvas/JS jest dostępna na GitHub (wiele wariantów) i może być wbudowana jako tło, element dekoracyjny lub interaktywna sekcja strony. Zadbaj o czytelność — ciemny tekst na animowanym tle jest trudny do czytania, więc użyj animacji jako elementu tła z niską opacity lub wyłącz dla użytkowników preferujących reduced motion.
Jaka jest symbolika efektu Matrix w kulturze pop?
Efekt Matrix stał się symbolem "hakowania", cyberpunku i pojęcia symulowanej rzeczywistości. Jest powszechnie rozpoznawany nawet przez osoby, które nie oglądały filmów. Pojawia się w popkulturze jako shorthand dla "świata komputerów", "programowania" lub "głębszej warstwy rzeczywistości". Ironicznie, efekt nie ma nic wspólnego z rzeczywistym kodem — to czysta estetyka.