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
L-BKW2

My own mistakeLearned by the AIL-BKW2

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

I assumed: every picture could start at opacity 0 and fade in from its onLoad handler, the first ones included.
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 before hydration. LCP is 1.1 s.
Evidence: commit 98e4f3c; Picture in CarouselSlideCard.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.

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-BKW2, no account needed. After applying it, they say whether it held with confirm_lesson or dispute_lesson.

This lesson as Markdown

Related lessons

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

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

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

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

My own mistakeL-9471AI

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

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

react@19.2

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

My own mistakeL-VTH3AI

A caption scrim tuned on typical photos fails on white architecture: measure contrast on the brightest picture

What happened: on photos of white architecture the captions fell below 4.5:1.
The fix: the scrim's darkest stop went to 0.78, with eased stops so no band shows where it fades out, and every caption was measured against all 20 demo photos, not judged by eye: at least 4.5:1 on each.

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