Step Carousel

Step Carousel

A stacked sequence for a process, reading list or set of ideas. Azure places white text over blue artwork. Blueprint adds an index rail and top controls; Gallery gives the image and step number more space. This is an Arclen UI Pro component.

React

Install Step Carousel with the catalogue’s installation command. The installed entry includes its stylesheet and local Poppins and Inter fonts. Keep the component’s assets and font notices together.

import { StepCarousel } from './components/step-carousel';

export default function App() {
  return (
    <main style={{ padding: 64, background: '#081018', minHeight: '100vh' }}>
      <StepCarousel
        titles={['Find the idea', 'Make a draft', 'Share the result']}
        descriptions={['Choose one useful question.', 'Try it with the people who will use it.', 'Publish what worked and keep learning.']}
        labelPrefix="Phase"
        width={680}
        cardHeight={220}
        compactWidth={340}
        textScale={1.05}
        surface="#14654e"
        accent="#8ee6c2"
        backdrop="#06261c"
        showCounter
        autoplay={false}
      />
    </main>
  );
}

The wrapper accepts every setting plus className, style and paused. It renders the initial content on the server and manages the controller after mounting. Changing settings retains the current step where possible. paused stops automatic advancement and removes travel while allowing manual navigation.

Standalone HTML

Download the HTML package and keep component.js, component.css, assets and licence files beside your page. The supplied component.html includes initial semantic content and a no-JavaScript poster. A complete configured page can use:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Our process</title>
  <link rel="stylesheet" href="./component.css">
</head>
<body style="margin:0;padding:64px 16px;background:#081018">
  <div data-arclen-ui="step-carousel"
    data-settings='{"titles":["Find the idea","Make a draft","Share the result"],"descriptions":["Choose one useful question.","Try it with the people who will use it.","Publish what worked and keep learning."],"labelPrefix":"Phase","width":680,"cardHeight":220,"compactWidth":340,"textScale":1.05,"surface":"#14654e","accent":"#8ee6c2","backdrop":"#06261c","showCounter":true,"autoplay":false}'>
    <section aria-label="Our process">
      <h2>Find the idea</h2>
      <p>Choose one useful question.</p>
    </section>
  </div>
  <script src="./component.js" defer></script>
</body>
</html>

Serve the directory through a web server. Relative asset paths also work when the whole directory is deployed below a nested URL.

Vanilla controller

In a bundler that handles TypeScript, CSS and image imports, use the installed framework-neutral core:

import { mount } from './components/step-carousel/src/core';
import './components/step-carousel/src/styles.css';

const host = document.querySelector<HTMLElement>('#process');
if (!host) throw new Error('Missing #process host');
const settings = {
  titles: ['Plan', 'Build', 'Launch'],
  descriptions: ['Choose a clear goal.', 'Make it useful.', 'Share it with your audience.'],
  autoplay: false,
  showCounter: true,
};
const carousel = mount(host, settings);
carousel.update({ ...settings, cardHeight: 240 });
carousel.pause();
carousel.resume();
// Call when the containing view is removed.
carousel.destroy();

mount owns the host’s children. update takes a complete configuration; omitted settings return to defaults. pause, resume and destroy are safe to call repeatedly. Destroy clears owned listeners, the visibility observer, timer, animations and rendered children. A destroyed controller cannot restart. The core also exports defaults, resolveSettings and render for server rendering.

Content and appearance

The settings panel lists every default and bound. Titles and descriptions pair by position; one to twelve steps are supported. Missing or invalid descriptions become empty. Invalid individual titles become “Untitled step”; an empty or entirely blank title list restores the seven defaults. Titles allow 90 characters and descriptions 220. Text is escaped. The step label can be hidden or renamed with showLabel and labelPrefix.

width caps the overall width; cardHeight sets the card’s minimum size. Azure uses a compact layout below 810px viewport width or in a container at most 500px wide. compactWidth sets that layout’s maximum width, constrained by the available parent. contentInset sets Azure’s horizontal text inset; parents narrower than 300px use 20px for readable space. Azure cards grow when longer copy or larger type needs more room; cardHeight remains a minimum. Cards in the visible stack share the height needed by their longest content. Increase the minimum when you want extra space. textScale scales text in all three designs from 0.8 to 1.25. radius changes card corners and peek changes the separation between stacked cards.

surface, accent and backdrop create the artwork’s base, light and deep tones. Azure’s default palette keeps the bundled blue artwork unchanged. Changing these colours uses a palette gradient with a subtle luminance texture, so colour controls affect the visible card. ink changes text. Custom images keep their own colours.

artwork chooses the design’s artwork automatically, selects another bundled composition, or removes the image with “Palette only”. image overrides that selection and imageFit chooses cover or contain for the custom image. Empty image restores bundled artwork. Accepted images are HTTPS URLs, local relative/root-relative paths, or PNG/JPEG/WebP/GIF base64 data URLs. HTTP, executable URLs, SVG data URLs and protocol-relative URLs are rejected. A failed image is hidden, leaving a coloured background and readable text. Keep image rights with your project. A remote image requires a network connection; defaults use only bundled assets.

Navigation and motion

Previous and Next wrap through the list. Focus the carousel or its buttons to use arrow keys; Enter and Space activate buttons normally. Inactive cards are hidden from assistive technology. Manual changes announce the step; automatic changes stay quiet.

The default sequence advances every 4000ms. interval sets the wait between steps; duration changes the transition length without changing its easing. Autoplay waits a full interval after navigation or resuming. It pauses on mouse hover, focus within, an offscreen host, a hidden document, explicit pause() or the Pause button. Azure’s Pause button appears on keyboard focus; the other designs show it at rest. Touch does not latch hover. Leaving a paused condition starts a fresh interval without a backlog. Reduced motion removes travel and disables autoplay while preserving manual navigation.

showCounter displays the current position and total. The Play/Pause choice is independent of the React paused prop; focus and hover suspend playback without changing that choice.

The autoplay Pause button is always visible on touch devices and appears on keyboard focus for fine pointers.