Cristian Javier

Coding and Design open source react components

[Cristian Javier @_crisjav]

I know the amazing part about the Apple Music rebranding is that it was made using practical effects, but I still wanted to recreate the refraction digitally because of how cool it looked. I gave it a shot, and this is the result: a component with the same effect for any logo.

[Cristian Javier @_crisjav]

@naaiyy_ 👀

[Cristian Javier @_crisjav]

@FanVancoo Try increasing the optical depth for a better result, just play with the parameters

[Cristian Javier @_crisjav]

@transitive_bs thanks, the text part is on point, the logo needs more work.

[Cristian Javier @_crisjav]

I know the amazing part about the Apple Music rebranding is that it was made using practical effects, but I still wanted to recreate the refraction digitally because of how cool it looked. I gave it a shot, and this is the result: a component with the same effect for any logo.

[Cristian Javier @_crisjav]

@vantaylor_ Appreciate it!

[Cristian Javier @_crisjav]

@404camren very colorful

[Cristian Javier @_crisjav]

@vantaylor_ Thats so cool!, I like the logo

[Cristian Javier @_crisjav]

This and more components at https://t.co/3ow5lqcizf.

[Cristian Javier @_crisjav]

Recreated the Apple Music rebrand effect.

You can try it with your logo for free:
Link below 👇

[Cristian Javier @_crisjav]

@CyberPriest__ Its now on the web you can take a look :O

[Cristian Javier @_crisjav]

@staryteayyy sorry for the wait, its now on https://t.co/3ow5lqbKJH ;)

[Cristian Javier @_crisjav]

@CyberPriest__ The logo is an SVG, and the glass effect is a WebGL shader that handles the shape, masking and refraction.

[Cristian Javier @_crisjav]

@joelha still far off the original

[Cristian Javier @_crisjav]

Never expected this to go this viral, thanks y'all for the support!
The component is now live, 100% free at https://t.co/3ow5lqcizf
Drop a follow so you don't miss future components like this, also it would mean a lot to me 🫶

[Cristian Javier @_crisjav]

@BruteSilverback 😂

[Cristian Javier @_crisjav]

@VillarVisual just code and WebGL

[Cristian Javier @_crisjav]

@FanVancoo wow

[Cristian Javier @_crisjav]

@joshmillgate thanks!

[Cristian Javier @_crisjav]

@diip3sh Rendered texture. The glass is procedural and just refracts the logo image, so any SVG/PNG works out of the box.

[Cristian Javier @_crisjav]

Dropping this one soon on https://t.co/3ow5lqbKJH!

[Cristian Javier @_crisjav]

@LuftkoppTim