Reward Reveal

Engaging reward reveal animation with multiple variants.

Features

• Multiple variants — Chest, card, and box styles
• State machine — Idle → Revealing → Revealed states
• Confetti effect — Celebration animation on reveal
• Reduced motion — Respects system preferences
• CTA support — Configurable claim button

Usage

<script setup>
import { FkRewardReveal } from '@fortune-kit/components'

function handleClaim() {
  console.log('Reward claimed!')
}
</script>

<template>
  <FkRewardReveal
    variant="chest"
    reward-title="Epic Reward"
    reward-value="500 Coins"
    reward-description="You found rare treasure!"
    cta-text="Claim Reward"
    @claim="handleClaim"
  />
</template>

Props

Prop	Type	Default	Description
variant	'chest' | 'card' | 'box'	'chest'	Visual variant
rewardTitle	string	Required	Reward title text
rewardValue	string | number	—	Value display
rewardImage	string	—	Custom reward image URL
rewardDescription	string	—	Additional description
ctaText	string	'Claim Reward'	Button text
autoReveal	boolean	false	Auto-start reveal
revealDuration	number	1500	Animation duration (ms)
showConfetti	boolean	true	Show confetti effect

Events

Event	Payload	Description
reveal	—	When reveal starts
claim	—	When CTA clicked
state-change	RevealState	State transitions

Programmatic Control

Access component methods via ref:

<script setup>
const rewardRef = ref()

function triggerReveal() {
  rewardRef.value?.startReveal()
}

function resetReward() {
  rewardRef.value?.reset()
}
</script>

<template>
  <FkRewardReveal ref="rewardRef" ... />
</template>

Variants

Chest

Classic treasure chest with opening lid animation.

Card

Mystery card with flip reveal animation.

Box

Gift box with lid lifting animation.