# Interaction

> Ordinary controls with one considered motion each. The effect switches on for the state that matters and stays out of the way for the rest.

11 components.

- [Ultracode slider](https://elements.lumesec.ai/components/interaction/ultracode-slider.md) `<effort-slider>`: An effort picker with six levels. Every level is a plain slider stop until the last one: at Ultracode a pixel trail grows from the thumb toward the left, light pulses run along it and a burst fires on arrival.
- [Thinking indicator](https://elements.lumesec.ai/components/interaction/thinking.md) `<ui-thinking>`: A pixel wave and a shimmering label while the model works, with a seconds counter that rolls on every tick. When it finishes, the glyph draws a check and the label rolls to “Thought for 6s”, which opens the reasoning.
- [Send / stop button](https://elements.lumesec.ai/components/interaction/send-button.md) `<ui-send-button>`: The arrow launches up and out, a stop square spins in, and a ring orbits while the reply streams. On completion the ring closes, sparks fly and the arrow drops back in.
- [Toggle](https://elements.lumesec.ai/components/interaction/toggle.md) `<ui-toggle>`: The thumb stretches like a drop as it travels, the accent floods out from under it, and a few pixel sparks pop when it switches on. Clicking the label works too.
- [Segmented control](https://elements.lumesec.ai/components/interaction/segmented.md) `<ui-segmented>`: Two springs drive the selection pill: the leading edge snaps ahead, the trailing edge catches up, so it stretches and squashes on the way. Labels change colour exactly where the pill covers them.
- [Copy button](https://elements.lumesec.ai/components/interaction/copy-button.md) `<ui-copy-button>`: The clipboard icon spins away as a check draws itself in, the label rolls to “Copied”, and a small pop of pixels confirms it. If the browser refuses the copy, it says so instead.
- [Hold to confirm](https://elements.lumesec.ai/components/interaction/hold-button.md) `<ui-hold-button>`: For destructive actions. Holding fills the button behind a crawling, dithered edge while the bin lid lifts. Let go early and it drains, shakes and asks you to keep holding.
- [Odometer stepper](https://elements.lumesec.ai/components/interaction/odometer.md) `<ui-odometer>`: Every digit is its own wheel, and changes ripple from the right like a mechanical counter. Columns and the thousands separator slide in when the number gets longer.
- [Toast stack](https://elements.lumesec.ai/components/interaction/toast-stack.md) `<ui-toast-stack>`: New toasts spring up from below and older ones tuck in behind. Hovering fans the stack out and pauses the timers; swipe a toast sideways to throw it away.
- [Rotary dial](https://elements.lumesec.ai/components/interaction/dial.md) `<ui-dial>`: Drag around the knob and it follows your pointer, with a click at each detent: the tick flashes, the knob nudges and the value rolls. Let go and it springs onto the nearest step.
- [Context meter](https://elements.lumesec.ai/components/interaction/context-meter.md) `<ui-context-meter>`: Usage fills a strip of pixels behind a glowing front, turns amber past 80 % and red near the limit. Compacting sends a bright band back across the strip as the count drops.