Holographic Cloth Effect

Turn your artwork into a shareable holographic cloth PNG in your browser.

Introduction

30 Second Summary

You will transform your artwork into a floating sheet of holographic fabric. Its folds will turn a familiar image into a dynamic 3D composition.

In this project, you will map your artwork onto interactive cloth in Holocloth. You will shape the cloth before exporting the finished composition as a PNG.

What You'll Build

You will open a finished PNG where your artwork bends through expressive folds with shimmering holographic highlights.

By the end of this project, you'll have:

Interactive artwork that bends across a simulated cloth surface.
An expressive 3D pose with visible depth from a carefully framed camera angle.
A polished PNG with readable artwork plus iridescent highlights.
Secret Mission: An optional challenge to push your skills further.

Are there any prerequisites?

You need a Mac plus one logo or artwork file saved as an image or SVG. No account or coding experience is required.

Before We Start

Before you begin, lock in the artwork you have ready in Finder and the mood you want to create. This gives your holographic cloth a clear visual direction.

Open Holocloth and Check the Canvas

Your artwork needs a responsive canvas before you begin shaping its holographic form.

You will use Safari to load Holocloth. The starter cloth confirms that the interactive experience works on your Mac.

In this step, get ready to:

Confirm that your artwork is ready in Finder.
Load the Holocloth canvas in Safari.
Test the starter cloth controls.

Confirm your artwork is ready

A simple image with strong contrast keeps its important details visible across moving folds.

Switch back to the Finder window from earlier.
Select your chosen artwork file.
Confirm that Finder shows your chosen image or SVG.

Your artwork is ready for the file picker in the next step.

Open the experience

The hosted experience runs directly in your browser. Its starter cloth provides a quick readiness check before you map your artwork.

Press Cmd+Space to open the macOS search bar.
Type Safari.
Press Enter.
Click the address bar in Safari.
Enter https://holocloth.vercel.app.
Press Enter.
Wait for the loading indicator to disappear.

The canvas now shows a simulated starter cloth. The control panel includes Reset cloth.

Canvas still loading?

Check that your Mac has an active internet connection.
Reload the page after your connection is stable.

Ask for help with a canvas that does not finish loading.

Test the interaction

Predict how the starter cloth will respond when you drag it before releasing it in motion.

Click and drag directly on the cloth.
Release the pointer while it is moving.

The cloth follows your drag. It continues moving after release like a thrown sheet of fabric.

Click Reset cloth in the control panel.

The cloth returns to its starting pose. This confirms that the canvas responds to your input.

Your interactive canvas is ready. Next, you will map your artwork across the cloth surface.

Map Your Artwork Onto the Cloth

You have confirmed that the starter cloth responds inside Holocloth. Now your chosen artwork can become part of that moving surface.

Image mapping covers the full sheet with your artwork. Every fold can then bend the image to create the central visual effect.

In this step, get ready to:

Open the image controls.
Map your artwork across the complete cloth surface.
Confirm that the artwork bends with the cloth.

Open the image controls

The image controls determine how your artwork appears on the cloth. The full-cloth option turns your file into the surface texture.

Click Images in the Holocloth control panel to expand the section.

The expanded section shows the available image actions.

Map your artwork

Your artwork file is ready in Finder. The macOS file picker lets you select that same file for the cloth.

Choose Image as cloth… in the expanded image controls.
Select your artwork in the macOS file picker.
Confirm your file selection.
Wait for the cloth surface to update.

Your artwork should replace the starter image across the complete cloth surface.

Artwork Does Not Appear?

Confirm that you selected the image or SVG you prepared earlier. Try the selection again if the starter image remains visible.

If the cloth still does not update, help me work out why my artwork did not replace the starter image.

Confirm the transformation

A successful mapping stays attached to the simulated surface during motion. The next interaction checks that connection.

Predict whether your artwork will bend with the folds or remain visually flat.
Drag one corner of the cloth with your pointer.
Release the corner while moving your pointer to create a ripple.

Your artwork should bend and ripple with the cloth. It should remain attached to the complete surface throughout the motion.

