HTML animation
Basketball upload animation
The Note05 drop zone as a working HTML file: a mascot shoots your file through the hoop, it converts in the net and the other one catches it. Plus videos and stickers.
The prompt
Build a playful file-upload animation as ONE self-contained HTML file (inline CSS and JavaScript, no libraries, Google Fonts allowed). It's a basketball "drop court" drawn in a single 760x330 SVG and animated with requestAnimationFrame.
Scene
- Cream paper page (#fbfaf7) with a white drop-zone card: 3px dashed border (#d8d2c2), 32px radius, soft shadow.
- Inside the SVG: a floor line at y=300 with a faint dashed key arc; a backboard at the top center (180x120, rounded, dashed border) with an upload arrow icon and the text "Drop .md here"; a teal (#14b8a6) target square; a rim (ellipse arc, teal over a dark ink stroke #27272a) and a net made of zig-zag lines that tapers down.
- Two kawaii mascots, rounded-square bodies with 9px ink outlines, dot eyes with a white highlight, pink cheeks, little feet and pill-shaped arms that rotate at the shoulder. Left: the thrower (mint #b9e6c1 body, green #0f9f6e V-neck jersey). Right: the catcher (peach #f9cfa0 body, red #e5484d jersey). Both bob gently (scale y 1 +/- 2.2%, period ~1.5 s).
- The file: a white document with a folded corner, two text lines and a colored tag with the format (MD in green, PDF in red...).
States, driven by court.set(phase, progress)
- idle: the thrower holds the file up in its right hand.
- over (a file is dragged over): the thrower raises both arms with happy closed eyes; the backboard lights up mint.
- working: the thrower hops and shoots; the file flies on a quadratic Bezier arc to the rim in 0.7 s, spinning once, with a fading teal dotted trail. It drops into the net (swish: the net stretches and sways), a "+1" floats up, a ".md -> .pdf" chip pops out, and the file spins slowly in the net while progress runs. At 50% progress the tag switches to the output format. The catcher gets ready with arms out and an "oh" mouth.
- done: the file flies out of the net in an arc into the catcher's hands, the catcher hops with happy eyes and six colored four-point stars burst around it.
- error (missed shot): the file pops out of the net, clanks off the right side of the rim, then the left (the hoop shakes; red "clank!" words pop and fade), falls off, bounces twice on the floor ("bonk") and rolls to a stop, slightly tilted. The backboard turns red and reads "Missed!" then "Try another file". The thrower puts its hands on its head (worried brows, frown, a sweat drop running down), then scratches its head; the catcher shrugs and shakes its head.
- A fast upload must still show the whole shot before the result.
API and page
- Expose createDropCourt(svg, { from, to, dropLabel }) returning { set(phase, progress), setFormats(from, to, label), destroy() }.
- Wire a real drop zone: dragover -> over, drop or file picker -> a pretend 2-second upload -> done (empty files -> error). Add two buttons: "Play a successful upload" and "Play a failed upload".
- Put all colors, tag colors per format, star colors and miss words in one CONFIG object at the top.
- Respect prefers-reduced-motion: no motion, just the end pose of each state.
- Add ?demo=loop and ?demo=miss to play each sequence on a seamless loop (five idle bobs long) for screen recording.Tip: This is the exact animation in the drop zone on every Note05 converter, ported to one plain HTML file you can open and edit. Start with CONFIG at the top: change the mascots' colors, the tag color for each format, the accent and the miss words. To use it in your own uploader, call court.set("working", progress) while your upload runs, then court.set("done") or court.set("error"). The pack also has the animation as 16:9, 9:16 (TikTok/Reels) and square videos, GIFs, transparent mascot stickers and wallpapers, all rendered from this same file.
