jeet/grateful-journal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

save animation

Browse Source
This commit is contained in:
Jeet Debnath
2026-03-26 14:40:17 +05:30
parent bb3bf6b238
commit 57582fbb59
4 changed files with 381 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
src/components/SaveBookAnimation.tsx Normal file
View File

@@ -0,0 +1,72 @@
import { useEffect } from 'react'
export function SaveBookAnimation({ onDone }: { onDone: () => void }) {
useEffect(() => {
const t = setTimeout(onDone, 2900)
return () => clearTimeout(t)
}, [onDone])
return (
<div className="sba-overlay" aria-hidden="true">
<div className="sba-wrap">
<svg viewBox="0 0 260 185" fill="none" xmlns="http://www.w3.org/2000/svg" className="sba-svg">
{/* Drop shadow */}
<ellipse className="sba-shadow" cx="130" cy="172" rx="74" ry="9" fill="rgba(34,197,94,0.14)" />
{/* LEFT PAGE */}
<g className="sba-left-group">
<rect x="22" y="18" width="98" height="140" rx="4" fill="#ffffff" stroke="#d4e8d4" strokeWidth="1.5" />
<line x1="34" y1="50" x2="108" y2="50" stroke="#edf7ed" strokeWidth="1" />
<line x1="34" y1="66" x2="108" y2="66" stroke="#edf7ed" strokeWidth="1" />
<line x1="34" y1="82" x2="108" y2="82" stroke="#edf7ed" strokeWidth="1" />
<line x1="34" y1="98" x2="108" y2="98" stroke="#edf7ed" strokeWidth="1" />
<line x1="34" y1="114" x2="108" y2="114" stroke="#edf7ed" strokeWidth="1" />
<line x1="34" y1="130" x2="108" y2="130" stroke="#edf7ed" strokeWidth="1" />
</g>
{/* SPINE */}
<g className="sba-spine">
<rect x="119" y="16" width="7" height="144" rx="2.5" fill="#22c55e" opacity="0.45" />
</g>
{/* RIGHT PAGE (writing lines live here — folds independently) */}
<g className="sba-right-group">
<rect x="126" y="18" width="98" height="140" rx="4" fill="#f7fdf5" stroke="#d4e8d4" strokeWidth="1.5" />
<line className="sba-line sba-line-1" x1="138" y1="50" x2="212" y2="50" stroke="#22c55e" strokeWidth="2.5" strokeLinecap="round" />
<line className="sba-line sba-line-2" x1="138" y1="72" x2="212" y2="72" stroke="#22c55e" strokeWidth="2.5" strokeLinecap="round" />
<line className="sba-line sba-line-3" x1="138" y1="94" x2="202" y2="94" stroke="#16a34a" strokeWidth="2.5" strokeLinecap="round" />
<line className="sba-line sba-line-4" x1="138" y1="116" x2="195" y2="116" stroke="#16a34a" strokeWidth="2.5" strokeLinecap="round" />
</g>
{/* PEN — independent so it doesn't fold with the page */}
<g className="sba-pen">
{/* body */}
<rect x="-3.5" y="-24" width="7" height="22" rx="2.5" fill="#374151" />
{/* metal band */}
<rect x="-3.5" y="-5" width="7" height="3" fill="#9ca3af" />
{/* nib */}
<polygon points="-3.5,-2 3.5,-2 0,7" fill="#f59e0b" />
{/* ink dot */}
<circle cx="0" cy="7" r="1.8" fill="#15803d" />
</g>
{/* CLOSED BOOK — hidden until pages fold away */}
<g className="sba-closed-book">
{/* spine side */}
<rect x="55" y="18" width="150" height="140" rx="7" fill="#15803d" />
{/* cover face */}
<rect x="63" y="18" width="135" height="140" rx="5" fill="#22c55e" />
{/* spine shadow */}
<rect x="55" y="18" width="10" height="140" rx="4" fill="rgba(0,0,0,0.18)" />
{/* decorative ruled lines */}
<line x1="83" y1="76" x2="183" y2="76" stroke="rgba(255,255,255,0.22)" strokeWidth="1.5" />
<line x1="83" y1="93" x2="183" y2="93" stroke="rgba(255,255,255,0.22)" strokeWidth="1.5" />
<line x1="83" y1="110" x2="170" y2="110" stroke="rgba(255,255,255,0.22)" strokeWidth="1.5" />
{/* checkmark */}
<path className="sba-check" d="M96 90 L115 109 L162 62" stroke="white" strokeWidth="6" strokeLinecap="round" strokeLinejoin="round" />
</g>
</svg>
</div>
</div>
)
}