Introducing Sunlit: a captivating CSS project designed to simulate the enchanting effect of sunlight streaming through a window. This pure CSS implementation beautifully captures the essence of light and shadow transitions, drawing inspiration from platforms like daylightcomputer.com and sunlit.place.

Key Features

Components

The architecture of Sunlit is straightforward yet creative, built entirely with HTML div elements and vivid background colors. The leaves featured in the project are sourced from Adobe Stock, carefully resized for optimal blurring effects.

<div id="blinds">
  <div class="shutters">
    <div class="shutter"></div>
    ...
    <div class="shutter"></div>
  </div>
  <div class="vertical">
    <div class="bar"></div>
    <div class="bar"></div>
  </div>
</div>

Progressive Blur

To achieve a convincing diffusion effect, Sunlit features a progressive blur technique that varies based on proximity to a wall. This is accomplished using multiple blur layers, each fine-tuned with a mask image to constrain its effect, resulting in a visually arresting soft focus.

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

Leaf Billowing

Adding dynamism to the scene, Sunlit employs a billowing effect for the leaves. Using small amounts of rotation and scaling, along with SVG filters such as feTurbulence and feDisplacementMap, each leaf exhibits a lifelike movement, mimicking the gentle sway of foliage in a breeze.

Sunrise/Sunset Transitions

To create a seamless transition from light to dark, Sunlit features animated dawn and dusk color changes. Handpicked hues evoke the beauty of sunsets, enhanced by a subtle 'glow' effect that approximates light bouncing off the floor, making each moment feel more alive.

3D Transformations

Utilizing advanced CSS transformations like skewing and rotating, Sunlit achieves a stunning perspective distortion. A calculated 4D perspective transform matrix is derived from a custom Python script, ensuring an immersive experience visually.

H = compute_homography(points_src, points_dst)  

With its engaging visuals and interactive elements, Sunlit offers developers a unique way to integrate stunning sunlight effects into their web designs, elevating webpages with a touch of realism and charm. Explore the project and bring your designs to life with this captivating CSS effect!