import { Rise, Morph, Reveal } from "cube-motion/react";

<Rise as="section" targets="children" className="hero"> // stagger children
  <h1>Four motions.</h1>
  <button onClick={save}>
    <Morph active={saved} off="Save" on="Saved" />
  </button>
</Rise>

<Rise show={open} className="toast">Saved</Rise>   // rises in, leaves before unmount

<Reveal as="ul" targets="children" className="cards">{cards}</Reveal>

<script setup>
import { Rise, Morph, Reveal } from "cube-motion/vue";
</script>

<template>
  <Rise as="section" targets="children" class="hero"> <!-- stagger children -->
    <h1>Four motions.</h1>
    <button @click="save"><Morph :active="saved" off="Save" on="Saved" /></button>
  </Rise>
  <Rise :show="open" class="toast">Saved</Rise>   <!-- rises in, leaves before unmount -->
  <Reveal as="ul" targets="children" class="cards">
    <li v-for="card in cards" :key="card.id">{{ card.title }}</li>
  </Reveal>
</template>

import { Rise, Morph, Reveal } from "cube-motion/solid";

<Rise as="section" targets="children" class="hero"> // stagger children
  <h1>Four motions.</h1>
  <button onClick={save}>
    <Morph active={saved()} off="Save" on="Saved" />
  </button>
</Rise>

<Rise show={open()} class="toast">Saved</Rise>   // rises in, leaves before unmount

<Reveal as="ul" targets="children" class="cards">{cards}</Reveal>

<script>
  import { rise, leave, morph, reveal } from "cube-motion/svelte";
</script>

<button onclick={save}>
  <span class="faces" use:morph={saved}>
    <span class:inactive={saved} aria-hidden={saved} inert={saved}>Save</span>
    <span class:inactive={!saved} aria-hidden={!saved} inert={!saved}>Saved</span>
  </span>
</button>

{#if open}<div class="toast" in:rise out:leave>Saved</div>{/if}

<ul use:reveal={{ targets: "children" }} class="cards">…</ul>