获奖网站拆解：Awwwards SOTD 的设计模式

// 1. 初始化 Lenis 平滑滚动
const lenis = new Lenis({
  duration: 1.2,          // 插值时长，越大越“黏”
  easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
  smoothWheel: true,
  wheelMultiplier: 1,
  touchMultiplier: 2,
});

// 2. 把 Lenis 的滚动同步到 GSAP 的 ticker
lenis.on('scroll', ScrollTrigger.update);

gsap.ticker.add((time) => {
  lenis.raf(time * 1000);
});
gsap.ticker.lagSmoothing(0);

// 把 hero section 钉住，用滚动进度驱动三段卡片横向移动
const track = document.querySelector('.card-track');
const cards = track.querySelectorAll('.card');

gsap.to(track, {
  x: () => -(track.scrollWidth - window.innerWidth),
  ease: 'none',
  scrollTrigger: {
    trigger: '.hero-section',
    start: 'top top',
    end: () => '+=' + (track.scrollWidth - window.innerWidth),
    pin: true,
    scrub: 1,          // 滚动进度有 1s 的惯性追赶
    invalidateOnRefresh: true,
  }
});

// 背景层以 0.4 倍速率移动，前景层正常速度
gsap.to('.bg-layer', {
  yPercent: 40,
  ease: 'none',
  scrollTrigger: {
    trigger: start: 'top bottom',
    end: 'bottom top',
    scrub: true,
  }
});

// 鼠标移动产生的微视差——只对 hero 区域生效
window.addEventListener('mousemove', (e) => {
  const x = (e.clientX / window.innerWidth - 0.5) * 20;
  const y = (e.clientY / window.innerHeight - 0.5) * 20;
  gsap.to('.hero-bg', { x, y, duration: 1, ease: 'power2.out' });
});

import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
import { UnrealBloomPass } from 'three/examples/jsm/postprocessing/UnrealBloomPass.js';
import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js';
import { FilmPass } from 'three/examples/jsm/postprocessing/FilmPass.js';
import { RGBShiftShader } from 'three/examples/jsm/shaders/RGBShiftShader.js';

// 用 composer 取代 renderer.render()
const composer = new EffectComposer(renderer);
composer.addPass(new RenderPass(scene, camera));

// Bloom：让高光区域溢出辉光
const bloom = new UnrealBloomPass(
  new THREE.Vector2(window.innerWidth, window.innerHeight),
  0.8,   // strength：辉光强度
  0.4,   // radius：扩散半径
  0.85   // threshold：只对亮度高于此值的像素生效
);
composer.addPass(bloom);

// RGB Shift：色散，让边缘出现红蓝错位
const rgbShift = new ShaderPass(RGBShiftShader);
rgbShift.uniforms['amount'].value = 0.0015;
composer.addPass(rgbShift);

// Film Grain：胶片颗粒 + 扫描线
const film = new FilmPass(0.35, false);
composer.addPass(film);

// 渲染循环里调用 composer 而非 renderer
function animate() {
  requestAnimationFrame(animate);
  composer.render();
}

// 径向色散：距中心越远，R/B 通道偏移越大
const ChromaticAberrationShader = {
  uniforms: {
    tDiffuse: { value: null },
    uAmount:   { value: 0.002 },
  },
  vertexShader: `
    varying vec2 vUv;
    void main() {
      vUv = uv;
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
  `,
  fragmentShader: `
    uniform sampler2D tDiffuse;
    uniform float uAmount;
    varying vec2 vUv;
    void main() {
      vec2 dir = vUv - vec2(0.5);       // 从中心出发的方向向量
      float dist = length(dir);
      vec2 offset = dir * dist * uAmount; // 距中心越远偏移越大
      float r = texture2D(tDiffuse, vUv + offset).r;
      float g = texture2D(tDiffuse, vUv).g;
      float b = texture2D(tDiffuse, vUv - offset).b;
      gl_FragColor = vec4(r, g, b, 1.0);
    }
  `,
};

const caPass = new ShaderPass(ChromaticAberrationShader);
composer.addPass(caPass);

// 1. 创建物理世界
const { Engine, Render, Runner, Bodies, Composite, Mouse, MouseConstraint } = Matter;

const engine = Engine.create();
const world = engine.world;

// 2. 创建边界墙（看不见的）
const walls = [
  Bodies.rectangle(400, 600, 800, 50, { isStatic: true }), // 地面
  Bodies.rectangle(0, 300, 50, 600, { isStatic: true }),   // 左墙
  Bodies.rectangle(800, 300, 50, 600, { isStatic: true }),  // 右墙
];
Composite.add(world, walls);

