TwistScroller

A horizontal text scroller with a twist — literally. Originally a Java applet from 1997-1998. Since modern browsers no longer support Java applets, the original applet code was transpiled to JavaScript/Canvas to make the effect viewable again. The scroll text is rendered using a bitmap font loaded from a GIF image. Each column of the output is shifted vertically by a sinus function whose amplitude and period themselves oscillate over time, producing the characteristic wavy, twisting motion that was a staple of demoscene scroll texts on the Atari ST, Amiga and early PC demos.

The font GIF contains a 10×6 grid of 32×32 pixel characters. You can swap the font image to completely change the look — two fonts are included: a blue pixel font and a metallic gold one.

Features

Bitmap font loaded from a GIF image (swappable)
Scroll text from inline element or SCROLLER_CFG.text
Double sinus distortion — amplitude and period modulate over time
Configurable background color via SCROLLER_CFG.bgcolor
True color rendering (24-bit RGB via Canvas)
60 fps frame limit via requestAnimationFrame

Parameters (SCROLLER_CFG)

Name	Type	Description	Default
`bgcolor`	CSS color	Background color (e.g. `"white"`, `"black"`, `"#333"`)	`"white"`
`text`	string	Scroll text (overrides `#scrolltext` element)	null

Code Example

<canvas id="game" width="510" height="60"></canvas>
<img id="fontimg" src="images/font_repl.gif" style="display:none">
<div id="scrolltext" style="display:none">Your scroll text here...</div>
<script>var SCROLLER_CFG = { bgcolor: "white" };</script>
<script src="twistscroller.min.js"></script>

Original Applet

Originally a Java applet (1997-1998). The original Java applet code was transpiled to JavaScript/Canvas in 2026 so the effect can run in modern browsers without a Java plugin. The original loaded scroll text from an external message.txt file via Java’s StreamTokenizer. The JavaScript version reads from an inline HTML element instead.