Decode Halo Drift Button

A glowing pill button whose letters hop, scramble through ASCII in the air and land resolved.

About this tool

A black pill button lit by a light that travels its border. On hover each letter of the label hops, scrambles through ASCII in the air and lands resolved, and the letters nearest the cursor stay lifted while it hovers. The button is a black pill whose border carries one travelling light: two turns that speed up through the bottom and settle at the top, on a curve measured frame by frame from a reference recording, coloured by the Halo Drift light field sampled where the highlight is. The hover effect is made of ASCII glyphs with real-time physics on a fixed 120 Hz step, each glyph tinted by the light under it. The label and the button width are editable live. The engineering holds up in a real page: it is a real button with keyboard focus and a visible ring, focus plays the hover, a touch plays it while the finger is down, reduced motion keeps the light and drops the particles, and without WebGL it falls back to a plain outlined pill. The export is one HTML file with no network request.

In collections: CSS Buttons & Animated Button Effects ASCII Art: Image to ASCII Effects and Buttons

UI/UX · HTML / CSS / JS All tools

Button

Label

Button width px

Stage

Background

#ffffff