// 3. 创建可拖拽的卡片刚体
const cards = [];
for (let i = 0; i < 12; i++) {
  const card = Bodies.rectangle(
    Math.random() * 800,
    Math.random() * 200,
    120, 160,
    {
      restitution: 0.6,   // 弹性系数：碰撞后回弹力度
      friction: 0.1,     // 摩擦力
      frictionAir: 0.01, // 空气阻力：值越大掉得越慢
    }
  );
  cards.push(card);
}
Composite.add(world, cards);

// 4. 接入鼠标拖拽
const mouse = Mouse.create(render.canvas);
const mouseConstraint = MouseConstraint.create(engine, {
  mouse: mouse,
  constraint: {
    stiffness: 0.2,   // 拖拽时的“弹性”：越小越软
    render: { visible: false }
  }
});
Composite.add(world, mouseConstraint);

// 5. 启动引擎
const runner = Runner.create();
Runner.run(runner, engine);

// 每个 DOM 卡片与一个刚体绑定
const domCards = document.querySelectorAll('.dom-card');

// 用 GSAP ticker 替代 setInterval，与浏览器渲染对齐
gsap.ticker.add(() => {
  cards.forEach((body, i) => {
    const el = domCards[i];
    const { position, angle } = body;
    // 用 transform 而非 left/top，触发 GPU 合成
    el.style.transform =
      `translate(${position.x}px, ${position.y}px) rotate(${angle}rad)`;
  });
});

import * as CANNON from 'cannon-es';

// 物理世界：重力沿 Y 轴向下
const world = new CANNON.World({
  gravity: new CANNON.Vec3(0, -9.82, 0),
});

// 地面：静态平面
const groundBody = new CANNON.Body({
  mass: 0, // mass=0 表示静态
  shape: new CANNON.Plane(),
});
groundBody.quaternion.setFromEuler(-Math.PI / 2, 0, 0);
world.addBody(groundBody);

// 一堆盒子：动态刚体，与 Three.js mesh 一一对应
const boxes = [];
for (let i = 0; i < 30; i++) {
  const body = new CANNON.Body({
    mass: 1,
    shape: new CANNON.Box(new CANNON.Vec3(0.5, 0.5, 0.5)),
    position: new CANNON.Vec3(
      (Math.random() - 0.5) * 4,
      Math.random() * 5 + 2,
      (Math.random() - 0.5) * 4
    ),
    material: new CANNON.Material({ friction: 0.4 }),
  });
  world.addBody(body);
  boxes.push({ body, mesh: meshes[i] });
}

// 渲染循环：物理步进 + 同步到 mesh
const fixedTimeStep = 1 / 60;
function animate() {
  requestAnimationFrame(animate);
  world.step(fixedTimeStep);
  boxes.forEach(({ body, mesh }) => {
    mesh.position.copy(body.position);
    mesh.quaternion.copy(body.quaternion);
  });
  renderer.render(scene, camera);
}

/* 用 font-variation-settings 控制可变轴 */
.hero-title {
  font-family: 'Syne', sans-serif;
  font-variation-settings: 'wght' 400, 'wdth' 100;
  transition: font-variation-settings 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-title:hover {
  font-variation-settings: 'wght' 800, 'wdth' 125;
}

// 把标题拆成字符，并包裹一层 overflow:hidden 的容器做“揭示”
const split = gsap.utils.toArray('.reveal-title').map(el => {
  return new SplitText(el, { type: 'chars,words', mask: 'chars' });
});

// 逐字从下方滑入，配合 mask 形成揭示效果
split.forEach(s => {
  gsap.from(s.chars, {
    yPercent: 130,
    duration: 0.8,
    ease: 'power4.out',
    stagger: 0.03,        // 每个字符间隔 30ms
    scrollTrigger: {
      trigger: s.elements[0],
      start: 'top 80%',
    }
  });
});

// 循环替换标语
const words = ['滚动叙事', '后处理管线', '物理交互', '字体动效'];

const tl = gsap.timeline({ repeat: -1 });

words.forEach(word => {
  tl.to('#typewriter', {
    duration: 0.8,
    text: word,
    ease: 'none',
    onStart: () => document.querySelector('#cursor').style.opacity = 1,
  })
  .to('#typewriter', { duration: 1.5, text: word }) // 停留
  .to('#typewriter', {
    duration: 0.4,
    text: '',
    ease: 'none',
  });
});