claude-code/components/LogoV2/AnimatedClawd.tsx

import { c as _c } from "react/compiler-runtime";
import * as React from 'react';
import { useEffect, useRef, useState } from 'react';
import { Box } from '../../ink.js';
import { getInitialSettings } from '../../utils/settings/settings.js';
import { Clawd, type ClawdPose } from './Clawd.js';
type Frame = {
  pose: ClawdPose;
  offset: number;
};

/** Hold a pose for n frames (60ms each). */
function hold(pose: ClawdPose, offset: number, frames: number): Frame[] {
  return Array.from({
    length: frames
  }, () => ({
    pose,
    offset
  }));
}

// Offset semantics: marginTop in a fixed-height-3 container. 0 = normal,
// 1 = crouched. Container height stays 3 so the layout never shifts; during
// a crouch (offset=1) Clawd's feet row dips below the container and gets
// clipped — reads as "ducking below the frame" before springing back up.

// Click animation: crouch, then spring up with both arms raised. Twice.
const JUMP_WAVE: readonly Frame[] = [...hold('default', 1, 2),
// crouch
...hold('arms-up', 0, 3),
// spring!
...hold('default', 0, 1), ...hold('default', 1, 2),
// crouch again
...hold('arms-up', 0, 3),
// spring!
...hold('default', 0, 1)];

// Click animation: glance right, then left, then back.
const LOOK_AROUND: readonly Frame[] = [...hold('look-right', 0, 5), ...hold('look-left', 0, 5), ...hold('default', 0, 1)];
const CLICK_ANIMATIONS: readonly (readonly Frame[])[] = [JUMP_WAVE, LOOK_AROUND];
const IDLE: Frame = {
  pose: 'default',
  offset: 0
};
const FRAME_MS = 60;
const incrementFrame = (i: number) => i + 1;
const CLAWD_HEIGHT = 3;

/**
 * Clawd with click-triggered animations (crouch-jump with arms up, or
 * look-around). Container height is fixed at CLAWD_HEIGHT — same footprint
 * as a bare `<Clawd />` — so the surrounding layout never shifts. During a
 * crouch only the feet row clips (see comment above). Click only fires when
 * mouse tracking is enabled (i.e. inside `<AlternateScreen>` / fullscreen);
 * elsewhere this renders and behaves identically to plain `<Clawd />`.
 */
