Create a crosshair cursor for an architecture practice called Plumb & Line, styled like a drawing sheet. Background #f2efe6 with graph paper lines every 12px (#e7e2d4) and 60px (#d9d2bf). Fixed 28px rulers run along the top and left edges in #fffdf7 with tick marks every 12px and 60px. Centre a small red (#e63946) uppercase label, the headline "Measured twice, drawn once" in ink blue #1d3557 (88px, 800 weight), one line of grey copy and two square buttons, "See our projects" filled ink and "Book a site visit" outlined. Hide the system cursor on fine pointers. Draw two 1px full-length hairlines that cross at the pointer, with an 18px ring at the crossing, eased at 0.4 per frame. Show live monospace readouts on the rulers in metres at 1:50 scale: X on the top ruler, Y rotated on the left. Over the headline or a button, the lines turn red and a dashed red box wraps the element with 10px padding, labelled "W 2.17 m" and "H 0.64 m" on its edges. Desktop also shows a small house elevation and a title block. On touch, dragging moves the crosshair, and when idle it glides to each element and measures it. For reduced motion, skip easing and the tour.
Written by Informeek Studio to recreate this design. Prompts are not deterministic: running it again gives a similar result, not an identical one.
Use it in three steps
- Copy the prompt with the button above.
- Paste it into your tool, such as v0, Lovable, Bolt or Claude.
- Make it yours by changing the scale, the units and the practice name.
About this crosshair cursor in CSS
The plain crosshair cursor in CSS is one line of code and looks like nothing. This version makes it part of the brand. Two hairlines run the full width and height of the page and cross at the pointer, while rulers along the top and left edge show live X and Y readings in metres, as if the screen were a drawing at 1:50.
The best moment is hovering something. The lines turn red, a dashed dimension box wraps the headline or button, and its width and height appear on the edges in the same monospace type an architect would use. On a phone you drag the crosshair with a finger, and if you leave it, it glides from element to element measuring each one.
Why the prompt works
- It describes the drawing sheet with exact grid spacings and ruler sizes, so the page looks technical rather than busy.
- It sets a scale, which turns pixel positions into believable metres.
- It defines the measure state, red lines, a dashed box and two labels.
- It covers touch and reduced motion with a drag, an idle tour and no easing.
Where to use it
Architects, surveyors, engineers, interior designers and design tool landing pages. Use it on one hero, then hand back the normal cursor for reading.
The prompt is shared under CC BY 4.0. Reuse it freely, including commercially, with a credit linking back to this page.
