动效 · Tide

潮汐9 段交互动效

对照潮汐当前版本(5.11)的 9 个交互母题:玻璃拟态首页轮播、圆形声景共享元素放大、刻度尺专注计时、4-4-4-4 呼吸圆、睡眠报告柱生长、格言卡堆飞出、睡眠故事错峰浮入、冥想拱窗呼吸、月落日出唤醒环——全部纯 CSS 竖屏循环复刻。

动效母题 · 9 段

从潮汐当前版本(5.11,2026-09)真实界面提炼的 9 个动效母题,全部复刻为手机竖屏画面、纯 CSS 关键帧循环播放;点击任意卡片查看动效详情,复制提示词让 AI 1:1 复刻。

9:41
晚上好
自然好睡眠
心流专注睡眠监测小憩
首页睡眠正念声音
首页 · 全屏影像+玻璃钮+胶囊 tab
首页 · 全屏影像+玻璃钮+胶囊 tab自然影像慢速交叉淡播,深绿胶囊在底部四个 tab 间逐格滑动。
9:41
声音场景
雨天森林她的城市日出
雨天 · 窗台
点圆形场景卡,放大进入沉浸
声音场景 · 圆形缩略放大沉浸
声音场景 · 圆形缩略放大沉浸圆形场景卡放大铺满全屏,播放/暂停图标形变,波形随播放起伏。
9:41
工作背单词设计阅读做家务
专注
252423
分钟
专注 ›
旅程专注场景番茄钟专注模式
开始专注
番茄专注 · 刻度尺倒计时
番茄专注 · 刻度尺倒计时彩色任务胶囊选中回弹,刻度线逐格左移、分钟数滚动递减。
9:41
呼吸 · 放松训练
吸气屏息呼气屏息
跟着圆圈呼吸,4-4-4-4
呼吸训练 · 4-4-4-4 缩放圆
呼吸训练 · 4-4-4-4 缩放圆柔光圆随吸气放大、屏息保持、呼气缩回,指令文字逐段切换。
9:41
昨晚睡了
7小时50分钟8小时16分钟
睡眠评分
0477894
清醒浅睡深睡
梦话时长10″鼾声时长8″环境音量32dB
💤梦话10″
😴鼾声8″
睡眠报告 · 分期柱生长+计分
睡眠报告 · 分期柱生长+计分白卡上睡眠分期柱错峰生长,评分滚动计数,梦话鼾声胶囊滑入。
9:41
正念格言
02SEP 2026

把心带回当下,一步一呼吸。

一行禅师
01SEP 2026

我们无法遏制波浪,但我们可以学会冲浪。

正念冥想大师 · 乔·卡巴金
左滑换下一张格言卡
正念格言 · 卡堆滑动
正念格言 · 卡堆滑动叠放照片卡顶层向左上飞出换卡,后卡回正补位,循环两次复位。
9:41
睡眠故事
山间溯溪夜游者兔子洞之夏地中海的和平气味
影视级插画卡 · 错峰浮入
睡眠故事 · 双列卡片浮入
睡眠故事 · 双列卡片浮入插画卡错峰从下方浮入,玻璃播放角标回弹弹出后整场复位。
9:41
正念冥想
正念冥想 · 入门8 章 · 系列
YogaNidra 温暖入眠缓解疲劳
冥想精选 · 拱窗呼吸卡
冥想精选 · 拱窗呼吸卡拱窗插画卡做呼吸缩放,玻璃播放钮外圈脉冲扩散,小卡视差。
9:41
小憩 · 20 分钟
轻唤醒中早安
醒来前 1 分钟,光与声渐亮
小憩唤醒 · 月落日出进度环
小憩唤醒 · 月落日出进度环进度环缓慢充满,月亮淡切太阳、背景由夜蓝暖到晨曦琥珀。
参考来源:潮汐 App Store 官方截图(v5.11.2,2026-09-13 更新)