Smash is a Next.js app that takes text, image, and audio inputs and generates randomized smash canvases. Each smash builds a new composite by slicing text into word chunks, cropping image regions, and sampling audio like a DJ-style mix. Outputs can be downloaded as an image or as a video when audio is present.
- Text, image, and audio inputs
- Randomized compositing per smash
- DJ-style audio sampling (grid chops, phrases, stutters)
- Audio preview for the latest smash
- Image download (PNG) or video download (WebM)
- Input manager with modal list, previews, and removal
- Keyboard shortcut: press
sto smash
Install dependencies and start the dev server:
npm install
npm run devOpen http://localhost:3000.
- Add text lines or use “Add random quote”.
- Upload images and/or audio files.
- Adjust Smash controls (layers, BPM, grid, etc.).
- Press Smash (or hit
s). - Preview audio if present, then download the image or video.
- Beat grid is derived from BPM and grid division (1/4, 1/8, 1/16).
- Each audio layer chooses between:
- Grid chops
- Longer phrases
- Optional stutter repeats
- Slight playback-rate variation and short fades are applied.
- Video export uses
MediaRecorderand may depend on browser support. WebM output is expected. - If video export returns an empty file, try Chrome or Edge first. If it persists, capture console logs and report.
app/page.tsx: main UI and smash logic
- Animated video exports (multi-frame smashes)
- Presets for different smash styles
- Output gallery/history
TBD