Animated Section

Features 24

About

A section displaying technology integrations, featuring descriptive text, a call-to-action button with an arrow hover animation, and automatically scrolling cards presented in different layouts for mobile (horizontal) and desktop (vertical columns).

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

Code

How Animated Section is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

// This is a demo of a preview
// That's what users will see in the preview

import { IntegrationsSection } from "@/components/ui/animated-section";

const DemoOne = () => {
  return (
    <div className="flex items-center  bg-[#141414] justify-center min-h-screen">
      <IntegrationsSection />
    </div>
  );
};

// IMPORTANT:
// format of the export MUST be export default { DemoOneOrOtherName }
// if you don't do this, the demo will not be shown
export default { DemoOne };