APPENDIX D

Peek

Fine pointers only; off under reduced motion. Never re-renders the page.

HANDLE: peek
LIVES IN: src/views/Home.jsx (usePeek)
USED ON: Home contents list
PROPS: A paper card with the chapter still that follows the pointer

EXAMPLE

LIVE

As it renders.

On the Home contents list this card follows the pointer, easing toward it and tilting with its own speed. Fine pointers only.

CODE

COPY AND PASTE

How it is called.

JSX

// Home.jsx: refs and per-frame style writes, no re-render
const peek = usePeek()

<ContactRow project={p} thumb={thumb}
  onMouseEnter={peek.enter(thumb)} onMouseMove={peek.move} onMouseLeave={peek.leave} />

{createPortal(
  <div ref={peek.el} className="peek" aria-hidden="true">
    <div className="peek-card"><img ref={peek.img} alt="" /></div>
  </div>,
  document.body
)}

RULES

What must stay true.

Fine pointers only; off under reduced motion. Never re-renders the page.

EXAMPLESPEEK

On the Home contents list this card follows the pointer, easing toward it and tilting with its own speed. Fine pointers only.

CODE

JSX

// Home.jsx: refs and per-frame style writes, no re-render
const peek = usePeek()

<ContactRow project={p} thumb={thumb}
  onMouseEnter={peek.enter(thumb)} onMouseMove={peek.move} onMouseLeave={peek.leave} />

{createPortal(
  <div ref={peek.el} className="peek" aria-hidden="true">
    <div className="peek-card"><img ref={peek.img} alt="" /></div>
  </div>,
  document.body
)}