Animaginary 品牌官网重设计

设计目标

Animaginary 的核心优势在于极致性能，但旧站点只展示了 API 文档，缺少与开发者情感共鸣的表达。我们决定利用动画本身讲述产品价值。

关键探索

• 叙事节奏：将首页拆分为四段“电影镜头”，每段强调一个能力，从视觉到文案形成高强度记忆点。
• 性能演示：引入实时对比基准，通过 requestIdleCallback 控制 demo 渲染，确保体验稳定在 60fps。
• 品牌统一：设计动态 logo 与组件库，建立颜色、粒子密度、动态模糊等统一变量，方便衍生营销素材。

import { animate } from '@animaginary/core'

export function Benchmark() {
  return animate.canvas({
    sampleCount: 8000,
    onFrame: ({ context, progress }) => {
      context.blur = easeOutCubic(progress) * 12
    },
  })
}

发布结果

• 官网平均停留时长提升 2.4 倍。
• GitHub Star 增长速度提升 180%。
• 获得多家媒体报道，成功建立“性能与美学兼备”的品牌心智。

与市场团队合作的过程也让我意识到：当设计语言与叙事框架统一时，开发者会更愿意接受产品故事。