# Media Folder — macOS-Style Draggable Window Desktop for React & Framer Motion

> A macOS-style folder for React that bursts open into draggable windows: photos, videos, a working music player, weather and swatches with real traffic lights, focus, minimize and an expanded view. Framer Motion, light/dark themes, keyboard, touch and phone layouts.

- Kind: Component (Cards)
- Price: comes with the Pro plan
- License: UpFork Standard License. Use it in unlimited personal and commercial projects. Don't resell or redistribute it on its own.
- Developer: UpFork
- Tags: card, dialog, video, gallery, macos, desktop, draggable, window-manager, folder, framer-motion, react
- npm packages: motion
- Published: 2026-10-09
- Updated: 2026-10-09
- Page: https://upfork.dev/products/macos-folder-draggable-windows-react

## How to get it

Install it into a React + Tailwind project with the shadcn CLI:

```bash
npx shadcn@latest add @upfork/macos-folder-draggable-windows-react
```

It installs with the member's personal CLI token (UPFORK_TOKEN), made on their UpFork account page. It comes with UpFork's Pro plan and the plans after it.

## About

Media Folder turns a collection into a desktop. A folder icon sits on a calm wallpaper; hover it and its front panel hinges open while the folder tilts toward your cursor. Open it and everything inside — photos, videos, a music player, the weather, a colour palette, notes and links — bursts out as small macOS-style windows that land around it, nearest first, the peeking photos growing into their windows. Close the folder and they all fly back in.

## A real window manager, not a picture of one

- **Traffic lights that work.** Red flies a window back into its folder, yellow squashes it in like a genie (it peeks out of the folder until you bring it back), green grows it into an expanded view you can page through with ← and →.
- **Drag anything.** 1:1 with the pointer, a slight lift and tilt, a short glide on release; a window can hang off an edge but never loses its title bar. Shift locks an axis, arrow keys nudge, and **Tidy** springs everything back.
- **Focus and z-order.** Click to bring a window to front; one active window at a time; several folders share one stacking order. A badge on the folder lists every window as open, minimized or closed.
- **Never a mess.** A seeded placement engine packs the windows around the folder with no overlap at any screen size, and re-flows them when the window resizes.

## Content that actually works

Pictures with blurred placeholders; videos that play only while visible and uncovered (two at most); a music player with a spinning record, a scrubber and one-song-at-a-time; a weather card that counts up its temperature; swatches that copy their hex; sticky notes; link cards; or anything you render yourself.

## Every screen and every user

- **Tablets** get a tidy grid; **phones** a scrollable deck of cards that open as a full-screen sheet you swipe down.
- **Keyboard and screen readers:** real buttons, a roving tab order through windows, a modal expanded view with a focus trap, live announcements.
- **Reduced motion:** windows fade in place; nothing springs, tilts or spins.
- **Light, dark or auto**, recolourable folders (`color`), four icon glyphs, any wallpaper or a slow mesh.

## Fast by design

Dragging and hovering never re-render React and touch only transform and opacity; the drag is composite-only and holds 60 fps on an integrated-GPU laptop with twelve windows open. 16 kB gzipped on first load, with the windows and the expanded view loading as small chunks when needed. Our demo scores 98 for performance and 100 for accessibility, best practices and SEO in Lighthouse (desktop), with zero layout shift.

## What's included

- `MediaDesktop`, `MediaFolder` and `MediaWindow` in TypeScript, with their own stylesheet
- The pure engine (placement, window manager, audio controller) and hooks (`useWindowManager`, `useDraggableWindow`, `useSeededScatter`)
- Three demos: the full desktop (follows your theme), dark with the mesh wallpaper, and a single folder
- Demo media ready to swap: photos from Unsplash, clips from Pexels, two original rendered loops and a CC0 music track

## Stack and requirements

- React 18 or 19, TypeScript
- `motion` (Framer Motion) is the only dependency
- Works in the Next.js App Router and in Vite; Tailwind CSS is optional because the styles ship with the component
- Use `next/image` through the `renderImage` prop