Loading...
Loading...
Found 6 Skills
Hiệu ứng cuộn trang thuần CSS qua Native CSS Scroll-Driven Animations API (animation-timeline scroll()/view(), animation-range) — ZERO JavaScript. Gọi khi user nói "css scroll driven animation", "animation-timeline", "scroll animation không js", "css thuần cuộn trang", "scroll-driven CSS", hoặc /css-scroll-driven-native. KHÁC `skills/scroll-effects` (đó dùng IntersectionObserver JS, chạy MỌI trình duyệt hiện đại) — skill này 0 JS nhưng trình duyệt CHƯA hỗ trợ đủ (Firefox/Safari còn behind flag/rollout), dùng làm progressive enhancement phía trên scroll-effects, không thay thế khi cần chạy chắc trên mọi trình duyệt.
Framer Motion (Motion) animation patterns for React — springs, staggers, layout animations, micro-interactions, scroll effects, and page transitions. Use when building or improving UI animations, adding polish, or making interfaces feel premium.
Build GSAP motion without restyling, as single effects or the full treatment: for "we're animaxxing", every element enters from a blank page, rests, and leaves. Text: split, scramble, glitch, typewriter, and speak-in entrances, scattering headlines, letter waves, text on a path, count-ups, odometers. Scroll: reveals, scrubbing, parallax, pinned scenes, stacking cards, zoom-through, horizontal runs, waypoints, smooth scroll, paging. Pointer: magnetic, tilt, spotlights, directional fills, press ripples, shakes, cursor followers, image trails, proximity, label rolls, underlines. Drag: throw tracks, endless loops, card stacks, sortable lists, swipe to dismiss. Also page covers, Flip and shared-element morphs, menus, dialogs, tabs, state buttons, media and SVG effects, marquees, CustomEase, sound, confetti, particles, and hover stuck on touch. Pair with the matching GSAP framework skill. Not for branding, redesign, routing, or GSAP API questions.
Chuyển/lộ ảnh qua mask hữu cơ dạng vòng loang mực (ink-splatter/blob, `mask-image` radial-gradient động theo scroll progress) hoặc pin split-screen sticky (ảnh cố định bên trái, text cuộn bên phải, đổi ảnh qua mask khi panel active đổi). Bản gốc nguyên văn (Ink Transition, Pinned Split-Screen…) ở repo Rheinmir/uiux-asset; assets/ là bản vanilla CSS mask nhẹ, không WebGL. Gọi khi user nói "mask reveal", "ink transition", "chuyển ảnh qua mask", "split-screen sticky pin", "blob reveal effect", "vết mực loang", "pin ảnh cố định cuộn chữ", hoặc /mask-reveal-transition. KHÁC `skills/scroll-effects` (reveal đơn giản opacity/translate, KHÔNG có mask hình dạng) và `skills/blur` (shader WebGL nặng GPU cho chuyển ảnh toàn màn hình — đây là CSS `mask-image` nhẹ, không cần Three.js/canvas).
Particle cloud Three.js (THREE.Points + BufferGeometry) hội tụ từ vị trí ngẫu nhiên thành hình ảnh/logo theo tiến độ cuộn trang — sample pixel từ canvas ẩn làm toạ độ đích, lerp position theo scroll. Gọi khi user nói "particle image", "hạt hội tụ thành ảnh", "three.js particle scroll", "point cloud morph", "particle cloud biến hình theo scroll", hoặc /threejs-particle-morph. KHÁC `skills/blur` (đó là shader GLSL radial-blur CHUYỂN ẢNH sang ảnh khác trên một plane — đây là particle cloud rời rạc BIẾN HÌNH thành ảnh, kỹ thuật render khác hẳn — PointsMaterial/BufferGeometry, không phải ShaderMaterial trên PlaneGeometry).
Use when planning, auditing, specifying, implementing, or improving premium website/app motion across FrankX, Arcanea, Starlight, or Vercel/Next.js sites. Use for motion design systems, site choreography, scroll motion, generated media integration, runtime selection, reduced-motion planning, visual QA, and turning rough motion ideas into implementation-ready specs.