# FeatureSlideshow

> A step-by-step feature explainer: an accordion of steps on the left that advances on a timer, a progress line on the open step, and a large media slot on the right.

## Facts

- **Product**: Crew OS
- **Family**: Motion
- **Global**: `window.DigitalCrew.FeatureSlideshow`
- **Source**: `digitalcrew-orchestrator: components/ui/feature-slideshow.tsx`
- **Import in the app**: `import { FeatureSlideshow } from "@/components/ui/feature-slideshow";`
- **Live preview**: /design/components/feature-slideshow/preview.html
- **Page**: /design/components/feature-slideshow

## Guidelines

**Use it for** "how it works" sections with three to five steps (exported as `FeatureSlideshow`; the source name is `Feature`).

**What you provide**: `featureItems` (required): `{ id, title, content, image?, video? }[]`; `collapseDelay` (ms per step, default 5000); `linePosition` (`left` default, `right`, `top`, `bottom`); `lineColor` (classes, default `bg-neutral-500 dark:bg-white`); `ltr` (swap the columns). Crew OS uses `collapseDelay={5000}`, `linePosition="bottom"`, `lineColor="bg-secondary"`.

**Anatomy**: from `lg` a five-column grid (steps span 2, media 3, 40px gap). The open step is `rounded-lg`, white (`#27272A` in dark mode) with a hairline shadow; titles are 18px semibold, content 14px medium. The media slot is 350px tall; images are `rounded-xl object-cover` with a 1px border; without `image` or `video` it shows a plain `bg-gray-200` panel, as in this preview. Below `lg` the steps become a snap-scrolling card row.

**Behaviour**: starts when half of it is in view. The progress line fills linearly over `collapseDelay`, then the next step opens; accordion content slides over 300ms on `cubic-bezier(0.87, 0, 0.13, 1)`. Images fade in from a 5px blur over 300ms. No reduced-motion branch.

**Don't** put more than five steps, or long paragraphs in `content`.

## API

```ts
type FeatureItem = {
    id: number;
    title: string;
    content: string;
    image?: string;
    video?: string;
};
type FeatureProps = {
    collapseDelay?: number;
    ltr?: boolean;
    linePosition?: "left" | "right" | "top" | "bottom";
    lineColor?: string;
    featureItems: FeatureItem[];
};
export declare const Feature: ({ collapseDelay, ltr, linePosition, lineColor, featureItems, }: FeatureProps) => any;
```

## Example

```html
<div id="root" class="p-6"></div>
<script>
(function () {
  var h = React.createElement, DC = window.DigitalCrew, I = DC.Icons;
  var items = [
    { id: 1, title: "Describe your ideal customer", content: "Tell Max who you sell to. He turns it into filters: industry, headcount, region and job titles." },
    { id: 2, title: "Max builds the list", content: "Accounts are enriched and every email is verified before anything is sent." },
    { id: 3, title: "Sequences run themselves", content: "Personal first touches, follow-ups on day 3 and day 7, and replies triaged by intent." },
    { id: 4, title: "Meetings land in your calendar", content: "Interested prospects pick a slot. You get a one-page brief an hour before each call." }
  ];
  function App() { return h(DC.FeatureSlideshow, { featureItems: items, collapseDelay: 5000, linePosition: "bottom" }); }
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>
```

## More in Motion

- [ActionFocusSession](/design/components/action-focus-session.md): The focus timebox for one task in the actions cockpit: a live billable clock with approve, start, pause, run and done, and a burst of sparkles on completion.
- [CardResize](/design/components/card-resize.md): A container that tweens its width and height when its content changes (`.t-resize`).
- [ChapterScrubber](/design/components/chapter-scrubber.md): A rail of ticks, one per chapter, that swell like a dock under the pointer, with a card previewing the hovered chapter.
- [ContainerScroll](/design/components/container-scroll.md): A hero block where a device-like frame starts tilted back in 3D and straightens as the page scrolls, with the title drifting up.
- [FirstBentoAnimation](/design/components/first-bento-animation.md): A self-playing chat vignette for the bento grid: a user asks for a meeting slot, the Digital Crew avatar shows typing dots, then the reply streams in as a `Reasoning` block.
- [FourthBentoAnimation](/design/components/fourth-bento-animation.md): A scheduling vignette for the bento grid: a week ruler, three task bars that spring into place, and a time cursor that follows the pointer.
- [HyperText](/design/components/hyper-text.md): A monospaced, uppercase text effect: letters scramble through random characters, then lock in from left to right.
- [InfiniteSlider](/design/components/infinite-slider.md): A JavaScript-driven endless strip (Framer Motion) that renders its children twice and slides them in a loop, optionally slowing on hover.
- [JoyfulTaskCheckbox](/design/components/joyful-task-checkbox.md): A task checkbox with a small, restrained completion moment: one soft bloom, two sparks, then stillness.
- [Lottie](/design/components/lottie.md): The lottie-react player, exported as-is, for the Lottie animations that ship with Crew OS (`animations/*.json`).
- [Marquee](/design/components/marquee.md): An endless CSS scroll of repeated content, horizontal or vertical, speed set with two CSS variables.
- [MotionScale](/design/components/motion-scale.md): The shared motion scale made visible: the same distance travelled on each duration token and each easing, with a Replay button.
- [NumberFlowCounter](/design/components/number-flow-counter.md): A small dark pill that shows one number at a time and rolls its digits to the next value every two seconds (NumberFlow).
- [OrbitingCircles](/design/components/orbiting-circles.md): Places its children on a circular orbit around the centre of the parent and spins them, with an optional faint ring for the path.
- [ShimmerText](/design/components/shimmer-text.md): A status line with a light band sweeping across its glyphs — Max's "Thinking…" and live tool lines (`.t-shimmer`).
- [SignatureGradient](/design/components/signature-gradient.md): The signature Digital Crew gradient — indigo → pink → amber (`dc-andre`, `dc-camille`, `dc-amber`) — in its four forms.
- [SkeletonReveal](/design/components/skeleton-reveal.md): A skeleton that cross-blurs into the loaded content, so the swap reads as one motion (`.t-skel`).
- [StreamingText](/design/components/streaming-text.md): Streamed words resolving through a soft cross-blur, one after another (`.t-stream-w` → `.is-in`).
- [ThirdBentoAnimation](/design/components/third-bento-animation.md): An insight vignette for the bento grid: a smooth area line draws itself, a dot pulses at its midpoint and a dark pill above it ticks through values.
- [UniboxMotion](/design/components/unibox-motion.md): The Unibox's shared motion vocabulary: every surface moves on the same few springs, so the whole inbox feels like one physical material.