Skip to content
Motion
ProIn reviewv1.0.0

Fiesta Hero

A fiesta opening: strings of banderitas sway across the top in the brand's colours, the copy below.

Controls

Variant
<HeroFiesta />

About

A Lokal hero built on Banderitas for businesses whose brand is celebration. Original to VibeBox.

Use it when

  • Restaurants, caterers, events and festivals.

Skip it when

  • Formal professional services: the mood does not fit.

Install

The demo above is live today. Installing Pro items opens with VibeBox Motion Pro; join the waitlist to hear first.

Code

The source is part of VibeBox Motion Pro.

Licensed per seat; it installs with the same shadcn command once Pro opens.

See Pro and join the waitlist

Content

Typed slots from schema.ts. Facts (hours, prices, quotes, names) come only from the business; until then they render as fill-ins.

SlotLabelTypeLimitFact
eyebrowKickertext32 chars—
headingHeadlinetext80 chars—
leadIntrotext160 chars—
primaryActionMain buttonaction24 chars—
secondaryActionSecond buttonaction24 chars—
mediaImageimage——

Variants

  • Centreddefault

    centered

    Centred copy under the flags.

  • Left

    left

    Left-aligned copy under the flags.

Accessibility and motion

Keyboard
The actions.
Screen readers
One h1, intro and actions; the flags are decorative.
Touch
Touch and scroll sway the flags; nothing depends on it.
Reduced motion
The flags hang still.

Edge cases and limits

  • Canvas only; no WebGL needed.
  • A headline about moving better beside a mosaic of a tile scene, a bloom scene and a class list

    The promise beside a three-tile mosaic: a tall photo, a second image and a card of what the business offers.

    Heroes block · Server

  • A centred headline with two buttons and highlight chips above a wide image of stacked cards

    One centred promise with its actions and highlights, the image below, on a plain, haloed or gradient panel ground.

    Heroes block · Server

  • A browser frame with a dashboard and a phone frame overlapping it beside a headline

    The product on two screens: a browser frame and a phone frame overlapping beside or below the copy.

    Heroes block · Server

↑ ↓ to move↵ to openesc to close