Loading screens are the most ignored moment in product design.

‍

Every product has them. Almost no one designs them. They get a spinner, a progress bar, maybe a skeleton loader if the team is feeling fancy, and then everyone moves on to the “real” screens. We’ve been pushing back on that for a while, and this summer we finally built something to prove the point: a 3D loader playground, live now inside Orizon Lab.

‍

Pick a template. Play with the shapes, materials, colors, and motion. Share your version. That’s it. It’s free, it runs in the browser, and it’s built with Three.js.

‍

🎨 Want to play with it right now? Try the 3D loader builder →

‍

Why We Built It

‍

Honestly? We’d been having too much fun with loaders in client work and wanted a sandbox to keep pushing them.

‍

Over the last year, almost every AI product we’ve designed needed a loading state. AI is slow. Models think, retrieve, and generate, and users wait. The old patterns (spinner, progress bar, skeleton) don’t carry that moment. They tell the user “something is happening” but they don’t say anything about the product, the brand, or the mood.

‍

A 3D loader does. It turns dead time into brand time. It gives the user something to look at that feels intentional, instead of something that feels like a glitch.

‍

So we built a space where anyone can design one in a few minutes, without opening Three.js from scratch.

‍

What’s Inside the Playground

‍

A set of templates to start from. Solar is one of our favorites, a soft orbital loop that feels calm instead of impatient. There’s a few others in there. Each one is editable: swap the geometry, change the material (glass, matte, metal, iridescent), adjust the color, speed up or slow down the motion.

‍

When you’re happy with it, you can share your version by link. Someone else can open it, remix it, and share theirs.

‍

That’s the whole product. It’s small on purpose.

‍

Loaders Deserve More Attention Than They Get

‍

Here’s the design argument underneath all of this.

‍

Users spend more time looking at loading states than they do looking at your logo. In an AI product, they might spend 5 to 15 seconds per interaction watching a loader. Multiply that across a session and loaders eat up more screen time than most of your actual UI.

‍

And yet, the brief for a loader is almost always “just use the default.” The design system doesn’t cover it. The brand guidelines don’t mention it. The engineer picks whatever ships fastest.

‍

The teams that get this right (Linear, Vercel, Arc, Figma) use loaders as a signature. You know you’re in the product the second you see it move. It’s not a spinner. It’s a small moment of craft that signals: someone thought about this.

‍

That’s the bar we think more teams should hit, and it’s the bar the playground is designed to help teams hit without a Three.js background.

‍

How to Design a Loader That Doesn’t Waste Your Users’ Time

‍

A few things we’ve learned building 3D loaders for clients and for ourselves.

‍

Match the duration to the task. A 500ms loader should feel like a flicker. A 10-second AI generation needs something you can watch without getting bored. Design for the actual wait, not an abstract one.

‍

Motion should feel calm, not frantic. Fast spinning communicates anxiety. Slow, confident motion communicates control. If the loader looks impatient, the user becomes impatient.

‍

Let the material do work. Glass, iridescence, and soft shadows carry more brand feeling than color alone. A matte sphere feels serious. A glass torus feels playful. Pick on purpose.

‍

Keep the shape readable at small sizes. A loader might appear as a 24px icon in a button or a full-screen moment. Test both. If it only works at one size, it’s not a loader, it’s a hero animation.

‍

Loop without a seam. Nothing kills a loader faster than a visible restart. The whole point is that the user can’t tell when one cycle ends and the next begins.

‍

Try It

‍

The playground is live. Build a loader for your product, remix one of the templates, or just mess around and see what the materials do.

‍

If you build something you like, send it to us. We’ll feature the best ones.

‍

Key Takeaways

• Loading screens are the most under-designed moment in most products, and users look at them more than you think.
• AI products made this worse: longer waits, more loaders, and the default patterns don’t carry the moment.
• A branded 3D loader turns dead time into brand time without adding complexity to the rest of the UI.
• The Orizon Lab 3D loader playground lets anyone design and share a Three.js loader in minutes, no setup required.
• The best loaders match the duration of the task, use calm motion, lean on material instead of color, read at any size, and loop seamlessly.
• Teams like Linear, Vercel, Arc, and Figma treat loaders as a signature. Yours should too.

‍

Want help designing the rest of your product with the same care?

‍

‍Book a call with Orizon 🚀

‍

‍

FAQs

‍

What is a 3D loader?
A 3D loader is a loading animation rendered in three dimensions, usually with a library like Three.js, instead of a flat 2D spinner or progress bar. It uses geometry, materials, lighting, and motion to turn a wait state into a branded moment.

‍

Why use a 3D loader instead of a regular spinner?
Spinners communicate “something is happening” and nothing else. A 3D loader can communicate brand feeling, product mood, and craft at the same time. For AI products with longer wait times, this matters more than ever.

‍

What is Three.js?
Three.js is a JavaScript library for rendering 3D graphics in the browser using WebGL. It’s the standard tool for interactive 3D on the web and what we used to build the Orizon Lab loader playground.

‍

Is the Orizon Lab 3D loader builder free?
Yes. The playground is free to use. You can build, remix, and share loaders without an account.

‍

Can I use a loader I built in the playground in my own product?
Yes. The playground is designed for designers and product teams to prototype loaders they can then build into their own products.

‍

How long should a loading animation last?
Match it to the actual task. If something loads in under a second, the loader should feel like a flicker. If an AI generation takes 10 seconds, the loader needs to be watchable for the full duration without feeling repetitive or impatient.

‍

What makes a good loading animation?
Calm, confident motion. A seamless loop. A shape that reads at any size. Material choices (glass, matte, metal) that carry brand feeling. And a duration that matches the real task, not an arbitrary one.

‍

Do loading animations affect user experience?
Yes, significantly. Users judge perceived speed, product quality, and brand craft from loading states more than teams realize. A well-designed loader can make a slow product feel considered instead of broken.

‍

Can Orizon design a custom 3D loader for my product?
Yes. We design branded loaders, micro-interactions, and 3D elements for AI products, SaaS platforms, and fintech. Get in touch to talk through what you need.

‍

How do I get started working with Orizon on my product’s UX?
The fastest way is to book a 30-minute intro call. We’ll talk through your product, your current UX, and where design can move the needle fastest.