Pointer

Example of a pointer-follow animation that tracks cursor movement within the container.

Demo

JavaScript

import {
  ClockComposer,
  Simulator,
  TeleportKinetics,
} from "@yyyoichi/chrono-kinesis";
import {
  ElementPhysics,
  ElementRect,
  PrimaryPointerPositionClock,
  WindowResizeTriggerClock,
} from "@yyyoichi/chrono-kinesis/dom";
const simulation = new Simulator({ fixedStepSec: 1 / 20 });

const windowResizeTriggerClock = new WindowResizeTriggerClock();
const boxEl = document.getElementById("pointer-hover-box")!;
const boxRect = new ElementRect(boxEl, {
  // windowリサイズ時に位置を再度取得します。
  trigger: windowResizeTriggerClock,
});
// container内のpointermoveを監視します。
const pointerPositionClock = new PrimaryPointerPositionClock(
  document.getElementById("pointer-hover-container")!,
  {
    initPosition: boxRect,
  },
);
simulation.add({
  clock: new ClockComposer(pointerPositionClock, windowResizeTriggerClock),
  target: pointerPositionClock,
  // 初期座標はboxRectです。（初期座標の変更があれば位置を修正します）
  kinetics: new TeleportKinetics(boxRect),
  physics: new ElementPhysics(boxEl),
});
simulation.run();

HTML

<div id="pointer-hover-container" >
  <div
    id="pointer-hover-box"
    style="width: 1rem; height: 1rem; background-color: cadetblue"
  >
  </div>
</div>

Astro File

---
type Props = Omit<astroHTML.JSX.HtmlHTMLAttributes, "id">;
---

<div id="pointer-hover-container" {...Astro.props}>
  <div
    id="pointer-hover-box"
    style="width: 1rem; height: 1rem; background-color: cadetblue"
  >
  </div>
</div>

<script>
  import {
    ClockComposer,
    Simulator,
    TeleportKinetics,
  } from "@yyyoichi/chrono-kinesis";
  import {
    ElementPhysics,
    ElementRect,
    PrimaryPointerPositionClock,
    WindowResizeTriggerClock,
  } from "@yyyoichi/chrono-kinesis/dom";
  const simulation = new Simulator({ fixedStepSec: 1 / 20 });

  const windowResizeTriggerClock = new WindowResizeTriggerClock();
  const boxEl = document.getElementById("pointer-hover-box")!;
  const boxRect = new ElementRect(boxEl, {
    // windowリサイズ時に位置を再度取得します。
    trigger: windowResizeTriggerClock,
  });
  // container内のpointermoveを監視します。
  const pointerPositionClock = new PrimaryPointerPositionClock(
    document.getElementById("pointer-hover-container")!,
    {
      initPosition: boxRect,
    },
  );
  simulation.add({
    clock: new ClockComposer(pointerPositionClock, windowResizeTriggerClock),
    target: pointerPositionClock,
    // 初期座標はboxRectです。（初期座標の変更があれば位置を修正します）
    kinetics: new TeleportKinetics(boxRect),
    physics: new ElementPhysics(boxEl),
  });
  simulation.run();
</script>

Example of a snake-style chained trail, where followers track the pointer sequentially.

Demo

JavaScript

import {
  ClockComposer,
  Simulator,
  SpringEngine,
  TeleportKinetics,
  VectorComposer,
  type VectorReadablePort,
} from "@yyyoichi/chrono-kinesis";
import {
  ElementPhysics,
  ElementRect,
  PrimaryPointerPositionClock,
  WindowResizeTriggerClock,
} from "@yyyoichi/chrono-kinesis/dom";
const simulation = new Simulator({ fixedStepSec: 1 / 20 });

const containerEl = document.getElementById("pointer-snake-container")!;
const boxEl = document.getElementById("pointer-snake-box")!;

