DEV Community

Cover image for React 18 and Claude Code Animations Project
Dooa Ansaari
Dooa Ansaari

Posted on AI-assisted

React 18 and Claude Code Animations Project

I created 10 loader animations using Claude code and Opus 5.5. It was wild to see my imagination coming to life within seconds. The new Anthropic model Opus 5.5 is really good at animations. The project is meant to have fun with animations and try new ideas with AI.

The result is react-loaders: 10 loaders, zero dependencies, each one a folder you can copy into your app.

🎬 A few of them

Glow Dust: the button dissolves into ~1,100 particles that drift through a "wind" field. Move your finger through it and the dust swirls around you. At the end, it all gathers into a glowing βœ“.

Glow Dust

Shooting Star: the button becomes a star and launches. A meteor shower follows (swipe to fling your own), then a constellation draws a βœ“.

Shooting Star

Cat & Mouse: a mouse escapes from the button, a cat chases it for three laps… then pounces. Gotcha!

Cat & Mouse

The others: Glow Shore (bioluminescent waves you can touch), Heartbeat, Fireworks, Savanna Sunset, Flower Bloom, Thunderstorm and Coin Rush (a tiny retro platformer).

✨ Try it

πŸ‘‰ github.com/dooa-ansari/react-loaders

πŸ‘‰ Test it live

Run it locally with npm install && npm run dev, swipe through the cards, and play with the interactive ones. Glow Dust on a phone is weirdly relaxing.

Top comments (0)