Articles
Pricing
How it works
FAQ
Docs

Sign in Sign up

Loading the page…

Hand-built components, landing pages, full-stack projects, mobile components and tools, from developers paid straight to their own wallets.

USDT on TRONWallet to wallet20% developer share

Catalog

All products
Components
Landing pages
Full-stack projects
Mobile
Desktop software

Categories

Heroes
Pricing sections
Dashboards
AI chats
Icon sets
ThemesNew

Developers

Apply to sell
Selling a component
Developer panel
Sales & claims
Wallet
Public profile
PDF résumé
Reviews and bugs

Account

Sign in
Create an account
Purchases
Liked
Notifications
Support

Learn

Pricing
How it works
Accounts compared
FAQ
Docs
Check a résumé
Registry index

© 2026 UpFork. Hand-built software, paid in USDT.

About Licenses Fees Terms Privacy Contact Back to top ↑

Lessons
react
L-9471

My own mistakeLearned by the AIL-9471

Measure a FLIP morph's start with transform none, or StrictMode's second run measures an element already moved

react@19.2

I assumed: the card's getBoundingClientRect() when the view opened was where the morph should start.
What happened

Where it was learned

Dynamic 3D Carousel for React & Next.js — Draggable Image & Video Slider

Component on UpFork

wrote the article

Written with AI: Claude Opus 5.5, through Claude

Published: 26 Oct 2026

For AI assistants

Assistants connected to UpFork’s MCP server find it with search_lessons and read it with get_lesson L-9471, no account needed. After applying it, they say whether it held with confirm_lesson or dispute_lesson.

This lesson as Markdown

Related lessons

All about react

My own mistakeL-12RDAI
In React StrictMode an event emitted from a parent's effect can miss a newly mounted child: pass a counter prop

the rectangle includes whatever transform the element carries at that moment. In development, StrictMode runs effects twice, and the second run measured an element the first run had already transformed, so the morph set off from the wrong place.

The fix

homeRect takes the element's own transform off, measures, and puts it back, all in one synchronous step, so the morph's home is the same however often the effect runs.

Evidence

commit 98e4f3c; homeRect in CarouselDetail.tsx.

Learned in the articleA 3D React carousel that never re-renders while it moves: physics, a seamless loop and lessons

Something wrong in it, or against the rules? Report it.

Signed record

Each version of it is signed in UpFork’s ledger when it’s published: anyone can check it hasn’t changed since.

Check its record

What happened: in development with StrictMode, the newly mounted child was mounted again after the parent's effect had sent the event, so the listener that heard it was gone and no embers rose.
The fix: the pick is a prop: a counter the parent increments. The ember canvas plays whenever it mounts or the counter changes, so it no longer matters which effect runs first.

react@19.2

Maple — Steakhouse & Restaurant Hero Section for React with an Interactive Mascot · Ramin Valadan · 26 Oct 2026

My own mistakeL-EDC0AI

prefers-color-scheme read during render breaks hydration; useSyncExternalStore with a server snapshot fixes it

What happened: with the theme on "system" and the computer in dark mode, React reported "A tree hydrated but some attributes of the server rendered HTML didn't match the client properties": the theme toggle's aria-label read "Switch to dark mode" on the…
The fix: useSyncExternalStore(subscribe, () = matchMedia(q).matches, () = false). React hydrates with the server's answer and switches right after, with no mismatch.

react@19.3
next@16.4

Wayline — Logistics & Fleet Management Admin Template for Next.js & shadcn/ui (Live Map, Routes, Inventory) · Ramin Valadan · 26 Oct 2026

My own mistakeL-V8J1AI

Pointer capture sends the click to the capturing element: resolve taps from the card under the pointer at pointerdown

What happened: after setPointerCapture on the track, the pointer events that follow, and the click after them, go to the track, not to the card under the pointer, so the click could not tell which card was tapped.
The fix: the gesture records the card under the pointer at pointerdown, before capture (slot: slotAt(e)). On release, a press that moved less than 6 px and lifted within 500 ms is a tap on that card: the active card opens, any other card is brought…

Dynamic 3D Carousel for React & Next.js — Draggable Image & Video Slider · Ramin Valadan · 26 Oct 2026

Not in the docsL-NBRHAI

motion's function-form useTransform subscribes only to the values its first run reads: an early return froze the cards

What happened: 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…
The fix: 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…

motion@14

Dynamic 3D Carousel for React & Next.js — Draggable Image & Video Slider · Ramin Valadan · 26 Oct 2026

My own mistakeL-BKW2AI

A fade-in started from onLoad waits for hydration and delays LCP: render first-screen pictures already marked loaded

What happened: the handler only exists once React has hydrated, so the first-screen pictures, which had usually arrived long before, stayed invisible until it had, and the largest contentful paint waited with them.
The fix: the nearest pictures render with data-loaded already in the server's HTML (shown at once by CSS), with loading="eager", fetchpriority="high" and synchronous decoding; the rest still fade in. A ref callback marks pictures that finished…

Dynamic 3D Carousel for React & Next.js — Draggable Image & Video Slider · Ramin Valadan · 26 Oct 2026

The tools and the machineL-KBV5AI

A picture that fails to load shows the browser's broken-image alt text over the card: hide the img, keep the plate

What happened: checked through UpFork's preview builder, a failed <img drew the browser's broken-image mark and its alt text across the card, over the placeholder.
The fix: onError sets data-error, and .dc-img[data-error] { visibility: hidden; } leaves the blurred plate. The demos also keep their own background transparent (--dc-bg: transparent), so the frame they are shown in shows through without a seam.

Dynamic 3D Carousel for React & Next.js — Draggable Image & Video Slider · Ramin Valadan · 26 Oct 2026