Communitygithub.com

滚动电影感个人站点

用于构建或增强个人/作品集站点,使其滚动体验如同电影般(电影式擦除),包括自定义光标动效,并部署到站主自己的托管账户。

滚动电影感个人站点 是什么?

该技能指导创建个人或作品集网站,将滚动操作映射为电影播放进度条(scrub),而非使用视频文件。核心设计原则是优先采用CSS粘滞场景(sticky scenes)和滚动驱动动画(scroll-driven animations),仅在CSS无法固定或控制场景时考虑使用时间线库。它强调逐级推进的“摄像机阶梯”方案:从删除冗余场景开始,到CSS实现,再到滚动触发库,禁止引入第三方平滑滚动劫持、Canvas帧序列、3D主视觉或基于视频时间轴的滚动方式。技能还规定了4-6个场景的语法、免JavaScript的内容可读性、尊重`prefers-reduced-motion`设置,并允许自定义光标作为渐进增强。部署必须使用站主自己的托管账户,所有链接必须是真实URL。定义完成的标准包括:站点在站主账户下可访问、滚动如电影般舒适、响应式且支持减少动效模式、仅含真实链接。

兼容平台~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/Balllvin/balllvin-stack/tree/HEAD/skills/scroll-film-site

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

滚动电影感个人站点 是做什么的?

构建一个个人或作品集站点,让滚动成为播放指针。不是视频文件。节奏宜人、完全响应式、渐进增强。

权限范围

  1. 优先使用 CSS 粘滞场景(sticky scenes)加滚动驱动动画。仅当 CSS 无法固定或擦除场景时,才使用时间线库。
  2. 遵循仓库的艺术方向或品味技能。不要随意采用通用前端工具包,以免与这种品味冲突。
  3. 使用已安装的官方滚动时间线技能(scroll-timeline skills)。
  4. 仅收录想法(是/可能):模糊淡入、眩光悬浮、滚动进度、滞后指针、噪点、光线。用 CSS 或所选时间线库重新实现。不要粘贴其他框架的运动原语。
  5. 尊重 prefers-reduced-motion: reduce — 静态图片、相同内容顺序、无动效触发的行动号召。

摄像机阶梯 (停在第一个稳固的层级)

  1. 删除冗余场景。
  2. CSS:粘滞场景、animation-timeline: view() / scroll()、仅使用 transform 和 opacity。
  3. 仅当 CSS 无法固定或擦除一个场景时,才使用滚动触发库。温和擦除、线性缓动、卸载时销毁。仅对 transform 和 opacity 设置动画。
  4. 不要添加第三方平滑滚动劫持、Canvas 帧序列、3D 主视觉或 <video> currentTime 擦除。

场景语法

  • 最多 4–6 个场景。相邻切场不得使用相同的布局系列。
  • 开场、保持(固定加擦除)、切场、结束。
  • 固定模式:一个高滚动容器加上一个粘滞的全视口静态画面。
  • 无整页强制滚动捕捉(scroll snap)。
  • 内容在 JavaScript 禁用时必须可读。无滚动劫持。无每个时钟周期在 mousemove 或 scroll 上更新框架状态。

个人站点内容(根据简讯调整)

典型节奏:身份标识、我构建的内容、当前产品、链接(他们提供的真实个人主页)、一个清晰的行动号召。 链接只能是真实 URL — 绝不虚构个人主页。如果缺失,请索要真实链接。

光标

允许使用带有弹簧滞后或眩光悬浮效果的自定义光标作为渐进增强。保持原生光标在减少动效和触摸模式下可用。优先使用带 requestAnimationFrame 节流的指针事件监听器,而非每次移动都更新框架状态。

技术栈默认

  • 可以使用现代 Web 框架。
  • 部署在站主自己的托管账户下,而不是其他团队名下。
  • 编码遵循本地编码默认规则:实现,然后二次审查,并设置检查点例程。

完成定义

  • 在站主账户下可访问的在线 URL。
  • 滚动体验如电影(愉悦、不急促)。
  • 响应式;减少动效时显示静态画面。
  • 仅包含真实链接。
  • 站点上线时报告该 URL。

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

相关技能