Sunlit
Pure CSS dappled light through window blinds and a billowing leaf canopy: progressive blur for depth, a warm floor bounce glow, a derived matrix3d light plane, and a clickable day/night switch that walks through hand-picked sunrise and sunset colors instead of a hard cut. No dependencies.
npx shadcn@latest add https://ui.aryank.space/r/sunlit.jsonInstalls from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.
| Prop | Type | Default | Description |
|---|---|---|---|
| dark | boolean | undefined | Controlled night mode. When set, the component no longer owns dark state. |
| defaultDark | boolean | false | Initial night mode when uncontrolled. |
| onDarkChange | (dark: boolean) => void | undefined | Fires after day/night flips. |
| toggleOnClick | boolean | true | Click the scene (outside interactive children) to toggle day/night. |
| leavesSrc | string | "…/sunlit/leaves.png" | Leaf canopy texture URL. |
| dayColor | string | "#fffdfa" | Daytime backdrop color. |
| nightColor | string | "#0f131c" | Nighttime backdrop color. |
| bounceLightDay | string | "#f5d7a6" | Warm floor bounce at day. |
| bounceLightNight | string | "#1b293f" | Cool floor bounce at night. |
| shadowColor | string | auto per mode | Shutter and bar color. Defaults track day/night shadows. |
| shutterCount | number | 23 | How many horizontal shutters to stack. |
| children | React.ReactNode | undefined | Content above the light plane. Links and buttons keep pointer events; the rest of the scene stays clickable for the day/night toggle. |
| className | string | undefined | Extra classes on the root. |
dark / defaultDarktextNight mode. Pass dark for controlled mode, or defaultDark for an uncontrolled start.
dayColor / nightColorcolorBackdrop colors at day and night.
bounceLightDay / bounceLightNightcolorFloor bounce glow at each time of day.
leavesSrcasset-urlLeaf canopy texture, hosted through https://ui.aryank.space/assets/sunlit/leaves.png.
shutterCounttextHow many horizontal shutters to stack.
None.