export function AnimatedClawd() {
  const $ = _c(8);
  const {
    pose,
    bounceOffset,
    onClick
  } = useClawdAnimation();
  let t0;
  if ($[0] !== pose) {
    t0 = <Clawd pose={pose} />;
    $[0] = pose;
    $[1] = t0;
  } else {
    t0 = $[1];
  }
  let t1;
  if ($[2] !== bounceOffset || $[3] !== t0) {
    t1 = <Box marginTop={bounceOffset} flexShrink={0}>{t0}</Box>;
    $[2] = bounceOffset;
    $[3] = t0;
    $[4] = t1;
  } else {
    t1 = $[4];
  }
  let t2;
  if ($[5] !== onClick || $[6] !== t1) {
    t2 = <Box height={CLAWD_HEIGHT} flexDirection="column" onClick={onClick}>{t1}</Box>;
    $[5] = onClick;
    $[6] = t1;
    $[7] = t2;
  } else {
    t2 = $[7];
  }
  return t2;
}
function useClawdAnimation(): {
  pose: ClawdPose;
  bounceOffset: number;
  onClick: () => void;
} {
  // Read once at mount — no useSettings() subscription, since that would
  // re-render on any settings change.
  const [reducedMotion] = useState(() => getInitialSettings().prefersReducedMotion ?? false);
  const [frameIndex, setFrameIndex] = useState(-1);
  const sequenceRef = useRef<readonly Frame[]>(JUMP_WAVE);
  const onClick = () => {
    if (reducedMotion || frameIndex !== -1) return;
    sequenceRef.current = CLICK_ANIMATIONS[Math.floor(Math.random() * CLICK_ANIMATIONS.length)]!;
    setFrameIndex(0);
  };
  useEffect(() => {
    if (frameIndex === -1) return;
    if (frameIndex >= sequenceRef.current.length) {
      setFrameIndex(-1);
      return;
    }
    const timer = setTimeout(setFrameIndex, FRAME_MS, incrementFrame);
    return () => clearTimeout(timer);
  }, [frameIndex]);
  const seq = sequenceRef.current;
  const current = frameIndex >= 0 && frameIndex < seq.length ? seq[frameIndex]! : IDLE;
  return {
    pose: current.pose,
    bounceOffset: current.offset,
    onClick
  };
}
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJuYW1lcyI6WyJSZWFjdCIsInVzZUVmZmVjdCIsInVzZVJlZiIsInVzZVN0YXRlIiwiQm94IiwiZ2V0SW5pdGlhbFNldHRpbmdzIiwiQ2xhd2QiLCJDbGF3ZFBvc2UiLCJGcmFtZSIsInBvc2UiLCJvZmZzZXQiLCJob2xkIiwiZnJhbWVzIiwiQXJyYXkiLCJmcm9tIiwibGVuZ3RoIiwiSlVNUF9XQVZFIiwiTE9PS19BUk9VTkQiLCJDTElDS19BTklNQVRJT05TIiwiSURMRSIsIkZSQU1FX01TIiwiaW5jcmVtZW50RnJhbWUiLCJpIiwiQ0xBV0RfSEVJR0hUIiwiQW5pbWF0ZWRDbGF3ZCIsIiQiLCJfYyIsImJvdW5jZU9mZnNldCIsIm9uQ2xpY2siLCJ1c2VDbGF3ZEFuaW1hdGlvbiIsInQwIiwidDEiLCJ0MiIsInJlZHVjZWRNb3Rpb24iLCJwcmVmZXJzUmVkdWNlZE1vdGlvbiIsImZyYW1lSW5kZXgiLCJzZXRGcmFtZUluZGV4Iiwic2VxdWVuY2VSZWYiLCJjdXJyZW50IiwiTWF0aCIsImZsb29yIiwicmFuZG9tIiwidGltZXIiLCJzZXRUaW1lb3V0IiwiY2xlYXJUaW1lb3V0Iiwic2VxIl0sInNvdXJjZXMiOlsiQW5pbWF0ZWRDbGF3ZC50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnXG5pbXBvcnQgeyB1c2VFZmZlY3QsIHVzZVJlZiwgdXNlU3RhdGUgfSBmcm9tICdyZWFjdCdcbmltcG9ydCB7IEJveCB9IGZyb20gJy4uLy4uL2luay5qcydcbmltcG9ydCB7IGdldEluaXRpYWxTZXR0aW5ncyB9IGZyb20gJy4uLy4uL3V0aWxzL3NldHRpbmdzL3NldHRpbmdzLmpzJ1xuaW1wb3J0IHsgQ2xhd2QsIHR5cGUgQ2xhd2RQb3NlIH0gZnJvbSAnLi9DbGF3ZC5qcydcblxudHlwZSBGcmFtZSA9IHsgcG9zZTogQ2xhd2RQb3NlOyBvZmZzZXQ6IG51bWJlciB9XG5cbi8qKiBIb2xkIGEgcG9zZSBmb3IgbiBmcmFtZXMgKDYwbXMgZWFjaCkuICovXG5mdW5jdGlvbiBob2xkKHBvc2U6IENsYXdkUG9zZSwgb2Zmc2V0OiBudW1iZXIsIGZyYW1lczogbnVtYmVyKTogRnJhbWVbXSB7XG4gIHJldHVybiBBcnJheS5mcm9tKHsgbGVuZ3RoOiBmcmFtZXMgfSwgKCkgPT4gKHsgcG9zZSwgb2Zmc2V0IH0pKVxufVxuXG4vLyBPZmZzZXQgc2VtYW50aWNzOiBtYXJnaW5Ub3AgaW4gYSBmaXhlZC1oZWlnaHQtMyBjb250YWluZXIuIDAgPSBub3JtYWwsXG4vLyAxID0gY3JvdWNoZWQuIENvbnRhaW5lciBoZWlnaHQgc3RheXMgMyBzbyB0aGUgbGF5b3V0IG5ldmVyIHNoaWZ0czsgZHVyaW5nXG4vLyBhIGNyb3VjaCAob2Zmc2V0PTEpIENsYXdkJ3MgZmVldCByb3cgZGlwcyBiZWxvdyB0aGUgY29udGFpbmVyIGFuZCBnZXRzXG4vLyBjbGlwcGVkIOKAlCByZWFkcyBhcyBcImR1Y2tpbmcgYmVsb3cgdGhlIGZyYW1lXCIgYmVmb3JlIHNwcmluZ2luZyBiYWNrIHVwLlxuXG4vLyBDbGljayBhbmltYXRpb246IGNyb3VjaCwgdGhlbiBzcHJpbmcgdXAgd2l0aCBib3RoIGFybXMgcmFpc2VkLiBUd2ljZS5cbmNvbnN0IEpVTVBfV0FWRTogcmVhZG9ubHkgRnJhbWVbXSA9IFtcbiAgLi4uaG9sZCgnZGVmYXVsdCcsIDEsIDIpLCAvLyBjcm91Y2hcbiAgLi4uaG9sZCgnYXJtcy11cCcsIDAsIDMpLCAvLyBzcHJpbmchXG4gIC4uLmhvbGQoJ2RlZmF1bHQnLCAwLCAxKSxcbiAgLi4uaG9sZCgnZGVmYXVsdCcsIDEsIDIpLCAvLyBjcm91Y2ggYWdhaW5cbiAgLi4uaG9sZCgnYXJtcy11cCcsIDAsIDMpLCAvLyBzcHJpbmchXG4gIC4uLmhvbGQoJ2RlZmF1bHQnLCAwLCAxKSxcbl1cblxuLy8gQ2xpY2sgYW5pbWF0aW9uOiBnbGFuY2UgcmlnaHQsIHRoZW4gbGVmdCwgdGhlbiBiYWNrLlxuY29uc3QgTE9PS19BUk9VTkQ6IHJlYWRvbmx5IEZyYW1lW10gPSBbXG4gIC4uLmhvbGQoJ2xvb2stcmlnaHQnLCAwLCA1KSxcbiAgLi4uaG9sZCgnbG9vay1sZWZ0JywgMCwgNSksXG4gIC4uLmhvbGQoJ2RlZmF1bHQnLCAwLCAxKSxcbl1cblxuY29uc3QgQ0xJQ0tfQU5JTUFUSU9OUzogcmVhZG9ubHkgKHJlYWRvbmx5IEZyYW1lW10pW10gPSBbSlVNUF9XQVZFLCBMT09LX0FST1VORF1cblxuY29uc3QgSURMRTogRnJhbWUgPSB7IHBvc2U6ICdkZWZhdWx0Jywgb2Zmc2V0OiAwIH1cbmNvbnN0IEZSQU1FX01TID0gNjBcbmNvbnN0IGluY3JlbWVudEZyYW1lID0gKGk6IG51bWJlcikgPT4gaSArIDFcbmNvbnN0IENMQVdEX0hFSUdIVCA9IDNcblxuLyoqXG4gKiBDbGF3ZCB3aXRoIGNsaWNrLXRyaWdnZXJlZCBhbmltYXRpb25zIChjcm91Y2gtanVtcCB3aXRoIGFybXMgdXAsIG9yXG4gKiBsb29rLWFyb3VuZCkuIENvbnRhaW5lciBoZWlnaHQgaXMgZml4ZWQgYXQgQ0xBV0RfSEVJR0hUIOKAlCBzYW1lIGZvb3RwcmludFxuICogYXMgYSBiYXJlIGA8Q2xhd2QgLz5gIOKAlCBzbyB0aGUgc3Vycm91bmRpbmcgbGF5b3V0IG5ldmVyIHNoaWZ0cy4gRHVyaW5nIGFcbiAqIGNyb3VjaCBvbmx5IHRoZSBmZWV0IHJvdyBjbGlwcyAoc2VlIGNvbW1lbnQgYWJvdmUpLiBDbGljayBvbmx5IGZpcmVzIHdoZW5cbiAqIG1vdXNlIHRyYWNraW5nIGlzIGVuYWJsZWQgKGkuZS4gaW5zaWRlIGA8QWx0ZXJuYXRlU2NyZWVuPmAgLyBmdWxsc2NyZWVuKTtcbiAqIGVsc2V3aGVyZSB0aGlzIHJlbmRlcnMgYW5kIGJlaGF2ZXMgaWRlbnRpY2FsbHkgdG8gcGxhaW4gYDxDbGF3ZCAvPmAuXG4gKi9cbmV4cG9ydCBmdW5jdGlvbiBBbmltYXRlZENsYXdkKCk6IFJlYWN0LlJlYWN0Tm9kZSB7XG4gIGNvbnN0IHsgcG9zZSwgYm91bmNlT2Zmc2V0LCBvbkNsaWNrIH0gPSB1c2VDbGF3ZEFuaW1hdGlvbigpXG4gIHJldHVybiAoXG4gICAgPEJveCBoZWlnaHQ9e0NMQVdEX0hFSUdIVH0gZmxleERpcmVjdGlvbj1cImNvbHVtblwiIG9uQ2xpY2s9e29uQ2xpY2t9PlxuICAgICAgPEJveCBtYXJnaW5Ub3A9e2JvdW5jZU9mZnNldH0gZmxleFNocmluaz17MH0+XG4gICAgICAgIDxDbGF3ZCBwb3NlPXtwb3NlfSAvPlxuICAgICAgPC9Cb3g+XG4gICAgPC9Cb3g+XG4gIClcbn1cblxuZnVuY3Rpb24gdXNlQ2xhd2RBbmltYXRpb24oKToge1xuICBwb3NlOiBDbGF3ZFBvc2VcbiAgYm91bmNlT2Zmc2V0OiBudW1iZXJcbiAgb25DbGljazogKCkgPT4gdm9pZFxufSB