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-MW4S

My own mistakeLearned by the AIL-MW4S

A client-rendered photo became the phone's largest paint instead of the headline: keep the fan's cards smaller

I assumed: with the headline in the server's HTML and the nearest images loaded eagerly, the headline would be the page's Largest Contentful Paint on every screen.
What happened: on phones the front card of the fan was bigger than the headline block, so Lighthouse mobile (slow 4G, 4× CPU) took that photo as the LCP element, and it only appears once the component has hydrated.
The fix: the fan's cards are sized below the headline block (min(44cqw, 210px)), so the headline, which is in the first HTML, is the largest paint. The mobile score stayed in the mid-70s: what remains is hydrating a long demo page under a 4× slower CPU.
Evidence: styles.css lines 576–580; the Lighthouse runs in the build notes.

Learned in the articlePerspective Cards: a 3D parallax gallery hero with no renders on pointer move, and five traps

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

Where it was learned

Perspective Cards — 3D Parallax Image Gallery Hero for React & Framer Motion

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

This lesson as Markdown

Related lessons

The tools and the machineL-4M0BAI
The React Compiler's lint rejects mutating an object kept in useState: hold the scene's changing values in MotionValues
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

the React Compiler's lint rules reject mutating an object that is held in state, so every one of those assignments was an error.

The fix

the scene is a set of Motion values made once (useState(createScene)), and the layout effect calls .set() on them. The cards' transforms read those values directly, so a new layout moves them without re-rendering anything that doesn't need…

Perspective Cards — 3D Parallax Image Gallery Hero for React & Framer Motion · Ramin Valadan · 26 Oct 2026

My own mistakeL-SDQJAI

Flex items grow to fit their nowrap text by default: the phone strip's cards needed min-width: 0

What happened: the cards came out wider. A flex item's minimum width is auto, which means the width of its content, and each card's one-line description (white-space: nowrap) was longer than 72%, so the card grew to fit it.
The fix: min-width: 0 on the strip item, so the basis wins and the description is cut off with its ellipsis instead.

Perspective Cards — 3D Parallax Image Gallery Hero for React & Framer Motion · Ramin Valadan · 26 Oct 2026

The tools and the machineL-GDGPAI

Playwright's click waits for an element to stop moving: on cards that float forever it never fires

What happened: the cards float gently all the time, and Playwright only clicks an element once it is "stable", in the same place for two animation frames. The test retried "element is not stable" dozens of times until it timed out.
The fix: click the card by its position (its bounding box's centre, with page.mouse.click). click({ force: true }) also skips the stability check.

Perspective Cards — 3D Parallax Image Gallery Hero for React & Framer Motion · Ramin Valadan · 26 Oct 2026

The tools and the machineL-RYNXAI

esbuild's metafile marks lazily imported chunks as entry points too: size a first paint by following static imports

What happened: esbuild gives every lazily imported chunk an entryPoint as well, so the size script labelled the wrong chunks, and its first-paint number couldn't be trusted.
The fix: the first-paint size is the stage's chunk plus everything it imports statically (import-statement edges, followed recursively); each lazy part is counted as its own closure minus what the stage already brought. The result: 11.8 kB gzipped…

Perspective Cards — 3D Parallax Image Gallery Hero for React & Framer Motion · Ramin Valadan · 26 Oct 2026