Splash

First-visit overlay

A brief welcome over the first load — a key visual, a logo moment. It delays people, so keep it short, skippable and rare (once).

Basic

Shown once per visitor (localStorage key).

<script setup lang="ts">
import { ref } from "vue";
import { BlessButton, BlessSplash, BlessText } from "blessing-ui";
const key = ref(0);
function replay() {
  localStorage.removeItem("bless-docs-splash");
  key.value++;
}
</script>

<template>
  <BlessSplash :key once="bless-docs-splash" :duration="1500">
    <BlessText
      as="p"
      size="display"
      weight="thin"
      leading="none"
      style="transform: skewX(var(--bless-lean))"
    >
      Blessing
    </BlessText>
  </BlessSplash>
  <div class="row">
    <BlessText as="p" size="sm" muted>Shown once per visitor (localStorage key).</BlessText>
    <BlessButton size="sm" variant="outline" @click="replay">Replay</BlessButton>
  </div>
</template>

• It takes focus onto Skip, so Enter or Esc leaves at once, and it is skipped entirely under reduced motion.
• duration auto-dismisses (0 = only Skip closes it); once remembers it was seen; label names it.

Usage

import { BlessSplash } from "blessing-ui";

API

Props

Name	Type	Default	Description
once	string	—	localStorage key; splash shows once per key. Omit to show every load
duration	number	2500	auto-dismiss after ms; 0 = manual only
skipLabel	string	"Skip"
label	string	"Welcome"	the dialog's accessible name

Events

Name	Payload	Description
done	[]

Slots

Name	Scope	Description
default	{ dismiss: () => void; }

Exposed

Name	Type	Description
dismiss	() => void