Installation

Pick the package for your framework. GSAP is a peer dependency.

React

import { SplitReveal, Magnetic, Marquee, FlipList } from '@bwo-ui/react';

export function Hero() {
  return (
    <SplitReveal type="words" stagger={0.04}>
      <h1>Hello, motion.</h1>
    </SplitReveal>
  );
}

Vue

<script setup lang="ts">
import { SplitReveal } from '@bwo-ui/vue';
</script>

<template>
  <SplitReveal type="words" :stagger="0.04">
    <h1>Hello, motion.</h1>
  </SplitReveal>
</template>

Svelte

<script lang="ts">
  import { splitReveal } from '@bwo-ui/svelte';
</script>

<h1 use:splitReveal={{ type: 'words', stagger: 0.04 }}>Hello, motion.</h1>

CLI — copy components into your project

Want to own the source? Use the bwo-ui CLI to copy a component (and its internal dependencies) straight into your project.

Why GSAP as a peer dependency?

GSAP is a substantial library and is often already installed in projects that need animation. Keeping it as a peer dependency means you don't end up with two copies in your bundle, and you stay in control of the GSAP version.

Server-side rendering

Every factory is SSR-safe — it no-ops when window is undefined. React wrappers are marked 'use client', so drop them straight into Next.js Server Components.