果冻笔记 Jellynote

Tactile Digital 可触形变 / 让捏成为输入方式

把笔记捏成你顺手的形状

在果冻笔记里，每一次触碰都会留下形状：按下去凹陷，拖起来拉伸，松手后像软物质一样晃两下再归位。界面不是一块擦不花的玻璃，而是能按出指印、会呼吸回弹的果冻。

看形变物理

回弹曲线 cubic-bezier(0.34, 1.56, 0.64, 1) / 按压行程约 8% / 鼠标、触屏与键盘同样可试

按住布丁慢慢压扁 / 松手看它弹回来（键盘：聚焦后按住空格）

当前指压 0% / 今日解压 0 次

01 / 试捏笔记

每一张便签都是软的

按住任意一张并拖动：离抓点近的一侧圆角会收紧，卡片离开桌面，影子随抬起的高度一起变长变淡。松手后它带着一点过冲落回网格。

周三的樱桃

采购
  • 樱桃 500 克，要带杆的
  • 无糖苏打水一箱
  • 猫罐头补两盒
按住拖我

转租看房清单

周六
  • 问清物业费和取暖费谁交
  • 拍水表电表读数
  • 开窗听一次街噪
  • 试热水器出热水速度
按住拖我

给阿橙的信 开头

草稿

阿橙：展信佳。上周你说的那家汤馆我去了，老板娘记得你，还多送了我半勺辣油。等降温了，想约你再去一次。

按住拖我

周报素材

快记
  • 下载转化 37%，比上周高 4 点
  • 一句用户反馈：手势终于跟手了
  • 一个坑：低端机回弹掉帧
按住拖我

02 / 软键盘实验

键帽也是软的

把光标放进下面的软输入框直接打字，或点按键帽。每次敲击，键帽前倾压扁再弹回，字符落进果冻里，输入框跟着轻轻一颤。

键帽按下时前倾压扁约 12%，弹回走同一根过冲曲线 / 用 Tab 与回车操作键帽时，形变反馈同样触发

03 / 形变物理

软物质的三条规矩

与静态的黏土拟物不同，可触形变的灵魂不在材质，而在反馈：形状永远是力的结果。本页所有交互共用下面这张参数表。

  1. 压下去要有代价

    按压不只是缩小元素：内阴影同步加深，底部接触阴影变薄，亮度略抬。位移与光影同向，材质才可信。

  2. 松手要有余韵

    回弹统一使用过冲曲线 cubic-bezier(0.34, 1.56, 0.64, 1)，让元素多晃半拍再停住，而不是被橡皮筋瞬间拽回。

  3. 拖到哪里哪里绷紧

    拖拽时被抓点一侧的圆角逐帧收紧，对侧放松，卡片微微向拖动方向旋转，边界像真的被手指牵起。

组件 触发 形变量 回弹方式 阻尼
主按钮 按压 8% 挤压 过冲贝塞尔 450ms 0.62
笔记卡 拖拽捏起 位移 + 3 度旋转 spring 过渡 550ms 0.58
软键帽 点按 前倾 12% 过冲贝塞尔 380ms 0.70
吉祥物 长按 渐进 22% 凹陷 jelly-settle 双段回弹 0.45
  • Chrome Silver #C0C0C0
  • Jelly Pink #FF9ECD
  • Soft Blue #87CEEB
  • 圆角 26px / Nunito + DM Sans

开启系统级减少动态后，本页撤掉全部动画，形变退化为瞬时状态切换，按压、拖拽与输入功能不受影响。