amir4rab/expandable-card — reverse-engineered prompt

Reverse engineered prompt

GitHub

Build me a small web demo of an expandable card like the Apple App Store card animation. I want one centered card on a dark page with an image, subtitle, and title. When I click it, it should smoothly grow into a full screen card from the exact same position, keeping the image and header lined up so the transition feels natural. The expanded view should show a close button and some text content underneath.

Please keep it simple with plain HTML, CSS, and JavaScript, no extra animation libraries. Use CSS transitions, scaling, masking, and the card position from the browser so it opens and closes smoothly. Make it responsive so it works on mobile and desktop. When I close it, it should shrink back into the original card and reveal the small card again. Keep the code clean and easy to understand, since this is more of a learning demo than a production app.

Want more depth? Deep Reverse