Content that fades or rises into place as it scrolls into view.
Import it from rei-kit/motion:
import { BaseReveal } from 'rei-kit/motion'
Open BaseReveal in the live documentation, where every prop below is a control you can change, in four materials and ten palettes.
<script setup lang="ts">
import { BaseCard } from 'rei-kit'
import { BaseReveal } from 'rei-kit/motion'
const items = ['Fast', 'Accessible', 'Themeable']
</script>
<template>
<BaseReveal v-for="(item, i) in items" :key="item" :delay="i * 80">
<BaseCard>{{ item }}</BaseCard>
</BaseReveal>
</template>
| Prop | Type | Required or default | What it is for |
|---|---|---|---|
effect | 'fade' | 'rise' | 'scale' | 'rise' | How it arrives: fading in, rising a little as it does, or growing to size. |
delay | number | 0 | Milliseconds to wait once it is in view — the stagger in a list. |
once | boolean | true | Reveal once and stay. Off, it hides again each time it leaves the screen. |
as | string | 'div' | The element to render. |
rei-kit is an accessible Vue 3 and Tailwind CSS 4 component library: 106 components, themed by role rather than by colour on three independent axes — ten WCAG-checked palettes, four materials and light or dark, each switched with one attribute. Typed, tested, SSR-safe, no runtime dependencies, MIT.