Skip to content
Motion
ProIn reviewv1.0.0

Liquid Orb Hero

An AI studio opening: the liquid orb above or beside the copy, with suggestion chips of what people can ask.

Pro opens soon: join the waitlist

Controls

Variant
<HeroLiquidOrb />

About

Built on the library's Liquid Orb for AI studios and assistants. It differs from hero-shader (a background) by making the orb the character of the page.

Use it when

  • The product is an assistant or an AI feature.

Skip it when

  • The business is not AI-led: the orb reads as a gimmick.

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——
suggestionsSuggestionslistup to 4—
suggestions[]Suggestiontext40 chars—

Variants

  • Orb abovedefault

    orb-above

    The orb centred above centred copy.

  • Orb right

    orb-right

    Copy left, a larger orb right.

Accessibility and motion

Keyboard
The actions; chips are text.
Screen readers
One h1, the intro, actions and a list of example questions; the orb is decorative.
Touch
Touch moves the orb; nothing depends on it.
Reduced motion
The orb is still.

Edge cases and limits

  • No WebGL2: the orb's CSS poster.

Related

  • A centred headline over a drifting spectrum mesh

    Shader Hero

    Pro

    A full-bleed hero on a moving shader: the spectrum mesh, or pool caustics for resorts, pools and spas.

    Heroes block · WebGL2

  • A headline about moving better beside a mosaic of a tile scene, a bloom scene and a class list

    Bento Hero

    Free

    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

    Centered Hero

    Free

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

    Heroes block · Server

↑ ↓ to move↵ to openesc to close