Love – Heart Animation “I Love You” Letter for Valentine

69 0 Animations codex Follow

Remix Open In Editor Fullscreen Discuss Publish Your Code

Love – Heart Animation “I Love You” Letter for Valentine

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }
body { background: radial-gradient(circle at 50% 40%, #4a0d24, #14020a 70%); font-family: "Georgia", serif; color: #fff; }
canvas { position: fixed; inset: 0; width: 100%; height: 100%; }
.card { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 6vh; gap: 14px; }
.env { position: relative; width: min(340px, 86vw); height: 210px; background: #f5c6d6; border-radius: 0 0 10px 10px; cursor: pointer; box-shadow: 0 20px 50px rgba(0,0,0,.5); transition: transform .6s; }
.env::before { content: ""; position: absolute; inset: 0; z-index: 3; background: linear-gradient(to top right, #f0b1c6 50%, transparent 50%) left / 50% 100% no-repeat, linear-gradient(to top left, #f0b1c6 50%, transparent 50%) right / 50% 100% no-repeat; border-radius: 0 0 10px 10px; pointer-events: none; }
.flap { position: absolute; top: 0; left: 0; right: 0; height: 120px; z-index: 4; transform-origin: top; transition: transform .6s, z-index 0s .3s; background: linear-gradient(to bottom, #e89ab4 0, #e89ab4 100%); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.env.open .flap { transform: rotateX(180deg); z-index: 1; }
.letter { position: absolute; left: 14px; right: 14px; bottom: 10px; height: 190px; z-index: 2; background: #fffaf2; color: #7a1335; border-radius: 8px; padding: 18px; text-align: center; transition: transform .8s .5s, height .8s .5s; overflow: hidden; }
.env.open .letter { transform: translateY(-260px); height: 330px; }
.letter h1 { font-size: 1.7rem; font-style: italic; margin-bottom: 10px; }
.letter p { line-height: 1.55; font-size: .98rem; }
.ask { margin-top: 18px; font-weight: bold; }
.btns { display: flex; gap: 12px; justify-content: center; margin-top: 10px; position: relative; min-height: 44px; }
.btns button { font: inherit; border: 0; border-radius: 99px; padding: 10px 22px; cursor: pointer; transition: transform .2s; }
#yes { background: #e11d48; color: #fff; } #no { background: #eee; color: #555; position: relative; }
.tap { opacity: .8; animation: bob 1.6s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-6px); } }

// Love heart animation: beating particle heart, falling hearts, love letter envelope & "Will you be my Valentine?"
// Personalize: add ?to=Sara to the URL
var to = new URLSearchParams(location.search).get('to');
if (to) document.getElementById('to').textContent = 'For ' + to + ' ❤️';
var cv = document.getElementById('c'), ctx = cv.getContext('2d'), W, H, t = 0, pts = [], fall = [], boom = [];
function resize() { var d = window.devicePixelRatio || 1; W = innerWidth; H = innerHeight; cv.width = W * d; cv.height = H * d; ctx.setTransform(d, 0, 0, d, 0, 0); build(); }
function heartXY(a) { return [16 * Math.pow(Math.sin(a), 3), -(13 * Math.cos(a) - 5 * Math.cos(2 * a) - 2 * Math.cos(3 * a) - Math.cos(4 * a))]; }
function build() {
  pts = [];
  for (var i = 0; i < 900; i++) {
    var a = Math.random() * Math.PI * 2, xy = heartXY(a), k = Math.random() < .7 ? 1 : Math.pow(Math.random(), .5);
    pts.push({ x: xy[0] * k, y: xy[1] * k, s: Math.random() * 1.8 + .6, p: Math.random() * 6 });
  }
}
addEventListener('resize', resize); resize();
function drawHeart(x, y, s, col) {
  ctx.fillStyle = col; ctx.beginPath(); ctx.moveTo(x, y + s * .3);
  ctx.bezierCurveTo(x, y, x - s / 2, y - s * .1, x - s / 2, y + s * .3); ctx.bezierCurveTo(x - s / 2, y + s * .6, x, y + s * .8, x, y + s);
  ctx.bezierCurveTo(x, y + s * .8, x + s / 2, y + s * .6, x + s / 2, y + s * .3); ctx.bezierCurveTo(x + s / 2, y - s * .1, x, y, x, y + s * .3); ctx.fill();
}
function loop() {
  t += 1 / 60;
  ctx.clearRect(0, 0, W, H);
  var beat = 1 + .08 * Math.pow(Math.sin(t * 3.2), 12) + .04 * Math.pow(Math.sin(t * 3.2 + .4), 12);
  var S = Math.min(W, H * .6) / 40 * beat, cx = W / 2, cy = H * .33;
  ctx.globalCompositeOperation = 'lighter';
  pts.forEach(function (p) {
    var j = Math.sin(t * 2 + p.p) * .3, x = cx + (p.x + j) * S, y = cy + (p.y + j) * S;
    ctx.fillStyle = 'rgba(255,' + (60 + (p.p * 20 | 0)) + ',120,.8)'; ctx.fillRect(x, y, p.s, p.s);
  });
  var g = ctx.createRadialGradient(cx, cy, 0, cx, cy, S * 18); g.addColorStop(0, 'rgba(255,40,100,.25)'); g.addColorStop(1, 'transparent');
  ctx.fillStyle = g; ctx.fillRect(0, 0, W, H);
  ctx.globalCompositeOperation = 'source-over';
  if (Math.random() < .12) fall.push({ x: Math.random() * W, y: -20, s: 8 + Math.random() * 14, v: .6 + Math.random() * 1.2, w: Math.random() * 6 });
  fall.forEach(function (f) { f.y += f.v; f.x += Math.sin(t + f.w) * .5; drawHeart(f.x, f.y, f.s, 'rgba(255,105,150,.55)'); });
  fall = fall.filter(function (f) { return f.y < H + 30; });
  boom.forEach(function (b) { b.x += b.vx; b.y += b.vy; b.vy += .12; b.l -= .012; drawHeart(b.x, b.y, b.s, 'rgba(255,' + b.g + ',140,' + Math.max(0, b.l) + ')'); });
  boom = boom.filter(function (b) { return b.l > 0; });
  requestAnimationFrame(loop);
}
loop();
var env = document.getElementById('env');
env.onclick = function (e) { if (e.target.tagName === 'BUTTON') return; env.classList.add('open'); document.getElementById('tap').style.visibility = 'hidden'; };
var no = document.getElementById('no'), yesScale = 1;
function dodge() { no.style.transform = 'translate(' + (Math.random() * 160 - 80) + 'px,' + (Math.random() * 60 - 30) + 'px)'; yesScale += .15; document.getElementById('yes').style.transform = 'scale(' + yesScale + ')'; }
no.addEventListener('mouseenter', dodge); no.addEventListener('click', function (e) { e.preventDefault(); dodge(); });
document.getElementById('yes').onclick = function () {
  document.querySelector('.ask').innerHTML = 'Yaaay! 💖 I knew it! 🥰';
  for (var i = 0; i < 120; i++) boom.push({ x: W / 2, y: H / 2, vx: (Math.random() - .5) * 14, vy: (Math.random() - 1) * 10, s: 10 + Math.random() * 16, l: 1, g: 40 + Math.random() * 120 | 0 });
};

Comments 0

…

Love – Heart Animation “I Love You” Letter for Valentine

Recommended

Comments 0