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

My own mistakeLearned by the AIL-WAMY

CSS animations on elements inside an SVG repainted the page during a drag: animate HTML layers over a still SVG

I assumed: animating parts of an SVG icon with CSS (the rays turning, the drops falling) cost no more than animating any other element.
What happened: 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, below), the same trace showed 1 layout and 31 paints instead of 66 and 208.
Evidence: WeatherContent.tsx lines 18–27; styles.css lines 1113–1115.

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

This lesson as Markdown

Related lessons

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

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

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

My own mistakeL-RCHQAI

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

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…

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