> ## Documentation Index
> Fetch the complete documentation index at: https://docs.sampler.meiji.industries/llms.txt
> Use this file to discover all available pages before exploring further.

# 4-Finger Crab

> 4-Finger Crab Turntablism technique, defaults, and preview examples.

export const TurntablismPlayer = ({diagramUrl, diagramAlt, ahhUrl, freshUrl, ahhLabel, freshLabel, plotBounds, diagramDurationSeconds, techniqueDurationSeconds}) => {
  const cycleProgress = currentTime => {
    if (currentTime >= techniqueDurationSeconds) return 1;
    return currentTime % diagramDurationSeconds / diagramDurationSeconds;
  };
  const createTurntablismPlayerController = ({requestFrame, cancelFrame, updateProgress, setActiveSource}) => {
    let activeAudio = null;
    let animationFrame = null;
    const stopAnimation = () => {
      if (animationFrame !== null) {
        cancelFrame(animationFrame);
        animationFrame = null;
      }
    };
    const animate = audio => {
      if (audio !== activeAudio) return;
      updateProgress(audio);
      if (!audio.paused && !audio.ended) {
        animationFrame = requestFrame(() => animate(audio));
      }
    };
    return {
      handlePlay(source, audio, otherAudio) {
        activeAudio = audio;
        if (otherAudio && !otherAudio.paused) otherAudio.pause();
        stopAnimation();
        setActiveSource(source);
        animationFrame = requestFrame(() => animate(audio));
      },
      handlePause(audio) {
        if (audio !== activeAudio) return;
        stopAnimation();
        updateProgress(audio);
        activeAudio = null;
        setActiveSource(null);
      },
      handleProgress(audio) {
        if (activeAudio === null || audio === activeAudio) updateProgress(audio);
      },
      stopAnimation
    };
  };
  const ahhRef = useRef(null);
  const freshRef = useRef(null);
  const playerRef = useRef(null);
  const [progress, setProgress] = useState(0);
  const [activeSource, setActiveSource] = useState(null);
  const updateProgress = audio => {
    if (!audio || !Number.isFinite(diagramDurationSeconds) || diagramDurationSeconds <= 0 || !Number.isFinite(techniqueDurationSeconds) || techniqueDurationSeconds <= 0) {
      return;
    }
    setProgress(Math.min(1, Math.max(0, cycleProgress(audio.currentTime))));
  };
  if (!playerRef.current) {
    playerRef.current = createTurntablismPlayerController({
      requestFrame: callback => requestAnimationFrame(callback),
      cancelFrame: frame => cancelAnimationFrame(frame),
      updateProgress,
      setActiveSource
    });
  }
  const handlePlay = (source, audio) => {
    const other = source === "ahh" ? freshRef.current : ahhRef.current;
    playerRef.current.handlePlay(source, audio, other);
  };
  const handlePause = audio => {
    playerRef.current.handlePause(audio);
  };
  useEffect(() => () => playerRef.current.stopAnimation(), []);
  const playheadPercent = (plotBounds.left + progress * (plotBounds.right - plotBounds.left)) * 100;
  return <div className="not-prose my-6 overflow-hidden rounded-xl border border-gray-200 dark:border-white/15">
      <div className="relative bg-[#101820]">
        <img src={diagramUrl} alt={diagramAlt} className="block h-auto w-full" />
        <div aria-hidden="true" className="pointer-events-none absolute top-[16%] bottom-[19%] w-0.5 bg-fuchsia-300 shadow-[0_0_8px_rgba(244,114,182,0.9)]" style={{
    left: `${playheadPercent}%`
  }} />
      </div>
      <p className="px-4 pt-3 text-sm text-gray-600 dark:text-gray-300" aria-live="polite">
        {activeSource ? `Playing ${activeSource}. The playhead restarts with each scratch cycle and holds at the end during release.` : "Choose either source to audition the notation."}
      </p>
      <div className="grid gap-4 p-4 sm:grid-cols-2">
        <div>
          <label className="mb-1 block text-sm font-medium" htmlFor={`${ahhUrl}-audio`}>
            ahh.wav
          </label>
          <audio id={`${ahhUrl}-audio`} ref={ahhRef} controls preload="none" aria-label={ahhLabel} className="w-full" onPlay={event => handlePlay("ahh", event.currentTarget)} onPause={event => handlePause(event.currentTarget)} onEnded={event => handlePause(event.currentTarget)} onTimeUpdate={event => playerRef.current.handleProgress(event.currentTarget)} onSeeking={event => playerRef.current.handleProgress(event.currentTarget)} onSeeked={event => playerRef.current.handleProgress(event.currentTarget)} onLoadedMetadata={event => playerRef.current.handleProgress(event.currentTarget)}>
            <source src={ahhUrl} type="audio/wav" />
            Your browser cannot play this audio inline. <a href={ahhUrl}>Open ahh.wav</a>.
          </audio>
        </div>
        <div>
          <label className="mb-1 block text-sm font-medium" htmlFor={`${freshUrl}-audio`}>
            fresh.wav
          </label>
          <audio id={`${freshUrl}-audio`} ref={freshRef} controls preload="none" aria-label={freshLabel} className="w-full" onPlay={event => handlePlay("fresh", event.currentTarget)} onPause={event => handlePause(event.currentTarget)} onEnded={event => handlePause(event.currentTarget)} onTimeUpdate={event => playerRef.current.handleProgress(event.currentTarget)} onSeeking={event => playerRef.current.handleProgress(event.currentTarget)} onSeeked={event => playerRef.current.handleProgress(event.currentTarget)} onLoadedMetadata={event => playerRef.current.handleProgress(event.currentTarget)}>
            <source src={freshUrl} type="audio/wav" />
            Your browser cannot play this audio inline. <a href={freshUrl}>Open fresh.wav</a>.
          </audio>
        </div>
      </div>
    </div>;
};

