Valentine's Card

Repository

I created this interactive Valentine's Day card to push the boundaries of creative CSS and micro-interactions. The project features a custom-styled heart, a procedurally drawn arrow, and a synchronized animation sequence that reveals a hidden letter. It served as a practical exercise in managing complex animation states and leveraging modern CSS properties like clip-path and pseudo-elements for asset-free graphics.

Procedural Heart Styling

The heart is constructed entirely through CSS, avoiding external images for maximum performance and scalability. It uses the :before and :after pseudo-elements to create two overlapping circles atop a rotated square base. By applying a heavy box-shadow with a deep pink hue (#f20044), I achieved a soft glow effect that adds depth and a "lit from within" appearance to the UI.

1.heart {
2  height: var(--heart-size);
3  width: var(--heart-size);
4  background: #f20044;
5  position: relative;
6  transform: rotate(-45deg);
7  box-shadow: -10px 10px 90px #f20044;
8  z-index: 1;
9}
10
11.heart:before {
12  content: "";
13  position: absolute;
14  height: var(--heart-size);
15  width: var(--heart-size);
16  background: #f20044;
17  top: -60%;
18  border-radius: 50%;
19  box-shadow: -10px -10px 90px #f20044;
20}
21
22.heart:after {
23  content: "";
24  position: absolute;
25  height: var(--heart-size);
26  width: var(--heart-size);
27  background: #f20044;
28  right: -60%;
29  border-radius: 50%;
30  box-shadow: 10px 10px 90px #f20044;
31}

Synchronized Animation Sequence

The interaction is driven by a carefully timed sequence of CSS Keyframes. When the user clicks the heart, the arrow shoots from the edge of the screen, hitting the heart and triggering a scaling animation. I used animation-delay and forwards fill modes to ensure each stage of the reveal—from the arrow impact to the letter fading in—feels intentional and fluid.

1@keyframes shoot-arrow {
2  0% {
3    transform: translate(100vw, 60vh) rotate(var(--arrow-rotation));
4    opacity: 1;
5  }
6  100% {
7    transform: translate(-50%, -45%) rotate(var(--arrow-rotation));
8    opacity: 1;
9  }
10}
11
12@keyframes scale-heart {
13  0% {
14    transform: rotate(-45deg) scale(1);
15  }
16  100% {
17    transform: rotate(-45deg) scale(var(--heart-scale));
18  }
19}
20
21.animate-arrow {
22  animation: shoot-arrow 1s ease-out forwards;
23}
24
25.scale-heart {
26  animation: scale-heart 1s ease-in-out forwards;
27  animation-delay: 1s;
28}

Interactive Logic

The JavaScript layer acts as the orchestrator for the visual timeline. It listens for the initial user interaction and applies CSS classes to trigger the animations in a specific order. To prevent the sequence from being interrupted or replayed incorrectly, the event listener is automatically removed after the first trigger, ensuring a polished, one-time "reveal" experience.

1heart.addEventListener(
2  "click",
3  function () {
4    // 0s: Trigger arrow flight
5    arrow.classList.add("animate-arrow");
6
7    // 1s: Heart expands on impact
8    setTimeout(() => {
9      heart.classList.add("scale-heart");
10    }, 1000);
11
12    // 2s+: Reveal hidden letter and text content
13    setTimeout(() => {
14      paper.style.opacity = "1";
15      setTimeout(() => {
16        letterText.style.opacity = "1";
17      }, 1000);
18    }, 2000);
19  },
20  { once: true },
21);

Creative Design Choices

To enhance the emotional impact, I selected the Pacifico cursive font from Google Fonts, which complements the hand-drawn aesthetic of the clip-path arrow. The background uses a soft pink (#ff94bf) to maintain high contrast with the vibrant heart, while the responsive layout ensures the animations look consistent across mobile and desktop viewports. This project taught me the value of "motion as storytelling" in UI design.

Live Demo

You can experience the surprise yourself by clicking the button below. Once redirected, interact with the heart to trigger the reveal sequence.