# Pixel Lab

> The visual is the data. Meters, gauges, clocks and model moments drawn on a 4 px lattice, with shine near the active edge.

50 components.

- [Agent workflow](https://elements.lumesec.ai/components/pixel-lab/agents.md) `<px-agents>`: Ultracode’s fan-out, drawn live. The planner charges up and bursts, four agent clusters bloom, packets stream along the wires, each agent fills its own pixel ring, and the verifier merges the results into a check.
- [Throughput gauge](https://elements.lumesec.ai/components/pixel-lab/gauge.md) `<px-gauge>`: Tokens per second on four rings of pixels, with amber and red zones. The needle is a spring, so it overshoots and settles, and a peak marker hangs at the high point before sliding back.
- [Rate-limit hourglass](https://elements.lumesec.ai/components/pixel-lab/hourglass.md) `<px-hourglass>`: A real falling-sand simulation counts down to the next usage reset. Grains pile up, slide off each other and squeeze through the neck one at a time; the timer is how much sand is left.
- [Split-flap board](https://elements.lumesec.ai/components/pixel-lab/splitflap.md) `<px-splitflap>`: A departure board of flip tiles. Each tile flips through the alphabet until it lands on its letter, with the flaps cascading left to right, so status changes feel like an announcement.
- [Sampling pad](https://elements.lumesec.ai/components/pixel-lab/xypad.md) `<px-xypad>`: Two dials in one: temperature across, top-p up. The pixel field glows around the puck, leaves a fading trail and throws a ripple when you press. On release it springs onto the nearest 0.05.
- [Voice input](https://elements.lumesec.ai/components/pixel-lab/voice.md) `<px-voice>`: A mirrored pixel spectrum with falling peak dots, and words that drift into focus as they are recognised. Stopping collapses the bars into a line and the line into a point. The audio is simulated, since a shared page can’t use the microphone.
- [Materializing stream](https://elements.lumesec.ai/components/pixel-lab/materialize.md) `<px-materialize>`: Streamed text that condenses out of pixel dust. Every word arrives as a cloud of particles sampled from its own glyphs, springs into shape, then resolves into crisp type.
- [Model morph](https://elements.lumesec.ai/components/pixel-lab/model.md) `<px-model>`: One swarm of pixels takes a different shape per model: a sparse, jittery diamond for speed, a calm ring for balance, a dense rotating star for depth. Switching sends every pixel flying to its new place.
- [Secret field](https://elements.lumesec.ai/components/pixel-lab/secret.md) `<px-secret>`: The key hides under crawling pixel noise. Holding the eye wipes the noise away behind a dithered edge while each character decodes through random glyphs before it locks. Let go and it scrambles shut. The key shown is a fake.
- [Status orb](https://elements.lumesec.ai/components/pixel-lab/orb.md) `<px-orb>`: An agent’s state as a pixel disc: breathing when idle, ripples while listening, a spiral when thinking, an orbiting comet with a scanner while working, a glitching X on error, a check when done. States dissolve into each other pixel by pixel.
- [Fader & meter](https://elements.lumesec.ai/components/pixel-lab/fader.md) `<px-fader>`: A mixing-desk fader beside a stereo pixel meter, with peak-hold segments that hang and then fall. Push past 0 dB and the top turns red and the clip light fires.
- [Histogram range](https://elements.lumesec.ai/components/pixel-lab/range.md) `<px-range>`: A two-thumb filter over a pixel histogram. Columns that enter the range light up from the bottom like filling glasses, columns that leave drain away, and the run count rolls as you drag.
- [Focus timer](https://elements.lumesec.ai/components/pixel-lab/focus.md) `<px-focus>`: Sixty pixels make the ring. Each second the next one trembles, breaks loose and drops into a sand pile below. Reset and the whole pile flies back up into place.
- [Slide to deploy](https://elements.lumesec.ai/components/pixel-lab/deploy.md) `<px-deploy>`: The Ultracode trail turned into a commit gesture. Sliding charges a pixel trail that heats up and starts to boil near the end. Release early and it drains back; reach the end and it bursts, scans and goes live.
- [Activity heatmap](https://elements.lumesec.ai/components/pixel-lab/activity.md) `<px-activity>`: Every day is a cell made of nine sub-pixels, so intensity shows as both brightness and density. Hovering draws a crosshair and a tooltip; clicking sends a ripple across the months; switching metric flips the cells in a diagonal wave.
- [Storage ring](https://elements.lumesec.ai/components/pixel-lab/storage.md) `<px-storage>`: A donut of pixels that sweeps in clockwise. Point at a segment, on the ring or in the legend, and its pixels push outward while the rest dim and the centre rolls to that category. Click to pin it.
- [Pixel avatar](https://elements.lumesec.ai/components/pixel-lab/identicon.md) `<px-identicon>`: A symmetric 7×7 avatar generated from a name. Every keystroke re-hashes it, and the cells that change flip over in a ring spreading from the centre while the hue drifts. Pixels near the pointer lift toward it.
- [Latency scope](https://elements.lumesec.ai/components/pixel-lab/signal.md) `<px-signal>`: A scrolling oscilloscope where each sample is a bright head over a dithered tail. Spikes cross the 400 ms line in amber and red, and the readout rolls with p50 and p95 alongside.
- [Pixel reactions](https://elements.lumesec.ai/components/pixel-lab/react.md) `<px-react>`: The heart’s pixels explode outward and snap back filled. Unliking drains it row by row to an outline. Press and hold for four more reactions; picking one sends the same pixels flying into its shape.
- [Pixel upload](https://elements.lumesec.ai/components/pixel-lab/upload.md) `<px-upload>`: The file icon dissolves from its corner, and each pixel arcs down into the progress bar. When it fills, the bar regroups into a check; files over the limit turn red and shake. Real files work too.
- [Charge to generate](https://elements.lumesec.ai/components/pixel-lab/charge.md) `<px-charge>`: Press and hold: pixels spiral in from the edges, the ring fills and the button starts to tremble. Let go and it fires a shockwave sized to how long you held, from one variation up to four.
- [Pattern lock](https://elements.lumesec.ai/components/pixel-lab/pattern.md) `<px-pattern>`: Draw through the nodes to unlock. The trail is pixels, skipped middle nodes join automatically, a wrong pattern shatters and falls, and the right one goes green node by node.
- [Pixel checklist](https://elements.lumesec.ai/components/pixel-lab/tasks.md) `<px-tasks>`: Checking a task fills its box from the centre, draws a check, then sends a strike-through across the text with a fizzing head. Finishing the list turns the bar green and runs a wave along it.
- [Level up](https://elements.lumesec.ai/components/pixel-lab/xp.md) `<px-xp>`: XP pours into a pixel bar with a hot leading edge. When it overflows, the bar flashes and the level number bursts into pixels that reassemble as the next one.
- [Dissolve to delete](https://elements.lumesec.ai/components/pixel-lab/dissolve.md) `<px-dissolve>`: Deleting a chat turns the row into its own pixels, sampled from the real text, and they drift away left to right before the gap closes.
- [Release rocket](https://elements.lumesec.ai/components/pixel-lab/launch.md) `<px-launch>`: A pixel rocket: a big countdown, smoke on the pad, then liftoff with a flame trail while the stars streak past. Land it again afterwards.
- [Day / night switch](https://elements.lumesec.ai/components/pixel-lab/theme.md) `<px-theme>`: The sun’s pixels fly apart and rebuild as a crescent moon while night sweeps across the sky and stars come out. In this demo it switches the theme of the whole page.
- [Pixel stars](https://elements.lumesec.ai/components/pixel-lab/rating.md) `<px-rating>`: Stars fill like liquid as you hover, column by column with a wave at the front. Picking one pops it with sparks and rolls the label.
- [Notification bell](https://elements.lumesec.ai/components/pixel-lab/bell.md) `<px-bell>`: A new notification swings the bell on its pivot with a lagging clapper, sends sound waves out both sides and pops the badge. Clicking the bell clears it in a spray of pixels.
- [Temperature fire](https://elements.lumesec.ai/components/pixel-lab/flame.md) `<px-flame>`: Model temperature as a real fire simulation. Low values leave embers, “Creative” burns tall, and “Wild” starts throwing sparks.
- [Radio tuner](https://elements.lumesec.ai/components/pixel-lab/tuner.md) `<px-tuner>`: Drag the band to tune. Static thins out as you near a station, a waveform appears, and the station name resolves when it locks. Let go nearby and it springs onto the frequency.
- [Equalizer](https://elements.lumesec.ai/components/pixel-lab/eq.md) `<px-eq>`: Seven bands on springs with a smooth curve drawn through them, over a live spectrum that reacts to the gains. Presets cascade band by band.
- [Jog wheel](https://elements.lumesec.ai/components/pixel-lab/jog.md) `<px-jog>`: Spin the wheel and let go: it keeps turning with inertia, the timecode runs and the filmstrip scrubs underneath. Fast spins leave ghosted teeth.
- [Metronome](https://elements.lumesec.ai/components/pixel-lab/metronome.md) `<px-metronome>`: A swinging pixel pendulum whose weight slides with the tempo, four beat lamps and sparks at each extreme. Tap tempo works, and sound is off until you turn it on.
- [Pixel colour picker](https://elements.lumesec.ai/components/pixel-lab/color.md) `<px-color>`: A grid of colour pixels with a fisheye that swells cells under your pointer. Picking a hue sends the new colour rippling across the grid from where you clicked.
- [Mirror sketchpad](https://elements.lumesec.ai/components/pixel-lab/sketch.md) `<px-sketch>`: A 16×16 drawing pad with mirror mode, so every stroke is symmetric. Cells pop as you paint, and Clear drops every pixel off the bottom with gravity.
- [Context waffle](https://elements.lumesec.ai/components/pixel-lab/waffle.md) `<px-waffle>`: The context window as 200 cells, one per thousand tokens, grouped by source. Attaching a file flies new cells in and pushes the rest along; compacting crumbles the conversation and closes the gap.
- [LED ticker](https://elements.lumesec.ai/components/pixel-lab/ticker.md) `<px-ticker>`: An LED marquee: glowing text over a grid of unlit dots, coloured up and down arrows and soft edges. Hovering eases it to a stop rather than freezing it.
- [Service radar](https://elements.lumesec.ai/components/pixel-lab/radar.md) `<px-radar>`: A sweeping radar where each service lights up as the beam passes and fades over a revolution. Ping sends a ring out that flashes every node it touches.
- [Uptime history](https://elements.lumesec.ai/components/pixel-lab/uptime.md) `<px-uptime>`: Ninety days per service as pixel columns, swept in on load. Hovering a day lifts that column across every service and shows what happened.
- [Morphing clock](https://elements.lumesec.ai/components/pixel-lab/clock.md) `<px-clock>`: A live clock where every changing digit rolls to the next one and sheds a few pixels. Switching time zone rolls every digit at once.
- [Waveform player](https://elements.lumesec.ai/components/pixel-lab/player.md) `<px-player>`: A pixel waveform that fills as it plays, previews ahead of the playhead on hover and sends a ripple out from wherever you click. The track is silent.
- [Request globe](https://elements.lumesec.ai/components/pixel-lab/globe.md) `<px-globe>`: A dotted sphere with nine regions. Requests arc between them as glowing packets, each arrival flashes the node and rolls the counter. Drag to spin it.
- [Code minimap](https://elements.lumesec.ai/components/pixel-lab/minimap.md) `<px-minimap>`: A syntax-coloured pixel minimap beside a code file, with the visible window outlined. Search results pulse in the margin; drag the minimap to scroll.
- [Diffusion preview](https://elements.lumesec.ai/components/pixel-lab/diffusion.md) `<px-diffusion>`: An image generating the way diffusion models work: noise and big blocks that sharpen step by step into a scene. Three prompts, and every variation is different.
- [Snake stepper](https://elements.lumesec.ai/components/pixel-lab/stepper.md) `<px-stepper>`: Onboarding progress as a pixel snake. It idles in a loop around the current step, slithers along the path to the next one, eats it and grows.
- [Pixel loaders](https://elements.lumesec.ai/components/pixel-lab/spinners.md) `<px-spinners>`: Six loading indicators made of pixels: orbit, snake, helix, scan, rain and pulse. Clicking one finishes it with a check before it starts again.
- [Typing heatmap](https://elements.lumesec.ai/components/pixel-lab/keys.md) `<px-keys>`: A typing test over a pixel keyboard. Each key flashes and ripples to its neighbours, builds up heat the more you use it, and turns red on a miss.
- [Token view](https://elements.lumesec.ai/components/pixel-lab/tokenize.md) `<px-tokenize>`: Type and the text splits into tokens, shown as tinted spans and as a strip of pixels where new tokens drop in. The tokenizer is a rough approximation.
- [Usage battery](https://elements.lumesec.ai/components/pixel-lab/battery.md) `<px-battery>`: Weekly usage as a pixel battery. Spending knocks cells loose so they float off; resetting runs current in along the cable with a pulsing bolt until it’s full.