# 4-Finger Crab

Four head-justified fader clicks divide the forward push into five even sound onsets before the open pull-back.

Default division 1/2, Pattern 4-Finger Crab, Rate 8th, Gate Straight, Swing 0, Humanize 10%.

Use it for fast, even syllable rolls that stay locked to the track's eighth-note hand window.

**Lineage:** The crab family is strongly associated with Q-bert.

## Preview presets

### 1 — 1/2 Forward

**Effective controls:** Pattern `4-Finger Crab` · Motion `Forward` · Division `1/2` · Rate `8th` · Gate `Straight` · Swing `0%` · Humanize `10%`

This is the catalog default preview.

<TurntablismPlayer diagramUrl="/assets/turntablism/scratch_crab/1-1-2-forward/diagram.svg" diagramAlt="TTM diagram for 4-Finger Crab preview 1/2 Forward: blue audible record motion, dark gray muted record motion, light gray intentional holds, white fader clicks, open hold markers, and timing guides." ahhUrl="/assets/turntablism/scratch_crab/1-1-2-forward/ahh.wav" freshUrl="/assets/turntablism/scratch_crab/1-1-2-forward/fresh.wav" ahhLabel="ahh.wav playable example for 4-Finger Crab preview 1/2 Forward" freshLabel="fresh.wav playable example for 4-Finger Crab preview 1/2 Forward" plotBounds={{ left: 0.066667, right: 0.966667 }} diagramDurationSeconds={1.3333333333333333} techniqueDurationSeconds={2.6666666666666665} />

### 2 — 1/2 Orbit

**Effective controls:** Pattern `4-Finger Crab` · Motion `Orbit` · Division `1/2` · Rate `8th` · Gate `Straight` · Swing `0%` · Humanize `10%`

**Overrides:** Motion → Orbit

<TurntablismPlayer diagramUrl="/assets/turntablism/scratch_crab/2-1-2-orbit/diagram.svg" diagramAlt="TTM diagram for 4-Finger Crab preview 1/2 Orbit: blue audible record motion, dark gray muted record motion, light gray intentional holds, white fader clicks, open hold markers, and timing guides." ahhUrl="/assets/turntablism/scratch_crab/2-1-2-orbit/ahh.wav" freshUrl="/assets/turntablism/scratch_crab/2-1-2-orbit/fresh.wav" ahhLabel="ahh.wav playable example for 4-Finger Crab preview 1/2 Orbit" freshLabel="fresh.wav playable example for 4-Finger Crab preview 1/2 Orbit" plotBounds={{ left: 0.066667, right: 0.966667 }} diagramDurationSeconds={1.3333333333333333} techniqueDurationSeconds={2.6666666666666665} />

