Circle Animations Collection

Component 70

About

Here is Circle Animations Collection

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Circle Animations Collection to your project and fits it to your theme.

Code

How Circle Animations Collection is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

'use client';

import { CircleAnimation } from '@/components/ui/circle-animations-collection';

const animations = [
  { id: 'radial-pulse', title: 'Radial Pulse' },
  { id: 'orbital-pulse', title: 'Orbital Pulse' },
  { id: 'pendulum-wave', title: 'Pendulum Wave' },
  { id: 'pulse-wave', title: 'Pulse Wave' },
  { id: 'concentric-rings', title: 'Concentric Rings' },
  { id: 'sequential-pulse', title: 'Sequential Pulse' },
  { id: 'oscillating-dots', title: 'Oscillating Dots' },
  { id: 'pulsing-grid', title: 'Pulsing Grid' },
  { id: 'spiral-galaxy', title: 'Spiral Galaxy' },
];

const CircleAnimationsDemo = () => {
  return (
    <div className="flex min-h-screen w-full flex-col items-center justify-center p-5">
      <h1 className="mb-[30px] text-center text-2xl tracking-[1px]">
        CIRCLE ANIMATIONS COLLECTION N°2
      </h1>
      <div className="mx-auto grid max-w-[1000px] grid-cols-1 gap-[30px] sm:grid-cols-2 lg:grid-cols-3">
        {animations.map((anim) => (
          <CircleAnimation key={anim.id} title={anim.title} animationId={anim.id} />
        ))}
      </div>
    </div>
  );
};

export default CircleAnimationsDemo;