其他技能

A stack of cards springs and fans into place on view — a lively hero for a small set (3–5). One set per view. Shown flat/instant under prefers-reduced-motion.

中文简介正在准备中。当前显示原文说明。

Make a primary button feel alive by gently pulling it toward the cursor as it approaches, then springing back. Keep it subtle and reserve it for one or two primary actions. Disabled on touch and under prefers-reduced-motion. Do not use it on dense UIs full of buttons.

中文简介正在准备中。当前显示原文说明。

A soft progressive blur fades content out toward an edge — a premium "more below" affordance for a scrolling list/section. Keep the readable content above the blur. Degrades gracefully where backdrop-filter is unsupported.

中文简介正在准备中。当前显示原文说明。

Glassmorphic icon buttons that lift and glow on hover — a tactile toolbar or social row. Use for a small row of actions. Flat under prefers-reduced-motion.

中文简介正在准备中。当前显示原文说明。

A soft glare sweeps across a card following the cursor on hover — a premium, tactile sheen. Keep it subtle; a few hero cards, not a grid. Disabled on touch and under prefers-reduced-motion.

中文简介正在准备中。当前显示原文说明。

Skeleton placeholders with a soft sweeping shimmer while content loads. Use to fill space for cards/lists/profiles that are still loading and make the wait feel shorter. Honors prefers-reduced-motion (static skeleton). Only show while real content is loading — never as decoration.

中文简介正在准备中。当前显示原文说明。

Rise + fade key elements in as the page loads, optionally staggered. Use for hero content and a small group of important elements. Honors prefers-reduced-motion. For long lists or off-screen content use scroll-reveal instead; never delay must-read content by more than a moment.

中文简介正在准备中。当前显示原文说明。

A macOS-style dock whose icons magnify toward the cursor — a delightful app-launcher row. One dock per view. Icons stay flat under prefers-reduced-motion.

中文简介正在准备中。当前显示原文说明。

A grid of little lines all point toward the cursor — a hypnotic interactive field for a hero/background. One field per view; it's attention-grabbing. Frozen under prefers-reduced-motion.

中文简介正在准备中。当前显示原文说明。

Letters drop into place one after another — a light, gravity-flavored headline entrance. One short playful line; not body copy. Instant under prefers-reduced-motion.

中文简介正在准备中。当前显示原文说明。

A card reveals a second face through a burst of pixel tiles on hover — a retro reveal. A few cards, not a grid. Under prefers-reduced-motion the back face just appears.

中文简介正在准备中。当前显示原文说明。

Digits roll like an odometer up to the target number — a satisfying stat reveal on view. One or two key numbers per view. Under prefers-reduced-motion the final number shows instantly.

中文简介正在准备中。当前显示原文说明。

A soft gooey blob trails the cursor with a springy lag — a playful custom pointer for a hero section. One per page; can distract on content-heavy pages. Hidden on touch and under prefers-reduced-motion.

中文简介正在准备中。当前显示原文说明。

An animated bottom-tab indicator — Lottie JSON. A Lottie (JSON) animation — portable motion that plays identically on web and app via lottie-web. Honors prefers-reduced-motion (don't autoplay). Reserve Lottie for motion that earns its ~160KB runtime.

中文简介正在准备中。当前显示原文说明。

A heart/favorite icon that animates on toggle — Lottie JSON, portable across web & app. A Lottie (JSON) animation — portable motion that plays identically on web and app via lottie-web. Honors prefers-reduced-motion (don't autoplay). Reserve Lottie for motion that earns its ~160KB runtime.

中文简介正在准备中。当前显示原文说明。

An animated pagination dots indicator — Lottie JSON. A Lottie (JSON) animation — portable motion that plays identically on web and app via lottie-web. Honors prefers-reduced-motion (don't autoplay). Reserve Lottie for motion that earns its ~160KB runtime.

中文简介正在准备中。当前显示原文说明。

A floating action button that morphs open — Lottie JSON. A Lottie (JSON) animation — portable motion that plays identically on web and app via lottie-web. Honors prefers-reduced-motion (don't autoplay). Reserve Lottie for motion that earns its ~160KB runtime.

中文简介正在准备中。当前显示原文说明。

Fade Big — a composable AnimXYZ entrance via the xyz="fade big-50%" attribute. Declarative: mix fade + move + scale + rotate without writing keyframes. MIT. Honors prefers-reduced-motion.

中文简介正在准备中。当前显示原文说明。

Rotate In — a composable AnimXYZ entrance via the xyz="fade rotate-right-45" attribute. Declarative: mix fade + move + scale + rotate without writing keyframes. MIT. Honors prefers-reduced-motion.

中文简介正在准备中。当前显示原文说明。

Flip Up — a composable AnimXYZ entrance via the xyz="fade flip-up-90" attribute. Declarative: mix fade + move + scale + rotate without writing keyframes. MIT. Honors prefers-reduced-motion.

中文简介正在准备中。当前显示原文说明。

Official GSAP skill for timelines — gsap.timeline(), position parameter, nesting, playback. Use when sequencing animations, choreographing keyframes, or when the user asks about animation sequencing, timelines, or animation order (in GSAP or when recommending a library that supports timelines).

中文简介正在准备中。当前显示原文说明。

Fade Small — a composable AnimXYZ entrance via the xyz="fade small-50%" attribute. Declarative: mix fade + move + scale + rotate without writing keyframes. MIT. Honors prefers-reduced-motion.

中文简介正在准备中。当前显示原文说明。

Rise Big — a composable AnimXYZ entrance via the xyz="fade up-5 big-25%" attribute. Declarative: mix fade + move + scale + rotate without writing keyframes. MIT. Honors prefers-reduced-motion.

中文简介正在准备中。当前显示原文说明。

Fade Up — a composable AnimXYZ entrance via the xyz="fade up-3" attribute. Declarative: mix fade + move + scale + rotate without writing keyframes. MIT. Honors prefers-reduced-motion.

中文简介正在准备中。当前显示原文说明。