解谜游戏总是会有抽屉这种东西，很早以前做 FridayGO 的时候，我就做了一个抽屉。抽屉可以看作一个矩形，开启状态下高度是 h1 也就是整个矩形的全高，关闭状态下高度是 h2 也就是抽屉前面板的高度。当时的方案如果我没记错——父元素会动态调整子元素的高度实现抽屉打开与关闭，而抽屉「容纳」的功能，也是得以实现。抽屉关闭状态下，图像被裁切，子元素也没有点击区域，所以内部的东西不会被点到。抽屉打开，一切就都正常运行。
一个能够交互的抽屉组件
因为在尝试用 React 制作解谜游戏，所以也做了一个 React 的抽屉组件——React 真的很万能。
新的抽屉设计大概长这个样子：一个完整的抽屉，额外注明面板的「高度」，然后可能需要注明能拉出的最大距离（比起注明留在里面的距离，这样更容易适配，也不需要那么精确）。一个是 DrawerSlot，可以接收任何类型的图像，然后接收几个参数，用来控制抽屉的开关状态。
把手如果不传个 SVG 元素进来的话，就直接画个圆。
如何「容纳」别的道具，考虑的是直接传 ReactNode，然后给它在容器里居中。
然后放弃
总的来说，这个设计很不错，作为一个抽屉组件，可以配置尺寸信息，能够互动，能够真的容纳其它组件。
然后这个设计也被放弃了，原因是透视关系冲突。
一个能够滑动出来并且能够容纳物体的抽屉，是一个偏写实的东西。来，正常人看桌子的时候不会蹲着去看它的正视图，能打开抽屉，画面就需要是近景。而，近景的话就特别需要考虑物体的透视关系，要考虑透视关系，绘画的工作量就会变大。
然后迭代
既然抽屉的抽拉动作，让场景变得维和，那么为什么不去掉这个抽拉动作呢，比如点击抽屉，直接弹个窗。碰瓷一下《博德之门3》，它在点击抽屉后就是直接弹一个捡拾窗口，而不会让你去看抽屉里面到底是不是有什么东西。
不过一个全局的弹窗有点太打扰了，于是做了一个超小的弹窗。用 div 拼了一个平面正视图的书桌，并且做了一个 Popover 版本的抽屉。顺便改造了垃圾桶，同样使用了新的 Popover 机制。另外 Popover 留了一个白边，用于和场景中的其它元素进行分隔。
于是我们看到了最终版本的设计，它不只适用于抽屉，还可以给垃圾桶或者别的什么东西用：
可以在 PROJECT ??? 中体验这个设计，动画的部分使用了 motion .