Stepper

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

<div data-motion="stepper" aria-label="Create your space">
  <section><h3>Welcome aboard</h3><p>Three short steps and your space is ready. You can change every answer later.</p></section>
  <section><h3>What should we call you?</h3><label>Your name <input type="text" name="name" autocomplete="name" placeholder="Sam Rivera"></label></section>
  <section><h3>Pick a home</h3><p>Choose where new notes land first. Everything stays on this device until you share it.</p></section>
  <section><h3>All set</h3><p>Press Complete and we will open your space with everything in place.</p></section>
</div>

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

<Stepper>Your content</Stepper>

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

<template>
  <Stepper>Your content</Stepper>
</template>

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