### 3 — 1/2 Back

**Effective controls:** Pattern `4-Finger Crab` · Motion `Back` · Division `1/2` · Rate `8th` · Gate `Straight` · Swing `0%` · Humanize `10%`

**Overrides:** Motion → Back

<TurntablismPlayer diagramUrl="/assets/turntablism/scratch_crab/3-1-2-back/diagram.svg" diagramAlt="TTM diagram for 4-Finger Crab preview 1/2 Back: blue audible record motion, dark gray muted record motion, light gray intentional holds, white fader clicks, open hold markers, and timing guides." ahhUrl="/assets/turntablism/scratch_crab/3-1-2-back/ahh.wav" freshUrl="/assets/turntablism/scratch_crab/3-1-2-back/fresh.wav" ahhLabel="ahh.wav playable example for 4-Finger Crab preview 1/2 Back" freshLabel="fresh.wav playable example for 4-Finger Crab preview 1/2 Back" plotBounds={{ left: 0.066667, right: 0.966667 }} diagramDurationSeconds={1.3333333333333333} techniqueDurationSeconds={2.6666666666666665} />

### 4 — 1/4 Forward

**Effective controls:** Pattern `4-Finger Crab` · Motion `Forward` · Division `1/4` · Rate `8th` · Gate `Straight` · Swing `0%` · Humanize `10%`

**Overrides:** Division → 1/4

<TurntablismPlayer diagramUrl="/assets/turntablism/scratch_crab/4-1-4-forward/diagram.svg" diagramAlt="TTM diagram for 4-Finger Crab preview 1/4 Forward: blue audible record motion, dark gray muted record motion, light gray intentional holds, white fader clicks, open hold markers, and timing guides." ahhUrl="/assets/turntablism/scratch_crab/4-1-4-forward/ahh.wav" freshUrl="/assets/turntablism/scratch_crab/4-1-4-forward/fresh.wav" ahhLabel="ahh.wav playable example for 4-Finger Crab preview 1/4 Forward" freshLabel="fresh.wav playable example for 4-Finger Crab preview 1/4 Forward" plotBounds={{ left: 0.066667, right: 0.966667 }} diagramDurationSeconds={0.6666666666666666} techniqueDurationSeconds={2.6666666666666665} />

### 5 — 1/4 Orbit

**Effective controls:** Pattern `4-Finger Crab` · Motion `Orbit` · Division `1/4` · Rate `8th` · Gate `Straight` · Swing `0%` · Humanize `10%`

**Overrides:** Motion → Orbit · Division → 1/4

<TurntablismPlayer diagramUrl="/assets/turntablism/scratch_crab/5-1-4-orbit/diagram.svg" diagramAlt="TTM diagram for 4-Finger Crab preview 1/4 Orbit: blue audible record motion, dark gray muted record motion, light gray intentional holds, white fader clicks, open hold markers, and timing guides." ahhUrl="/assets/turntablism/scratch_crab/5-1-4-orbit/ahh.wav" freshUrl="/assets/turntablism/scratch_crab/5-1-4-orbit/fresh.wav" ahhLabel="ahh.wav playable example for 4-Finger Crab preview 1/4 Orbit" freshLabel="fresh.wav playable example for 4-Finger Crab preview 1/4 Orbit" plotBounds={{ left: 0.066667, right: 0.966667 }} diagramDurationSeconds={0.6666666666666666} techniqueDurationSeconds={2.6666666666666665} />

### 6 — 1/4 Back

**Effective controls:** Pattern `4-Finger Crab` · Motion `Back` · Division `1/4` · Rate `8th` · Gate `Straight` · Swing `0%` · Humanize `10%`

**Overrides:** Motion → Back · Division → 1/4

