Building a collection of animated React components

I’ve been scrolling through X, OpenProcessing, and various creative coding communities for a while now. Every other day I stumble upon something incredible — a WebGL gradient, a particle system, a noise-driven animation — and think: I want that in my next project.

The problem? These inspirations live scattered across bookmarks, screenshots, and half-remembered tweets. When it’s time to actually build something, I can never find them. And even when I do, recreating them from scratch takes too long when you’re in the middle of shipping a product.

The solution: a component showcase

So I built Phicks’s Component Collection — a simple React + Vite + Tailwind CSS site where I collect, recreate, and showcase animated and visual components. Each one is a self-contained React component that I can browse, play with parameters, and copy the source code directly into any project.

The stack is intentionally minimal:

• React 19 — because that’s what I use in production
• Vite — fast builds, no config bloat
• Tailwind CSS v4 — utility-first styling with the new Vite plugin

No Next.js, no SSR, no backend. Just a static SPA hosted on S3 + CloudFront. The whole thing is under 700KB gzipped, which is reasonable given it ships 19 visual components with WebGL shaders, canvas animations, and particle systems.

What’s in the collection

Right now the collection includes components I recreated using Claude from various sources:

• OpenAI Wave Gradient — WebGL2 animated wave gradient, inspired by davidumoru.me
• Framer Wave Gradient — flowing organic color layers inspired by Framer’s visual style
• Pointer Field — a grid of lines that rotate to track the mouse, from motion.dev
• Mesh Noise — animated noise contour lines with 3D tilt projection
• Particle Globe — a rotating sphere of particles that scatter around the cursor
• Reaction Diffusion — text that dissolves into organic patterns via blur and unsharp feedback
• Warp Text — noise-warped text with fluid distortion via WebGL2
• And more: Confetti, Pattern Canvas, Pixelize, Bauhaus Grid, Hex Text, Liquid Gradient, Bezier Flow, Contour Flow, Warhol Type, Gradient Bars, Geometry Motif…

Each component has a demo page with interactive controls — sliders, toggles, color pickers — so I can tweak parameters and see how they behave before copying them.

The workflow

The workflow is simple:

1. Find something cool on X, OpenProcessing, or creative coding sites
2. Open Claude Code, describe what I want, reference the source
3. Claude recreates it as a self-contained React component
4. I add it to the collection with a demo page
5. When I need it for a real project, I open the collection, tweak the params, and copy the code

This approach works especially well for the BeeBlast website redesign. Instead of designing animations from scratch in Figma, I can browse my collection, pick something that fits the brand, adjust the colors, and drop it in. It cut the ideation-to-implementation loop significantly.

Why not just use a component library?

Libraries like Framer Motion, GSAP, or Three.js are great, but they’re tools, not components. I still need to design the actual visual effect, write the shader or animation code, and wire everything together. My collection is the layer above — it’s the finished effect, ready to use.

Also, most component libraries focus on UI primitives (buttons, modals, forms). What I needed was a collection of visual components — backgrounds, hero animations, interactive effects — the stuff that makes a site feel alive.

What’s next

I plan to keep growing the collection as I discover more interesting visual effects. The site itself is deployed at components.phickstran.com and I might open-source the individual components later. For now, it’s my personal creative playground — a place to experiment, ideate, and collect inspiration that’s actually usable.