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