翻面看代码

为什么有效

预览和代码做成同一张卡的正反面，说明二者是同一个东西；翻转时周围界面完全静止，运动只发生在一个元素上。

参数

时长

每个组件：翻到代码面 0.8s（24 帧），停留约 1s，翻回 0.8s（24 帧）。定价卡 1.03–1.83s，翻回 2.88–3.68s（停留 1.05s）；登录表单 4.56–5.36s，翻回 6.26–7.06s（停留 0.9s）；通知设置 7.71–8.51s 翻到代码并停在代码面；组件在 3.88s 和 7.03s 硬切换；窗口 9.4s 退场（0.7s），字标 9.85s；全片 11s

缓动

每个 180° 用一条 cubic-bezier(0.65,0,0.35,1)（power3.inOut）；预览/代码药丸滑动 0.2s expo.out；光标按下 scale 0.86 历时 0.06s，松开 0.18s back.out(2)

镜头

整个窗口入画，全程缓慢推近，scale 1→1.05，9.4s linear；3D 舞台 perspective 2400px，perspective-origin 820px 500px；侧面朝向时卡片阴影收窄到 scaleX 0.04

主体

940×680px 的组件卡以自身中心为轴 rotateY 0→180°；第二次翻转沿同一方向 180→360°；背面是 rotateY(180deg) 的深色代码编辑器（#0d1117），有文件标签、安装命令和带行号的 TSX；正面白底点阵

同步

光标 0.98s 点击预览/代码开关，1.0s 药丸和标签变化，1.03s 开始翻转；卡片阴影宽度和黑色遮罩（不透明度最高 0.2）每帧读取同一个缓动角度；窗口外壳、侧栏和页头保持不动；切换组件时卡片、标题、面板和侧栏高亮行在同一帧变化

风格

浅色应用窗口配深色舞台和重阴影；正面是 shadcn 风格组件；背面是 GitHub 深色语法配色；代码用 JetBrains Mono

提示词

常见说法

• 预览卡翻过去背面是代码
• 切换预览和代码的翻转
• 卡片转半圈看源码

容易混淆

• 形变接力形变接力是同一元素变成另一种形状；本条是同一张卡的正反两面，形状不变
• 控件驱动控件驱动是控件变化同帧改变页面；本条的触发和结果在同一个元素上