Feature Highlights

Installation

Usage

import { FeatureHighlights } from "@/components/ruixen/feature-highlights";
import type { FeatureItem } from "@/components/ruixen/feature-highlights";
 
const features: FeatureItem[] = [
  {
    title: "AI-Powered Automation",
    description: "Streamline workflows with intelligent automation.",
    image: (
      <img src="/dashboard.png" alt="" className="h-full w-full object-cover" />
    ),
  },
  {
    title: "Real-Time Analytics",
    description: "Monitor metrics live with sub-second latency.",
    image: (
      <img src="/analytics.png" alt="" className="h-full w-full object-cover" />
    ),
  },
];
 
export default function MyFeatures() {
  return <FeatureHighlights features={features} />;
}

Props

FeatureItem

interface FeatureItem {
  title: string;
  description: string;
  image?: React.ReactNode;
}

The image prop accepts any React node — <img>, Next.js <Image>, gradients, videos, or any JSX. Use h-full w-full object-cover on images to fill the stage.

Animation Details

• Rack-focus crossfade — images transition with blur(6px) + scale(0.94) creating a cinematic depth-of-field effect
• Auto-advancing progress bar — thin line fills from left to right, auto-advances on completion, pauses on hover
• Sliding accent indicator — ResizeObserver tracks the active item's position and height in real time
• Grid expand — grid-template-rows: 0fr → 1fr for smooth description reveal
• Description choreography — 80ms delayed fade + slide after the container opens
• Expo deceleration — cubic-bezier(0.16, 1, 0.3, 1) on layout transitions, 0.7s on image crossfade

Features

• Zero dependencies — no shadcn, no framer-motion, no next/image
• Responsive — side-by-side on desktop, stacked on mobile
• Auto-play with hover pause
• Proper TypeScript interfaces
• Theme-aware via CSS custom properties
• Accessible — semantic button elements, keyboard navigable