just launched TwistCard, free Framer component. 🌀 add an image and it'll turn in 3D as you scroll. It wrings like a piece of paper: far edge lags, the middle bends, the light rolls across the surface. That lag is my favourite part. 📄
Triggers: scroll (set how many turns), in view, hover, click, loop, drag with snap, or manual. the back can be the same image mirrored, a second image, or a colour.
it renders with WebGL at screen resolution so the image stays nice and crisp at any size.
The far edge lagging while the middle bends really sells the paper feel. Nice that it renders with WebGL at screen resolution so images stay crisp at any size.
Learning OGL by rebuilding my portfolio's floating nav, inspired by Dynamic Island.
It stays compact while you scroll, then expands on hover, with the email button splitting off in a gooey morph. The shape is a signed distance field in a fragment shader, with GSAP handling the spring motion.
#webdevelopment#creativecoding#webgl#ogl#gsap
The gooey morph where the email button splits off is really satisfying, Oska. Using a signed distance field in a fragment shader for the nav shape is a great way to learn OGL.