FOXHUD｜未完成的回声

与FOXHUD一同观看这世界的诞生

光穿过结构，时间留下回声。
每一次移动，都让边界退后一寸。

npm i animejs

万象在此
缓慢成形

没有说明书，只有光、形、引力与时间彼此牵引。

直觉先于语言

念头掠过，形态便开始回应。

形态越过边界

每一次扭转，都让旧秩序松动一寸。

行进唤醒空间

向下，是深入；停驻，也是呼吸。

涟漪向外扩散

微小的时差，让群体拥有了生命。

线条开始呼吸

轮廓脱离静止，在虚空中留下行迹。

惯性替你说话

推、拉、释放；力量会记住来时的方向。

时间开始咬合

无数瞬间相互扣合，成为一台看不见的机器。

万物回应此刻

尺度改变，方向改变，节奏也随之重写。

轻盈穿过
所有边界

复杂沉入幕后，只留下清晰的运动与余光。

余响仍在生长

画面结束以后，FOXHUD 的轨迹仍在记忆里缓慢移动。

Become a sponsor

不要寻找答案

FOXHUD 不提供答案，只继续向前。
下一秒，会替你完成剩下的部分。

animate('.square', {
  rotate: 90,
  loop: true,
  ease: 'inOutExpo',
});

animate('.shape', {
  x: random(-100, 100),
  y: random(-100, 100),
  rotate: random(-180, 180),
  duration: random(500, 1000),
  composition: 'blend',
});

animate('.car', {
  ...createMotionPath('.circuit'),
});

animate(createDrawable('.circuit'), {
  draw: '0 1',
});

animate('.circuit-a', {
  d: morphTo('.circuit-b'),
});

animate(createDrawable('path'), {
  draw: ['0 0', '0 1', '1 1'],
  delay: stagger(40),
  ease: 'inOut(3)',
  autoplay: onScroll({ sync: true }),
});

const options = {
  grid: [13, 13],
  from: 'center',
};

createTimeline()
  .add('.dot', {
    scale: stagger([1.1, .75], options),
    ease: 'inOutQuad',
  }, stagger(200, options));

createDraggable('.circle', {
  releaseEase: createSpring({
    stiffness: 120,
    damping: 6,
  })
});

createTimeline()
  .add('.tick', {
    y: '-=6',
    duration: 50,
  }, stagger(10))
  .add('.ticker', {
    rotate: 360,
    duration: 1920,
  }, '<');

createScope({
  mediaQueries: {
    portrait: '(orientation: portrait)',
  }
})
.add(({ matches }) => {
  const isPortrait = matches.portrait;
  createTimeline().add('.circle', {
    y: isPortrait ? 0 : [-50, 50, -50],
    x: isPortrait ? [-50, 50, -50] : 0,
  }, stagger(100));
});

Bundle size

24.50 KB