Skip to content
Get Started

Hosts // motion without Skins

Same vl-*. Your UI.

Import @velora/css/motion-core (optional transitions). Style with Tailwind, WordPress blocks or plain HTML. Velora never requires .vl-card or Skins tokens for motion to run.

See the demo Velora Skins

Scroll the pinned demo — three hosts share vl-enter="fade-up" on the same clock; styling is independent.

Act 02 // one preset · three hosts

Host-agnostic
by contract.

HTML + CSS

Same fade-up

Semantic attrs only.

<h2 vl-enter="fade-up">
  Host classes + Velora
</h2>
Tailwind host

Same fade-up

Utilities + motion-core.

<h2 class="text-4xl font-bold"
    vl-enter="fade-up">
  Tailwind + Velora
</h2>
WordPress

Same fade-up

Block pattern + enqueue.

<!-- block pattern -->
<h2 vl-enter="fade-up">
  WP + Velora motion-core
</h2>

Every panel uses vl-enter="fade-up" on the same pin+scrub clock — host styling is independent.

Act 03 // integration paths

Portable examples in the monorepo.

Serve static examples from the repo root; the Vite Showcase does not mount examples/.

Tailwind

examples/tailwind-host/ — motion-core + utility classes. GitHub →

WordPress

examples/wordpress/ — PHP enqueue, Gutenberg pattern, Elementor notes. GitHub →

Index

examples/README.md lists all host integration paths in the monorepo.

<section vl-scene vl-timeline="view" vl-pin="3" vl-scrub>
  <div vl-stage class="min-h-svh grid place-items-center">
    <h1 vl-enter="clip-rise" vl-act="1">Host classes + Velora clock</h1>
  </div>
</section>
Scene timeline Motion catalog