ai-showcase-wall

Animated AI brand and model showcase wall with infinite scroll and glassmorphism design

A beautiful, animated showcase wall for displaying AI brands and models with infinite scroll, glassmorphism effects, and full accessibility support.

✨ Features

• 🎨 Glassmorphism Design: Modern frosted glass aesthetic with brand-specific glow effects
• ♾️ Infinite Scroll: Smooth marquee animation with dual-row reverse scrolling
• 🎯 Interactive Popovers: Hover to view detailed model information for each brand
• ⚡ Lightweight: Zero external icon dependencies, uses CDN for SVG assets
• ♿ Accessible: WCAG 2.1 AAA compliant with full keyboard navigation support
• 🎭 Motion Safe: Respects prefers-reduced-motion for accessibility
• 📱 Responsive: Fully responsive design from mobile to desktop
• 🔧 TypeScript: Full type safety with comprehensive TypeScript definitions
• 🎨 Customizable: Easy to extend with custom brands and models
• 🚀 Performance: Optimized with React 18+, SSR-safe

📦 Installation

npm install ai-showcase-wall
# or
yarn add ai-showcase-wall
# or
pnpm add ai-showcase-wall

Peer Dependencies

This package requires the following peer dependencies:

{
  "react": ">=18.0.0",
  "react-dom": ">=18.0.0",
  "tailwindcss": ">=3.0.0"
}

🚀 Quick Start

1. Import Styles

Import the CSS file in your application entry point:

import 'ai-showcase-wall/styles.css';

2. Configure Tailwind CSS

Add the preset to your tailwind.config.js:

module.exports = {
  presets: [
    require('ai-showcase-wall/tailwind-preset')
  ],
  content: [
    // ... your content paths
    './node_modules/ai-showcase-wall/dist/**/*.{js,mjs}'
  ],
  // ... rest of your config
}

3. Use the Component

import { AIShowcaseWall } from 'ai-showcase-wall';
import { AI_BRANDS } from 'ai-showcase-wall/data';

function App() {
  return (
    <div>
      <h1>Supported AI Models</h1>
      <AIShowcaseWall brands={AI_BRANDS} />
    </div>
  );
}

📚 API Reference

<AIShowcaseWall />

Main component that displays the animated brand showcase wall.

Props

| Prop | Type | Description | Required | |------|------|-------------|----------| | brands | BrandData[] | Array of brand data to display | Yes |

Example

import { AIShowcaseWall } from 'ai-showcase-wall';

const customBrands = [
  {
    id: 'openai',
    brand: 'OpenAI',
    models: [
      {
        id: 'sora-2-text',
        name: 'Sora 2 Text-to-Video',
        type: 'video',
        mode: 'text-to-video'
      }
    ]
  }
];

function MyShowcase() {
  return <AIShowcaseWall brands={customBrands} />;
}

Data Utilities

AI_BRANDS

Pre-configured array of 8+ major AI brands with 21+ models including:

• Runway (Gen-3 Alpha Turbo, Aleph)
• OpenAI (Sora 2 variants)
• Google (Veo-3 series, Nano Banana)
• ByteDance (V1 Lite/Pro variants)
• Kling (V2.1 series)
• WAN (2.2 A14B variants)
• Midjourney
• Flux

import { AI_BRANDS } from 'ai-showcase-wall/data';

console.log(AI_BRANDS); // Array of BrandData

Helper Functions

import {
  getBrandByName,
  getBrandById,
  getAllModels,
  getModelsByType,
  getModelsByMode,
  getModelById,
  getBrandCount,
  getModelCount,
  getStatistics
} from 'ai-showcase-wall/data';

// Get specific brand
const google = getBrandByName('Google');

// Get all video models
const videoModels = getModelsByType('video');

// Get statistics
const stats = getStatistics();
// { totalBrands: 8, totalModels: 21, videoModels: 18, imageModels: 3 }

TypeScript Types

import type {
  BrandData,
  ModelInfo,
  AIShowcaseWallProps,
  BrandCardProps
} from 'ai-showcase-wall';

interface ModelInfo {
  id: string;
  name: string;
  type?: string;
  mode?: string;
}

interface BrandData {
  id: string;
  brand: string;
  models: ModelInfo[];
}

🎨 Customization

Custom Brand Data

Create your own brand data:

import { AIShowcaseWall } from 'ai-showcase-wall';
import type { BrandData } from 'ai-showcase-wall';

const myBrands: BrandData[] = [
  {
    id: 'my-brand',
    brand: 'My AI Company',
    models: [
      {
        id: 'model-1',
        name: 'Amazing Model v1',
        type: 'image',
        mode: 'text-to-image'
      }
    ]
  }
];

<AIShowcaseWall brands={myBrands} />

Brand Icons

The component uses CDN-hosted SVG icons from https://s.purikura.io/icons/{brand}.svg. Supported brands:

• Runway, OpenAI, Google, ByteDance, Kling, Midjourney, Flux

If an icon is not available, the component automatically falls back to displaying the brand name as text.

Tailwind Customization

Override default styles by extending the Tailwind configuration:

// tailwind.config.js
module.exports = {
  presets: [require('ai-showcase-wall/tailwind-preset')],
  theme: {
    extend: {
      // Customize animation duration
      animation: {
        marquee: 'marquee 30s linear infinite', // faster scroll
      },
    },
  },
}

♿ Accessibility

This component is built with accessibility in mind:

• ✅ Keyboard Navigation: Full support for Tab, Arrow keys, Enter, Space, Escape
• ✅ Screen Readers: Comprehensive ARIA labels and live regions
• ✅ High Contrast: Enhanced visibility in high contrast mode
• ✅ Motion Reduction: Respects prefers-reduced-motion setting
• ✅ Focus Management: Clear focus indicators and logical tab order
• ✅ Semantic HTML: Proper heading structure and landmark roles

Keyboard Shortcuts

| Key | Action | |-----|--------| | Tab / Shift+Tab | Navigate between brand cards | | Enter / Space | Open/close model popover | | Escape | Close popover | | Arrow Up/Down | Navigate models within popover | | Home / End | Jump to first/last model |

🎯 Browser Support

• Chrome/Edge 90+
• Firefox 88+
• Safari 14+
• Mobile browsers (iOS Safari, Chrome Android)

📄 License

MIT © Purikura Team

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

🔗 Links

• GitHub Repository
• Issue Tracker
• NPM Package

📝 Changelog

v1.0.0 (Initial Release)

• ✨ Initial release with 8 AI brands and 21+ models
• 🎨 Glassmorphism design with brand-specific glow effects
• ♾️ Infinite scroll marquee animation
• 🎯 Interactive hover popovers
• ♿ WCAG 2.1 AAA accessibility compliance
• 📱 Fully responsive design
• 🔧 TypeScript support
• 🎨 Tailwind CSS integration

Made with ❤️ by Purikura Team