媒体与画廊组件

适合用在哪里

图片对比、视频展示、画廊、轮播和媒体卡片。

怎么用

1. 打开任意一个组件，看实时预览，切换深色 / 浅色背景。
2. 点「复制提示词」，粘贴到 Claude Code、Cursor、Codex 或 Trae；模型会读你的项目，把组件改写成你的框架，并把颜色、字体接到你的设计变量。
3. 或者在终端用 8pt CLI 装进项目，也可以在已接入 8pt MCP 的编辑器里直接说需求。

npm i -g @8pt-dev/cli
8pt login
8pt search "媒体与画廊"
8pt add crossfade-media-stage

全部 12 个媒体与画廊组件

1. Crossfade Media Stage 轮播影像舞台

   整幅影像舞台：三张大图交叉淡入并缓慢推近，居中衬线大标题、说明和两枚按钮随幕切换浮现；左下角细进度条显示每幕时长，可点选跳转，右下角按钮暂停或继续播放。

2. Tinted Team Cards 色块团队卡片

   三张高挑的饱和色卡片：斜纹光晕背景上坐着原创小圆石角色和笔记本，左上角半透明标签，底部衬线体一段用法描述；悬停时整卡上浮，角色缓慢上下晃动。

3. Kanban Window Mock 看板窗口样机

   浏览器窗口样机：左侧带图标的工作区侧栏与智能体列表，右侧页面标题、视图切换和四列彩色看板，卡片每隔几秒依次流向下一列，右上角智能体通知定时浮现。

4. Hover Reveal Work Grid 悬停作品网格

   两大三小的作品网格：上排两张宽幅大图，下排一窄一窄一宽；悬停时图片缓慢放大，底部渐黑并浮出项目名与等宽字副题和右上箭头，右下角浅灰药丸按钮收尾。

5. Template Card Grid 模板卡片网格

   带滑块分段标签与下拉菜单的模板卡片网格：每张卡片有分类、标题和网站缩略图，缩略图叠加迷你导航条、大字标题与会员角标；切换标签时卡片淡出重排，悬停放大缩略图。

6. Paywall Flow Strip 付费墙流程条

   三台手机依次展示欢迎页、提问页与付费墙，上方步骤标签用箭头串起，当前步骤自动轮换并让对应手机轻微上浮，悬停可手动定位。适合讲解引导流程与收费设计。

7. Gallery Lightbox Stage 作品大图查看器

   深色画框按作品原始比例展示大图，切换时画面轻微缩放淡入、文字上浮；底部悬浮控制条含上一张、页码、下一张和自动播放，播放时显示进度细线，支持方向键切换。

8. Infinite Drag Wall 无限拖拽作品墙

   错落排布的作品卡片铺成无边画布，按住即可向任意方向拖动并带惯性滑行，滚轮也能平移；卡片按距离依次淡入，点击放大查看并可左右切换。适合作品集首页与灵感墙。

9. Library Browser Mock 素材库浏览窗口

   浅灰圆角外框里的产品浏览窗口：顶栏带分段切换与搜索框，四列分类导航，下方「最新 / 最热」标签切换三张网站缩略卡片，卡片悬停轻微上浮。

10. Film Strip Carousel 胶片新品轮播

    上下两排橙色齿孔的胶片色带，里面是自动横向推进的 16:9 新品卡片：画面上压一行倾斜大字，悬停时卡片描出橙色光圈、标题变色并暂停播放；左右箭头到头自动隐藏。

11. Auto Tab Showcase 自动轮播能力展示

    整屏背景大图配左侧能力列表：当前项前面亮起橙色播放三角、展开一句说明，底部进度条走满就自动切到下一项，背景交叉淡入并缓慢推近。点任意一项立即切换，离开视口暂停。

12. Image Compare 前后对比滑块

    拖动分割线对比前后两张画面，支持键盘左右键。裁切用两层反向 translate 实现，不改尺寸、不触发重排。

常见问题

相关阅读

• 怎么让 Claude Code、Cursor 做出好看的 UI
• 8pt MCP 安装与配置
• 整页模板
• 全部组件