空间 · 立体感知

Bento Grid 遇上 3D Tilt 磁吸 —— 前所未有的未来感交互体验。

3D 磁吸引擎

基于鼠标坐标的实时 X/Y 轴倾斜(±5°),配合 perspective: 1000px 景深系统,营造出卡片在空间中悬浮的立体视差。

0.3ms响应延迟
Tilt 3DParallax60fps

SVG 路径绘制

所有图标均为手写极简 SVG,配备 stroke-dasharray / stroke-dashoffset 路径动画,悬停时触发重新绘制。

纤细 1.5px 描边
stroke-dasharray: 200
1.8s 入场过渡

流光边框

Conic-gradient 在 hover 时环绕一周旋转,配合 mask-composite: exclude 实现仅边框流光效果。

2.5s旋转周期
Conic GradientMask

动态噪点纹理

SVG feTurbulence 噪点滤镜固定覆盖视口,Dark/Light 双模式自动适配 opacity。

feTurbulenceDark/Light

主题系统

基于 oklch 色彩空间的 Dark/Light 双模式。CSS 自定义属性驱动,噪点 opacity 亮色模式自动降至 0.025。

96%oklch 色域覆盖

响应式 Bento

大屏 4 列栅格 → 中屏 2 列 → 移动端自动降级为流体列表。

CSS Gridclamp()Mobile First

自愈渲染 2.0

@supports 检测 backdrop-filter, CSS Grid, oklch 兼容性,降级自动切换纯色方案。

@supports 检测
backdrop-filter 降级
✓ 自愈渲染已激活