墨池 Inkpond · 网页水墨汉字背景库

六卷 · SIX SCROLLS

一层铺在页面背后的水墨。
字按笔画疏密成画，鼠标是风，点击是墨。

山水Shanshui

两重远山，云雾从山腰飘过。最安静的一卷，默认场景。

划过起波
点击落墨
云雾自己飘

浓淡scene="shanshui"

荷塘Lotus Pond

俯看一方荷塘。鲤鱼绕开页面内容游动，靠近会散开，落墨处会游过来抢食。

鲤鱼躲开你
落墨引鱼
游到荷叶下隐去

淡彩浓淡scene="lotus"

清明上河Along the River at Qingming

长卷缓缓向左展开：群山之下城郭绵延，宝塔高耸，两岸酒旗飞檐，木拱虹桥从近岸拱起、越过河面落在远岸，桥头集市熙攘，桥边大船正放倒桅杆。

长卷自己展开
船夫撑船
落墨惊散行人

淡彩浓淡scene="qingming"

二十四节气The 24 Solar Terms

二十四节气，一节一画，按今天的日期自动选：立春冰裂、立夏蛙鸣、寒露雁阵变换、霜降霜花从边缘结出、冬至长夜里一点朱阳。页面开着跨入下一个节气，会以墨晕过渡过去。

随日期轮换
落墨各有回应
term 固定一个

淡彩浓淡scene="jieqi"

北冥The Northern Deep

俯看一片深海。鲸的影子在浪下缓缓游过，约一分钟浮起又沉没一次；游得浅时，海面会留下一片片平静的鲸迹。

浮起又沉没
触到它就下潜
落墨引它游近

淡彩浓淡scene="beiming"

大肥鲸The Big Fat Whale

一条圆滚滚的鲸，守着一碗白米饭——饭是留白。饿了就埋头干饭，越吃越胖；吃撑了打个嗝，从喷气孔喷出一串米，瘪回原样。

干饭变胖打嗝
戳它会笑
落墨撒一把米

淡彩浓淡scene="dafeijing"

用法 · USAGE

React

import { InkPond } from "inkpond/react";
import "inkpond/inkpond.css";

<main style={{ position: "relative" }}>
  <InkPond scene="qingming" />
  <h1 data-inkpond-avoid="">今天想做点什么？</h1>
</main>

原生

import { createInkPond } from "inkpond";
import "inkpond/inkpond.css";

const pond = createInkPond(canvas, { scene: "lotus" });
pond.ripple(x, y, 0.6); // 拨动水面
pond.drop(x, y);        // 落墨

画布铺满最近的定位父元素；带 data-inkpond-avoid 的元素周围自动留白，鱼、船、行人也会绕开它。

性能 · PERFORMANCE

0: 运行时依赖
0.7: ms / 帧，静水时的脚本开销
1.9: ms / 帧，满屏搅动的 p95
6–29: KiB，每个场景的字体子集，按需加载
30: 秒无操作即停帧，下一次输入再醒

每帧只从预先栅格化的字形图集贴图；静止的画面按尺寸预算，慢变层每 4 帧重算一次；性能不够时自动降到轻量档或静帧，标签页隐藏即暂停。

一层铺在页面背后的水墨。字按笔画疏密成画，鼠标是风，点击是墨。