Stream a live image of any element into a canvas <ElementMirror source={cardRef} fps={30} /> Good for things like blurred img/video backdrops, dnd, pip, minimaps, magnifiers, custom glass effects, creative coding shenanigans

This is so good, would be cool to skew the reflection a bit probably

Yeee and maybe some sort of horizon line. Def a lil something missing🤔

So goood. How does it render dom to the canvas under the hood? 👀

Through a lib called snapdom that I forked and optimized a bit for this use case html-in-canvas will probably eventually be the more appropriate way but obvs browser support issues for now. Gets pretty tricky/interesting when you consider layout size vs rendered size and what happens with things like shadows/rotations which cause pixels to get painted outside of the element’s box and therefore clipped by canvas if not careful

so nice

Slightly distracting but beautiful effect!

Smoooth

Oh this is useful. I’ve needed a tiny live preview like this before.

that mirror

This looks sick I gotta give this a try

was just trying to do this with HTML in Canvas but had some snags, does this require permissions prompt?

Haven’t hit any permissions issues yet, and yes I feel like html-in-canvas will eventually be the cleaner way to do this but for now browser support’s obviously a bit of a blocker there

Yes!

this is sooo smooth!!! WoW!!!

finally sth worth to stop scrolling timeline

blurred backdrops finally stop being screenshots

So good !

fps=30 smooth=yes optimised=somewhat controls=scrollwheel

looks super clean

the minimap / magnifier use cases are sick

Excellent work Austin! You are welcome to propose a PR at SnapDOM with your findings

cool interaction , but wont it take much space

Depends on the size of element, pixel ratio and frame rate but yeah if not careful then can hit cpu+memory pretty hard

How do you capture interactions like you did? Snapshot per moments? Please tell me the logic

Yes capture snapshots with a forked version of snapdom at the specified frame rate and then set up so that multiple mirrors on same source all share the same snapshots rather than each snapshotting again. Code is linked in the post