Initial Commit

src/components/mystic/CelestialFrame.astro

@@ -0,0 +1,83 @@
+---
+/**
+ * CelestialFrame.astro
+ * ---------------------------------------------------------------------------
+ * An ornamental frame for imagery: rounded image container with thin gold
+ * hairline + small star-burst flourishes in the corners and a faint sacred-
+ * geometry tint behind. Wraps an <img> (or any media) passed via the default
+ * slot.
+ *
+ * The frame is structural (not just decorative), so it owns the rounded
+ * corners + border + overflow. The corner sparkles are absolutely positioned
+ * SVGs that inherit the accent color.
+ *
+ * Usage:
+ *   <CelestialFrame>
+ *     <img src="/images/hero.jpg" alt="..." class="h-full w-full object-cover" />
+ *   </CelestialFrame>
+ *   <CelestialFrame rounded="none"> ... </CelestialFrame>
+ */
+import StarBurst from './StarBurst.astro';
+
+interface Props {
+  class?: string;
+  /** Corner rounding. */
+  rounded?: 'lg' | 'xl' | '2xl' | 'none';
+  /** Stroke emphasis on the frame border. */
+  emphasis?: 'subtle' | 'strong';
+}
+const {
+  class: className = '',
+  rounded = '2xl',
+  emphasis = 'subtle',
+} = Astro.props;
+
+const radius = {
+  none: 'rounded-none',
+  lg: 'rounded-lg',
+  xl: 'rounded-xl',
+  '2xl': 'rounded-2xl',
+}[rounded];
+
+const borderStyle =
+  emphasis === 'strong'
+    ? 'border-2'
+    : 'border';
+---
+<figure
+  class:list={['relative', radius, borderStyle, className]}
+  style="border-color: color-mix(in srgb, var(--color-accent) 45%, transparent);"
+>
+  {/* Faint sacred-geometry tint behind the image. */}
+  <div
+    class:list={['absolute inset-0', radius]}
+    style="background: color-mix(in srgb, var(--color-violet, var(--color-accent)) 14%, var(--color-surface-sunken));"
+    aria-hidden="true"
+  >
+  </div>
+
+  {/* The media itself, clipped to the frame. */}
+  <div class:list={['relative overflow-hidden', radius]}>
+    <slot />
+  </div>
+
+  {/* Corner star-burst flourishes (sit on the border corners). */}
+  <StarBurst
+    class="pointer-events-none absolute -left-2 -top-2 h-5 w-5 drop-shadow-[0_0_6px_color-mix(in_srgb,var(--color-accent)_60%,transparent)]"
+    style="color: var(--color-accent);"
+  />
+  <StarBurst
+    class="pointer-events-none absolute -bottom-2 -right-2 h-5 w-5 drop-shadow-[0_0_6px_color-mix(in_srgb,var(--color-accent)_60%,transparent)]"
+    style="color: var(--color-accent);"
+  />
+  <StarBurst
+    variant="outline"
+    class="pointer-events-none absolute -right-1 -top-1 h-3 w-3"
+    style="color: var(--color-accent); opacity:.7;"
+  />
+  <StarBurst
+    variant="outline"
+    class="pointer-events-none absolute -left-1 -bottom-1 h-3 w-3"
+    style="color: var(--color-accent); opacity:.7;"
+  />
+</figure>