Claude Haiku 5 5 在「SVG 蒙版文字聚光灯效果」的评测结果

这是该 AI 模型在此测试用例上的详细评测结果。

基本信息

  • 模型名称：Claude Haiku 5 5
  • 用例名称：SVG 蒙版文字聚光灯效果
  • 测试类型：网页生成
  • 评测维度：SVG 矢量动画

系统提示词（System Prompt）

这是给 AI 模型的背景设定和角色指令：

你是一名前端开发工程师。 代码要求： 1. 生成完整的单页 HTML 应用 2. CSS 和 JavaScript 内联在 HTML 文件中 3. 代码结构清晰，有适当注释

用户提示词（User Prompt）

这是用户给 AI 模型的具体任务要求：

创建一个 SVG 蒙版文字聚光灯效果页面。 功能要求： - 页面背景为纯黑色 - 页面中央有一段文字（如「探索黑暗中的光」），默认不可见或极暗 - 鼠标在页面上移动时，以鼠标位置为圆心产生一个圆形聚光灯区域 - 聚光灯范围内的文字变为可见的白色或亮色 - 使用 SVG mask 或 radial-gradient 实现遮罩效果

任务要求

AI 模型需要满足以下要求：

  1. 页面背景为纯黑色
  2. 页面中央有可辨认的文字内容
  3. 鼠标移动时产生圆形聚光灯区域
  4. 聚光灯内文字清晰可见，聚光灯外文字不可见或极暗
  5. 效果跟随鼠标实时更新

评测结果

综合得分

该模型在此用例的得分为：92.9 分（满分 100 分），已通过

基础难度评测结果

  • 得分：92.9 分
  • 通过状态：已通过

模型生成产物

以下是该模型针对此任务的实际生成内容：

