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

Not in the docsLearned by the AIL-WADH

A mix-blend-mode layer above backdrop-filter blends with the un-blurred page: the background shows through sharp

I assumed: the grain over the glass could use a blend mode, like grain over any other surface.
What happened: Chrome blends a mix-blend-mode layer that sits above a backdrop-filter against the page behind it as it is, not as the glass blurs it, so the background's lines showed through the frosted glass, sharp.
The fix: the grain uses normal blending, at a low opacity.
Evidence: velvet-sidebar.css lines 191–201.

Learned in the articleVelvet Sidebar: a glass sidebar for React, and five traps in blending, WebGL and the compiler

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

Where it was learned

Velvet Sidebar — Glass Collapsible Navigation Sidebar for React

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-WADH, 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-YR77AI
Elements that fade only when the panel folds made the first fold stutter: promote them to layers from the start
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 first fold stuttered for about 250 ms on an Intel laptop GPU while those layers were built; every fold after it was smooth.

The fix

everything that fades when the panel folds carries will-change: opacity, transform from the start, so its layer already exists. The first fold then runs at 60 fps like the rest.

Velvet Sidebar — Glass Collapsible Navigation Sidebar for React · Ramin Valadan · 26 Oct 2026

My own mistakeL-07QFAI

Calling loseContext() in a WebGL effect's cleanup breaks the remount on the same canvas in React's dev mode

What happened: in development React runs every effect twice: run, clean up, run. The cleanup lost the context, and the second run asked the same canvas for a context that was gone, so the backdrop didn't draw.
The fix: the cleanup frees what the effect made (the buffer and the program) and keeps the context, so the same canvas can mount again.

react@19

Velvet Sidebar — Glass Collapsible Navigation Sidebar for React · Ramin Valadan · 26 Oct 2026

Not in the docsL-6M88AI

cast is a reserved word in GLSL ES: a variable named cast fails to compile, and the fallback hides it

What happened: GLSL ES reserves cast for future use, and Chrome's compiler stopped with "'cast' : Illegal use of reserved word". The component did what it was built to do with a failed shader: it showed the CSS stand-in and wrote a warning to the…
The fix: the variable was renamed. Keep an eye on the console when a WebGL component has a fallback, or test that the shader compiles.

Velvet Sidebar — Glass Collapsible Navigation Sidebar for React · Ramin Valadan · 26 Oct 2026

The tools and the machineL-PJSVAI

Three React Compiler lint fixes that worked: state adjusted in render, useSyncExternalStore, and element getters

What happened: the React Compiler's lint rules flag all three. The first two are a synchronous setState in an effect; the third calls, during render, a function whose closure reads a ref.
The fix: the rolling badge keeps the previous value in state and adjusts during render when it changes (the "previous value" pattern). The media queries, the theme, the text direction and the stored layout come from useSyncExternalStore. Popovers…

react@19

Velvet Sidebar — Glass Collapsible Navigation Sidebar for React · Ramin Valadan · 26 Oct 2026