component
Highlight Cycling
By Sanna Granqvist
Details
- Sanna GranqvistAuthor
- componentType
- 2026-03-02Published
- 2026-05-15Updated
- 2026-02-25Added
- TextCategories
Summary
Text cycling with animated color bar
Description
How the cycle works Hold → Cover → Reveal → repeat. The bar wipes in to hide the current word, the text swaps underneath, then the bar pulls away. One smooth motion, no visible cut. Wipe from any direction — left, right, up, or down Per-word colors that lock in at the start of each cover phase and hold through the full reveal Container width animates between words so the layout adjusts around different lengths Optional appear effect: a one-time scroll-triggered reveal before the loop begins Timing splits into two controls — how long each word holds, and how long the transitions take. The easing is a power3 curve, so the bar accelerates in and decelerates out of each pass. Controls: word list, marker colors (per-word or single), wipe direction, cycle hold duration, transition duration, text style, appear effect toggle.
Introduction
Text cycling with animated color bar
Rank history
Daily rank per list, from the first snapshot — lower is better.
- All · #1089