Your artwork now behaves like fabric. Next, you will examine why a flat pose hides the depth of the effect.

Inspect a Flat First Pass

Your artwork now bends across the Holocloth surface.

An untouched front-facing sheet hides the depth that makes the effect distinctive. This step gives you a deliberately flat first pass to inspect.

In this step, get ready to:

Reset the cloth to its settled pose.
Inspect a nearly front-facing composition.
Define what the composition needs next.

Reset the cloth

A settled simulated cloth gives you a neutral baseline. This makes the limitations of the default pose easier to see.

Return to the Holocloth canvas from earlier.
Click Reset cloth.
Wait for the sheet to settle.

The mapped artwork remains attached to the cloth. The sheet returns to a calm pose with minimal movement.

Inspect the default framing

A front-facing view keeps the artwork readable. It also compresses the visible folds into a flatter silhouette.

Before you adjust the camera, do you expect the settled cloth to show as much depth as it did during motion? Why?

Drag empty space to orbit the camera.
Stop when the cloth appears nearly front-facing.
Keep the pointer away from the cloth while you inspect it.

The artwork remains visible. Its silhouette and folds look flatter than they did during motion.

This Is the Intended First Pass

The weak composition reveals the exact limitation you need to solve. A straight-on camera angle hides depth across the cloth.

Choose a pull point

A diagonal wave can reveal depth while preserving a readable section of the artwork. Your pull point determines where that wave begins.

Before you choose, which edge or corner could move without hiding the most important part of your artwork?

Identify the main artwork area that must remain readable.
Choose one edge or corner as the starting point for a diagonal wave.
Point to your chosen pull point without dragging it yet.

You should now see a settled front-facing cloth with limited depth. You should also have one edge or corner selected for the next composition.

You have found the weakness in the first composition. Next, you will turn your chosen pull point into an expressive fold.

Pose and Frame the Cloth

Your artwork is mapped across the cloth. The front-facing view still hides its depth.

Now you will turn that flat first pass into a clear wave in Holocloth. An angled camera will reveal the folds while preserving a readable area of your artwork.

In this step, get ready to:

Shape the cloth into one clear wave or diagonal fold.
Orbit the camera to reveal depth through slight overlap.
Frame readable artwork beside a holographic highlight.

Shape the cloth

A moving release gives the simulated cloth momentum. Smaller pulls help you refine the wave without losing control of the artwork.

Click directly on the edge or corner you selected earlier.
Drag the selected area diagonally across the canvas.
Release the pointer while it is moving to throw the cloth.
Repeat the gesture with smaller pulls until one clear wave appears.

The cloth should now have one dominant wave. Part of your artwork should remain readable across the surface.

Moving the camera instead?

Start your drag directly on the visible cloth surface.
Use a shorter drag if the cloth moves beyond the canvas.

Ask for help with controlling the cloth gesture.

Orbit and zoom the camera

An angled camera makes the wave easier to read. Slight overlap adds a visible depth cue without covering the full artwork.

Drag empty space to orbit the camera around the cloth.
Stop orbiting when the cloth overlaps itself slightly.
Scroll to zoom until the cloth fills most of the canvas.
Adjust the camera angle until the main artwork area is readable.

You should see a stronger silhouette around the cloth. The overlapping section should make the wave feel deeper.

Refine the framing

Panning is optional. It shifts the cloth within the frame without changing the pose.

Hold Space while dragging to pan the cloth away from the exact centre.
Choose right-drag instead if you prefer that panning control.
Position one raised fold where it catches holographic colour.
Keep the clearest part of the artwork visible beside that fold.

Predict where the strongest depth cue will appear during your final interaction.
Click directly on the posed edge or corner.
Drag the cloth with one small movement.
Release the pointer while it is moving.
Drag empty space to confirm the angled camera view.
Scroll to confirm the final camera distance.

You should see readable artwork beside a clear wave or diagonal fold. The pose should show slight overlap with visible depth plus a fold catching holographic colour.

Your cloth now has the depth that the flat first pass was missing. Next, you will polish the holographic look for export.

Polish and Export Your PNG

Your artwork now has a clear fold plus a camera angle that shows depth. The final composition is ready for polish in Holocloth.

