feat: image transitions

[BlackDahlia313]

trafficstars

https://github.com/user-attachments/assets/d03498de-f118-458c-8648-c197bf37ed75

🔗 Linked issue

https://github.com/johannschopplich/unlazy/issues/51

❓ Type of change

• [x] ✨ New feature (a non-breaking change that adds functionality)

📚 Description

This adds optional transitions between BlurHash or ThumbHash via a new prop. It uses the Canvas API for compatibility and performance. This resolves the linked issue.

[netlify[bot]]

✅ Deploy Preview for unlazy ready!

Name	Link
🔨 Latest commit	b802f678f99d88941e5f6e64e899ddd71c83a51b
🔍 Latest deploy log	https://app.netlify.com/sites/unlazy/deploys/674896dac89c7600083f4659
😎 Deploy Preview	https://deploy-preview-56--unlazy.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[johannschopplich]

Interesting! Thanks for the PR.

[BlackDahlia313]

Hey @johannschopplich so sorry about that! I was doing a lot of testing from before I moved from css to canvas and I had forgot to revert things back when doing that (making changes in all packages trying to get css to work before reverting to canvas)

I also will bring back the comments. I did have a bot check my code for any vulnerabilities and I didn't even notice it removed all the dang comments when I did that.

I'll get a new commit out soon.

[BlackDahlia313]

Also: please add the documentation for the new feature.

I had already updated the readme.md and the examples and totally didn't realize there was a docs directory. Getting this part done now and I think we will be all set! :)

[johannschopplich]

Thanks a lot for your feedback!

[BlackDahlia313]

Thanks a lot for your feedback!

No Thank you! this is one of my first bigger contributions and it means a lot to get proper feedback on what I'm doing.

[BlackDahlia313]

@johannschopplich LGTM unless you notice anything else!

[johannschopplich]

Thanks for the PR! Unfortunately I haven't had time to review it yet. 🥲

[BlackDahlia313]

Thanks for the PR! Unfortunately I haven't had time to review it yet. 🥲

Hey no rush at all! My project isn't launching till closer to end of Q1. Take your time :)

[ZakSingh]

Bumping this -- would be cool to see!

[Matoseb]

Would love this too!

[tobimori]

Just noticed the following things:

• Canvas element removing classes (and inline styles) might be causing a layout shift in some situations
• The fixed width/height of the element does not take in account element resizing while transitioning

[tobimori]

For performance reasons, you should consider adding a check if the element is actually on screen (or nearby) - if not, don't fade.

[johannschopplich]

@tobimori Thanks for the review! @BlackDahlia313 Would you mind addressing these points? Thank you so much! 🙏

[tobimori]

Just noticed this, not sure if there is a way, but when I'm doing a client-side navigation in React, and the image is cached, it will still get its placeholder resolved and the transition being played. If I remove Unlazy and replace with with a basic img element it works fine. Is there a way to check with JS whether an image is cached? If so, maybe we could skip the placeholder for that part.

[BlackDahlia313]

@johannschopplich @tobimori I will take a look as soon as I have bandwidth

[chrisspiegl]

This looks incredibly promising. @BlackDahlia313 do you maybe have time to continue work on this?

[BlackDahlia313]

This looks incredibly promising. @BlackDahlia313 do you maybe have time to continue work on this?

Hey!

I should have some time this weekend to take a look! Been really busy in the interim! Thanks for the reminder!