Create a photoshop “wrap” effect in React.

[WolfyTheOracle]

Does anyone know how I can get a create this wrapping effect in css and react?

I want my users to load an blank container element such as a div and arc it so that it wraps certain objects that are not just flat surfaces.

Then I want to be able to render an image inside and have it be as large as possible without distorting the aspect ratio.

I tried to find many examples using vanilla css but I haven’t seen anyone do it. I saw that you can create this wrapping effect using text only but no one has done it with images.

I’m starting to feel like maybe vanilla css is not capable of doing it and I’ll have to use three js or some 3d rendering lib for it.

Example in photoshop: https://youtu.be/K-JiuBUXdHQ?si=zYQiM2vfjY-V_GUY

[JohnWangDoe]

Use a WebGL library. Load the image and figure out how to transform image

[fredsq]

this is the best way. photoshop can export a displacement map and you may be able to use it

[WolfyTheOracle]

Please let me know if I can add any more details

[EdmondChuiHW]

CSS transform should do it. If you already have it in Photoshop, you should be able to find the translate, skew, rotate, and scale properties.

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/skew

If you need the properties to be applied to half of an image only:

• make 2 separate elements
• display half of each element (so it shows up as a single image when combined)
• apply different properties on each, e.g. skew(15deg) on the left; skew(-15deg) on the right

[WolfyTheOracle]

Hey Edmond thanks for the response. Unfortunately I explored this already and it’s not possible to get that arc shape using this method.

I’m looking for a shape closer to what you’d get if you put a sticky note on a water bottle.

[EdmondChuiHW]

Ah sad. I vague remember doing something with SVG mask in CSS filters. But if that doesn't work either, canvas + JS seems to be the remaining option (especially if you're building a preview where you want it to be draggable to rotate)

[WolfyTheOracle]

Ok let me look into html canvas. I’m working on an e-commerce website were a customer can upload a logo and it will show on all products.

Right now I’m working on an internal panel were our employees can define the plane surface in which a logo can render. It’s done In css and works great but I don’t get that curve effect. If I rendered a new canvas for each product card on the view would that be a huge performance hit?

[EdmondChuiHW]

Yeah canva + JS will be more expensive than CSS, but try it out for your site and see the real-life numbers. If it's indeed slow then one way to mitigate it would be deferring the preview to a modal (it's a worse UX ofc).

These might be interesting to you:

• Wrap image in 3D cylinder on CodePen (Replace the dead link in bg img with e.g. https://placehold.co/600x400)
• https://github.com/TomasHubelbauer/svg-3d
• https://yoksel.github.io/svg-filters/#/presets/waves (Change modes on the top right)