Hero

Wander the fjords

Copy on the left, the honeycomb on the right with the primary hexagon set among the photographs. Wait four seconds or use the arrows at the foot: every hexagon moves one step along the ring, and the whole section eases to the new photograph's colour. Pick a colour above to repaint the accent.

images

are the photographs in queue order; the first is featured at the start. Nine cells are visible — fewer photographs are repeated around the ring, more simply wait their turn. Give each a deep tone and the background tint, the fade towards the copy and the gaps between hexagons all ease to it while that photograph is featured.

interval=4000

is the gap between steps in milliseconds. It pauses while the tab is hidden and while the section is off screen; 0 turns autoplay off and leaves the arrows.

primaryActionLabel

fills the call-to-action hexagon; a \n in the string breaks the line, as in Plan / your trip. A compass sits above it; on hover it turns and the hairline hexagon inside the cell swells, and on keyboard focus the hairline goes solid.

accent

sets --primary for the section: the letters of the word that cross the photographs, the rule, the arrows and the call to action, with its label in primary-foreground. Leave it out to follow your theme's primary. background is the tone for photographs without one: a deep shade of the primary by default.

Watch the dawn from the summit

Eyebrow and headline across the top; the glass panel and the queue of cards along the foot. The queue moves every five seconds — click any card to bring it forward, use the arrow keys, or swipe on a phone. Hovering the rail holds the clock.

slides

are shown in order: the front card is the current slide, the rest queue up behind it. Each carries its image (full-bleed and in its card), a title and description for the caption, an optional heading that replaces the section headline while it is in front, and a position for the crop.

interval=5000

is the gap between slides in milliseconds. It pauses while the pointer or keyboard focus is on the rail, while the tab is hidden and while the section is off screen; 0 turns autoplay off and hides the progress line.

avatars

and avatarsLabel fill the top of the glass panel; intro is the paragraph and cta the pill. Pass next/link as linkComponent to keep client-side navigation.

reveal="in-view"

(the default) plays the entrance the first time the section is seen; the docs pass "immediate". Under prefers-reduced-motion the entrance is skipped and slides swap without the crossfade or drift.

Daring designs

Five columns stepping down to the middle at desktop, three on tablets, two on phones with the middle look full width. Hover a look to tilt it; reload the preview to watch the reveal again.

looks

are up to seven { src, alt, tone }, laid out left to right: a tall and a small, a tall, the tall that carries the button, a tall, a tall and a small. tone is the flat colour behind the person.

blend

multiplies the photo onto its tone (on by default), so a plain white studio background takes the colour. Turn it off for a shot that already has a coloured background.

video

is the phrase on the turning badge and the embed it opens in a Dialog. Leave it out and the badge's space stays empty so the headline keeps its place.

teaser

is the next story — a number, a category and a title — as one link; the arrow fills and the title underlines on hover.

reveal="in-view"

(the default) plays the sequence the first time the section enters the viewport; the docs pass "immediate". Under prefers-reduced-motion everything renders finished and the badge holds still.

Headline, call to action, six cards

Twelve columns at desktop — 3 / 3 / 3 / 3 on the first row with the portrait spanning both rows, 3 / 6 on the second. Six columns at tablet, one on phones. Hover the cards.

heading

is set by TextAnimation in blur-in-up: each word rises out of a blur the first time the section is on screen. subtitle and the cta button fade in behind it.

Stat

counts up with CounterBlock — value, decimals, prefix, suffix — starting when the card is on screen. tone="accent" is the card in the theme's primary colour. Give it an image and the picture fills the card, with only the bottom-left corner under the figure washed in the card colour — the rest shows through, so pick a picture whose subject sits up and to the right.

Photo

fills its card with a portrait; position sets the crop anchor, label a word in the corner. Add lg:row-span-2 lg:h-auto to make one tall.

Team

scatters up to six avatars over the right half of the card, above a field of dots. They pop in after the cards and drift outward on hover.

reveal="in-view"

(the default) plays everything the first time the section enters the viewport; the docs pass "immediate". Under prefers-reduced-motion the section renders finished.

A bright place

Badge, headline and pills across the top; five columns of photographs; quote, scroll pill and video trigger along the foot. Three columns at tablet — a portrait, a stack and the tall one, then three landscapes in a row — and two on phones. Hover the photographs and the pills, open the video.

heading

is any node; wrap the words to colour in <em> — the first takes the accent, the second the highlight. Use <br /> for a deliberate break.

photos

are laid out left to right: one under the caption, two stacked, one tall in the middle, two stacked, one on the right. Each takes a position for its crop. Fewer than seven is fine; the columns just empty.

tags

are up to three pills, scattered and tilted at desktop and in a plain row below. tone picks soft / highlight / accent; the defaults cycle through them.

video

renders the play trigger; its url is an embed URL shown in a Dialog at 16:9. scrollLabel is a Button that scrolls to scrollTo, or the next section.

reveal="in-view"

(the default) plays the sequence the first time the section enters the viewport; the docs pass "immediate". Under prefers-reduced-motion the badge holds still and the section renders finished.

Word bounce hero

Setvariant="bounce"

for a spring word bounce animation loop.

Typing hero

Setvariant="typing"

for a character-by-character typewriter animation.

Typing hero, fixed title

The same hero with the title held in place while the word types and deletes.

SetprefixPosition="fixed"

so the text before the word keeps its place instead of re-centring.

Split marquee slider hero

Setvariant="slider"

for a split 2-column hero featuring a continuous right-to-left thumbnail slider and floating visual cards.

Pet Shop & Animal Care Hero

Setvariant="pet-shop"

for a clean, minimal e-commerce hero layout with circular image showcase and feature badges.

Doctor Portal & Healthcare Hero

Setvariant="doctor"

for a clean medical & healthcare hero with specialist doctor showcase and appointment booking CTA.

Precision Facility & CAD Grid Hero

Setvariant="facility"

for an architectural CAD blueprint grid hero with interactive morphing shape responding to left and right grid hover zones.

Atmospheric Cyclone Radar Hero

Setvariant="vortex"

for a high-tech climate risk radar hero featuring an animated multi-armed rotating cyclone vortex, HUD telemetry overlay, and parcel metrics.

Orbit Ring Hero

Copy and actions on the left, revolving 3D circular photo orbit ring on the right with smooth hover pause.

Setvariant="orbit"

for a revolving 3D circular photo orbit ring layout.

images

are the cards on the ring, in orbit order. Offset evenly by duration.

duration=36

is the seconds for one full revolution.

highlights

are the dotted facts under the action buttons with customizable label and color.