I wanted my next framer template's portfolio showcase to have a standout interaction, not another flat slider. That idea is now the hero: a carousel where every image bends on a cylinder as it moves. Perspective, velocity skew, a touch of chromatic distortion on the edges. It's raw WebGL with the cylinder math written from scratch, no libraries. I didn't write any of it. I described the motion to Framer's agent, one prompt with my art direction, and it built the code component, wired it into the canvas, and exposed the motion as sliders: tilt, curve, skew strength, distortion, chroma, parallax. My part was tuning those sliders until the motion felt right for the template, which took longer than the build itself. The gap between an effect I can imagine and a component I can ship used to be "someday". Now it's an afternoon. What's an effect you've wanted on your site but never built?

looks amazing!

Beautiful UI shouldn't require messy code. ✨

A while ago, I built this feature section for TipMi. Looking at the varied card sizes, you might think it requires complex positioning or endless Flexbox containers. The secret weapon? CSS Grid with grid-template-areas.

Using Grid for this specific architecture is the easiest, most scalable approach. You get complete two-dimensional control, allowing you to span items across multiple columns and rows seamlessly while keeping the underlying HTML structure incredibly clean and readable.

Take a look at the live build here: https://tipmi-dev.vercel.app/

Great design 👍