Demos
Every mode, behavior, and theme. Open the theme picker to watch the themed variants re-skin with Vanilla Breeze.
1. Legacy <marquee> emulation
Drop-in mental model. Defaults match the old behavior — but with constant velocity.
2. mode="ticker"
Stock ticker. Monospace, fade edges, dot separators, pause-on-hover.
3. mode="breaking-news"
Bold bar with a label set via --marquee-label in CSS.
<marquee-wc> as a new HTML element. All major
browsers ship in 2026. Developers rejoice. The 90s are back.
4. Logo wall (autofill)
Short content auto-clones to fill the viewport. Try resizing the window.
5. mode="code-block" — long-line tickers
Useful for terminal output, build logs, or a long line of code that won't wrap.
6. mode="screen-saver" + behavior="alternate"
Bouncing DVD-logo energy. alternate bounces the text edge-to-edge across the
viewport with easing.
7. mode="credits" — vertical credit roll
direction="up", slow speed, vertical fade.
VANILLA BREEZE
A platform-first framework
WRITTEN AND DIRECTED BY
Thomas Powell
CO-STARRING
screen-saver
code-block
terminal-window
NO FRAMEWORKS
were harmed in the making of this site
8. Programmatic control
start(), stop(), and toggle() work just like the
old <marquee>. The component also fires marquee-cycle on
each loop iteration.
9. Vertical scroll (up & down)
direction="up" and direction="down".
Item up 1
Item up 2
Item up 3
Item up 4
Item up 5
Item down 1
Item down 2
Item down 3
Item down 4
Item down 5
10. Letter-motion modes
These modes split the text into per-character spans and animate each letter with a staggered delay, so the effect ripples across the words. They compose with scrolling — the letters dance while the marquee rolls.
mode="bounce" — letters hop
mode="wave" — roller-coaster ride
mode="march" — letters step up and down
mode="pulse" — letters grow and shrink
mode="ransom" — cut-out magazine letters
mode="pop" — letters explode here and there
mode="spin" — letters cartwheel
mode="flip" — split-flap board
mode="rainbow" — a flowing spectrum
mode="glitch" — chromatic jitter
mode="leet" — l33t substitution + flips + flicker
mode="blink" — letters blink on their own clocks
mode="chase" — stadium-wave chasing lights
mode="invert" — reverse-video chips, hue-shifting
mode="decode" — glyphs scramble, then lock in
11. unit="word" — animate whole words
Any letter-motion mode can run per word instead of per letter — add
unit="word". Here the same effects ripple word-by-word.
mode="bounce" unit="word"
mode="invert" unit="word"
12. mode="dot-matrix" — LED board
Glowing monospace text over a dot grid. The LED color follows --color-accent.