shipany-stacked-features

Reusable ShipAny stacked landing features component.

The package keeps the scroll-stacked feature card UI reusable across ShipAny template variants. Projects provide the section JSON and Tailwind theme tokens.

Install

pnpm add -E [email protected]

For Tailwind CSS v4, include the compiled package in scanning:

@source '../../node_modules/shipany-stacked-features/dist';

Adjust the relative path to match your app CSS file. In the pvid monorepo baseline, scan local source while developing the package:

@source '../../../packages/stacked-features/src';

The component expects common ShipAny/Tailwind theme tokens such as bg-card, text-foreground, and text-muted-foreground to exist in the consumer app.

Usage

'use client';

import { StackedFeatures } from 'shipany-stacked-features';

export function FeaturesBlock({ section }) {
  return <StackedFeatures section={section} />;
}

Section Data

The section shape is compatible with ShipAny landing page JSON. Each item can use either image or video; if both are present, video is rendered.

type StackedFeaturesSection = {
  id?: string;
  title?: string;
  highlight_text?: string;
  description?: string;
  className?: string;
  items?: Array<{
    title?: string;
    highlight_text?: string;
    description?: string;
    glow?: 'warm' | 'magenta' | 'cyan' | string;
    image?: { src?: string; alt?: string };
    video?: { src?: string; alt?: string };
  }>;
};

Example:

{
  "id": "stacked-features",
  "title": "What this generator creates",
  "highlight_text": "generator creates",
  "description": "Showcase the strongest use cases with sticky stacked cards.",
  "items": [
    {
      "title": "Upload a photo,",
      "highlight_text": "get a cinematic result",
      "description": "Explain the workflow and the output quality.",
      "glow": "warm",
      "video": {
        "src": "https://cdn.example.com/videos/demo.mp4",
        "alt": "Cinematic video result"
      }
    },
    {
      "title": "Use a reference image",
      "highlight_text": "to keep the look consistent",
      "description": "Use image cards when no video asset is available.",
      "glow": "cyan",
      "image": {
        "src": "https://cdn.example.com/imgs/demo.jpg",
        "alt": "Generated image result"
      }
    }
  ]
}

Media Sizing

The default ShipAny skin uses fixed media containers so generated assets do not resize unpredictably between cards:

• Desktop: 400x480
• XL desktop: 460x540
• Mobile: responsive width with a 550:600 aspect ratio

Media is rendered with object-cover, so images and videos fill the container and may be cropped if their source aspect ratio differs from the card frame.

Videos render with autoPlay, muted, loop, playsInline, and preload="auto". The component also calls video.play() after mount and when metadata loads as a browser autoplay fallback.

Exports

• StackedFeatures
• StackedFeaturesProps
• StackedFeaturesSection
• StackedFeaturesItem
• StackedFeaturesMedia

Notes

The package does not import project aliases, Next.js components, or local image helpers. It renders media with native img and video elements.