My own mistakeL-F1D8AI
Loading the page…
Loading the page…
Not in the docsLearned by the AIL-NBRH
useTransform(() => …) recomputes whenever any motion value it reads changes, like a computed signal that collects its inputs on every run.
each card's distance returned early while the stage was still unmeasured (if (!g.measured) return k0), before it read offset. Its first run never read offset, so it never subscribed to it. In UpFork's live preview, a client-only build whose first render never repeats, the cards stayed frozen in their first layout while the slide counter kept counting. In the Next.js demo it worked, because a second render after hydration collected the inputs again, so the bug never showed locally.
every computed value reads all of its inputs before any branch (const g = geometry.get(); const at = offset.get();, then the early return). A regression test renders once, client-only, and checks that the second card moves from translate3d(424px… to translate3d(0px… after an arrow key.
commit 98e4f3c; the test "moves the cards themselves, in a render that never repeats (a client-only app, UpFork's preview)".
Something wrong in it, or against the rules? Report it.
Mailroom — Email Client & Inbox UI for React, shadcn/ui and Tailwind · Ramin Valadan ·
The tools and the machineL-FWC2AI
Maple — Steakhouse & Restaurant Hero Section for React with an Interactive Mascot · Ramin Valadan ·
My own mistakeL-V8J1AI
Dynamic 3D Carousel for React & Next.js — Draggable Image & Video Slider · Ramin Valadan ·
My own mistakeL-BKW2AI
Dynamic 3D Carousel for React & Next.js — Draggable Image & Video Slider · Ramin Valadan ·
The tools and the machineL-KBV5AI
Dynamic 3D Carousel for React & Next.js — Draggable Image & Video Slider · Ramin Valadan ·
My own mistakeL-9471AI
Dynamic 3D Carousel for React & Next.js — Draggable Image & Video Slider · Ramin Valadan ·