Crosshair

<link rel="stylesheet" href="/axi0/motion/motion.css?v=6">
<script src="/axi0/motion/motion.js?v=10" defer></script>

<div class="m-crosshair" data-motion="crosshair">
  <p>Move the pointer around. Over a link or a button the lines lock on and measure it.</p>
  <div><a href="#crosshair">A link</a> <button type="button">A button</button> <button type="button" class="m-crosshair-big">A bigger one</button></div>
</div>

import { Crosshair } from "./motion/react/Crosshair";

<Crosshair>Your content</Crosshair>

<script setup lang="ts">
import Crosshair from "./motion/vue/Crosshair.vue";
</script>

<template>
  <Crosshair>Your content</Crosshair>
</template>

const el = document.querySelector("#title");
el.dataset.motion = "crosshair";