Examples/Pointer Modes

Pointer Modes (Normal ↔ Fun)

Experimental

Drive the cursor like a go-kart inside a scoped provider. Fun mode is opt-in and activates only while your pointer is inside the section below. Use WASD or arrow keys to steer; bounce off the walls and the blocks inside the track.

Controls: WASD / Arrow keys to drive. Stay inside the track.Current mode: Normal

Fun Mode Track

Right-click here to choose mode. Pointer switches to go-kart only after selecting game mode.

Obstacle A

Obstacle B

Checkpoint

Banner

Card

Widget

Try weaving between the blocks—collisions bounce the kart.

How it works

1. Add FunModeBridge inside your PointerProvider (already done in this docs site).
2. Use the createGameModeAdapter from @ewjdev/anyclick-adapters to toggle fun mode via setConfig and provide track/obstacle resolvers.
3. Toggle it from UI (menu or hover) to turn the go-kart cursor on/off in the scoped area.

app/providers.tsx

'use client';

import { PointerProvider } from '@ewjdev/anyclick-pointer';
import { FunModeBridge } from '@ewjdev/anyclick-react';

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <PointerProvider>
      <FunModeBridge />
      {children}
    </PointerProvider>
  );
}

app/examples/modes/page.tsx

import { useEffect, useMemo, useRef, useState } from 'react';
import { AnyclickProvider } from '@ewjdev/anyclick-react';
import { createHttpAdapter } from '@ewjdev/anyclick-github';
import { createGameModeAdapter } from '@ewjdev/anyclick-adapters';
import { usePointer } from '@ewjdev/anyclick-pointer';

const adapter = createHttpAdapter({ endpoint: '/api/feedback' });

export default function ModesExample() {
  const { setConfig } = usePointer();
  const trackRef = useRef<HTMLDivElement | null>(null);
  const [funEnabled, setFunEnabled] = useState(false);

  const gameModeAdapter = useMemo(
    () =>
      createGameModeAdapter({
        trackElement: () => trackRef.current,
        obstacles: () =>
          Array.from(trackRef.current?.querySelectorAll('[data-obstacle]') ?? []).map(
            (el) => el.getBoundingClientRect(),
          ),
      }),
    [],
  );

  useEffect(() => {
    if (funEnabled) {
      gameModeAdapter.activate({ setConfig });
    } else {
      gameModeAdapter.deactivate?.({ setConfig });
    }
  }, [funEnabled, gameModeAdapter, setConfig]);

  return (
    <AnyclickProvider adapter={adapter} scoped>
      <div
        ref={trackRef}
        data-obstacle
        className="p-6 rounded-2xl border border-pink-500/30 bg-pink-500/5"
        onMouseEnter={() => setFunEnabled(true)}
        onMouseLeave={() => setFunEnabled(false)}
      >
        Drive me with WASD/arrow keys. The track is this scoped provider, and obstacles
        are any elements with data-obstacle.
      </div>
    </AnyclickProvider>
  );
}

Want to switch modes programmatically?

You can call setConfig({ mode: "fun" }) from usePointer() to toggle fun mode manually, or setmode="normal" to revert.

Explore Pointer Theming