const windowResizeTrigger = new WindowResizeTriggerClock();
const boxRect = new ElementRect(boxEl, {
  trigger: windowResizeTrigger,
});
const pointerPositionClock = new PrimaryPointerPositionClock(containerEl, {
  initPosition: boxRect,
});
const engine = new SpringEngine({ settleMs: 400, zeta: 0.7 });
const kinetics = new TeleportKinetics(boxRect, { engine: engine });
const clock = new ClockComposer(pointerPositionClock, windowResizeTrigger);

simulation.add({
  clock: clock,
  target: new VectorComposer(pointerPositionClock, boxRect),
  kinetics: kinetics,
  physics: new ElementPhysics(boxEl),
});

let target: VectorReadablePort = kinetics;
for (let i = 1; i <= 5; i++) {
  const cloneEl = boxEl.cloneNode(true) as HTMLElement;
  cloneEl.removeAttribute("id");
  cloneEl.style.opacity = `${1 - 0.1 * i}`;
  containerEl.appendChild(cloneEl);

  const cloneRect = new ElementRect(cloneEl, {
    trigger: windowResizeTrigger,
  });
  const cloneKinetics = new TeleportKinetics(cloneRect, {
    engine: engine.clone({ settleMs: 400 - i * 10 }),
  });
  simulation.add({
    clock: clock,
    target: new VectorComposer(target, cloneRect),
    kinetics: cloneKinetics,
    physics: new ElementPhysics(cloneEl),
  });
  target = cloneKinetics;
}
simulation.run();

HTML

<div id="pointer-snake-container" >
  <div
    id="pointer-snake-box"
    style="width: 1rem; height: 1rem; background-color: cadetblue; margin-top: 0;"
  >
  </div>
</div>

Astro File

---
type Props = Omit<astroHTML.JSX.HtmlHTMLAttributes, "id">;
---

<div id="pointer-snake-container" {...Astro.props}>
  <div
    id="pointer-snake-box"
    style="width: 1rem; height: 1rem; background-color: cadetblue; margin-top: 0;"
  >
  </div>
</div>

<script>
  import {
    ClockComposer,
    Simulator,
    SpringEngine,
    TeleportKinetics,
    VectorComposer,
    type VectorReadablePort,
  } from "@yyyoichi/chrono-kinesis";
  import {
    ElementPhysics,
    ElementRect,
    PrimaryPointerPositionClock,
    WindowResizeTriggerClock,
  } from "@yyyoichi/chrono-kinesis/dom";
  const simulation = new Simulator({ fixedStepSec: 1 / 20 });

  const containerEl = document.getElementById("pointer-snake-container")!;
  const boxEl = document.getElementById("pointer-snake-box")!;

  const windowResizeTrigger = new WindowResizeTriggerClock();
  const boxRect = new ElementRect(boxEl, {
    trigger: windowResizeTrigger,
  });
  const pointerPositionClock = new PrimaryPointerPositionClock(containerEl, {
    initPosition: boxRect,
  });
  const engine = new SpringEngine({ settleMs: 400, zeta: 0.7 });
  const kinetics = new TeleportKinetics(boxRect, { engine: engine });
  const clock = new ClockComposer(pointerPositionClock, windowResizeTrigger);

  simulation.add({
    clock: clock,
    target: new VectorComposer(pointerPositionClock, boxRect),
    kinetics: kinetics,
    physics: new ElementPhysics(boxEl),
  });

  let target: VectorReadablePort = kinetics;
  for (let i = 1; i <= 5; i++) {
    const cloneEl = boxEl.cloneNode(true) as HTMLElement;
    cloneEl.removeAttribute("id");
    cloneEl.style.opacity = `${1 - 0.1 * i}`;
    containerEl.appendChild(cloneEl);

    const cloneRect = new ElementRect(cloneEl, {
      trigger: windowResizeTrigger,
    });
    const cloneKinetics = new TeleportKinetics(cloneRect, {
      engine: engine.clone({ settleMs: 400 - i * 10 }),
    });
    simulation.add({
      clock: clock,
      target: new VectorComposer(target, cloneRect),
      kinetics: cloneKinetics,
      physics: new ElementPhysics(cloneEl),
    });
    target = cloneKinetics;
  }
  simulation.run();
</script>