核心理念：零依赖、极速加载、纯原生实现暗黑科技风动效。

🎬 完整动效 Demo（复刻官方风格）：https://fxio.site/harness-demo/

在线体验（可直接交互）

下面的 iframe 内嵌了完整 Demo 页面 —— 粒子网络背景、3D 旋转线框环面、鼠标跟随发光卡片、SVG 数据流、终端复制、滚动渐显全部可用。点击右上角链接可在新窗口打开。

在新窗口打开完整 Demo ↗

效果拆解

本 Demo 包含四个核心动效组件：

  1. 鼠标跟随发光卡片 (Glow Cards) — 鼠标移动时卡片产生跟随光晕
  2. SVG 节点数据管道流动 (Flowing Lines) — 模拟数据在节点间流动
  3. 极简终端代码框 — 暗黑风格的命令行展示
  4. 滚动平滑渐显 (Scroll Reveal) — 基于 IntersectionObserver 的懒加载动画

01. 鼠标跟随发光卡片

Everything is a plugin

基于 Cordis 插件系统架构，模型、工具、Skills、Session 均为可解耦插拔组件。

Every run is traceable

所有上下文与工具调用均重现于 Session 日志中，支持 fork, search 与 replay。

实现原理：

function handleMouseMove(e, card) {
  const rect = card.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;
  card.style.setProperty('--mouse-x', `${x}px`);
  card.style.setProperty('--mouse-y', `${y}px`);
}

通过 CSS 自定义属性 --mouse-x 和 --mouse-y 实时更新鼠标坐标，配合 radial-gradient 生成跟随光晕。

02. SVG 节点数据管道流动

Model Node ➔ Cordis Kernel ➔ Harness Plugins

实现原理：

.ds-flow-path {
  stroke-dasharray: 60 180;
  stroke-dashoffset: 240;
  animation: ds-flow-anim 3s linear infinite;
}

@keyframes ds-flow-anim {
  from { stroke-dashoffset: 240; }
  to { stroke-dashoffset: -240; }
}

利用 SVG 的 stroke-dasharray 和 stroke-dashoffset 动画，模拟数据在管道中流动的效果。

03. 极简终端代码框

$ npx @deepseek-ai/dsh web
Click to copy

纯 CSS 实现的暗黑风格终端，无任何依赖。

04. 滚动平滑渐显

向下滚动触发淡入平移

通过原生 IntersectionObserver 实现，不需要加载第三方 AOS/GSAP JS 库，保证 Hugo 极速加载。

实现原理：

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('visible');
    }
  });
}, { threshold: 0.1 });

document.querySelectorAll('.reveal-box').forEach(el => observer.observe(el));

样式代码

:root {
  --bg-color: #0b0c10;
  --card-bg: rgba(18, 20, 29, 0.75);
  --border-color: rgba(255, 255, 255, 0.08);
  --accent-blue: #3b82f6;
  --accent-cyan: #06b6d4;
  --text-main: #f3f4f6;
  --text-muted: #9ca3af;
}

.ds-card {
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 24px;
  overflow: hidden;
  backdrop-filter: blur(12px);
  transition: border-color 0.3s ease, transform 0.2s ease;
  cursor: pointer;
}

.ds-card:hover {
  transform: translateY(-2px);
  border-color: rgba(59, 130, 246, 0.4);
}

.ds-card-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: radial-gradient(
    400px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(59, 130, 246, 0.18),
    transparent 80%
  );
}

.ds-card:hover .ds-card-glow {
  opacity: 1;
}

适用场景

  • 产品官网 Landing Page
  • 技术文档首页
  • 个人博客主题
  • 任何需要「科技感」的页面

DeepSeek Harness · 纯原生 CSS & Vanilla JS 动效 Demo