Playful File Transfer Button
Turn an inset, perimeter-lit button into a local file experiment: encode in chunks, track real byte progress, cancel processing and download the complete parcel with its checksum. Three text samples make every state easy to explore.
Live demo
Interactive demoClick Wrap this file or choose your own file; download the JSON parcel when processing finishes.
Open preview in a new windowMake this effect yours
Includes Skill instructions, a Python generator, an HTML template, design notes, and an offline preview. Requires Python 3.10+ with no additional dependencies. Supports custom text and colors, keyboard controls, and reduced motion.
Download SKILL.md only- Download and unzip
Keep the
playful-transfer-button/folder. ItsSKILL.mdfile is the Skill entry point, and scripts/ contains the generator, templates/ the HTML template, and references/ the design notes. Open preview.html directly in your browser. - Give it to your AI coding assistant
Add the folder to your project and ask your assistant to read SKILL.md. If your tool supports Skills, follow its installation method.
- Describe the result you want
Generate a local file packaging button with pale-blue perimeter light, cancellation, real progress and a downloadable result.
