Loading...
Loading...
Found 23 Skills
Animation patterns for Astro sites. Scroll animations, micro-interactions, transitions, loading states. Performance-focused, accessibility-aware.
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.
Creates smooth animations and micro-interactions using Framer Motion including page transitions, gestures, scroll-based animations, and orchestrated sequences. Use when users request "add animation", "framer motion", "page transition", "animate component", or "micro-interactions".
Gaming landing page with GSAP scroll animations, 3D effects, and video storytelling.
Trigger: animejs animation, anime.js, stagger, timeline, scroll animation. Anime.js reference for animations, timelines, stagger, scroll sync, SVG, and text effects.
Motion-based animation system for Next.js with performance-optimized patterns
Build a premium, scroll-driven interactive landing page for any business: a service company, a physical product, a food brand, a drink brand. Scroll becomes the timeline. Video scrubs frame by frame under the wheel, sections pin and advance, rails pan sideways, headlines assemble line by line, the page ground shifts colour as you travel, and the pointer moves things that are not scrolling. Interviews the human first (their vibe, their journey, one unbroken world or distinct scenes, and what assets they already own), then picks a page grammar and a signature move so no two builds share a skeleton, generates photoreal assets through kie.ai or builds from the user's own footage and photos, writes real semantic HTML on a design-system floor, and verifies the result by screenshotting its own scroll. Use for "scrollytelling", "scroll animation site", "a site where scrolling plays a video", "Apple-style landing page", "3D scroll world", "interactive landing page", "make my brand a scroll experience", "make it feel different", "this looks like a template", "a unique scroll site", or any request for a site that should feel like an experience rather than a document.
GSAP ScrollTrigger for scroll-linked animations, pinning, scrub, and refresh handling. Useful for editorial sites and product pages.
React animations with Motion v13 (gestures, scroll, layout, SVG). Use when drag-and-drop, scroll animations, modals, carousels, parallax, or AnimatePresence issues.
Pin một section lại khi cuộn tới, rồi chuyển cuộn dọc thành cuộn ngang qua GSAP ScrollTrigger (pin + scrub + tween xPercent của track). Gọi khi user nói "gsap scrolltrigger", "pin section", "cuộn ngang", "horizontal scroll section", "scroll-driven horizontal", "pinned horizontal scroll", hoặc /gsap-scrolltrigger-pin. KHÁC `scroll-effects` (7 hiệu ứng nhẹ vanilla, không dependency, không pin) và `lenis-smooth-scroll` (làm mượt cuộn TOÀN TRANG, không pin/không đổi hướng cuộn) — skill này CẦN GSAP và chỉ áp dụng cho MỘT section pin cụ thể.
Classic skill for GPT and Codex, opt-in: it runs only when called by name. Layout variance, a strict AIDA page structure and GSAP scroll motion.