Carousel
The Carousel block is a horizontally scrollable card deck that supports two distinct variants — Editorial for rich content slides with headlines, body copy, and CTA buttons, and Product Scroll for full-bleed product images with inline price badges. Both variants share the same canvas, sidebar, and image effect system.
What it is
Each card in the carousel is a slide — an independent unit with its own background, image, text, link, and image effect settings. Slides are scrolled horizontally with momentum-based drag on touch and desktop. The sidebar gives you separate tabs for per-slide configuration and global canvas settings.
Adding a Carousel block
/ on any empty paragraph, type carousel, press Enter.+ on any block → scroll to Advanced → Carousel.When first added, the carousel populates with four default editorial slides so you can immediately see the layout. Switch to the Product Scroll variant from the Canvas tab to replace them with product-style defaults.
Variants
Editorial
Each slide has an eyebrow (small all-caps label above the title), a title, an optional body paragraph, and an optional CTA button. Text aligns left, center, or right. Text color is either white (dark theme) or black (light theme). Content is editable inline directly on the canvas by double-clicking any element.
Product Scroll
Each slide shows a full-bleed image (or solid background) with two floating pill badges anchored to the bottom: a product name pill on the left and a price pill on the right in blue. The product name and price are editable directly on the card. There is no eyebrow, body, or CTA in this variant.
Canvas interactions
Slides
Each slide is managed from the Slide tab in the sidebar. Click any card on the canvas to open its settings, or click a slide in the Layers list at the bottom of the tab.
Slide fields
| Field | Variants | Description |
|---|---|---|
eyebrow | Editorial | Small all-caps label above the title. Editable inline on the canvas. |
title | Editorial Product | Main slide headline. Editable inline. In Product variant, renders as a pill badge at the bottom-left of the card. |
body | Editorial | Supporting paragraph beneath the title. Hidden until you start typing or the slide is selected. |
bgColor | Editorial Product | Card background color. 16 palette swatches plus a custom color picker. Also used as the primary (shadow) color in dither duotone mode. |
imageUrl | Editorial Product | Upload via the ImageUploader, pick from your media library, or paste a URL. When set, the image fills the card as a background. An image effect can transform how it renders. |
linkUrl | Editorial Product | Makes the entire card a link on the published page. Accepts external URLs (https://) or internal page slugs starting with /. Use the page picker dropdown to link to a published blnk page without typing. |
textAlign | Editorial | Left, center, or right. Controls both text alignment and flex alignment of the content block within the card. |
theme | Editorial | "White" (dark theme) renders all text in white; "Black" (light theme) renders it in near-black. Choose based on your background color or image. |
showCta | Editorial | Toggles a CTA pill button at the bottom of the slide. When enabled, a label field appears to customise the button text. |
ctaLabel | Editorial | Text shown inside the CTA button. Defaults to "Learn more". |
price | Product | Price value shown in the blue badge. Editable inline on the card in edit mode. |
currency | Product | Currency code shown beside the price (e.g. MYR, USD). Defaults to MYR. |
imageEffect | Editorial Product | Per-slide image effect override. If set, overrides the carousel-level default. Options: none, dither, ascii. |
Managing slides
Card sizing
Card dimensions are global — all slides share the same width and height. There are three ways to change them:
Hover any card on the canvas to reveal S / M / L / XL pills at the top. Clicking one snaps width and height simultaneously to the preset dimensions.
The dotted handle at the bottom of any card resizes height. The right edge of the Add slide placeholder resizes width. Both are drag-only.
Use the Card width and Card height sliders for precise control. Adjusting via slider clears the active size preset.
Image effects
Both variants support three image rendering modes, set at two levels: a carousel-level default (Canvas tab → Image effect) that applies to all slides, and a per-slide override (Slide tab → Image effect) that overrides the default for that slide only.
None (default)
The uploaded image renders as a standard CSS background image with background-size: cover and background-position: center. A gradient overlay fades from the bottom to improve text legibility.
Dither
The image is rendered through a WebGL dithering shader. The shader converts the image into a grid of dots or pixels using one of four algorithms, then maps pixel luminance to two configurable colors.
ASCII
The image is converted to a live ASCII character grid rendered on a canvas element. The grid updates in real time as settings change.
blocks, standard, dots, binary, minimal, dense, braille, circles, hash. Controls which characters map to pixel luminance values.none, fade (characters fade in from random), matrix (cascading columns), typewriter (left-to-right reveal)./api/proxy-image) to avoid CORS issues when fetching external images for the WebGL shader or canvas renderer.Canvas settings
The Canvas tab in the sidebar controls global carousel settings.
General
TiltCard component with a 8° max tilt, 1.02× scale, and a glare highlight. Applied on the published page only — not in the editor.3D tilt on hover
When enabled, each card is wrapped in a TiltCard interactive component. On the published page, hovering a card tilts it up to 8° on both axes, scales it to 102%, and adds a specular glare highlight that follows the cursor.
<a> tag wrapper instead.When tilt is enabled, the carousel track adds 24px of vertical padding above and below to give cards room to scale without being clipped.
Slide links
Any slide can be made into a link by setting its Card link URL. On the published page, the entire card becomes a clickable anchor.
- External URLs must start with
https://orhttp://. - Internal blnk pages can be linked by slug (starting with
/) — use the page picker dropdown to select from your published pages without typing. - Invalid URLs (no protocol, no leading slash) are silently ignored on publish.
- In the editor, a small link icon appears in the top-right corner of a slide when a URL is set, as a visual indicator.
- Linked slides open in a new tab (
target="_blank"). Internal slugs open in the same tab.
Slide backgrounds
Each slide has its own background color. The palette contains 16 presets and a custom color picker:
4 grays · 4 light neutrals · 8 accent colors · custom picker
When an image is uploaded withoutan image effect, setting the background color clears the image URL (the image becomes invisible behind the background). When an image effect is active, the background color is preserved as the shader's primary color — changing background color is how you change the dither shadow tone.
Publishing behaviour
On a published page, the carousel renders via CarouselPublic (an SSR component). The card track is horizontally scrollable with momentum on touch devices. Arrow buttons are rendered server-side if showArrows is true. Image effects (dither, ASCII) are client-rendered via the same shader components used in the editor.
Slide links work as standard anchor tags on the published page. The 3D tilt effect activates via a client component wrapper on published pages only.