Hi,
Im planing to make a ios style shortcuts window,
But i couldn't work backdrop effects in realtime, its only refreshes when windows switches
Backdrop Test.bttpreset (4.4 KB)
Thanks
i found a way, its working like native window right now
just animated backdrop effect with css, its all dynamic now
-webkit-animation: backdrop 5s ease infinite;
@-webkit-keyframes backdrop {
0%{-webkit-backdrop-filter: blur(20px)}
100%{-webkit-backdrop-filter: blur(19px)}
}
it only has problems when switching spaces
Backdrop Test.bttpreset (4.8 KB)
super nice!!
updated code
bg{animation:bd 20s infinite}
bg{background-color:rgba(88,88,88,.6)} /* For Dark Appearance */
bg{background-color:rgba(170,170,170,.6)} /* For Light Appearance */
@keyframes bd{0%,100%{-webkit-backdrop-filter:blur(36px) contrast(250%) invert(20%)}}
if anybody get more native look with different values. please post here, because macos use different settings on lighter and darker backgrounds
2 Likes
This trick is amazing!
I'm making the BTT webview available as a Shortcuts action on macOS Monterey, so you will be able to share your creations via the Shortcuts app in the future (which can even take input from other shortcuts).
I'm currently building some examples and this background looks really nice.
BTT webview has to much potential, please focus more on this, maybe we can create app bundles with this like electron. thanks your work on BTT, really appreciated