A Svelte implementation of the "Matrix digital rain" effect.
I'm using this project to help me learn more about Svelte.
- High-performance
- Simplicity, clarity, and readability
Requires Node JS.
npm install from project root.
npm run dev from project root, then view http://localhost:8080/
An early experiment employed CSS transitions for colour/opacity fading, but the sheer number of elements made this very non-performant.
The current approach updates colours (as needed) directly every "tick" (100ms) which is very fast. No DOM elements are created or destroyed after init.
The essential algorithm is leading and trailing "cursors", and a loop to update character states in between. (See components/Column.svelte)
npm run build for a production build. Currently compiles to just 7107 bytes of JS! 🥰