Loading...
Loading...
Found 6 Skills
Create an on-scroll animation trigger using IntersectionObserver with Tailwind-friendly animation classes and keyframes. Use when asked for scroll-reveal, animate-on-scroll, or sequencing element animations when they enter the viewport.
Use when triggering animations on scroll - reveal effects, parallax, sticky headers, progress indicators, or any scroll-linked motion.
Load non-critical components when they become visible in the viewport.
Profile, audit, and optimize frontend page performance with emphasis on animation work, memory-leak risks, long-session slowdowns, CSS animations, canvas/WebGL requestAnimationFrame loops, marquees, skeletons, GSAP/Three/Matter effects, timers, listeners, and observers. Use when the user asks to make animations performant, pause offscreen animations, look for memory leaks, profile pages that slow the computer over time, fix janky scrolling, reduce CPU/GPU use, or repeat the "only play in view" optimization on React/Vite/Next/frontend pages using Codex Browser.
Component timeline dọc (mốc theo ngày, cuộn-hiện dần bằng IntersectionObserver, tự chuyển layout mobile→desktop ở 768px) cho trang changelog/lịch sử/roadmap/writing-archive. Gọi khi user nói "làm timeline", "dòng thời gian", "lịch sử phiên bản dạng timeline", "changelog timeline", "roadmap timeline", hoặc /timeline. KHÁC /diagram (sơ đồ luồng/kiến trúc) — đây là danh sách MỐC THEO THỜI GIAN của MỘT trục, không phải quan hệ nhiều node.
Vẽ dần nét SVG (stroke-draw) theo cuộn trang hoặc khi vào viewport — đo `path.getTotalLength()`, set `stroke-dasharray`/`stroke-dashoffset`, animate dashoffset từ length về 0. Gọi khi user nói "vẽ svg khi cuộn", "svg stroke draw", "logo vẽ dần", "path animation reveal", "stroke-dashoffset", hoặc /svg-stroke-reveal. KHÁC `skills/scroll-effects` (7 hiệu ứng cuộn chung — reveal/stagger/highlight/nav/top/toc/parallax, KHÔNG có stroke-draw) — skill này chuyên biệt cho SVG `<path>` có NÉT VẼ (logo, chữ ký, biểu đồ đường, hành trình).