Candidate Sourcing Tool · GSAP 动效方案对比

三个方向都保持 Lev8 现有 UX 骨架(暖白底 / 墨色标题 / 金黄高亮 / 大圆角卡片),差异在动效语言和交互强度。每个卡片都是完整可滚动的高保真 mock,点击进入后请滚动全页体验、并试试悬停按钮 / 点击 chips / 展开 FAQ。

1Precision Boot 精准唤醒 · 稳

动效语言:页面像仪器开机一样按序点亮——吉祥物弹入、标题逐词从模糊到清晰、composer 上浮并带一圈流动的光边,数据计数器滚动;滚动时各 section 分层浮现,步骤卡顶部有进度条划过。交互:磁吸 CTA、弹性 chips、卡片 3D 倾斜、输入框职位名自动打字轮播。取舍:最克制、性能最稳、最接近现有 UX,科技感靠精密的时序而非视觉元素。

打开完整预览

2Sourcing Pipeline 寻源流水线 · 叙事

动效语言:把「JD → 候选人 → 联系方式 → 意向信号 → 触达」的产品流程变成页面的主线:hero 下方有一条不断点亮的流水线轨道,顶部 header 有全页阅读进度条;签名交互是 How-to-Use 变成钉住滚动(pin+scrub)的动画舞台——随滚动,JD 卡片流向候选人 chips、再汇成一封写好的 outreach 邮件,连接线实时绘制。取舍:叙事最强、最能讲清产品价值,但改动幅度中等偏大。

打开完整预览

3Talent Radar 人才雷达 · 最科技

动效语言:hero 是一片「候选人星座」——canvas 粒子节点场随光标游动避让、互相连线,吉祥物外套雷达扫描环,技能 chips 无限跑马灯(LLMs · 48k profiles…);section 用 clip-path 擦除式揭示 + 扫描线掠过,表格有光束扫过,卡片有跟随光标的聚光高亮。取舍:科技感最强、氛围最足,需注意低端设备性能(已做 reduced-motion 降级)。

打开完整预览
怎么选:在聊天里回 1 / 2 / 3 即可,我会把选中的方案落到真实页面(React + GSAP,接入现有组件与配置体系)。也可以组合,例如「2 的 pinned 流水线 + 1 的 hero 开机序列」。三个方案都遵守 prefers-reduced-motion 并保留全部 SEO 文案结构。