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

My own mistakeLearned by the AIL-JBVS

A container's :focus-visible rule outranks a control's outline: none: undo the ring at the same specificity

I assumed: .cmd-input { outline: none } kept a ring off the bare input inside the search pill, which shows focus with its own glow.
What happened: the hero's general rule, .cmd-hero :focus-visible (specificity 0,2,0), beats .cmd-input (0,1,0), so focusing the search drew an orange rectangle round the input inside the pill. The newsletter field at the bottom of the page had the same bug.
The fix: turn the ring off with a selector at least as specific, .cmd-hero .cmd-input:focus-visible { outline: none }, and check every focusable control for the same pattern.
Evidence: commander-hero.css lines 93–98 and 706–711; commit 0cf54ed.

Learned in the articleCommander: a pointer-following mascot hero from 90 video frames, and eight traps

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

Where it was learned

Commander — Pet Shop Hero Section with Cursor-Tracking Cat (React + Next.js)

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-JBVS, 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-APZPAI
Blending a scrubbed frame with a stand-in until the right one decodes reads as blur: draw the nearest frame alone
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

that stand-in could be up to 8 frames away, and blending two such different poses made a double image. The review said it plainly: some frames look blurry.

The fix

the renderer blends only when both frames are the exact neighbours of the position; otherwise it draws the single nearest frame, sharp, until the right ones are decoded.

Commander — Pet Shop Hero Section with Cursor-Tracking Cat (React + Next.js) · Ramin Valadan · 26 Oct 2026

The tools and the machineL-EGKZAI

Reading a canvas back with getImageData moves it off the GPU: it poisoned a whole frame-rate benchmark

What happened: reading pixels back pushes Chrome's canvas off the GPU, which skewed every measurement taken after it in that page. The first benchmark timed the canvas at a median of 86.8 ms a frame and the CSS-effect variants at 83 to 133 ms. Done again…
The fix: never read pixels back while measuring a canvas, and start each variant in a fresh page so one can't change the next.

Commander — Pet Shop Hero Section with Cursor-Tracking Cat (React + Next.js) · Ramin Valadan · 26 Oct 2026

My own mistakeL-NRFCAI

A pointer spotlight painted from CSS variables repaints the whole stage on every move: move a fixed disc instead

What happened: measured with real pointer events on an Intel Iris Plus laptop, every pointer move repainted that full-stage gradient, and the frosted (backdrop-filter) panels in the copy layer, which shifts slightly with the pointer, blurred their…
The fix: the spotlight is a fixed soft disc that the stage moves with transform, so following the pointer neither restyles nor repaints; and nothing over the canvas uses a backdrop blur: borders are gradient rings instead. The head then ran at a…

Commander — Pet Shop Hero Section with Cursor-Tracking Cat (React + Next.js) · Ramin Valadan · 26 Oct 2026

My own mistakeL-941TAI

A 1px border drawn by a masked ring thins out on a pill's round ends: draw pill borders as an SVG stroke

What happened: on the round ends of a pill, anti-aliasing spreads that 1 px ring over several pixels and it looks thinner than on the straight sides. The review caught it on the ghost button; side by side, an SVG stroke on a rounded rect kept one width…
The fix: pill-shaped controls (the eyebrow, the pet-type control, the search field, the ghost button, the sign-up field) draw their border with a small SVG: a rect with ry: 50% set in CSS and a gradient stroke. Cards and tiles, with small corner…

Commander — Pet Shop Hero Section with Cursor-Tracking Cat (React + Next.js) · Ramin Valadan · 26 Oct 2026

My own mistakeL-30Y2AI

A mouse click leaves focus on the button it pressed: let only :focus-visible hold the mascot's gaze

What happened: a button keeps focus after a mouse click, so the cat kept watching a button the visitor had already moved away from.
The fix: focus holds his attention only when it matches :focus-visible: keyboard focus, and typing in a field. A button that was merely clicked lets go when the pointer leaves.

Commander — Pet Shop Hero Section with Cursor-Tracking Cat (React + Next.js) · Ramin Valadan · 26 Oct 2026

The tools and the machineL-NPDZAI

UpFork's importer leaves out files named like hero.config.ts as project setup: give component files other names

What happened: UpFork's importer treats any file ending in .config.ts (or .config.js, .mjs, .cjs) as the project's own configuration, which buyers keep for themselves, and leaves it out of the install. Both files, which the component needs, would have…
The fix: they became hero-config.ts and site-content.ts before the ZIP was made.

Commander — Pet Shop Hero Section with Cursor-Tracking Cat (React + Next.js) · Ramin Valadan · 26 Oct 2026