<div class="box"></div>

<script type="module">
    import { animate, press } from "https://cdn.jsdelivr.net/npm/motion@12.12.0/+esm"

    press(".box", (element) => {
        animate(element, { scale: 0.8 }, { type: "spring", stiffness: 1000 })

        return () =>
            animate(element, { scale: 1 }, { type: "spring", stiffness: 500 })
    })
</script>

<style>
    .box {
        width: 100px;
        height: 100px;
        background-color: #8df0cc;
        border-radius: 10px;
        cursor: pointer;
    }

    .box:focus-visible {
        outline: 2px solid #8df0cc;
        outline-offset: 2px;
    }
</style>