1
const ctx = canvas.getContext("2d");
2

3
function frame(t) {
4
  ctx.fillStyle = "rgba(20, 12, 32, 0.08)";
5
  ctx.fillRect(0, 0, canvas.width, canvas.height);
6
  for (const p of particles) {
7
    const angle = Math.sin(p.x * 0.006 + t * 0.0003) + Math.cos(p.y * 0.007);
8
    ctx.beginPath();
9
    ctx.moveTo(p.x, p.y);
10
    p.x += Math.cos(angle);
11
    p.y += Math.sin(angle);
12
    ctx.lineTo(p.x, p.y);
13
    ctx.stroke();
14
  }
15
  requestAnimationFrame(frame);
16
}
17
requestAnimationFrame(frame);

1
const spin = ring.animate(
2
  [{ rotate: "0deg" }, { rotate: "360deg" }],
3
  { duration: 24000, iterations: Infinity },
4
);
5

6
// 十二颗菱形共用一组关键帧，用 delay 错开
7
diamonds.forEach((d, i) =>
8
  d.animate([{ opacity: 0.35 }, { opacity: 1 }, { opacity: 0.35 }], {
9
    duration: 2400,
10
    delay: i * 200,
11
    iterations: Infinity,
12
  }),
13
);
14

15
spin.playbackRate = -1; // 倒放
16
spin.pause();

1
.track {
2
  overflow-y: auto;
3
  scroll-timeline: --loop block; /* 给滚动容器的进度命名 */
4
}
5
.progress {
6
  animation: grow linear both;
7
  animation-timeline: --loop;
8
}
9
.card {
10
  animation: pass linear both;
11
  animation-timeline: view(block); /* 卡片穿过可视区域的进度 */
12
}

1
cards.forEach((card, i) => (card.style.viewTransitionName = `card-${i}`));
2

3
grid.addEventListener("click", (e) => {
4
  const card = e.target.closest(".card");
5
  document.startViewTransition(() => {
6
    card.classList.toggle("is-big");
7
    grid.prepend(card);
8
  });
9
});

1
import * as THREE from "three";
2
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
3

4
const renderer = new THREE.WebGLRenderer({ antialias: true });
5
const scene = new THREE.Scene();
6
const camera = new THREE.PerspectiveCamera(35, width / height, 0.1, 50);
7
camera.position.z = 6;
8
const controls = new OrbitControls(camera, renderer.domElement);
9

10
const face = new THREE.MeshStandardMaterial({
11
  emissive: 0xb48cff,
12
  emissiveMap: new THREE.TextureLoader().load("/images/fx/shield.webp"),
13
});
14
const shield = new THREE.Mesh(new THREE.CylinderGeometry(1.6, 1.6, 0.16, 128), face);
15
shield.rotation.x = Math.PI / 2;
16
scene.add(shield, new THREE.HemisphereLight(0xffffff, 0x222222, 1));
17

18
renderer.setAnimationLoop(() => {
19
  controls.update();
20
  renderer.render(scene, camera);
21
});

1
float r = length(p);
2
float a = atan(p.y, p.x);
3
float curl = a + 0.55 * sin(r * 5.5 - uTime * 1.1);
4
float petal = pow(abs(cos(curl * 3.0)), 6.0);      // 六片花瓣
5
float body = petal * smoothstep(0.85, 0.12, r);     // 越靠外越淡
6
col = mix(col, vec3(0.95, 0.15, 0.3), body);

1
import { Renderer, Program, Mesh, Triangle } from "ogl";
2

3
const renderer = new Renderer({ dpr: 2 });
4
const gl = renderer.gl;
5
const program = new Program(gl, { vertex, fragment, uniforms: { uTime: { value: 0 } } });
6
const mesh = new Mesh(gl, { geometry: new Triangle(gl), program });
7

8
requestAnimationFrame(function frame(t) {
9
  program.uniforms.uTime.value = t / 1000;
10
  renderer.render({ scene: mesh });
11
  requestAnimationFrame(frame);
12
});

1
@group(0) @binding(1) var<storage, read_write> particles: array<vec4f>;
2