<TurntablismPlayer diagramUrl="/assets/turntablism/scratch_crab/6-1-4-back/diagram.svg" diagramAlt="TTM diagram for 4-Finger Crab preview 1/4 Back: blue audible record motion, dark gray muted record motion, light gray intentional holds, white fader clicks, open hold markers, and timing guides." ahhUrl="/assets/turntablism/scratch_crab/6-1-4-back/ahh.wav" freshUrl="/assets/turntablism/scratch_crab/6-1-4-back/fresh.wav" ahhLabel="ahh.wav playable example for 4-Finger Crab preview 1/4 Back" freshLabel="fresh.wav playable example for 4-Finger Crab preview 1/4 Back" plotBounds={{ left: 0.066667, right: 0.966667 }} diagramDurationSeconds={0.6666666666666666} techniqueDurationSeconds={2.6666666666666665} />

### 7 — 1/8 Forward

**Effective controls:** Pattern `4-Finger Crab` · Motion `Forward` · Division `1/8` · Rate `8th` · Gate `Straight` · Swing `0%` · Humanize `10%`

**Overrides:** Division → 1/8

<TurntablismPlayer diagramUrl="/assets/turntablism/scratch_crab/7-1-8-forward/diagram.svg" diagramAlt="TTM diagram for 4-Finger Crab preview 1/8 Forward: blue audible record motion, dark gray muted record motion, light gray intentional holds, white fader clicks, open hold markers, and timing guides." ahhUrl="/assets/turntablism/scratch_crab/7-1-8-forward/ahh.wav" freshUrl="/assets/turntablism/scratch_crab/7-1-8-forward/fresh.wav" ahhLabel="ahh.wav playable example for 4-Finger Crab preview 1/8 Forward" freshLabel="fresh.wav playable example for 4-Finger Crab preview 1/8 Forward" plotBounds={{ left: 0.066667, right: 0.966667 }} diagramDurationSeconds={0.3333333333333333} techniqueDurationSeconds={2.6666666666666665} />

### 8 — 1/8 Orbit

**Effective controls:** Pattern `4-Finger Crab` · Motion `Orbit` · Division `1/8` · Rate `8th` · Gate `Straight` · Swing `0%` · Humanize `10%`

**Overrides:** Motion → Orbit · Division → 1/8

<TurntablismPlayer diagramUrl="/assets/turntablism/scratch_crab/8-1-8-orbit/diagram.svg" diagramAlt="TTM diagram for 4-Finger Crab preview 1/8 Orbit: blue audible record motion, dark gray muted record motion, light gray intentional holds, white fader clicks, open hold markers, and timing guides." ahhUrl="/assets/turntablism/scratch_crab/8-1-8-orbit/ahh.wav" freshUrl="/assets/turntablism/scratch_crab/8-1-8-orbit/fresh.wav" ahhLabel="ahh.wav playable example for 4-Finger Crab preview 1/8 Orbit" freshLabel="fresh.wav playable example for 4-Finger Crab preview 1/8 Orbit" plotBounds={{ left: 0.066667, right: 0.966667 }} diagramDurationSeconds={0.3333333333333333} techniqueDurationSeconds={2.6666666666666665} />

### 9 — 1/8 Back

**Effective controls:** Pattern `4-Finger Crab` · Motion `Back` · Division `1/8` · Rate `8th` · Gate `Straight` · Swing `0%` · Humanize `10%`

**Overrides:** Motion → Back · Division → 1/8

<TurntablismPlayer diagramUrl="/assets/turntablism/scratch_crab/9-1-8-back/diagram.svg" diagramAlt="TTM diagram for 4-Finger Crab preview 1/8 Back: blue audible record motion, dark gray muted record motion, light gray intentional holds, white fader clicks, open hold markers, and timing guides." ahhUrl="/assets/turntablism/scratch_crab/9-1-8-back/ahh.wav" freshUrl="/assets/turntablism/scratch_crab/9-1-8-back/fresh.wav" ahhLabel="ahh.wav playable example for 4-Finger Crab preview 1/8 Back" freshLabel="fresh.wav playable example for 4-Finger Crab preview 1/8 Back" plotBounds={{ left: 0.066667, right: 0.966667 }} diagramDurationSeconds={0.3333333333333333} techniqueDurationSeconds={2.6666666666666665} />