クイックスタート

インストール

npm i twelve-principles

ランタイム依存はありません。React バインディング（twelve-principles/react）を使う場合だけ react >= 18 が必要です。

最初の動き

レシピを再生する。 レシピは複数の原則を組み合わせた完成品の MotionSpec です。

import { enter, play } from "twelve-principles";

play(document.querySelector(".card")!, enter("rise"));

原則を足す。 原則は MotionSpec → MotionSpec の関数なので、包むだけです。

import { anticipate, enter, followThrough, play } from "twelve-principles";

play(card, followThrough(anticipate(enter("rise")), { bounce: 0.35 }));

インタラクションを付ける。 ビヘイビアは要素にイベントを張り、解除関数を返します。

import { hoverable, pressable } from "twelve-principles";

const offPress = pressable(button); // 押すと潰れ、離すとバネで戻る
const offHover = hoverable(button); // ホバーで持ち上がり、影が伸びる

React で使う

コンポーネント
フック

import { Motion, MotionProvider, Presence } from "twelve-principles/react";

export function SaveButton({ saved }: { saved: boolean }) {
  return (
    <MotionProvider personality="playful">
      <Motion as="button" press hover enter="pop">
        保存
      </Motion>
      <Presence show={saved} enter="pop" exit="pop" role="status">
        保存しました
      </Presence>
    </MotionProvider>
  );
}

import { useMemo } from "react";
import { jump } from "twelve-principles";
import { mergeRefs, useHover, useMotion, usePress } from "twelve-principles/react";

export function Bell() {
  const { ref, play } = useMotion<HTMLButtonElement>();
  const press = usePress<HTMLButtonElement>();
  const hover = useHover<HTMLButtonElement>();
  // Keep the merged ref stable so React doesn't detach/attach it every render.
  const merged = useMemo(() => mergeRefs(ref, press, hover), [ref, press, hover]);
  return (
    <button ref={merged} onClick={() => play((p) => jump({ personality: p }))}>
      通知
    </button>
  );
}

ボタンを押す・ホバーする・トーストを出し入れする。右上の personality を変えると同じコードの性格が変わる。