R3F - Horizontal scroll with changing backgrounds?


I stumbled across this amazing website: https://canals-amsterdam.com/. I want to try to recreate something similar by using the code from this sandbox (at this point a huge thanks for drcmda for making these!!).

If possible I thought of using these cool font showcases as background for each section of the page scroll. However, as you can imagine by embedding them as an image (<Image position={[width * w, 0, -1]} scale={[width*1.5, height*1.5, 1]} url="/Font_Background.png" />) the quality is noticeably worse and not dynamically scalable for different Browser windows/mobile screens.

Does anyone have an idea how I could set these images as section backgrounds using @drei’s scrollcontrols?

Any help is greatly appreciated :)!

some example using text + images with scroll controls, which allows you to mix html and webgl. your background could be these gigantic fonts, foreground the images.

plain old vertical scroll

vertical scroll with objects that react to intersection

infinite horizontal scroll

finite horizontal scroll with tiles

you can either use SDF text: GitHub - pmndrs/drei: 🥉 useful helpers for react-three-fiber
or just html, like the demos above. i would prefer that because dom text looks the cleanest. in any case i would avoid displaying text as an image.

Thanks a lot for the quick response! Because the font is edited I found the best way to have these things as background is to convert them to an SVG file (That’s what he did in his website). Now I just have to figure out how to set the z-position accordingly in the <scroll html> component. Do you happen to know any tutorial that shows how to set the scale of the images like those in the sandbox so that they scale dynamically when on mobile vs. desktop? In the sandbox they just seem to get reduced in width.