A Private Keepsake

A deeply personal, interactive digital postcard built with HTML, CSS, and Vanilla JavaScript. Designed with a focus on elegant typography, micro-interactions, and a seamless user experience.

Overview

This project serves as a digital letter and keepsake. It features a modern, responsive layout that prioritizes readability and emotional impact through careful pacing, scroll-triggered animations, and integrated audio.

Key Features

• Interactive 3D Postcard: Utilizes CSS transform-style: preserve-3d and JavaScript toggles to create a realistic, clickable front-to-back flip animation.
• Immersive Read Mode: A mobile-friendly lightbox implementation that safely locks the background overflow to prevent layout shifts and scroll bleeding on desktop.
• Smart Audio Integration: Circumvents strict modern browser autoplay policies. Background music is primed and triggered seamlessly upon the user's first organic interaction (scroll, touch, or click) with the document.
• Forced Local Downloads: Uses the HTML5 Canvas API to fetch and render image data as a Blob. This forces the browser to directly download the keepsake images to the user's device, bypassing the default security behavior of opening local files in a new tab.
• Performant Scroll Animations: Uses the IntersectionObserver API to trigger smooth, fade-in reveals for narrative blocks only when they enter the viewport.

File Structure

• index.html: The semantic structure and text content.
• style.css: Contains the design system, typography (Cinzel and Spectral), responsive media queries, and 3D transition states.
• script.js: Handles the audio logic, intersection observers, lightbox toggles, and Canvas-based download forcing.
• /Assets/: Directory for the postcard images (Letter Front.png, Letter Back.png), the audio file (song.mp3), and favicons.

Installation & Usage

1. Clone the repository to your local machine.
2. Ensure all media assets are correctly placed in the /Assets/ directory.
3. Important Note for Local Testing: Because this project uses the fetch API and HTML Canvas to force image downloads, running the index.html file directly from your hard drive (file:// protocol) may cause the download buttons to fail due to strict CORS security policies.
4. To test the full functionality locally, serve the directory using a local web server (e.g., the "Live Server" extension in VS Code, or running python -m http.server in your terminal).

Deployment

This is a static site containing no build steps or backend dependencies. It can be deployed instantly for free on platforms like:

• GitHub Pages
• Netlify
• Vercel

Author

Created by Chatura.