Design
llms.txt digitalcrew.tech

Motion

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.

Crew OSMotionDigitalCrew.FeatureSlideshow
FeatureSlideshow · live · 1100px wideOpen

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.

Facts#

GroupMotion
ProductCrew OS
Globalwindow.DigitalCrew.FeatureSlideshow
Sourcedigitalcrew-orchestrator: components/ui/feature-slideshow.tsx
Import in the appimport { FeatureSlideshow } from "@/components/ui/feature-slideshow";

API#

TypeScript declarations emitted from components/ui/feature-slideshow.tsx (the module also exports Feature → FeatureSlideshow).

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#

The code of the preview above: plain React.createElement against window.DigitalCrew, with realistic data.

<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>
ActionFocusSessionCardResizeChapterScrubberContainerScrollFirstBentoAnimationFourthBentoAnimationHyperTextInfiniteSliderJoyfulTaskCheckboxLottieMarqueeMotionScaleNumberFlowCounterOrbitingCirclesShimmerTextSignatureGradientSkeletonRevealStreamingTextThirdBentoAnimationUniboxMotion