<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.

createShader has the simplest API possible to create flat 2D shaders on canvases.

It allows tweaking the shader in real time with typed uniforms.

Time can be controlled, there is a jitter detection to target 30 fps on lower end devices or completely disable with a fallback if the device is slow.

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