Presentation controls

Stage vs rail

Use a stage carousel when a single slide should own attention — heroes, testimonials, image-first galleries. Use a rail when several peers scroll horizontally — case studies, logos, related cards. Rails default to manual scroll (snap + optional arrows); stage carousels support autoplay with pause on interaction and respect prefers-reduced-motion.

Primitive · fs-stage-carousel

Base track + viewport; variants add modifier classes only.

Primitive

fs-stage-carousel

Emitted by render_stage_carousel (hero variant) — thin wrappers call the same helper.

Second

Translate track

Fixed aspect viewport avoids layout shift between slides.

fs-hero-carousel

Wide stage with overlay copy and CTAs. Autoplay enabled below for demo (pauses on hover / focus / manual nav).

Phase 1

Methodology

Calm, full-width story beats

Hero stages use the same glass-adjacent overlays and typography as the rest of Forge — no generic SaaS chrome.

Autoplay pauses on hover, focus, and manual navigation.

View tokens

Delivery

Optional autoplay with reduced-motion respect

When prefers-reduced-motion is set, autoplay does not run.

Surfaces

Evidence

Subtle motion only

Transforms stay slow; arrows and dots use existing focus rings.

Motion

fs-gallery-carousel

Image-first slides with caption overlay. First slide: lightbox; second: link; third: no action.

Linear flow

Click opens lightbox on this slide.

Swimlane

Swimlane

Native link to the diagrams page.

Funnel

Third slide — swipe or use arrows.

fs-thumb-gallery

Main gallery plus thumbnail strip; thumbnails call the same controller as arrows and dots.

KPI card

Thumbnail strip syncs with the main stage.

Bar chart

Keyboard-accessible thumbs act as tabs.

Heatmap

Good for product screenshots and walkthroughs.

Primitive · fs-rail

CSS scroll-snap scroller; arrows scroll by one viewport chunk. Card variant uses .forge-card.

fs-card-rail

First tile uses topic preview; others are plain links.

fs-logo-strip

Grid

Rail (scroll-snap + arrows)

Marquee (static when reduced-motion)

Duplicated segment for seamless loop; animation disabled under prefers-reduced-motion.

fs-testimonial-slider

One-up stage with quote typography; autoplay off by default.

The design system stayed coherent because we extended tokens and glass instead of bolting on a new kit.

Engineering lead

Director, Example Corp

Rails for cards and logos, carousels for one-up stories — the split matches how we ship pages.

Product marketing

PMM, Example Org

Slide actions

Three minimal carousels showing preview_mode / hit targets.

Normal link

Link action

Link action

Entire media hit is a normal anchor.

Topic preview modal

Topic preview

Opens openTopicPreviewModal (same as topic preview card).

Image lightbox

Lightbox

Button opens fs media lightbox (not the diagram modal).

Marketing sections · marketing_sections.py

Composable blocks for enterprise-style homepages (KPI row, case study feature, advisor grid). Requires forgesdlc-theme.css for stat glass and section spacing — this page already loads it via extra_css().

render_marketing_stat_band

render_case_study_spotlight

CASE STUDY

How a focused team shipped calmer releases

We stopped thrashing on scope because the methodology gave us a shared language for risk and evidence.

Read full story

render_people_showcase

Science and advisors

Headshots optional — placeholder initials when image_src is empty.

Alex River

Organizational psychologist

Jordan Lee

Research professor

SA

Sam Ortiz

People analytics lead