# Pixel HD > A fine dot grid with bloom and ordered dither behind regular controls. Numerals and labels are real text; the field reacts around them. 60 components. - [Button](https://elements.lumesec.ai/components/pixel-hd/button.md) ``: Noise-lit surface, pointer light, ripples on press, a flowing loading field and a sweep on success. `run(fn)` takes a promise and handles all three states. - [Switch](https://elements.lumesec.ai/components/pixel-hd/switch.md) ``: The track charges up with a dithered energy field when it turns on and the thumb springs across with a few sparks. Form-associated, like every control here. - [Segmented control](https://elements.lumesec.ai/components/pixel-hd/segmented.md) ``: The selected slab is liquid: it stretches toward the new option on a spring and settles with a glint. - [Text field](https://elements.lumesec.ai/components/pixel-hd/input.md) ``: A comet of light runs around the border while you type and sparks off the caret. Invalid input turns the border into static; a valid value gets a green sweep. - [Prompt composer](https://elements.lumesec.ai/components/pixel-hd/composer.md) ``: A chat input whose border is an aurora of dots. The effort chip cycles through levels and the band gets brighter with each step; sending launches a wave from right to left and fires a `send` event with the text and effort. - [Slider](https://elements.lumesec.ai/components/pixel-hd/slider.md) ``: A dithered fill with a lens for a thumb: the dots under it are magnified, so you can see the exact position. - [Knob](https://elements.lumesec.ai/components/pixel-hd/knob.md) ``: A dithered sphere with an arc of lit cells. Drag up or down, scroll, or use the arrow keys; the value rolls in below. - [Drop zone](https://elements.lumesec.ai/components/pixel-hd/dropzone.md) ``: The surface is a small wave simulation: dragging a file over it raises ripples under the pointer, dropping makes a splash, and each file gets a dotted progress bar. - [Pricing](https://elements.lumesec.ai/components/pixel-hd/pricing.md) ``: Switching billing period rolls the price to the new number while a bright edge wipes through the dot grid behind it. - [Shortcut keys](https://elements.lumesec.ai/components/pixel-hd/kbd.md) ``: Keycaps drawn in dots, with the key names set in type, that light up and press down when you hold the real keys, and fire a `trigger` event when the whole combination is down. - [Progress](https://elements.lumesec.ai/components/pixel-hd/progress.md) ``: A fluid fill with rising bubbles and a meniscus at the front; at 100% the label rolls to its done text and the fluid flashes. Leave out `value` for an indeterminate blob. - [Context window](https://elements.lumesec.ai/components/pixel-hd/context.md) ``: Your favourite, rebuilt in HD: four segments with dithered boundaries, warnings at 80% and 95%, and a compaction sweep that squeezes the conversation back down. Hover the legend to isolate a segment. - [Gauge](https://elements.lumesec.ai/components/pixel-hd/gauge.md) ``: A semicircle of green, amber and red cells with a sprung pointer and a shimmer in the filled part. Past the last zone it pulses. The status word rolls when the zone changes. - [Goal rings](https://elements.lumesec.ai/components/pixel-hd/rings.md) ``: Three progress rings with glowing heads. Going past the goal laps the ring in a brighter colour and throws sparks at the top. Hover a ring or a legend row to isolate it. - [Uptime](https://elements.lumesec.ai/components/pixel-hd/status.md) ``: Daily bars that rise in from the left, coloured by incidents, with today pulsing. Hover or use the arrow keys for the day’s numbers; the number of days adapts to the width. - [Terminal](https://elements.lumesec.ai/components/pixel-hd/terminal.md) ``: A real little shell: type `help`, `test`, `deploy` or `ultracode`. Output lines flash like phosphor, progress bars are drawn in dots and the block caret glows. - [Countdown](https://elements.lumesec.ai/components/pixel-hd/countdown.md) ``: Each digit sits on its own dotted tile; when it changes, the digit rolls over and a bright line prints through the tile from top to bottom. The last ten seconds turn red, and zero bursts. - [Announcement](https://elements.lumesec.ai/components/pixel-hd/banner.md) ``: A dithered gradient with a passing sheen and a twinkling sparkle. Dismissing it disintegrates it into dots that blow away to the right before the space closes. - [Effort slider](https://elements.lumesec.ai/components/pixel-hd/effort.md) ``: Same rules as the first one: below Ultracode it is a plain slider. At Ultracode it bursts, and a trail of light grows from the thumb toward the left, stopping three quarters along, with pulses running right to left. The level name rolls like a picker wheel. - [Mode picker](https://elements.lumesec.ai/components/pixel-hd/modes.md) ``: Three option cards on one canvas. The selected card gets an aurora and a comet that runs around its border; Ultracode switches the aurora to a full spectrum, adds twinkles and bursts when picked. - [Agent run](https://elements.lumesec.ai/components/pixel-hd/run.md) ``: Steps with a spinning arc while running, a check carved out of a disc when done, and light flowing down the connector into the next step. Header shows elapsed time and tokens. - [Streaming reply](https://elements.lumesec.ai/components/pixel-hd/stream.md) ``: Each token resolves out of a patch of noise as it arrives, a glowing block caret rides the end of the text, and a dotted sparkline tracks tokens per second. - [Area chart](https://elements.lumesec.ai/components/pixel-hd/area.md) ``: A bright line over a dithered fill that thins toward the bottom. Ranges morph into each other; hovering adds a crosshair, a bloom on the point and the value in the header. - [Donut](https://elements.lumesec.ai/components/pixel-hd/donut.md) ``: Sweeps in clockwise. Hovering a segment or legend row pops it outward and rolls its share into the middle; arrow keys work too. - [Stat tile](https://elements.lumesec.ai/components/pixel-hd/stat.md) ``: The number counts up over a shimmer of dots; hovering the sparkline swaps it for the value under the pointer. - [Funnel](https://elements.lumesec.ai/components/pixel-hd/funnel.md) ``: Dots fall through the stages in proportion to conversion; the ones that drop out turn red and drift off the side. - [Bar list](https://elements.lumesec.ai/components/pixel-hd/barlist.md) ``: Ranked rows with dithered bars behind the labels. They grow in one after another, and hovering a row runs a sheen along its bar. - [Media card](https://elements.lumesec.ai/components/pixel-hd/card.md) ``: A procedurally drawn landscape whose ridges move at different depths as the card tilts toward your pointer, with a glare of dots following it. - [Hero](https://elements.lumesec.ai/components/pixel-hd/hero.md) ``: The headline is revealed from left to right behind a bright front, then a shimmer runs through the dots around it. Your pointer pushes the dots aside and a click sends a shockwave through them. - [Secret field](https://elements.lumesec.ai/components/pixel-hd/reveal.md) ``: The value sits under live static. Revealing dissolves the noise outward from where you clicked; it hides itself again after fifteen seconds, and Copy flashes green. - [Time picker wheel](https://elements.lumesec.ai/components/pixel-hd/wheel.md) ``: A picker wheel like the one in the effort slider’s name, turned into a full control. Rows curve away on a cylinder, the selection band magnifies, and it flings with inertia before snapping to a value. - [Range filter](https://elements.lumesec.ai/components/pixel-hd/range.md) ``: Two thumbs over a dithered histogram. Bars inside the range light up, the result count rolls, and the min and max fields stay in sync both ways. - [Filter chips](https://elements.lumesec.ai/components/pixel-hd/chips.md) ``: Selecting a chip floods it with dots from where you clicked and draws a pixel check; Clear empties them all. Submits one form value per selected chip. - [Number stepper](https://elements.lumesec.ai/components/pixel-hd/number.md) ``: The number rolls up or down over a dotted wash, and a scan line crosses the dots on every step. Hold a button to repeat faster, with heat and sparks building up; bumping the limit flashes red. Click the number to type. - [Slide to confirm](https://elements.lumesec.ai/components/pixel-hd/swipe.md) ``: For actions that shouldn’t happen by accident. A sheen runs across the label, the track fills behind the handle, and reaching the end bursts and confirms. Keyboard users hold Enter instead. - [PIN pad](https://elements.lumesec.ai/components/pixel-hd/pin.md) ``: Keys ripple when pressed, dots pop in with bloom, a wrong code turns them to red static and shakes, and the right one sends a green wave. Your keyboard works too. - [Split button](https://elements.lumesec.ai/components/pixel-hd/split.md) ``: A primary action with a menu of alternatives. Rows sweep in, a highlight springs between them, and choosing one rolls it into the main button. - [@mention field](https://elements.lumesec.ai/components/pixel-hd/mention.md) ``: Type @ for files, people and agents. Suggestions filter as you type with matched letters marked; inserted mentions become dotted chips that flash in. - [Permission prompt](https://elements.lumesec.ai/components/pixel-hd/approve.md) ``: A scan runs across the command, then a risk meter fills. High-risk commands can’t be always-allowed. Deciding sweeps the card green or fills it with red static. Keys 1–3 answer. - [Diff review](https://elements.lumesec.ai/components/pixel-hd/diff.md) ``: Takes a unified diff as its text content. Added and removed lines get dithered tints and a minimap on the right; accepting a hunk dissolves the dropped lines to the right. - [Changed files](https://elements.lumesec.ai/components/pixel-hd/tree.md) ``: Builds a tree from a list of paths with M/A/D markers. Pixel icons take the status colour, folders count their changes and the selection springs between rows. Full tree keyboard support. - [Agent graph](https://elements.lumesec.ai/components/pixel-hd/graph.md) ``: Ultracode’s lead agent hands off to a planner, three agents in parallel and a reviewer. Live edges stream light with packets, running nodes get a comet halo, and narrow screens switch to a vertical layout. - [PII redaction](https://elements.lumesec.ai/components/pixel-hd/redact.md) ``: Finds names, emails, IBANs and phone numbers and shows what the model would see instead. Placeholders resolve out of noise; switching off dissolves the chips back to the original text. Edit the text to try your own. - [Checkpoints](https://elements.lumesec.ai/components/pixel-hd/rewind.md) ``: Scrub back through a session. Each jump runs a rewind glitch over the code before it swaps, and lines that changed get a green bar. - [Sources and citations](https://elements.lumesec.ai/components/pixel-hd/sources.md) ``: Hovering a citation draws a dotted beam to its source chip with packets running along it. The preview loads with a pixel skeleton, and each favicon is the domain's first letter on a dotted tile. - [Usage heatmap](https://elements.lumesec.ai/components/pixel-hd/matrix.md) ``: Weekday by hour. Each cell is a block of dots whose density is the value; the peak pulses, hovering adds a crosshair and the metrics morph into each other. - [Scatter with brush](https://elements.lumesec.ai/components/pixel-hd/scatter.md) ``: Three hundred runs that settle in, glowing where they cluster. Drag a box to select and the summary rolls to the selection’s medians; the legend toggles models. - [Candlesticks](https://elements.lumesec.ai/components/pixel-hd/candles.md) ``: Live OHLC with dithered bodies, wicks, volume and a dotted last-price line. The last candle ticks and a new one opens every few seconds with a flash. - [Flow](https://elements.lumesec.ai/components/pixel-hd/flow.md) ``: A sankey from surfaces to models, with particles streaming along each band in proportion to its traffic. Hover a band to isolate it. - [Roadmap](https://elements.lumesec.ai/components/pixel-hd/gantt.md) ``: Bars fill with progress dither, the launch milestone pulses and the today line has a glint travelling down it. Drag to reschedule or resize, snapping by day. - [Live leaderboard](https://elements.lumesec.ai/components/pixel-hd/leaderboard.md) ``: Scores tick up live; when a team overtakes another, rows slide past each other with green and red trails and the ranks roll. The leader gets a gold ring. - [Radial bars](https://elements.lumesec.ai/components/pixel-hd/radial.md) ``: Twelve months around a dial, filled denser toward the tip. The current month pulses; hovering rolls its value into the middle and years morph. - [Logo marquee](https://elements.lumesec.ai/components/pixel-hd/marquee.md) ``: Two rows of placeholder wordmarks drifting in opposite directions between dotted rules, faded at the edges. The row under your pointer slows and the wordmark under it lights up on a dotted plate. - [Dialog](https://elements.lumesec.ai/components/pixel-hd/dialog.md) ``: A real modal dialog: it traps focus, closes on Escape and returns focus. Opening it, its pixels fly out of the button and assemble the panel over a dithered backdrop; closing sends them back. - [Kanban board](https://elements.lumesec.ai/components/pixel-hd/kanban.md) ``: Drag cards between columns: a trail of dots follows, the target column lights up and a bar shows where it will land. Dropping into Done bursts. Arrow keys move the focused card. - [Carousel](https://elements.lumesec.ai/components/pixel-hd/carousel.md) ``: Four procedural scenes. Slides change with an ordered-dither dissolve and a bright front, autoplay pauses on hover or focus, and it swipes. - [Product tour](https://elements.lumesec.ai/components/pixel-hd/spotlight.md) ``: Dims the interface with dither, cuts a rounded hole around each step’s target with a comet on its edge, and springs between steps. - [Privacy choices](https://elements.lumesec.ai/components/pixel-hd/consent.md) ``: The shield fills as you allow more categories. Saving stamps it with a ring and the card folds into a small “Change” pill. - [Error state](https://elements.lumesec.ai/components/pixel-hd/error.md) ``: The code sits in large mono type inside a halo of dotted scanlines. It slips into a glitch now and then (more when your pointer is near), and Try again scatters the halo while the code blurs back in. - [Before and after](https://elements.lumesec.ai/components/pixel-hd/compare.md) ``: A document before and after redaction, split by a draggable handle. Works with the arrow keys too.