<ShadedTitle />

This one shows how easy it to use a shader as a font.
I had to manage responsiveness and SEO, the text is actually in the DOM and cloned into a transparent buffer canvas. I use globalCompositeOperation to cut around letters.

<ShaderClone />

Allows to compile and run a single Shader, but clone its output into multiple canvas.
With this approach, we have way better performances when printing a huge list of canvas elements that shows the same shader.

The shader will be resized to the highest clone on demand.

I crafted a custom 2D Shader system in vanilla JS to avoid loading heavy libs.

Code is pretty simple, works with any front-end framework, but I also created some React elements.

( Maybe someday on GitHub )

Page transitions are made with a custom Next hook.
Working with Next 15 in app router mode.

Github :
github.com/zouloux/next...
Live demo :
stackblitz.com/~/github.com...

⚡️ New Release ⚡️

Morpho Landing - December 2024
↳ morpho.org

Stack
- Back : Custom Headless Wordpress
- Front : Next + GSAP
- Ops : Docker

Design & Content : Morpho Team