Madeline-design/shredder-theater

Shredder Theater

Turn "deleting files" into a beautiful performance: drag them in → shred them → one closing line to wrap it up.

Output is always a single HTML file: double-click to view, works offline, and doesn't break on mobile.

Inputs to collect

Before calling, confirm these 4 items. Use defaults if not provided, and don't keep asking to gather info:

Item	Default	Description
Closing line	Pick one from references/message-templates.md by scene	The only non-optional item
Mood color scheme	Pick one set from references/visual-language.md	Follow if the user gives a style
Interaction mode	Supports file drag-in + a "Demo Delete" button	The button is a fallback demo path
Layout size	Responsive single page, mobile portrait first	Use clamp() + dvh

• The closing line is the emotional landing point of the entire page. It must be a specific sentence. Don't write system prompts like "Deleted" or "Operation successful."
• If the user mentions a recipient ("made for my mom" / "send to my ex"), use that reference as the address, don't default to "Master."
• If the user doesn't specify a line and just says "whatever," pick the shortest one by scene, don't write a long paragraph.

Procedure

1. First decide the line, then decide the visuals The line determines the emotional tone; the visuals follow. Doing it the other way produces a page that "looks good but has no feeling." Pick a line from references/message-templates.md and a color scheme from references/visual-language.md. Also note in references/visual-language.md why they match, because the closing line and background brightness must complement each other.

2. Build a five-layer structure (single-file HTML, CSS and JS inline, no external resources)

   • Stage layer: Background. Use vignette + noise for dark tones, soft gradients for light tones, avoid large flat areas of pure color.
   • Shredder layer: Draw the machine body (panel, indicator lights, feed slot, rollers) with CSS. No image assets, no emoji as main visual.
   • Tray layer: List of files to process. When real files are dragged in, only display file.name. Don't read file contents. For image files, use URL.createObjectURL() to show a thumbnail — "watching that image get shredded" is the emotional high point; after shredding, remember to revokeObjectURL() to free memory, thumbnail never leaves the machine.
   • Effect layer: Paper confetti particles. After paper is sucked into the feed slot, spray out shredded strips from the bottom edge of the slot, each with independent random speed/rotation/landing delay.
   • Line layer: The closing line, appearing last.

3. Sound synthesis via Web Audio API, no bundled audio files

   • Mechanical hum: ~70Hz sawtooth + low-pass filter, white noise for tearing background
   • Shredding sound: Band-pass white noise short pulse, one per shredded strip, random 30–60ms interval
   • Closing: A sine ding (880→1320Hz exponential decay)
   • Browser autoplay policy blocks first playback; must unlock audio on first click. Include a "Click to start" prompt on the page.

4. Use transform / opacity for animations, don't touch layout properties

   • Paper sucked in: scaleY compression + translateY toward feed slot + slight rotate, ~300ms.
   • Machine vibration: High-frequency small translateX shake with steps() for mechanical impact.
   • Line appears: fade + scale(0.96 → 1) + letter spacing tightening, ~600ms ease-out.
   • Shredded strips: translateY fall + rotate flip + opacity decay, pile up on landing.

5. Self-check before delivery (this step is not optional) Open the generated file in a browser, verify each point:

   • Clicking actually produces sound (not muted)
   • Paper really gets sucked in, shredded strips really fall
   • The closing line appears only after shredding is complete
   • On a 375px wide mobile viewport, no horizontal scroll, no line overflow for Chinese titles, no broken word wraps
   • In light theme, machine body stands out from the background (the machine should "sit" on the background, not float in it)
   • Browser console shows no errors, no unhandled Promise rejections (Uncaught (in promise) would silently kill the whole performance) If any check fails, fix and re-deliver; don't give the user a half-finished product.

   When orchestrating the performance flow with async function, wrap the call in try/catch: on error, at least show the closing line and a hint, don't leave the page in a "nothing happened" state.

6. Delivery Provide the absolute path to the HTML file, and one sentence on how to use it (drag files in / click demo button) and what the closing line is. If you also took a screenshot, attach it.

Output contract

• One .html file, self-contained: no external CSS/JS/fonts/images dependencies, works offline
• Closing line and color scheme written at the top of the file for easy modification
• Supports at least two paths: drag real files in, or click the demo button
• No README, config files, or build scripts

Failure handling

• User wants to actually delete files: This skill only does performance, doesn't touch the disk. Say directly "The page is a simulation; the files are still there." Don't execute the deletion.
• Browser does not respond: Autoplay policy. The user must click the page first; the page includes a "Click to start" prompt as a fallback.
• Performance stalls mid-way, nothing happens: Likely an unhandled Promise rejection in the async performance function. Add try/catch at the entry point; on error, show the closing line and a hint, don't leave the page hanging.
• Long file names break layout: Use text-overflow: ellipsis to truncate, put the full name in the title attribute.
• Mobile overflow: dvh is more accurate than vh on mobile browsers; use clamp() for long text font sizes.
• Text on dark background is hard to read: Keep contrast ratio at least 4.5:1 between body text and background, dark background with creamy white text, light background with ink-black text.

Examples

Input: "Create a shredder page that shows 'Master, processed completely' after deletion"

Output: Single-file HTML. Dark warm yellow lamp color scheme, CSS-drawn shredder centered at top, file tray in the middle (supports dragging real files), demo button at bottom. On click, paper gets sucked into the feed slot, machine shakes, Web Audio synthesizes shredding noise, shredded strips fall and pile up, 600ms later "Master, processed completely" fades in with a chime.

Input: "I want a ruthless one, shred all files from my ex"

Output: Same structure, but color scheme changed to cold gray industrial style, closing line replaced with a sarcastic short sentence (e.g., "Permanently destroyed, no reconciliations accepted"), shredding sound heavier, vibration amplitude larger.

Windows (win32) platform notes

• Open file: start "" "<path>\file.html" (macOS/Linux: open "<path>/file.html")
• Use backslash-safe paths for generated files, or use path.join in Python/Node; don't hardcode /tmp/ in the SKILL.md body
• macOS/Linux drag-and-drop works with DataTransfer, same for Windows browsers; if a browser disables drag-and-drop, fall back to the demo button as the only path, don't error out