Process
Process Slideshow
A heading, then numbered steps one slide at a time — the number, title and text beside a photo — with two arrows under the slide.
Layout and motion from the Titen template — see it in contextBlocks come with Pro
Preview every block now, in any theme and at any width. The source, the install command and the AI prompt unlock when Pro opens, once the catalog reaches 20 templates.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label / title | string | — | Muted line and the heading (h2; its words rise in view); the title also names the carousel. |
| steps | { title, text, image }[] | 4 steps | One slide each, numbered 01, 02…; titles are h3. |
| interval | number | 0 | Milliseconds between slides; 0 (as on Framer) turns autoplay off. |
| className | string | — | Classes for the <section>. |
- One slide shows at a time with a line along its bottom: phones stack the text and a 312px photo at the bottom of a 600px slide; from 768px the text and photo share the row (380px slide); from 1024px they are 80px apart (400px slide). Slide heights are minimums, so a longer text grows every slide alike.
- Two arrows sit under the slide at its left (slideshow arrows="below-left"); the slides loop endlessly with the slideshow's spring, and can be dragged or moved with ← →. The heading's words rise out of a blur and the slideshow rises 18px once in view.
