leefer/xiaobaifupan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: blend heaven rituals into paper surface

Browse Source
This commit is contained in:
leefer
2026-07-24 00:21:02 +08:00
parent 35a41d616c
commit 3c79a4976b
2 changed files with 23 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/heaven-loading.js
+22 -18
View File
@@ -1,20 +1,23 @@
(function exposeHeavenLoading(global) {
"use strict";
const DARK_INK = "#0b0e1e";
const INK = "#e6c37a";
const INK_BRIGHT = "#f7e3b4";
const GOLD = "#e6c37a";
const GOLD_BRIGHT = "#f7e3b4";
const CINNABAR = "#d8564a";
const DIM = "rgba(216,205,180,0.55)";
const PAPER = "#fdfcf8";
const PAPER_CENTER = "#f1e8d9";
const NODE_TEXT = "#fffaf0";
const INK = "#68493d";
const INK_BRIGHT = "#963f37";
const GOLD = "#80533e";
const GOLD_BRIGHT = "#b64e43";
const CINNABAR = "#b94038";
const DIM = "rgba(68,57,49,0.62)";
const PARTICLE_COLORS = ["#a94b42", "#456b62", "#506b85"];
const SERIF = '"Noto Serif SC","Songti SC","STSong","SimSun",serif';
const ELEMENT_COLORS = {
木: "#7fb069",
火: "#d8564a",
土: "#d9a441",
金: "#e6dec4",
水: "#5b84b8",
木: "#4f7a4a",
火: "#b3483d",
土: "#96702c",
金: "#70685b",
水: "#496d92",
};
const QI6 = [
{ name: "厥阴风木", element: "木" },
@@ -101,6 +104,7 @@
radius: 0.3 + random() * 1.3,
phase: random() * Math.PI * 2,
speed: 0.00015 + random() * 0.0004,
colorIndex: Math.floor(random() * PARTICLE_COLORS.length),
}));
}
@@ -202,16 +206,16 @@
const cx = width / 2;
const cy = height * 0.44;
const gradient = ctx.createRadialGradient(cx, cy, 0, cx, cy, Math.max(width, height) * 0.75);
gradient.addColorStop(0, "#10142a");
gradient.addColorStop(0.45, "#0b0e1e");
gradient.addColorStop(1, "#05060d");
gradient.addColorStop(0, PAPER_CENTER);
gradient.addColorStop(0.52, "#faf7ef");
gradient.addColorStop(1, PAPER);
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, width, height);
for (const star of this.stars) {
const twinkle = 0.35 + 0.65 * (0.5 + 0.5 * Math.sin(star.phase + now * 0.0012));
const alpha = twinkle * 0.5;
ctx.globalAlpha = alpha;
ctx.fillStyle = GOLD;
ctx.fillStyle = PARTICLE_COLORS[star.colorIndex];
const y = ((star.y + now * star.speed) % 1) * height;
ctx.fillRect(star.x * width, y, star.radius, star.radius);
}
@@ -459,7 +463,7 @@
if (freshness > 0) {
const ctx = this.context;
const gradient = ctx.createLinearGradient(cx, cy, x, y);
gradient.addColorStop(0, "rgba(230,195,122,0)");
gradient.addColorStop(0, "rgba(128,83,62,0)");
gradient.addColorStop(1, GOLD);
this.line(cx, cy, x, y, gradient, alpha * freshness * 0.35);
}
@@ -527,7 +531,7 @@
const y = degrees === null ? cy : cy + Math.sin(degrees * Math.PI / 180) * radius * progress;
positions[element] = [x, y];
this.node(x, y, nodeRadius * progress, ELEMENT_COLORS[element], alpha * progress, 16);
this.label(element, x, y + 0.5, Math.round(nodeRadius * 1.15), DARK_INK, alpha * progress, "600");
this.label(element, x, y + 0.5, Math.round(nodeRadius * 1.15), NODE_TEXT, alpha * progress, "600");
const direction = element === "土" ? "中央土" : { 木: "东方木", 火: "南方火", 金: "西方金", 水: "北方水" }[element];
this.label(direction, x, y + nodeRadius + 14, 12, ELEMENT_COLORS[element], alpha * progress * 0.75);
});