3
@compute @workgroup_size(64)
4
fn main(@builtin(global_invocation_id) id: vec3u) {
5
  let p = particles[id.x];
6
  var pos = p.xy;
7
  var vel = p.zw;
8
  let dir = normalize(pos);
9
  let ring = select(0.66, 0.42, id.x % 2u == 1u);   // 小圆在外圈，焰在内圈
10
  var force = -dir * (length(pos) - ring) * 14.0;   // 回到各自的环上
11
  force += vec2f(-dir.y, dir.x) * select(0.55, -0.75, id.x % 2u == 1u);  // 反向绕行
12
  vel = (vel + force * params.dt) * 0.985;
13
  particles[id.x] = vec4f(pos + vel * params.dt, vel);
14
}

1
import { Application, Assets, Sprite } from "pixi.js";
2

3
const app = new Application();
4
await app.init({ resizeTo: container, backgroundAlpha: 0 });
5
container.append(app.canvas);
6

7
const texture = await Assets.load("/images/fx/feather-0.webp");
8
for (let i = 0; i < 700; i++) {
9
  const feather = new Sprite(texture);
10
  feather.anchor.set(0.5);
11
  feather.tint = 0xd9c8ff;
12
  app.stage.addChild(feather);
13
}
14
app.ticker.add(({ deltaTime }) => {
15
  // 更新每个精灵的位置与旋转
16
});

1
import Matter from "matter-js";
2
const { Engine, Bodies, Composite, Mouse, MouseConstraint } = Matter;
3

4
const engine = Engine.create();
5
const floor = Bodies.rectangle(width / 2, height + 30, width, 60, { isStatic: true });
6
const plush = Bodies.circle(200, -80, 46, { restitution: 0.35 });
7
Composite.add(engine.world, [floor, plush]);
8
Composite.add(engine.world, MouseConstraint.create(engine, { mouse: Mouse.create(canvas) }));
9

10
requestAnimationFrame(function frame() {
11
  Engine.update(engine, 1000 / 60);
12
  drawImageAt(plush.position, plush.angle); // 绘制交给 Canvas 2D
13
  requestAnimationFrame(frame);
14
});

1
import { gsap } from "gsap";
2
import { SplitText } from "gsap/SplitText";
3
gsap.registerPlugin(SplitText);
4

5
const chars = SplitText.create(title, { type: "chars" }).chars;
6
const tl = gsap.timeline({ defaults: { ease: "power3.out" } });
7

8
tl.from(homura, { xPercent: -160, opacity: 0, duration: 0.8 })
9
  .from(madoka, { xPercent: 220, opacity: 0, duration: 0.9 }, "-=0.3")
10
  .to(dial, { rotation: 720, duration: 1.2, ease: "power4.out" }, "stop")
11
  .to(featherFall, { timeScale: 0, duration: 0.6 }, "stop+=0.4")   // 羽毛定格
12
  .to(background, { filter: "grayscale(1)", duration: 0.8 }, "stop+=0.5")
13
  .from(chars, { y: -60, opacity: 0, stagger: 0.12, ease: "bounce.out" }, "stop+=0.7");
14

15
tl.reverse(); // 整条时间线倒放

1
import { animate, hover, spring } from "motion";
2

3
stage.addEventListener("pointermove", ({ offsetX: x, offsetY: y }) => {
4
  animate(madoka, { x, y }, { type: spring, stiffness: 260, damping: 18 });
5
  // 更软的弹簧加延迟，焰总是慢半拍
6
  animate(homura, { x: x - 70, y }, { type: spring, stiffness: 70, damping: 12, delay: 0.12 });
7
});
8

9
hover(kyubey, () => {
10
  animate(kyubey, { y: -18 });
11
  return () => animate(kyubey, { y: 0 });
12
});

1
import { animate, stagger, svg } from "animejs";
2

3
animate(svg.createDrawable(".emblem path"), {
4
  draw: ["0 0", "0 1", "1 1"],   // 从无到描满，再从起点擦除
5
  delay: stagger(260),
6
  loop: true,
7
});
8

9
grid.addEventListener("click", (e) => {
10
  animate(cells, {
11
    scale: [1, 1.6, 1],
12
    fill: ["#8b5cf6", "#f472b6", "#5b21b6"],
13
    delay: stagger(55, { grid: [12, 7], from: Number(e.target.dataset.index) }),
14
  });
15
});