Version 2.1 — © 1998-2000 Christian Cohnen
The ZoomFader applet creates a continuously zooming, glowing feedback effect. Each frame, the entire screen is scaled slightly inward using fixed-point arithmetic, then random bright dots are scattered across the surface and the logo image is composited on top. A convolution filter — the same shift-based kernel used in ParticleFire — smooths everything into soft, trailing light streaks that fade as they zoom toward the center.
The logo orbits on a sinus path by default but snaps to the mouse pointer when you hover over the canvas.
The zoom factor itself oscillates over time, and you can add randomness to it for a more organic feel.
With the add parameter enabled, the logo blends additively instead of overwriting — useful for glowing effects.
The color palette is derived from the brightest color in the logo image, creating a gradient ramp from black to peak brightness. Like many demoscene feedback effects from the Atari ST and Amiga era, the trick is that a simple zoom plus blur, repeated every frame, produces surprisingly complex and mesmerizing visuals from very little code.
ZOOMFADER_CFG object before the script tag.
| Name | Type | Description | Default | Required |
|---|---|---|---|---|
logo | string | ID of hidden <img> element — provides the logo graphic and color palette | "img1" | no |
zoom | int (4–100) | Zoom factor per frame — lower values zoom faster | 70 | no |
zoomRand | int | Range added to zoom — oscillates over time | 25 | no |
dots | int | Number of random bright dots per frame (star effect) | 40 | no |
add | bool | Enables additive blending for the logo | false | no |
link | URL | Link target when canvas is clicked | null | no |
targetWindow | string | Target window for link (_blank, _parent, etc.) | "_self" | no |
<canvas id="game" width="200" height="150"></canvas>
<img id="img1" src="zoom_red.gif" style="display:none">
<script>var ZOOMFADER_CFG = { zoom: 90, zoomRand: 0 };</script>
<script src="zoomfader.min.js"></script><applet archive="ZoomFader.jar"
code="pixelfx.ZoomFader.class" width="200" height="150">
<param name="logo" value="zoom_red.gif">
<param name="zoom" value="90">
<param name="zoomRand" value="0">
<param name="dots" value="0">
<param name="link" value="https://www.chriscohnen.de">
</applet>