Was tricky getting a video, with corner radii that change on over, on top of a blurry version of the same video. CSS filters, masking, and combos of both are inconsistent between browsers and often don't resize well

Ended up stacking two video elements w/ a script to keep them in sync

Even tried to solicit some help using pixi or threejs lol

Mostly Typescript/Python, lead dev at @atomichub. Love everything sci fi related.
https://github.com/DamianBusz

For sure, it's working pretty ok!

I would sometimes experience sync probs on some mobile browsers & when desktop was under heavier load. Also wanted to accommodate if a video had audio (even though the vids are set to muted in HTML). Apparently initializing audio creates a small playback gap b/w two identical vids

As long as it’s same video cache being served that sounds quite good

Couple messy codepens. Please be gentle I am a scrub

This one was sooo close; ✔️Chrome ✔️FF ✖️Safari (can't remember why I used a library to draw the svg): https://codepen.io/alexbruno/pen/OJrzgpL

This worked great in FF, but nothing else:

/frontend dev・founder/decentralized data wrangler /blockhead・ritual.net・UI/UX abstractionist・DeFi/web3 builder・dropout・24・prev /dydx・x.com/darryl__yeo

Couple messy codepens. Please be gentle I am a scrub

This one was sooo close; ✔️Chrome ✔️FF ✖️Safari (can't remember why I used a library to draw the svg): https://codepen.io/alexbruno/pen/OJrzgpL

This worked great in FF, but nothing else: https://codepen.io/alexbruno/pen/poqWzMr

Maybe there’s a combination of SVG filters that could make it work?

Very curious to see what CSS you tried!