CardScape - Animated card backgrounds you can export as plain JS

by•
CardScape makes subtle animated backgrounds for product cards. Pick one of 12 templates, tweak colors and motion, keep your text readable with built-in blur, then export a self-contained JS snippet, a PNG or a looping video. Free, no sign-up.

Add a comment

Replies

Best
Maker
📌
Hey Product Hunt 👋 I'm Jony, and I made CardScape because I kept running into the same small problem: I wanted product cards (pricing plans, feature highlights, dashboards) to feel a little alive, but every option was either a static image, a heavy animation library, or a video file that looked blurry on retina screens. So I built a tool that does just one thing well: subtle animated backgrounds that stay out of the way of your content. What you can do 🎨 12 templates: glass mosaic, aurora, ASCII, neural network, topography contours, silk ribbons, flow fields, a planet horizon and more 🧭 Content-aware: the decoration stays in a corner or along an edge, and your text area gets a soft progressive blur so it's always readable 🎲 Randomize + theme palettes: pick one brand color and get a harmonious palette, or hit Randomize (or press R) until something clicks 📦 Export anywhere: a self-contained vanilla JS snippet (no libraries, pauses when off-screen, respects reduced motion), PNG/JPG/WebP up to 3×, or a seamlessly looping WebM video 🔗 Share a setup with an 8-character short link or code, and anyone can open the exact same background 🧩 Bring your own: import a custom template file if you want to write your own pattern It's free, runs entirely in the browser, and needs no sign-up. I'd love to hear: • Which template would you actually put in a product? • What kind of background should I add next? Thanks for checking it out! 🙏