错误:无法满足请求。Amazon CloudFront 分发配置已阻止您所在国家/地区的访问。我们目前无法连接到此应用程序或网站的服务器。可能流量过多或配置错误。请稍后重试,或联系应用程序或网站所有者。如果您通过 CloudFront 向客户提供内容,可以通过查阅 CloudFront 文档来找到故障排除步骤并帮助防止此错误。由 cloudfront (CloudFront) 生成。请求 ID:QOOvNj6C9dr34rVg6k9yxJpluj7EPgcJpb8wm1qJP4XUteltTqGTSA==
## react-kino:React 的电影化滚动叙事
react-kino 是一个轻量级(核心压缩后小于 1KB)的 React 库,用于构建电影化的、滚动驱动的体验。它提供了一种声明式的方法,使用诸如 `<Scene>`、`<Reveal>`、`<Parallax>`、`<Counter>` 等组件,无需命令式时间线。它支持 SSR,并尊重 `prefers-reduced-motion`。
**主要特性:**
* **声明式 & 基于组件:** 使用熟悉的 React 组件组合动画。
* **轻量级:** 核心引擎非常小巧,支持 tree-shakeable 导入。
* **SSR 安全:** 在服务器端渲染并在客户端动画化。
* **可访问性:** 自动适应用户减少动画的偏好设置。
* **性能:** 利用被动滚动监听器、`requestAnimationFrame` 和 GPU 加速的变换。
**组件:**
* **`<Scene>`:** 创建固定滚动区域。
* **`<Reveal>`:** 滚动时动画化内容(淡入淡出、缩放、模糊)。
* **`<Parallax>`:** 通过滚动背景创建深度。
* **`<Counter>`:** 滚动时动画化数字。
* **`<HorizontalScroll>` & `<Panel>`:** 启用水平滚动区域。
**开始使用:**
使用 `npm install react-kino` 安装,或使用提供的脚手架工具 (`npx shadcn add https://react-kino.dev/registry/components/scene.json`) 和模板 (`npm install @react-kino/templates`)。该库设计用于与 Next.js(使用 `"use client"`) 和其他 React 框架一起使用。每个组件都有详细的文档和示例。