Screen.Recording.2024-11-11.at.1.49.49.PM.mov

inspired by https://daylightcomputer.com/ and https://www.sunlit.place/

• this is all just divs with background
• the leaves i sourced from adobe stock photos and downscaled to ~300x500 because i knew i would be blurring it anyways

```

...

```
- gotta make the diffusion effect convincing
- things closer to the wall should be less blurry than things away from the wall
- this utilizes multiple blur layers each with a mask image to constraint its effect zone

```

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%;
}
`` - created a leaf billowing effect using small amounts of rotate and scale - to add a bit more dynamism, i used svg filters and the lesser knownfeTurbulenceandfeDisplacementMap`tags to add a higher octave of noise to billow individual leaves

```

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);
}
}
```

Screen.Recording.2024-11-11.at.2.00.38.PM.mov

• the light/dark transition was a bit too abrupt so i decided to add a transition between the two
• a linear interpolation of colors wasn't super exciting so I decided to create a sunrise/sunset color animation
• these colors are just handpicked from many hours of just looking at sunsets and some experimentation, nothing too fancy here

• theres also a subtle 'glow' that is a very crude approximation of light bouncing off the floor

• finally, skew + rotate + transform didnt get what i wanted because it only gives you affine transforms and i want that nice perspective distortion

• decided to derive a transform matrix for memes, this involved pulling desmos to draw some shapes
• then, we can solve for a 4d perspective transform matrix that matrix3dcan use in css

matrix3d values are calculated using the following python script:

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(");")