What is sunlight-effect?

sunlight-effect is a small React component that adds a decorative visual to a webpage: soft, gently drifting beams of light rendered over a light background, inspired by an art piece called Sunlight by designer Chloe Yan. The effect is built entirely with CSS, using gradients for the light color, blur for the softness, and a single animation rule (@keyframes) that makes each ray drift at a slightly different distance using a CSS variable. This means no external animation library is needed. Two accessibility considerations are built in: the rays hide automatically on screens narrower than a medium breakpoint of 768 pixels wide so they do not clutter small displays, and the animation is suppressed for users who have enabled the prefers-reduced-motion setting in their operating system. To use it in your own project, you copy one TypeScript component file and some CSS rules into your codebase, then place the component inside any positioned HTML element over a light background. There is no npm package to install, it is meant to be copied and adapted directly. The repository is kept separate from the author's personal portfolio site so it can be forked or cloned without affecting anything else. It runs as a standalone Next.js app for local preview using npm, and the component itself is written in TypeScript with React. The README is short and does not describe any features beyond the visual effect itself.