Dappled Light and the Case for Environmental Modes
Dappled Light
The Dappled Light CSS effect — that斑驳光影 thing where you get those soft, blurred light patches cast through a simulated foliage pattern — is having another moment. This week it returned to trending status after dany.works shipped a site with sunny, rainy, and moonlight modes, complete with ambient sound effects.
The history is actually interesting. The technique first appeared on CSS-Tricks in 2022, using CSS blur and mix-blend-mode to simulate light filtering through leaves. Basement Studio then gave it mainstream visibility in 2023 with the Daylight computer website. Then designer chloe built sunlit.place in 2024 with SVG + CSS animation, and the open-source version from Jacky Zhao (Quartz fame) followed. Farah Yan even went full math-mode with a Lindenmayer system implementation via react-three/drei.
What makes this week's iteration notable: Mason Wang dropped a pure Canvas 2D implementation that does the blinds-sunlight投射 effect without any DOM trickery. No video fallback, no heavy assets. Just math.
The design engineering takeaway: we're converging on light-mode and dark-mode as insufficient vocabulary. A third "environmental" mode — one that reflects actual ambient conditions — is becoming a legitimate UI layer. Whether this warrants actually building it is another question. Most sites doing this are just doing it for the vibe. Which is fine, honestly.
Vibe Island
Speaking of environmental context: Vibe Island is a native macOS app (Swift, no Electron, ~50MB RAM) that turns your MacBook's notch/Dynamic Island into a real-time control surface for AI coding agents.
It monitors Claude Code, Codex, Gemini CLI, Cursor, OpenCode, Droid, Qoder, Copilot, CodeBuddy, and Kiro simultaneously. You get permission approval flows in the notch, plan review with full Markdown rendering, and precise terminal jump commands that go directly to the right tab and split. The sound design is 8-bit synthesized, with a custom pack system.
The creator's observation was telling: the app went viral not because of the utility but because of the craft — the Arc-style onboarding animation, the animated membership card UI. People paid for that feeling. Design quality as product differentiator, still working in 2026.
Figma Weave Community Templates
Figma shipped Weave workflow templates to the Figma Community on April 9. Weave is Figma's visual canvas for building generative AI workflows, and now you can browse and duplicate community-built workflows — image generation, image-to-video, brand-guideline-to-illustration-set pipelines. This is Figma positioning itself as the front-end layer for AI creative workflows, and the community marketplace angle is smart. It's still early, but the infrastructure play is clear.
On-Canvas Video Playback
Also this week: Figma rolled out native video playback inside the canvas for both Figma Design and Figma Draw. Videos now have visual identifiers to distinguish them from images, and playback controls (play, pause, fullscreen, speed, sound) work directly on-canvas. Same experience you already had in FigJam and Slides, now available where you'd actually want it during design review.
Resources
OpenScreen
An open-source Screen Studio alternative. Free, no subscriptions, no watermarks, MIT licensed for commercial use. Built in TypeScript. If you're making product demos and don't want to pay $29/month for Screen Studio's full feature set, this covers the basics well. It won't do everything Screen Studio does, but it doesn't try to.
Oh My Codex (OMX)
A workflow layer for OpenAI Codex CLI. Adds structured prompts, agent teams, HUD displays, and runtime help when your coding tasks scale beyond a single session. The hook system is particularly well-designed — you can intercept and redirect Codex behavior mid-flight. Published on npm.
Pixet
A set of pixel-art style icons generated using Google AI Studio. Includes a browser-based editor for customization. The aesthetic sits somewhere between retro game UI and modern minimalism — useful for personal projects, games, or anyone building with intentional lo-fi visual language.
Pixel Gradients
By designer Noman Ijaz — an online generator for pixelated gradient effects. Multiple color scheme presets, adjustable density, and exportable. The real gem on this site is the accompanying article on notch-style navigation design. Noman's work is consistently worth bookmarking.
HueGrid
A gradient generation tool with 22+ gradient modes including 2D, 3D, liquid, and particle shader effects. The outputs are designed to be copy-paste-ready for web projects. The shader preview is interactive — adjust parameters and see the result in real time.
More Resources
- Claude Howto - A visual, example-driven guide to Claude Code from basic to advanced agent usage, with copy-paste templates. 24k stars this week on GitHub. https://github.com/luongnv89/claude-howto
- Andrej Karpathy Skills - A CLAUDE.md file derived from Karpathy's observations on LLM coding pitfalls. Good for tuning any Claude Code setup. https://github.com/forrestchang/andrej-karpathy-skills
- Multica - Open-source managed agents platform that turns coding agents into real teammates with task assignment, progress tracking, and compounding skills. TypeScript, self-hostable. https://github.com/multica-ai/multica
Cases
Dappled Light Demo
A quick vibe-coded demo showing light-mode, dappled-light (sunny), rainy, and moonlight modes side by side. Useful for seeing the effect in practice without building your own. Keyboard shortcuts for mode switching.
Dany Works
The site that re-sparked this week's Dappled Light trend. Sunny, rainy, and moonlight environmental modes with ambient sound. The shadow effect is video-based — which is the less interesting implementation, but the overall craft is strong.
Curated, translated, and edited from 丁一's DEX Weekly. Ding Yi is the co-founder of DEX, a design community. Former Head of Sketch China, former Design Director at 36Kr. A full-stack designer who writes questionable code, currently freelancing — probably Beijing's most well-known slash-career creative.