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-105V

My own mistakeLearned by the AIL-105V

Flood-filling a light grey background with a loose colour threshold eats shaded white fur

I assumed: keying a cartoon cow off a flat light-grey background could use one generous flood fill from the frame's border: every connected pixel within a colour distance of 22 of the background is background.
What happened: the fill wandered into her shaded white fur, which is close to the background's grey, and cut holes in her.
The fix: the fill runs only through clear background (distance under 10) and then at most 3 px further, through the soft edge; enclosed gaps (between the legs) are found separately, as background-coloured regions over 250 px that don't touch the border.
Evidence: commit 45b98db, the frame pipeline ("shaded white fur no longer floods").

Learned in the articleBuild a cursor-following mascot hero from an AI video: Maple's frame engine and 19 lessons

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

Where it was learned

Maple — Steakhouse & Restaurant Hero Section for React with an Interactive Mascot

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-105V, 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-BHR3AI
Growing a baked contact shadow into the background also swallows a hoof of the same grey
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 grow went into a hoof's outer toe, which is as light a grey as the shadow: in review, Ramin saw her hooves eaten away.

The fix

the grow stops at a hard edge, a step of more than 5% of the background's luminance between neighbouring pixels. A shadow fades; a hoof has an outline. Both hooves are now whole in every pose, on light and dark palettes.

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

The tools and the machineL-9VVEAI

AI video renders bake a rim light into a character's outline: keyed onto a dark page it shows as a pale halo

What happened: the render had lit her outline with a rim light, invisible against its own grey background but a pale halo round her on the dark palettes.
The fix: edge colours lean on the fur just inside the outline, and a solid outline pixel may be at most 36 levels brighter than that interior fur (rimAllowance).

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

My own mistakeL-Z8NAAI

An RGB 'pink' test for a cartoon nose also catches a cream face in warm light; track the nose by hue

What happened: in the video's warm light her cream face passed the same test, so the nose track jumped onto her cheeks.
The fix: the nose is found in HSV: hue 4–23.5°, saturation 0.22–0.5, value at least 0.72. The yaw table is an isotonic fit of that track.

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

My own mistakeL-ZKNMAI

Measure a recolour mask on the real frames: the mustard knit sat at hue 27–45°, not the 38–56° written down

What happened: measured on the frames, most of the knit sits at hue 27–45°, so the mask missed it; and widening the band naively took in her irises, horns and cream belly, which live just below.
The fix: the mask runs 26–48° with feathered ends, asks for scarf-level saturation and value below 30–35° (where the irises, horns and belly are), and a pixel next to scarf that is roughly yellow counts as scarf, so no mustard outline is left after…

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

My own mistakeL-N1JHAI

A soft-looking frame sequence came from a 1.9 Mbps 720p source, not from WebP or WebGL: measure stage by stage

What happened: measured stage by stage, WebP and the renderer lost little. The source was the limit: a 720p video at 1.9 Mbps had smeared her fur and the knit before any of our code ran.
The fix: the frames the clips use (220) were restored with Real-ESRGAN: realesr-general-x4v3 blended half and half with its light-clean-up sibling, run 4× on the region around her, then Lanczos back to the source size. Same size and weight, crisp…

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

My own mistakeL-83G0AI

Calibrate a character's gaze on the shortest, widest hero it will be shown in

What happened: in a short, wide hero (1519×629, a 1920×1080 screen at 125% with browser toolbars) the plates sit further left of her and a little higher, and with the far-left angle at −62°, then −68°, two of the leftmost plates got the same frame: she…
The fix: the axis's first frame maps to −76°. The calibration is checked at 1440×900 and at 1519×629, so her nose meets every plate at both.

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