@marianmeres/kitt — Knight Rider scanner, generalized

A tiny factory that animates a bright head with a trailing gradient across any set of DOM elements. Every property below (selector, CSS property, colors, direction, triggers, schedule, cycles) is configurable.

1. Basic — color on text spans

Default config: property: "color", pingpong once.

KNIGHT RIDER

2. SVG fill — hover + auto-schedule

Hover the logo to play. Also auto-plays every 4–7 s. property: "fill".

3. Background — cyan trail, LTR only

property: "backgroundColor", direction: "ltr", custom trail colors.

4. Opacity — infinite loop

property: "opacity", numeric trail values, cycles: Infinity.

5. Equalizer bars — RTL, 3 cycles

direction: "rtl", cycles: 3, interval: 40, green trail.

7. SVG opacity — pulsing circles

property: "opacity" on SVG <circle> elements, cycles: Infinity.

6. Click trigger + onTick callback

Click the word to play. Current head index is shown below.

CLICK ME
head: —