CaptureCta

A photo-capture invitation card — icon + title + subtitle, deliberately a fixed dark "glass" look regardless of the host app's own light/dark theme (a camera-viewfinder convention, not a theming bug), with slow-drifting glow blobs built from yemek's own accent/highlight tokens instead of hardcoded hex.

Playground

title subtitle

Clicked 0 times — the card is a plain <button>, so a native @click just works.

Clear subtitle to see the one-line variant. Watch the glow blobs — they drift slowly and independently (staggered animation delay) rather than sitting static.

<script setup>
import { CaptureCta } from 'yemek'
</script>

<template>
  <CaptureCta
    title="Take or choose a photo"
    subtitle="AI analyzes your dish automatically"
    @click="openPhotoPicker"
  />
</template>

Props

Prop	Type	Default	Description
title	string	—	Main invitation text.
subtitle	string	undefined	Secondary line. Omit for a title-only card.

Slots

Slot	Description
icon	Replaces the default camera icon — e.g. a barcode icon for a scanner-flavored invitation.

Events

No custom emits — the component is a plain <button>, so a native @click on it works directly. The kit owns no photo-picker/dialog logic; the consumer decides what opens.

Behavior notes

• The background gradient and glow-blob colors are fixed regardless of the host app's light/dark theme — the glow blobs use --yemek-color-accent/--yemek-color-highlight so they still read as yemek's brand duotone rather than arbitrary hardcoded green/blue.
• Glow blobs drift slowly (9s, staggered by half a cycle) and the icon has a subtle breathing pulse — both invite interaction instead of sitting fully static.
• prefers-reduced-motion: reduce disables the drift/breathing/tap-scale animations entirely.