Animation Blocks

The 10 original animation block classes, each with a Start/Stop/Destroy lifecycle. All ship in src/lib/animation-blocks.js. 0.3.0 added 17 more classes to the same module plus new components with their own demo pages:

Animation Gallery (all demos) Canvas Transitions Stream Overlays Timeline Stagger Grid

1 · TitleDecoder

Pattern: char-decode · ~2 s

Start Stop Destroy idle

2 · ProgressBar

glitch: true · height: 8 px · ~2 s

Start Stop Destroy idle

3 · ScanlineSweep

sweeps: 3 · duration: 1.5 s

Start Stop Destroy idle

4 · TerminalBoot

4 log lines · duration: 3 s

Start Stop Destroy idle

5 · GlitchPulse

intensity: 0.7 · color: magenta · ~1 s

Start Stop Destroy idle

6 · ASCIIBorder

style: double · drawOrder: clockwise · ~1.5 s

Start Stop Destroy idle

7 · SystemDiagnostic

8 lines · color: #00ff00 · ~3 s

Start Stop Destroy idle

8 · LoadingBarMulti

4 bars · glitch: true · ~3 s

Start Stop Destroy idle

9 · DataTransmission

direction: horizontal · 20 packets · ~2.5 s

Start Stop Destroy idle

10 · TerminalPrompt

4 commands · typingSpeed: 50 ms/char

Start Stop Destroy idle