/* * MacFleek landing animations * ─────────────────────────── * 0 KB JS, pure CSS @keyframes. * * Triggers: * • Treemap drill-down — :hover on .anim-treemap * • Disk gauge fill — auto-plays on scroll into view (uses * IntersectionObserver in ) * • Duplicate 3-pass — :hover on .anim-duplicates * • Menu-bar popover swoop — :hover on .anim-menubar */ /* =================================================================== 1. TREEMAP — caches block splits into Xcode / Chrome / Slack / etc. =================================================================== */ .anim-treemap { position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; background: linear-gradient(180deg, #0a0a0a, #171717); box-shadow: 0 25px 80px -20px rgba(99, 102, 241, 0.4); cursor: pointer; } .anim-treemap .block { position: absolute; display: flex; flex-direction: column; justify-content: flex-start; padding: 14px 18px; color: white; font-family: -apple-system, "SF Pro Display", system-ui, sans-serif; font-weight: 600; font-size: 14px; border: 2px solid rgba(0, 0, 0, 0.4); transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); box-sizing: border-box; } .anim-treemap .block .size { font-weight: 400; font-size: 11px; opacity: 0.85; margin-top: 2px; } /* Initial collapsed state — one big block for each category */ .anim-treemap .caches { background:#6366f1; left:0; top:0; width:55%; height:60%; } .anim-treemap .docs { background:#ec4899; left:55%; top:0; width:30%; height:38%; } .anim-treemap .movies { background:#10b981; left:85%; top:0; width:15%; height:60%; } .anim-treemap .dl { background:#f97316; left:55%; top:38%; width:30%; height:22%; } .anim-treemap .music { background:#14b8a6; left:0; top:60%; width:35%; height:40%; } .anim-treemap .pics { background:#0d9488; left:35%; top:60%; width:30%; height:40%; } .anim-treemap .other { background:#7c3aed; left:65%; top:60%; width:35%; height:40%; } /* Sub-blocks (start hidden inside .caches) */ .anim-treemap .sub { position: absolute; inset: 0; display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; opacity: 0; transition: opacity 0.5s ease 0.3s; pointer-events: none; } .anim-treemap .sub > div { display: flex; flex-direction: column; justify-content: flex-start; padding: 10px 12px; color: white; font-size: 11px; font-weight: 600; border: 1px solid rgba(0,0,0,0.3); box-sizing: border-box; background: rgba(255,255,255,0.08); } .anim-treemap .sub > div .s { display:block; font-weight:400; font-size:10px; opacity:0.85; } .anim-treemap .sub .xcode { grid-row: span 2; background:#7c3aed; } .anim-treemap .sub .chrome { background:#8b5cf6; } .anim-treemap .sub .slack { background:#a78bfa; color:#1e1b4b; } .anim-treemap .sub .spotify { background:#c4b5fd; color:#1e1b4b; } .anim-treemap .sub .deriveddata{ background:#5b21b6; grid-column: span 2; } /* HOVER — caches expands, others shrink + sub-blocks appear */ .anim-treemap:hover .caches { width: 80%; height: 80%; } .anim-treemap:hover .docs { left: 80%; width: 20%; height: 26%; opacity: 0.5; } .anim-treemap:hover .movies { left: 80%; top: 26%; width: 20%; height: 26%; opacity: 0.5; } .anim-treemap:hover .dl { left: 80%; top: 52%; width: 20%; height: 28%; opacity: 0.5; } .anim-treemap:hover .music { top: 80%; width: 40%; height: 20%; opacity: 0.5; } .anim-treemap:hover .pics { top: 80%; left: 40%; width: 30%; height: 20%; opacity: 0.5; } .anim-treemap:hover .other { top: 80%; left: 70%; width: 30%; height: 20%; opacity: 0.5; } .anim-treemap:hover .sub { opacity: 1; } /* Title at the top of the canvas */ .anim-treemap .label { position: absolute; top: 12px; left: 16px; z-index: 5; font-family: -apple-system, system-ui, sans-serif; font-size: 11px; color: #a1a1aa; pointer-events: none; } .anim-treemap .hint { position: absolute; bottom: 14px; right: 18px; font-family: -apple-system, system-ui, sans-serif; font-size: 11px; color: #a1a1aa; padding: 6px 12px; background: rgba(255,255,255,0.08); border-radius: 999px; backdrop-filter: blur(8px); pointer-events: none; transition: opacity 0.3s; } .anim-treemap:hover .hint { opacity: 0; } /* =================================================================== 2. DISK GAUGE — auto-plays on scroll into view =================================================================== */ .anim-gauge { --size: 240px; width: var(--size); height: var(--size); position: relative; margin: 0 auto; } .anim-gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); } .anim-gauge .track { stroke: rgba(99,102,241, 0.15); } .anim-gauge .fill { stroke: url(#gaugeGrad); stroke-linecap: round; stroke-dasharray: 690; stroke-dashoffset: 690; transition: stroke-dashoffset 1.8s cubic-bezier(0.65, 0, 0.35, 1); } .anim-gauge.in-view .fill { stroke-dashoffset: 178; /* 19.2 GB / 25 GB max = ~74% filled */ } .anim-gauge .label { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; font-family: -apple-system, "SF Pro Display", system-ui, sans-serif; } .anim-gauge .label .small { font-size: 12px; color: #71717a; letter-spacing: 1px; text-transform: uppercase; font-weight: 600; } .anim-gauge .label .big { font-size: 38px; font-weight: 700; background: linear-gradient(135deg, #6366f1, #a78bfa); -webkit-background-clip: text; background-clip: text; color: transparent; } .anim-gauge .label .num { display: inline-block; font-variant-numeric: tabular-nums; } .anim-gauge.in-view .num { animation: countup 1.8s cubic-bezier(0.65,0,0.35,1) forwards; } @keyframes countup { from { opacity: 0.3; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } /* =================================================================== 3. DUPLICATE 3-PASS — auto-plays in loop while card is in view =================================================================== */ .anim-duplicates { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; padding: 24px; border-radius: 16px; background: linear-gradient(180deg, #eef2ff, #ddd6fe); } .dark .anim-duplicates { background: linear-gradient(180deg, #1e1b4b, #312e81); } .anim-duplicates .pass { border-radius: 12px; padding: 16px; background: rgba(255,255,255,0.7); font-family: -apple-system, "SF Pro Display", system-ui, sans-serif; position: relative; overflow: hidden; } .dark .anim-duplicates .pass { background: rgba(15, 23, 42, 0.6); color: white; } .anim-duplicates .pass-num { width: 24px; height: 24px; border-radius: 50%; background: #6366f1; color: white; display: grid; place-content: center; font-size: 12px; font-weight: 700; } .anim-duplicates .pass-title { font-weight: 600; font-size: 13px; margin-top: 8px; color: #27272a; } .dark .anim-duplicates .pass-title { color: white; } .anim-duplicates .pass-bar { margin-top: 12px; height: 8px; background: rgba(99,102,241, 0.15); border-radius: 4px; overflow: hidden; } .anim-duplicates .pass-bar .fill { height: 100%; background: linear-gradient(90deg, #6366f1, #a78bfa); width: 0; border-radius: 4px; } .anim-duplicates .pass-count { margin-top: 8px; font-size: 11px; color: #71717a; font-variant-numeric: tabular-nums; } .dark .anim-duplicates .pass-count { color: #a1a1aa; } /* When card is in view, animate all 3 passes sequentially */ .anim-duplicates.in-view .pass-1 .fill { animation: fillBar 1.2s ease-out 0s forwards; } .anim-duplicates.in-view .pass-2 .fill { animation: fillBar 1.2s ease-out 0.6s forwards; } .anim-duplicates.in-view .pass-3 .fill { animation: fillBar 1.2s ease-out 1.2s forwards; } .anim-duplicates.in-view .pass-1 .pass-count { animation: fadeIn 0.4s ease 1.0s forwards; opacity: 0; } .anim-duplicates.in-view .pass-2 .pass-count { animation: fadeIn 0.4s ease 1.6s forwards; opacity: 0; } .anim-duplicates.in-view .pass-3 .pass-count { animation: fadeIn 0.4s ease 2.2s forwards; opacity: 0; } @keyframes fillBar { from { width: 0; } to { width: var(--target, 100%); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* =================================================================== 4. MENU BAR POPOVER — swoops down on hover =================================================================== */ .anim-menubar { position: relative; background: linear-gradient(135deg, #3730a3, #0f0420); border-radius: 16px; padding: 32px; height: 380px; overflow: hidden; } .anim-menubar .bar { position: absolute; top: 0; left: 0; right: 0; height: 28px; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(8px); display: flex; align-items: center; padding: 0 16px; gap: 16px; color: #fafafa; font-family: -apple-system, system-ui, sans-serif; font-size: 12px; } .anim-menubar .bar .icon { width: 24px; height: 24px; margin-left: auto; background: #6366f1; border-radius: 6px; display: grid; place-content: center; color: white; font-weight: 800; font-size: 14px; transition: background 0.3s; } .anim-menubar:hover .bar .icon { background: #a78bfa; } .anim-menubar .pop { position: absolute; top: 32px; right: 16px; width: 260px; background: white; border-radius: 12px; padding: 14px; box-shadow: 0 18px 50px rgba(0,0,0,0.4); transform: translateY(-12px) scale(0.95); opacity: 0; transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); font-family: -apple-system, "SF Pro Display", system-ui, sans-serif; pointer-events: none; } .anim-menubar:hover .pop { transform: translateY(0) scale(1); opacity: 1; } .anim-menubar .pop .row { display: flex; justify-content: space-between; margin-bottom: 10px; } .anim-menubar .pop .row b { font-size: 20px; font-weight: 700; color: #6366f1; } .anim-menubar .pop .row span { font-size: 11px; color: #71717a; align-self: end; } .anim-menubar .pop .bar-fill { height: 6px; background: #e4e4e7; border-radius: 3px; overflow: hidden; } .anim-menubar .pop .bar-fill div { width: 74%; height: 100%; background: linear-gradient(90deg, #6366f1, #a78bfa); } .anim-menubar .pop .actions { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .anim-menubar .pop .actions div { padding: 8px; border-radius: 8px; font-size: 10px; font-weight: 600; text-align: center; transition: transform 0.2s; } .anim-menubar:hover .pop .actions div:nth-child(1) { animation: pulse 1.6s ease 0.5s infinite; } @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } .anim-menubar .pop .actions .a1 { background: #fef3c7; color: #92400e; } .anim-menubar .pop .actions .a2 { background: #dbeafe; color: #1e40af; } .anim-menubar .pop .actions .a3 { background: #f3e8ff; color: #6d28d9; } .anim-menubar .pop .actions .a4 { background: #dcfce7; color: #166534; } .anim-menubar .hint-text { position: absolute; bottom: 20px; left: 0; right: 0; text-align: center; font-family: -apple-system, system-ui, sans-serif; font-size: 12px; color: #c4b5fd; opacity: 1; transition: opacity 0.3s; } .anim-menubar:hover .hint-text { opacity: 0; }