Material plus render adjustments make the folds legible in a still image. A PNG export turns your live composition into a shareable result.

In this step, get ready to:

Compare the available material presets.
Polish the lighting while keeping your artwork readable.
Export the finished composition as an opaque PNG.

Compare the material presets

A holographic material catches colour across the folds. Comparing presets helps you judge which finish best supports your artwork.

Select Holo in the Material section.
Study the brightest fold for iridescent colour.
Select Chrome.
Check whether your artwork remains readable.

The material changes while your fold plus camera framing stay in place. This isolates the effect of each preset.

Select Black Cloth.
Check the artwork against the darker finish.
Return to Holo for the intended iridescent effect.
Adjust one material control slightly if the artwork needs more clarity.
Stop after a second small material adjustment.

Your cloth should retain readable artwork while the angled fold catches shifting holographic colour.

Polish the rendered scene

The render controls shape how clearly the pose reads as a still image. Small changes preserve the artwork while strengthening the brightest fold.

Which Render Control Should You Use?

Use background to change the colour behind the cloth.
Use exposure to balance the scene brightness.
Use environment to change the reflected lighting.
Use bloom to strengthen the glow around bright areas.
Use noise to change the texture of the final image.

Expand the Render section in the control panel.
Choose one render control that supports your selected mood.
Move the chosen control slightly.

The canvas updates immediately. Look for a clearer highlight without losing detail in the artwork.

Adjust one different render control slightly if the fold still needs definition.
Stop when the brightest fold is clear without washing out the artwork.

Export and verify the PNG

The standard export captures the rendered background with your polished cloth. This creates an opaque image that is ready to share.

Before exporting, predict which details from the live canvas should remain visible in the downloaded image.
Choose Export PNG.
Click Downloads in the Safari toolbar.
Open the downloaded PNG from the Downloads list.

The PNG should show your mapped artwork with expressive folds. A visible holographic highlight should define the cloth's depth.

Does the Export Look Different?

Return to the Holocloth canvas if the artwork looks washed out. Reduce your latest material or render adjustment before exporting again.

If the download is missing, check Safari's Downloads list for the newest PNG. Help me troubleshoot my Holocloth PNG export.

Secret mission

Create a Transparent Holographic Cutout

Turn your finished cloth composition into a reusable design asset. Export it without the rendered background so you can layer it into another design.

Clean Up Your Resources

Decide whether to keep your resources running, pause them to come back later, or delete them entirely. This project runs entirely in your browser and on your Mac, so there are no ongoing costs.

Resources you used:

An opaque PNG export of your holographic cloth composition.
A transparent-background PNG export of your holographic cloth composition.

Keep everything running

No action needed. Choose this if you are still refining your composition or want to create more exports.

Keep both exported PNG files on your Mac.
Keep the browser session available for more cloth poses or material adjustments.

Pause - I'll come back to this later

Shut down the active experience to free up memory while keeping your exported files.

Close the Holocloth tab in Safari.
Close the exported image in Preview.
Keep both PNG exports on your Mac for later use.

Delete - I don't want to use this again

Remove the exported project files to start fresh. Your original artwork stays untouched.

Return to Safari.
Use Safari's downloads list to reveal the opaque PNG in Finder.
Use Safari's downloads list to reveal the transparent-background PNG in Finder.
Select both exported PNG files in Finder.
Move both exported PNG files to the Trash.
Empty the Trash to remove the exports from your Mac.
Confirm that neither exported PNG appears in Finder.

Nice Work!

Nice work! You've transformed your artwork into a polished holographic cloth composition. Your finished PNG captures expressive folds with iridescent highlights.

What you learned:

Image texturing: Map your artwork across a simulated cloth surface so it bends with every fold.
3D composition: Shape an expressive wave by grabbing and throwing the cloth. Frame the pose to reveal depth while keeping the artwork readable.
Holographic finish: Polish the Holo material to preserve clear iridescent highlights. Export the finished composition as a shareable PNG.
Secret Mission: Create a transparent-background holographic asset that is ready for another design.

Ready to quiz yourself?