Flashlight

Darkens its area except for a pool of light at the pointer, wider over anything clickable.

npx shadcn@latest add https://hoverui.fun/r/flashlight.json

Adds components/cursors/flashlight.tsx. The CLI also installs the useCursor hook it runs on, once, into your hooks folder. The files are yours from there.

Move through the preview, then hover the controls and press.Open this on a computer to move it around: it follows a mouse, not a finger.

All cursors

Kind: Halloween
Hook: useCursor
Dependencies: None
License: MIT

Usage

Any element

import { FlashlightCursor } from "@/components/cursors/flashlight";

export function Section() {
  return (
    <section>
      <FlashlightCursor />
      {/* this section now wears Flashlight */}
    </section>
  );
}

Put it inside <body> in your root layout to wear it on every page. Nested cursors take over inside their own element.

Props

className: Extra classes for the cursor's root. It draws in its own colors, set in the file; any outline or pointer dot it has follows currentColor, e.g. text-pink-500. Leave mix-blend-difference off: it would turn those colors to negatives.
Hover targets: a, button, input, select, textarea, label, [role=button], [data-cursor-label]

Source

flashlight.tsx

"use client";

import { useRef } from "react";
import { cursorRoot, useCursor } from "@/hooks/use-cursor";

/** Darkens its area except for a pool of light at the pointer, which widens over anything clickable. */
export function FlashlightCursor({ className = "" }: { className?: string }) {
  const s = useRef({ r: 110, t: 0 });
  const ref = useCursor((p, el) => {
    const st = s.current;
    st.t += p.dt;
    st.r += ((p.hover ? 150 : 110) - st.r) * p.ease(8);
    // A slow, uneven breath in the beam; still under reduced motion.
    const r = p.reduced ? st.r : st.r * (1 + Math.sin(st.t * 13) * 0.01 + Math.sin(st.t * 7.3) * 0.015);
    // The dark covers only the visible part of the area.
    const a = el.parentElement!.getBoundingClientRect();
    const left = Math.max(a.left, 0);
    const top = Math.max(a.top, 0);
    const dark = el.firstElementChild as HTMLElement;
    Object.assign(dark.style, {
      left: `${left}px`,
      top: `${top}px`,
      width: `${Math.min(a.right, innerWidth) - left}px`,
      height: `${Math.min(a.bottom, innerHeight) - top}px`,
      // A faint warm light in the pool, so the beam still reads on a page that is already dark.
      background: `radial-gradient(circle ${r}px at ${p.x - left}px ${p.y - top}px, rgb(255 236 200 / 0.14), transparent 55%, rgb(8 8 12 / 0.9) 100%)`,
    });
  });

  return (
    <div ref={ref} aria-hidden className={`${cursorRoot} ${className}`}>
      <div className="absolute" />
    </div>
  );
}

It runs on the useCursor hook, which has its own source and API.

More halloween cursors

All halloween cursors Or build your own in the Mixer

Made a cursor of your own? Contributed cursors carry their maker's name on their page.

Contribute a cursor