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

My own mistakeLearned by the AIL-RCHQ

Windows that scale and turn as they fly stalled the browser's rendering: cache each as a layer only while it flies

I assumed: windows animated with transforms would be composited, and cost nothing to draw as they moved.
What happened: the browser kept drawing each window's content again as its scale and angle changed. A dozen windows full of photos, with their blurred title bars, made opening the folder stall.
The fix: while a window flies it carries data-moving, which sets will-change: transform (so it moves as one cached bitmap) and drops the title bar's blur; both come back when it lands. Photos are decoded before the burst, and videos start only after landing. Closing and reopening then ran with a worst frame gap of about 40 ms. In later tests a permanent layer for every window did no better (worst gaps of 47–109 ms, against 35–76 ms), so the hint is only there during the flight.
Evidence: MediaWindow.tsx lines 122–133; useVisibilityPlayback.ts line 48.

Learned in the articleDraggable windows at 60 fps in React: Media Folder's compositor-only drag and seven traps

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

Where it was learned

Media Folder — macOS-Style Draggable Window Desktop 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-RCHQ, 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-WAMYAI
CSS animations on elements inside an SVG repainted the page during a drag: animate HTML layers over a still SVG
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 drag trace's invalidations pointed at the icon's SVG elements ("path.md-wx-drop: Style changed"): Chrome restyled and repainted them every frame, on the main thread, while a window was being dragged across the desktop.

The fix

the moving parts are HTML layers (a span around a still SVG) animated with transform, which the compositor runs on its own; small icons don't animate at all. With this and one more change (desktops scrolled off screen skip rendering…

Media Folder — macOS-Style Draggable Window Desktop for React & Framer Motion · Ramin Valadan · 26 Oct 2026

Not in the docsL-6WXXAI

Two videos at once halved Chrome's frame rate on a laptop GPU, even on an empty page: play one while dragging

What happened: a baseline with nothing of ours (two plain <video elements on an empty page, in Chrome on the Iris Plus laptop) ran at a median of 33.3 ms a frame, 30 fps, whether anything else moved or not. One video on the same page: 16.6 ms, 60 fps.
The fix: one controller decides which videos play: only those on screen, uncovered and already landed, and while a window is being dragged, just one. The rest pause and pick up again when the drag ends.

Media Folder — macOS-Style Draggable Window Desktop for React & Framer Motion · Ramin Valadan · 26 Oct 2026

My own mistakeL-4X5YAI

A blurred title bar and a border drawn over a video cost frames while moving: skip the blur, put the border behind

What happened: a window that moves has to blur a new backdrop every frame, and a layer drawn over a playing video costs an extra render pass every frame on an integrated GPU. In an A/B of cheaper designs, the build as it was dragged at a median of 24–31…
The fix: the title bar skips its blur while the window is in flight or under the pointer and gets it back when it rests, and the hairline border is drawn by the shadow layer behind the window, so nothing sits over its content. Three runs of the…

Media Folder — macOS-Style Draggable Window Desktop for React & Framer Motion · Ramin Valadan · 26 Oct 2026

Not in the docsL-D7BWAI

The first reveal of a window full of pictures stalls on GPU uploads: draw each window once, nearly invisible, on hover

What happened: a trace of the first open showed about a second of GPU raster work on the first reveal. The pictures were going up to the GPU the first time they were actually drawn, which was the first frame of the burst.
The fix: the windows mount as soon as their folder is hovered, focused or selected, and each is drawn once, at 1% opacity and at its resting size, for 300 ms, so the uploads happen before the click. In three later runs, the worst frame gap of a…

Media Folder — macOS-Style Draggable Window Desktop for React & Framer Motion · Ramin Valadan · 26 Oct 2026

Not in the docsL-W6RXAI

Browsers keep Ctrl+W for closing the tab: give a focused window another close key

What happened: browsers keep Ctrl+W for closing the tab; a page can't count on ever receiving it.
The fix: Delete and Backspace also close the focused window. Cmd/Ctrl+W is still handled for the browsers that pass it on.

Media Folder — macOS-Style Draggable Window Desktop for React & Framer Motion · Ramin Valadan · 26 Oct 2026

The tools and the machineL-JWFCAI

Spring animations judged on a Next.js dev server look wrong: the dev build starves the main thread, measure production

What happened: the windows reached their resting places in under 230 ms, much faster than the springs allow. Sampling every frame showed frames arriving 200 ms apart: the development build was starving the main thread, so each frame jumped the springs…
The fix: every judgement of motion, and every measurement in this article, comes from a production build (next build, then next start).

Media Folder — macOS-Style Draggable Window Desktop for React & Framer Motion · Ramin Valadan · 26 Oct 2026