Loading Animation Design with Claude Code

If you want to craft an impressive, Dribbble-like animation for your website, like the one I’ve shared below, and don’t want to spend hours or $$$ on it, check out the guide below.

I will create this animation in 3 simple steps:

[embed]

Step 1: Create an original image for the animation

I’ll animate a 3D sphere with geometric objects that will respond to mouse hover. Before jumping to Claude Code, we need to create an image of this sphere in its idle state.

To do that, I will jump to ChatGPT.

Choose “Create image” from the list of options.

Choose Create image from the list of options

And submit the following prompt :

Create an abstract 3D purple object floating in the center of the picture.

It should look like a soft, rounded sphere or sea-urchin-like form made from many small extruded hexagonal blocks / spikes arranged radially.

The surface should have a honeycomb / voxel / parametric design feel, with the pieces getting shorter toward the edges and converging into a darker central depression.

The background is a soft lavender gradient.

The object casts a blurred shadow beneath it, making it feel suspended in space.

Overall, the visual style should feel like a futuristic, abstract, digital, geometric, soft 3D, product-branding/tech poster aesthetic.

As you can see from the prompt, I’ve clearly outlined all main visual attributes of my object. And ChatGPT generated the following image for me.

Image generated by ChatGPT that I will feed to Claude Code.

Step 2: Create a workspace for Claude Code

This is by far the fastest step in this process; yet, I think it’s very important to keep important details in the same space. That’s why I save the image I’ve generated in a directory, and this directory will be used as a workspace for the Claude Code.

Image of the sphere I’ll feed to Claude Code.

Step 3: Generate the motion effect in Claude Code

Jump to Claude Code.

If you use Claude Code for desktop, open Code tab.

Choose a workspace (I will choose a directory ‘shpere_animation’)

Attach or tag the image with the sphere and paste the prompt.

Quick note: at the time of writing the article, Fable 5 is not available for non-US users. In order to achieve the best possible results, I will use Opus 4.8 with Extra High effort as it offers the best possible performance without draining your daily/weekly usage quota.

Claude Code for desktop (Code tab). Prompt

Here is a prompt I will use

Create an interactive web animation based on the attached 
abstract 3D purple object.

Goal:
Build a polished, futuristic web scene where a 
floating purple hexagonal / voxel sphere animates 
in the center of the screen and reacts to mouse movement.

Visual direction:

* Object: soft rounded sphere / sea-urchin-like form made from many extruded hexagonal columns or spikes arranged radially.
* The surface should feel like a honeycomb / voxel / parametric 3D object.
* Purple / violet material with darker shadows toward the center.
* Background: soft lavender gradient.
* Add a soft blurred shadow underneath the object so it feels suspended in space.
* Style: futuristic, abstract, digital, geometric, premium tech/product-branding aesthetic.

Tech requirements:

* Use React + TypeScript.
* Use Three.js with React Three Fiber.
* Use @react-three/drei where useful.
* Make the scene responsive and fullscreen.
* Keep the code clean, componentized, and easy to adjust.
* Do not use a static image as the object. Recreate it as real interactive 3D geometry.

Object construction:

* Generate a spherical cluster made from many hexagonal prism instances.
* Each prism should point outward from the sphere center.
* Vary prism lengths so the object feels organic and radial.
* Longer spikes should appear near the front/center area.
* Shorter spikes should appear near the outer edges.
* Use smooth animation so the object slowly floats, rotates, and breathes.
* Add subtle lighting, ambient occlusion feel, and soft shadows.

Interaction:

* Track the mouse position in 3D space.
* When the mouse hovers near a specific area of the sphere, the hexagonal spikes near the cursor should shrink inward.
* The shrink effect should be local, soft, and radial:

  * spikes directly under the cursor shrink the most
  * nearby spikes shrink slightly
  * distant spikes remain unchanged
* The effect should ease smoothly in and out, not snap.
* When the mouse leaves the object, all spikes should return to their original length.
* The object should still continue its idle floating/rotating animation while reacting to hover.

Animation details:

* Add a subtle idle “breathing” motion where spikes gently expand and contract.
* Add slow rotation around the Y axis.
* Add slight vertical floating motion.
* Keep motion elegant and premium, not chaotic.

Implementation suggestions:

* Use InstancedMesh for performance.
* Each hexagonal prism can be a CylinderGeometry with 6 radial segments.
* Store each spike’s base position, direction vector, original length, hover influence, and current animated length.
* Use useFrame for animation updates.
* Use raycasting or pointer projection to detect the nearest hover point on the sphere.
* Update each instance matrix every frame based on its animated length.
* Use lerp/easing for smooth transitions.

Scene polish:

* Add soft studio lighting.
* Add a large blurred shadow plane under the object.
* Add subtle fog or depth if it improves the premium feel.
* Use a lavender-to-purple background gradient.
* Make the object centered and large, similar to a hero visual.
* No text, no UI controls, no extra objects.

Deliverables:

1. A complete working React component.
2. Any required setup or dependencies.
3. Clean CSS for the fullscreen scene.
4. Comments explaining the core geometry and hover-shrink logic.
5. Make sure the result runs locally without errors.

A few notes about the prompt. Apart from mentioning the task and goal, I will also provide a few important details that will help Claude to streamline design process:

• Tech requirements. Because I want to create an animation for web, I will mention specific tech stack I will use. Otherwise, Claude can generate animation using a different tech stack and it will lead to extra iteration.
• Interaction. Because my animation responds to mouse hover, I need to ask Claude Code to support this interaction right away.
• Implementation details. Some specific details that will help optimize performance of the animation (such as, InstancedMesh)

Quick note: based on my experience, the initial prompt you submit will determine whether your animation design will be good enough. That’s why you should invest in crafting the right prompt with all details (think of it as you will achieve 80% of the quality of future animation with the initial prompt, and 20% with follow-up prompts).

After you submit the prompt, Claude Code will generate this animation in less than 10 minutes, and, because I’ve asked it to refine the output (section, Scene polish in the prompt), it will validate animation automatically.

Try this approach and share what you think about it in the comments.

Want to master Claude Code?

Check out my complete guide to Claude Code, packed with highly practical insights on how you can integrate it into your design process. This guide is updated on a weekly basis, so you’ll always get the latest information about Claude Code.

[embed]Claude Code: Practical Guide for Product Designers Practical guide for product designers who want to master Claude CodeIt covers the following topics: Claude Code Best…babich.gumroad.com