I am using Next.js. I want to wrap each single character rendered in some components with <span> tags; I want these span tags to have some style attributes, in order to render a mosaic animation.
Each letter should fade in, or fade from one color to another at a different speed.
One way to achieve this is to simply attach a ref to some wrapper, and use that to alter the rendered dom at runtime. But it seems inefficient.
I have also looked at react-reconciler to create my own renderer (similar to react-dom), but I don't know that I can use this to render into another React component. My understanding is that this (or createRoot) want to attach a renderer to a root dom node.
The last option I am looking at is to run the transformation on a (node.js) stream, since these could well be rendered statically (server components). But that requires a custom server, and it cannot be hosted on Vercel.
Is there any elegant way to resolve this?