下面是一个完整的单文件 HTML 页面。文字默认几乎不可见，鼠标移动时，SVG `` 中的圆形区域会跟随光标，并通过高斯模糊产生柔和的聚光边缘。 ```html SVG 蒙版文字聚光灯 /* ========== 基础样式 ========== */ html, body { margin: 0; height: 100%; background: #000; /* 纯黑背景 */ overflow: hidden; cursor: none; /* 隐藏系统光标，让聚光灯成为焦点 */ } #stage { display: block; width: 100vw; height: 100vh; user-select: none; } /* 暗层文字：默认状态下几乎不可见的颜色 */ .dim { fill: #161616; } /* 亮层文字：通过 mask 只在聚光灯范围内显示 */ .bright { fill: #ffffff; filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.35)); } /* 文字字体设置（ 引用的文字会继承这里的字体） */ #title text { font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif; text-anchor: middle; dominant-baseline: middle; } 探索黑暗中的光 移动鼠标，照亮隐藏的文字 /* ========== 元素引用 ========== */ const svg = document.getElementById('stage'); const spot = document.getElementById('spot'); const maskBg = document.getElementById('maskBg'); const blur = document.getElementById('blur'); const line1 = document.getElementById('line1'); const line2 = document.getElementById('line2'); /* ========== 状态 ========== */ let W = window.innerWidth; let H = window.innerHeight; // 鼠标目标位置（用于平滑跟随） const target = { x: W / 2, y: H / 2 }; // 当前聚光灯的实际位置和半径（每帧插值逼近目标） const current = { x: W / 2, y: H / 2, r: 0 }; // 聚光灯目标半径：鼠标在页面内时为 targetR，离开页面时为 0（完全隐藏） let targetR = 0; let hovering = false; // 根据视口尺寸计算聚光灯半径 function getSpotRadius() { return Math.max(120, Math.min(W, H) * 0.18); } /* ========== 布局：根据视口大小调整 SVG 与文字 ========== */ function layout() { W = window.innerWidth; H = window.innerHeight; // 让 SVG 的坐标系与像素一致，便于直接使用 clientX / clientY svg.setAttribute('viewBox', `0 0 ${W} ${H}`); // 背景与遮罩底层尺寸 maskBg.setAttribute('width', W); maskBg.setAttribute('height', H); // 主标题与副标题的位置、字号 const fs1 = Math.min(W * 0.07, 96); const fs2 = fs1 * 0.3; line1.setAttribute('x', W / 2); line1.setAttribute('y', H / 2 - fs2 * 0.6); line1.setAttribute('font-size', fs1); line2.setAttribute('x', W / 2); line2.setAttribute('y', H / 2 + fs1 * 0.5); line2.setAttribute('font-size', fs2); //...

AI 评审点评

以下是 AI 评审对该模型输出的点评：

【CLAUDE】该候选输出高质量地完成了 SVG 蒙版文字聚光灯效果的全部核心需求，技术实现正确、视觉效果精良、代码组织规范。在满足基础功能的同时，还加入了缓动动画、边缘柔化、响应式布局、触摸支持等增强特性，整体表现超出「basic」难度的预期水准，是一份完成度很高的答案。 【GEMINI】生成结果质量极高。模型不仅准确理解并完全实现了 SVG mask 聚光灯遮罩的所有技术与交互要求，还在动画缓动（lerp）、光照柔化（SVG feGaussianBlur 滤镜）、自适应排版及手势/指针支持等细节上做了完善的处理，产出了开箱即用且体验优秀的单页应用。 【KIMI】该候选输出是一份高质量的SVG蒙版聚光灯效果实现。技术方案选型精准：SVG mask + feGaussianBlur的组合完美契合题目要求，双层<use>结构巧妙实现了'同一文字、两种状态'的需求。交互细节考虑周全，包括平滑动画、响应式布局、触摸支持、离开收缩等。代码可读性和维护性良好，注释清晰。整体属于basic难度下的优秀实现，接近满分水平。

进阶难度评测结果

  • 得分：93.0 分
  • 通过状态：已通过

模型生成产物

以下是该模型针对此任务的实际生成内容：

下面是一个完整的单文件 HTML 页面。文字用 SVG `` 遮罩，聚光灯使用径向渐变实现柔和边缘，滚轮可调节半径（60–300px），鼠标离开页面时聚光灯淡出。 ```html SVG 蒙版聚光灯 · Spotlight Text * { margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 100%; height: 100%; overflow: hidden; background: #000; font-family: "PingFang SC", "Noto Sans SC", system-ui, sans-serif; user-select: none; } #stage { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; cursor: none; } /* 操作提示 */ .hint { position: fixed; left: 50%; bottom: 36px; transform: translateX(-50%); color: rgba(255, 255, 255, 0.45); font-size: 13px; letter-spacing: 0.2em; white-space: nowrap; pointer-events: none; transition: opacity 1s ease; } .hint.hidden { opacity: 0; } /* 半径 HUD */ .hud { position: fixed; right: 28px; top: 24px; color: rgba(255, 255, 255, 0.55); font-size: 12px; letter-spacing: 0.15em; font-variant-numeric: tabular-nums; pointer-events: none; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; } .hud-bar { width: 140px; height: 2px; background: rgba(255,255,255,0.12); border-radius: 2px; overflow: hidden; } .hud-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #ff006e, #ffbe0b, #3a86ff); transition: width 0.15s ease-out; } 移动鼠标照亮文字 · 滚轮调节光圈 光圈 160 px (() => { const NS = "http://www.w3.org/2000/svg"; const svg = document.getElementById("stage"); const mask = document.getElementById("spotMask"); const maskBg = document.getElementById("maskBg"); const spotGroup = document.getElementById("spotGroup"); const spot = document.getElementById("spot"); const textLayer = document.getElementById("textLayer"); const textGrad = document.getElementById("textGrad"); const cursorDot = document.getElementById("cursorDot"); const hint = document.getElementById("hint"); const hudText = document.getElementById("hudText"); const hudFill = document.getElementById("hudFill"); // 诗句内容（可自行替换） const LINES = [ "黑暗之中，万物都在等待一束光", "你所注视的地方，才会燃起璀璨", "心之所向，便是星河滚烫" ]; const R_MIN = 60, R_MAX = 300; // 状态 let W = 0, H = 0,...

AI 评审点评

以下是 AI 评审对该模型输出的点评：

【CLAUDE】该实现对任务要求的理解准确且全面，六项功能要求均得到落实，SVG mask 技术运用正确，视觉设计有明显的设计感与层次感（流光渐变、辉光滤镜、平滑插值动画、HUD 反馈）。代码结构合理，兼容性考虑周全（触摸、resize、多种离页事件）。整体属于高质量实现，仅有少量边界处理细节可进一步打磨。 【GEMINI】该实现堪称典范，不仅完全且精准地实现了题目要求的各项功能（SVG mask 遮罩、柔和径向渐变聚光灯、60-300px 滚轮缩放、离开淡出隐藏等），还在视觉呈现上加入了动态流光、辉光滤镜和光圈 HUD 状态指示，交互平滑，代码质量极高。 【KIMI】该实现是一个高质量的SVG蒙版聚光灯效果页面，完全满足题目要求的所有功能点。代码结构清晰，视觉效果精美，特别是radialGradient的层次设计和彩色渐变的流光效果表现出色。在SVG mask的专业使用、平滑动画、多设备兼容方面都有良好表现。 minor issues包括mask初始尺寸设置和辉光层同步等细节可进一步优化，但整体已是优秀水准。

困难难度评测结果

  • 得分：92.2 分
  • 通过状态：已通过

模型生成产物

以下是该模型针对此任务的实际生成内容：

下面是一个完整的单文件 HTML 实现，包含 SVG mask 遮罩、lerp 惯性跟随、Shift 钉住光源、开场扩散动画和滚轮调节。 ```html 蒙版聚光灯 · Light Waits in the Dark html, body { margin: 0; height: 100%; background: #000; overflow: hidden; user-select: none; -webkit-user-select: none; cursor: none; } body.shift-mode { cursor: crosshair; } #stage { position: fixed; inset: 0; width: 100%; height: 100%; display: block; } /* 角落操作提示 */ #hud { position: fixed; right: 28px; bottom: 24px; text-align: right; font: 13px/1.8 "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; letter-spacing: .08em; color: rgba(255, 255, 255, .42); pointer-events: none; transition: opacity .8s ease; } #hud kbd { display: inline-block; padding: 0 6px; margin: 0 2px; border: 1px solid rgba(255,255,255,.22); border-radius: 4px; font: 12px/1.6 ui-monospace, Menlo, monospace; color: rgba(255,255,255,.6); } #hud .count { color: rgba(255, 214, 160, .75); } #toast { position: fixed; right: 28px; bottom: 60px; font: 13px system-ui, "PingFang SC", sans-serif; color: #ffd9a8; opacity: 0; transform: translateY(6px); transition: opacity .35s ease, transform .35s ease; pointer-events: none; } #toast.show { opacity: 1; transform: translateY(0); } 滚轮调节大小 · Shift+点击钉住光源 再次点击已钉住的位置可移除 钉住光源 0 / 3 (() => { 'use strict'; const NS = 'http://www.w3.org/2000/svg'; const $ = id => document.getElementById(id); const svg = $('stage'); const spotsG = $('spots'); const ringsG = $('rings'); const textLayer = $('textLayer'); const textGrad = $('textGrad'); const maskBg = $('maskBg'); const countEl = $('count'); const hudEl = $('hud'); const toastEl = $('toast'); /* ---------- 配置 ---------- */ const CFG = { R_MIN: 60, R_MAX: 300, R_DEFAULT: 150, MAX_PINS: 3, LERP_POS: 0.12, // 位置惯性系数（越小越“重”） LERP_R: 0.18, // 半径插值系数 LERP_ALPHA: 0.09, // 渐显/渐隐系数 LERP_PIN: 0.10, // 钉住光源出现/消失系数 INTRO_MS: 2600 // 开场动画时长 }; /* ---------- 文案（自拟，有意境） ---------- */ const LINES = [ '星河坠入你的眼眸', '我把整个夜晚，折成一盏灯', '不急于照亮全部', '只为你停留的那一寸光阴', '黑暗之中，藏着未曾说出口的颜色' ]; const SUBTITLE = 'a light that waits for...

AI 评审点评

以下是 AI 评审对该模型输出的点评：

【CLAUDE】该实现对任务要求的理解深入、覆盖全面，SVG mask 技术路线正确，lerp 帧率无关化处理体现了较高的工程素养。视觉氛围与文案均有较强的设计感，流光渐变与柔和聚光灯边缘相得益彰。主要改进空间在于：跟随光源与钉住光源的视觉差异化、鼠标离开检测的健壮性，以及高频 setAttribute 的性能优化。整体属于高质量实现。 【GEMINI】这是一份极高水准的实现。模型不仅 100% 满足了所有功能与技术指标，而且在动画平滑度（dt 补偿 lerp）、交互反馈（Toast、光标态、计数器）以及视觉艺术质感（文字流动渐变、聚光灯微光环）上展现了专业前端工程师的水准，代码结构清晰规范，无需修改即可直接运行交付。 【KIMI】该实现是一份高质量的 SVG 聚光灯效果代码，在技术深度与视觉完成度上均表现优异。开发者对 SVG mask、requestAnimationFrame、帧率无关插值等核心概念掌握扎实，代码组织清晰且注重细节（如被动事件处理、开场动画分阶段设计、钉住光源的生命周期管理）。主要改进空间在于光标交互的可用性优化（自定义光标或保留指针）以及部分边缘场景的状态同步（钉住瞬间半径捕获时机）。整体达到生产可用水准，可直接作为教学范例。

相关链接

您可以通过以下链接查看更多相关内容：

加载中...
100%