Features & services
Services Marquee
Priced service cards in two columns whose photo columns roll up and down while pointed at, and a row for a custom request.
Layout and motion from the Marai Neesu template — see it in contextTry it in the page builderBlocks 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 |
|---|---|---|---|
| title | string | — | The h2. |
| lead | string | — | Text under the title; empty for none. |
| services | { title, price, description, href, images: string[] }[] | 4 services | The cards in order; three or four decorative photos each (the right column shows them reversed). |
| priceLabel | string | "Starting at {price} per project" | The price line, with {price} where the price goes. |
| moreLabel | string | "More details" | The label of each card's button. |
| custom | { title, text? } | — | The row under the cards for a custom request; an empty title leaves it out. |
| actions | { label, href, variant? }[] | Email me, Contact me | The custom row's buttons: the first outlined, the second filled. A button may set variant: "default" (filled) or "outline"; left out, it looks as described. |
| buttonStyle | "spring" | "flip" | "sweep" | "spring" | The look of every button (they take the same props). |
| className | string | — | Classes for the <section>. |
- From 768px a card is 248px tall: the text (up to 60%) and, at the right edge, two photo columns (30% of the card, at most 210px) at 60% opacity. While the card is pointed at or focused they go to 80%, the left column rolls up and the right one down at 5px/s (marquee run="hover"), and a soft shadow comes under the card; on leave the columns jump back. On phones a row of photos above the text rolls left at 5px/s. Still with reduced motion.
- No entrance motion, as on Marai Neesu. Every row is as tall as the tallest card; each card keeps its own height at the top of its row.
