Знаете вот этот приятный глазу эффект, когда за телевизором подсветка подстраивается под картинку на экране? Кто-то готовое покупает, кто-то собирает из ардуинки и опенсорса.
Вэс Бос показывает, как сделать такое в интерфейсах при помощи SVG-фильтров. Буквально 5 строчек SVG, 1 строчка CSS — и у вас на сайте есть подсветка для видео, которая подстраивается под каждый кадр.
Дополню оригинальную демку советом не забывать про
prefers-reduced-motion — не все пользователи могут комфортно смотреть на переливашки и анимашки.Видео: https://x.com/wesbos/status/1841186089886777705
Исходный код: https://github.com/wesbos/hot-tips/tree/main/css-backlight
