Turn any Spotify album into a stunning, printable poster. Choose from 15 layout presets, fine-tune album art, tweak typography, and export at 300 DPI for real picture frames.
Live repo: github.com/Somchandra17/TrashFrame Live app: trash-frame.vercel.app
- Paste any Spotify album link. Tracks, durations, cover art, and URI load instantly via a client-credentials flow proxied through Next.js API routes.
- Classic - Clean album poster with big cover, tracklist, and QR code.
- Gallery - Drake "More Life" inspired cream/dark panel with palette swatches.
- Overlay - Frosted glassmorphism card over a blurred full-bleed cover.
- Editorial - Magazine-style with massive title, italic year, labeled metadata columns.
- Bold Block - Comic-book poster with colored panel, vertical genre strip, thick grid borders.
- Immersive - Full-bleed cover with outlined title and flowing track names over gradient.
- Retro - 80s synthwave with neon shadows, skewed titles, and duo-tone art.
- Cassette J-Card - Three-panel cassette insert with spine, front cover, and tracklist back.
- Comic Strip - Pop-art poster with speech bubbles, price tag, and halftone dots.
- Retro Playlist - Vintage polaroid with rotated quote and color swatches.
- Wave Overlay - Floating frosted glass text plate over full album art.
- 8-Bit Arcade - Pixel-driven arcade layout with scanlines and cabinet-inspired framing.
- Receipt - Stylized supermarket receipt with dashed dividers and dotted track rows.
- Minimal - Stripped-down, type-focused layout.
- Playlist - Polaroid-style layout with palette swatches.
- B&W / Color toggle for the cover art.
- Custom Frame Art - Fine-tune how the artwork fits your poster layout to match your physical frame:
- Zoom slider (0.5x-2.0x) - shrink to fit or crop into detail.
- Horizontal & Vertical Position - shift the crop focus point.
- Brightness & Contrast sliders - lighten, darken, or punch up the art.
- Independent Title Scale and Tracklist Scale sliders.
- Font color presets (Auto, White, Black, Cream, Gold) + custom color picker.
- Quote font selector (Dancing Script, Pacifico, Inter, Space Mono, Playfair Display, Caveat).
- Show/hide toggles for Timestamp and Artist metadata.
- Copy a built-in AI prompt, paste it (with a reference poster image) into ChatGPT, Claude, or Gemini, then upload the generated CSS to instantly restyle your poster.
- PNG and PDF at 300 DPI for print-ready output.
- Frame sizes: 4x6", 5x7", A5, A4, 30x40 cm.
- Blurred album bloom, dominant-color overlay & vignette (ColorThief).
- Optional ghost watermark layer.
- Solid or gradient background from album palette.
- QR Code or Spotify Scannable Code.
npm install
npm run devOpen http://localhost:3000.
- Create an app in the Spotify Developer Dashboard.
- Copy your Client ID and Client Secret.
- Copy
.env.exampleto.envin the project root:cp .env.example .env
- Add your Spotify credentials:
SPOTIFY_CLIENT_ID=your_client_id SPOTIFY_CLIENT_SECRET=your_client_secret
| Path | Role |
|---|---|
app/page.js |
Main flow, theme injection, palette/auto-colors, overrides |
app/components/Poster.jsx |
Layout switcher + background layers + QR/Spotify code |
app/components/Sidebar.jsx |
Accordion-style edit menu with 6 collapsible sections |
app/posterTheme.css |
Base --fp-* defaults + layout-specific rules for all 15 themes |
app/globals.css |
App shell styling + animated landing page |
app/lib/constants.js |
Preset themes, frame sizes, downloadable template, AI prompt |
app/lib/colors.js |
ColorThief palette + luminance-based auto colors |
app/lib/export.js |
PNG / PDF export at 300 DPI |
app/api/spotify/* |
Album data proxy route |
npm run build
npm startDeploy anywhere that supports Next.js 14 (e.g. Vercel). Ensure album cover host i.scdn.co remains allowed in next.config.mjs images.remotePatterns if you use next/image elsewhere.
- Next.js 14 (App Router)
- React
- Tailwind CSS (app UI only; poster is isolated CSS)
- ColorThief - palette extraction
- react-qr-code - QR code generation
- html-to-image - DOM to PNG
- jsPDF - PDF generation
MIT