jackyzha0/sunlit

源码：https://github.com/jackyzha0/sunlit https://github.com/user-attachments/assets/b4b2a21b-cbfa-4d09-8475-0946cb96cb62

灵感来自 https://daylightcomputer.com/ 和 https://www.sunlit.place/

组件

基础（base）

• 这里全部只是带背景的 div
• 叶片素材来自 Adobe Stock 图片，我将其缩小到约 300x500，因为我知道反正最终会把它模糊掉

...

Screenshot 2024-11-11 at 1 51 49 PM

渐进模糊（progressive blur）

• 得让扩散效果足够逼真
• 离墙越近的东西应该比离墙远的东西更清晰（模糊程度更低）
• 这里使用多层模糊，每层都有一个蒙版图像来限制其作用区域

#progressive-blur {
    position: absolute;
    height: 100%;
    width: 100%;
}

#progressive-blur>div {
    position: absolute;
    height: 100%;
    width: 100%;
    inset: 0;
    backdrop-filter: blur(var(--blur-amount));
    mask-image: linear-gradient(252deg, transparent, transparent var(--stop1), black var(--stop2), black);
}

#progressive-blur>div:nth-child(1) {
    --blur-amount: 6px;
    --stop1: 0%;
    --stop2: 0%;
}

#progressive-blur>div:nth-child(2) {
    --blur-amount: 12px;
    --stop1: 40%;
    --stop2: 80%;
}

#progressive-blur>div:nth-child(3) {
    --blur-amount: 48px;
    --stop1: 40%;
    --stop2: 70%;
}

#progressive-blur>div:nth-child(4) {
    --blur-amount: 96px;
    --stop1: 70%;
    --stop2: 80%;
}

Screenshot 2024-11-11 at 1 52 01 PM

叶片飘动（leaf billowing）

• 使用小幅度的旋转和缩放制作了叶片飘动效果
• 为了增加些许动感，我使用了 SVG 滤镜以及较少为人知的 feTurbulence 和 feDisplacementMap 标签，为单个叶片的飘动添加更高频的噪声

#leaves {
    position: absolute;
    background-size: cover;
    background-repeat: no-repeat;
    bottom: -20px;
    right: -700px;
    width: 1600px;
    height: 1400px;
    background-image: url("./leaves.png");
    filter: url(#wind);
    animation: billow 8s ease-in-out infinite;
}

@keyframes billow {
    0% {
        transform: perspective(400px) rotateX(0deg) rotateY(0deg) scale(1);
    }
    25% {
        transform: perspective(400px) rotateX(1deg) rotateY(2deg) scale(1.02);
    }
    50% {
        transform: perspective(400px) rotateX(-4deg) rotateY(-2deg) scale(0.97);
    }
    75% {
        transform: perspective(400px) rotateX(1deg) rotateY(-1deg) scale(1.04);
    }
    100% {
        transform: perspective(400px) rotateX(0deg) rotateY(0deg) scale(1);
    }
}

https://github.com/user-attachments/assets/854f4321-f40e-465f-9b26-4fe663d628fa

日出/日落过渡

• 亮/暗切换有点太突兀，所以我决定在两者之间加入过渡
• 颜色的线性插值不够有趣，所以我决定制作一个日出/日落色彩动画
• 这些颜色只是花了很多时间看日落并做了些实验后手工挑选出来的，没什么特别花哨的
• 还有一个微妙的“光晕”，这是对光线从地面反弹的粗略近似

3D 变换

• 最后，skew + rotate + transform 并没有达到我想要的效果，因为它只能提供仿射变换，而我想要那种漂亮的透视畸变
• 决定推导一个变换矩阵（为了好玩），这需要打开 Desmos 绘制一些形状
• 然后，我们可以解出一个 matrix3d 可以在 CSS 中使用的 4D 透视变换矩阵

matrix3d 的值通过以下 Python 脚本计算：

import numpy as np

def compute_homography(points_src, points_dst):
    if points_src.shape != (4, 2) or points_dst.shape != (4, 2):
        raise ValueError("Input arrays must be of shape (4,2)")

    A = np.zeros((8, 8))
    b = np.zeros(8)

    for i in range(4):
        x, y = points_src[i]
        x_prime, y_prime = points_dst[i]

        A[i * 2] = [x, y, 1, 0, 0, 0, -x * x_prime, -y * x_prime]
        b[i * 2] = x_prime

        A[i * 2 + 1] = [0, 0, 0, x, y, 1, -x * y_prime, -y * y_prime]
        b[i * 2 + 1] = y_prime

    h = np.linalg.solve(A, b)

    H = np.array([
        [h[0], h[1], 0, h[2]],
        [h[3], h[4], 0, h[5]],
        [0.0, 0.0, 1.0, 0.0],
        [h[6], h[7], 0.0, 1.0]
    ])
    return H

if __name__ == "__main__":
    src = np.array([[-1, 0], [0, 0], [0, -1], [-1, -1]]) * 500  # day
    dst = np.array([[-1, -0.1], [0, 0], [0, -1], [-1, -1.7]]) * 500  # night

    # dst = np.array([[-1, 0.1], [0, 0], [0, -1], [-1, -1.1]]) * 500

    # Flip y-axis in src and dst
    src[:, 1] = -src[:, 1]
    dst[:, 1] = -dst[:, 1]

    H = compute_homography(src, dst)

    print("Homography matrix:")
    print(H)

    print("Homography matrix as matrix3d in column-major order:")
    print("transform: matrix3d(")
    for col in range(4):
        values = ", ".join(f"{H[row, col]:.4f}" for row in range(4))
        print(f"  {values}," if col < 3 else f"  {values}")
    print(");")