Interactive storytelling, game assets, custom vector folding.
// ----- individual drawing helpers (mini vector art) ----- function drawMoonCat(ctx, w, h) ctx.save(); ctx.shadowBlur = 0; ctx.beginPath(); ctx.arc(w*0.7, h*0.65, w*0.09, 0, Math.PI*2); ctx.fillStyle = '#FFE6B0'; ctx.fill(); ctx.fillStyle = '#4a3727'; ctx.beginPath(); ctx.ellipse(w*0.66, h*0.62, w*0.02, h*0.03, 0, 0, Math.PI*2); ctx.fill(); ctx.beginPath(); ctx.ellipse(w*0.74, h*0.62, w*0.02, h*0.03, 0, 0, Math.PI*2); ctx.fill(); ctx.beginPath(); ctx.arc(w*0.7, h*0.68, w*0.03, 0, Math.PI); ctx.fill(); // ears ctx.fillStyle = '#E5BE8F'; ctx.beginPath(); ctx.moveTo(w*0.63, h*0.57); ctx.lineTo(w*0.60, h*0.51); ctx.lineTo(w*0.67, h*0.56); ctx.fill(); ctx.beginPath(); ctx.moveTo(w*0.77, h*0.57); ctx.lineTo(w*0.80, h*0.51); ctx.lineTo(w*0.73, h*0.56); ctx.fill(); // moon ctx.fillStyle = '#F5E7A3'; ctx.beginPath(); ctx.arc(w*0.3, h*0.3, w*0.08, 0, Math.PI*2); ctx.fill(); ctx.fillStyle = '#E9CF7A'; ctx.beginPath(); ctx.arc(w*0.28, h*0.27, w*0.06, 0, Math.PI*2); ctx.fill(); ctx.restore(); flipbook codepen
.flipbook position: relative; width: 600px; height: 400px; background: #fef9e8; border-radius: 18px; box-shadow: 0 30px 40px -15px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,245,215,0.5) inset; cursor: grab; overflow: hidden; transition: box-shadow 0.2s; Interactive storytelling, game assets, custom vector folding
Bind the frame change to wheel events or page scroll percentage. Feels like flipping a real book. ctx.shadowBlur = 0