✦ StealThis .dev
Pages Medium

DIY — Robotics Lab Landing

A dark, HUD-styled landing page for Servolab, a fictional robotics lab and kit maker. It pairs an animated SVG robot arm running a looping pick-and-place cycle with a live mono telemetry strip, a four-kit product grid whose cards reveal spec sheets on hover or focus, a clickable four-stage skill path on a glowing rail, a syntax-highlighted firmware card with copy-to-clipboard, a league countdown with a ticking leaderboard, a facilities row and a validated signup footer. Vanilla JS only.

Open in Lab
html css vanilla-js
Targets: JS HTML

Code

Robotics Lab Landing

Servolab is a fictional open-hardware robot kit maker, and this page is its shopfront. The hero puts a five-axis SVG arm on a gridded bench that sweeps continuously between a pick bin and a place bin, grabbing a payload halfway through the cycle. Under it, a mono telemetry strip ticks servo angle, battery, uptime, packet count, bus temperature and mesh link state, with warning colours kicking in when temperature or charge drifts out of band.

The catalogue shows four kits — a quadruped walker, a field rover, a bench arm and a line follower — each drawn as a CSS-tinted SVG glyph inside a card with HUD corner brackets. Age and level badges, part-count chips and a price sit above a spec sheet that expands on hover, on keyboard focus, or on tap for touch devices. Below, the skill path is a four-stage rail: clicking or arrowing across the stages slides a gradient fill along the track and swaps the detail panel with tools, output and the coach sign-off for that stage.

The rest of the page keeps the same instrumentation feel. A firmware card shows a hand-highlighted C gait routine with a copy button that falls back to a hidden textarea when the async clipboard is unavailable. The league band counts down to the next qualifying round while the leaderboard nudges a random team’s score every few seconds with a flash. Everything closes on a facilities row and a signup form with inline validation and a toast.

How this look is built

The arm is a nested SVG group hierarchy where each joint animates its own transform: rotate() around an explicit transform-origin in user units, so the CSS keyframes compose exactly like real forward kinematics instead of needing per-frame JS math; the conveyor and the sweep path are just stroke-dasharray plus an animated stroke-dashoffset, which the compositor handles cheaply. The blueprint texture, the panel glows and the scanline overlay are all layered gradients with background-size and repeating-linear-gradient, and the HUD brackets are four absolutely positioned <i> elements with two borders each — no images, no extra requests. Spec sheets expand with a max-height + opacity transition rather than display, keeping them focusable and animatable. Because the arm, belt and status dot animate forever, the prefers-reduced-motion block zeroes every duration and parks the arm at a neutral pose, and the JS mirrors it by skipping the cycle counter and the leaderboard ticker so a reduced-motion visitor gets a fully static page.

Illustrative UI only — always follow real safety guidance when working with tools, electronics, or repairs.