How to Build a Scroll-Animated Particle Website with AI

Scroll-triggered, three-dimensional particle animations used to feel out of reach for solo developers. In this article I walk through exactly how I rebuilt my own site using Claude — the reference I chose, where the first attempt went wrong, and how a single extra instruction changed everything.

Finding a Reference: Stylus Riferro Design

The starting point is a good visual reference. I used Stylus Riferro Design, a site that collects dozens of 3-D and scroll-animated layouts in one place. When you open any individual design, the left side shows the colour palette and typography, while the right side provides a design.md file and the accompanying CSS. That means you get both the visual inspiration and the technical spec at the same time.

From the available options I chose the style of a site called DALA and decided to base my redesign on it.

The First Prompt — and Why It Fell Short

I copied the DALA design.md file and pasted it straight into Claude. The result was disappointing: Claude only updated my existing site's colour palette. The layout and animations stayed exactly as they were.

The problem was that Claude had never actually seen the animation in motion. So I gave it a new instruction: "Open the reference page, watch the animation, then decide on the design." After Claude examined the page — working through all four tabs, the colour palette, and the typography — the output was far closer to what I had in mind.

Particle Theme and Personalisation

Even after that improvement, Claude's first version used a dot-based particle style that matched the reference but didn't suit my site's identity. I pushed one step further:

"Build the objects from the cover images of my Instagram posts. Keep the same object shape, but replace the dust-cloud look with my cover visuals."

The result: when the page loads, a brain shape assembled from my Instagram cover images rotates on screen. As you scroll down, the covers break apart in a smooth animation and reform into a new shape — a light bulb, then a globe, and finally a footer that echoes the December 5 logo. Each section has editable text areas that you can adapt to your own content.

Step-by-Step Summary

1. Pick a reference: Find a scroll animation you like on a source such as Stylus Riferro Design.
2. Grab the technical file: Copy the design.md file along with the colour and typography info.
3. Paste it into Claude: If the first result misses the mark, ask Claude to open and watch the reference page itself.
4. Personalise the particles: Tell Claude to replace the default shapes with your own images, colours, or brand elements.
5. Edit the copy: Once the shapes are right, update all section text to fit your site.

Guide and PDF

I've put together a full written guide covering every prompt I used and the steps Claude needs to follow. You can find it in the Documents section of my site and download it directly from there.

Closing Thoughts

Building a scroll-animated particle site with AI is entirely doable — but the key is giving Claude something to watch, not just something to read. My first attempt only changed colours; once I let Claude see the animation in action, the design leapt forward. If your first result isn't there yet, one more precise instruction is usually all it takes.