Animated Showcase

The AnimatedShowcase component displays interactive UI elements with smooth transitions and animations.

ScrollX-UI
An open source collection of animated, interactive components
Create stunning, premium, handcrafted components.

An accessible AnimatedShowcase component built with Framer Motion

Installation

npx scrollx-ui@latest add animated-showcase

Usage

import AnimatedShowcase from "@/components/ui/animated-showcase";
import EyeglassesFrame from "@/components/ui/eyeglasses";
<AnimatedShowcase
      components={[
        {
          name: "eyeglasses",
          component: (
            <div className="flex flex-col items-center justify-center min-h-screen p-8">
              <EyeglassesFrame
                colorOptions={{
                  black: "bg-black border-black",
                  brown: "bg-amber-800 border-amber-800",
                  silver: "bg-gray-400 border-gray-400",
                  green: "bg-green-700 border-green-700",
                  pink: "bg-pink-500 border-pink-500",
                }}
                initialColor="brown"
                className="rounded-lg"
                showColorPicker={false}
                size="md"
              />
            </div>
          ),
        },
      ]}
      title="ScrollX-UI"
      subtitle="An open source collection of animated, interactive components"
      description="Create stunning, premium, handcrafted components."
    />

API Reference

AnimatedShowcase

The AnimatedShowcase is the root container for displaying a collection of animated and interactive UI components with smooth transitions. It is ideal for showcasing visual components in an engaging manner.

Props

components (required)

  • Type: Array<{ name: string; component: React.ComponentType }>
  • An array of components to be displayed in the showcase.
  • Each object must contain a unique name and a valid React component.

title

  • Type: string
  • Default: "ScrollX-UI"
  • Optional title text displayed at the top of the showcase.

subtitle

  • Type: string
  • Default: "An open source collection of animated, interactive components"
  • Optional subtitle displayed below the title.

description

  • Type: string
  • Default: A predefined description string
  • Optional detailed description of the animated component collection.