Components
Spotlight
The ink-light card: a vessel whose rim and face take light from the reader's hand. The wrapper only measures and writes the geometry — the lamp itself is the two layers the stylesheet paints.
#Basic usage
The pointer is the lamp
Move the hand across the card — the rim catches primary ink where it passes, the face takes a quiet wash, and both die when the hand leaves.
<script setup lang="ts">
import { Spotlight } from "@bysages/vue";
</script>
<template>
<Spotlight class="w-80 rounded-lg p-6">
<h3 class="m-0 text-base font-medium">The pointer is the lamp</h3>
<p class="mb-0 mt-2 text-sm text-tertiary">
Move the hand across the card — the rim catches primary ink where it passes, the face takes a
quiet wash, and both die when the hand leaves.
</p>
</Spotlight>
</template>
#Props
#SSpotlight
The ink-light card: a vessel whose rim and face take light from the reader's hand. The wrapper only measures and writes the geometry — the lamp itself is the two layers the stylesheet paints.
| Prop | Type | Default | Description |
|---|---|---|---|
radius | String | undefined | — |