Scroll Fade · Animate UI

滚动容器的边缘渐隐：只有还有内容可滚的那一侧才淡出，并随滚动实时变化。

安装

自有原语直接来自 @animate-ui/react，不依赖 Radix UI、Base UI 或 React Aria；装上包即可使用。

终端

bun add @animate-ui/react motion

用法

直接从 @animate-ui/react 的对应子路径引入，下面就是完整示例；样式由你的类名决定。

scroll-fade.tsx

import { ScrollFade } from '@animate-ui/react/primitives/effects/scroll-fade';

export function Changelog() {
  return (
    <ScrollFade className="h-64">
      <ul>{/* … */}</ul>
    </ScrollFade>
  );
}

scroll-fade.tsx

import { useRef } from 'react';
import { ScrollArea } from 'radix-ui';
import { useScrollFade } from '@animate-ui/react/primitives/effects/scroll-fade';

function Sidebar() {
  const viewportRef = useRef<HTMLDivElement>(null);
  useScrollFade(viewportRef, { size: 32 });
  return <ScrollArea.Viewport ref={viewportRef}>{/* … */}</ScrollArea.Viewport>;
}

动效

边缘只有在该方向还有内容时才渐隐；没有溢出时两侧都不显示渐变。
渐隐直接跟随滚动位置，没有延迟，滚出 size（默认 20px）的一半时该边缘完全显现。

所有时长都会乘以 AnimateUIProvider 的 tempo，并遵守系统的减少动效设置。

API

动效相关的 transition 与 exitTransition 是 Animate UI 唯一新增的属性；其余 props 见上表。

属性	类型	默认值
asChild	`boolean`	`false`
orientation	`'vertical' \| 'horizontal' \| 'both'`	`'vertical'`
size	`number`	`40`
shrink	`number`	`0.03`
blur	`number`	`4`
transition	`Transition`	`{ duration: 0.2, ease: [0.23, 1, 0.32, 1] }`
enabled	`boolean`	`true`
…props	`React.ComponentProps<'div'>`	`—`

未列出的属性与上游 API 完全一致，可在官方文档查阅。