@bendyline/squisq 1.4.1 → 1.5.1

package/src/doc/templates/persistentLayers.ts

@@ -20,12 +20,15 @@ import type {
   GradientBackgroundConfig,
   ImageBackgroundConfig,
   PatternBackgroundConfig,
+  VignetteConfig,
+  AmbientGradientConfig,
   TitleCaptionConfig,
   CornerBrandingConfig,
   ProgressIndicatorConfig,
 } from '../../schemas/BlockTemplates.js';
 import type { Theme } from '../../schemas/Theme.js';
 import { isPersistentLayerTemplate } from '../../schemas/BlockTemplates.js';
+import { oklchDarken, withAlpha } from '../../schemas/colorUtils.js';
 
 // ============================================
 // Gradient Presets
@@ -35,9 +38,11 @@ const GRADIENT_PRESETS: Record<string, string> = {
   'dark-vignette':
     'radial-gradient(ellipse at center, rgba(26,32,44,0.8) 0%, rgba(0,0,0,0.95) 100%)',
   'radial-dark': 'radial-gradient(ellipse at center, #1a202c 0%, #000000 100%)',
-  'warm-sunset': 'linear-gradient(135deg, rgba(124,58,48,0.9) 0%, rgba(26,32,44,0.95) 100%)',
+  // Warm presets deepen within their own hue — ending in the shared navy
+  // made warm themes drift cold halfway down the frame.
+  'warm-sunset': 'linear-gradient(135deg, rgba(124,58,48,0.9) 0%, rgba(46,20,16,0.95) 100%)',
   'cool-blue': 'linear-gradient(135deg, rgba(26,54,93,0.9) 0%, rgba(26,32,44,0.95) 100%)',
-  'earth-tones': 'linear-gradient(135deg, rgba(68,51,34,0.9) 0%, rgba(26,32,44,0.95) 100%)',
+  'earth-tones': 'linear-gradient(135deg, rgba(68,51,34,0.9) 0%, rgba(30,22,15,0.95) 100%)',
 };
 
 // ============================================
@@ -84,7 +89,9 @@ function expandImageBackground(config: ImageBackgroundConfig): Layer[] {
   const layers: Layer[] = [];
   const opacity = config.opacity ?? 0.4;
 
-  // Base image layer
+  // Base image layer. `blur` softens the photo into an atmosphere layer
+  // (the ImageLayer renderer over-scans blurred images so soft edges never
+  // reveal the frame).
   const imageLayer: Layer = {
     type: 'image',
     id: 'persistent-bg-image',
@@ -92,6 +99,7 @@ function expandImageBackground(config: ImageBackgroundConfig): Layer[] {
       src: config.src,
       alt: 'Background',
       fit: 'cover',
+      ...(config.blur != null && config.blur > 0 ? { blur: config.blur } : {}),
     },
     position: { x: 0, y: 0, width: '100%', height: '100%' },
     animation: config.ambientMotion
@@ -122,22 +130,79 @@ function expandImageBackground(config: ImageBackgroundConfig): Layer[] {
  * Expand a pattern background config to a Layer.
  */
 function expandPatternBackground(config: PatternBackgroundConfig): Layer {
-  const opacity = config.opacity ?? 0.1;
-  const color = config.color ?? `rgba(255,255,255,${opacity})`;
+  // 'noise' is film grain: a full-bleed rect whose paint is replaced by a
+  // static feTurbulence field clipped to the rect (see ShapeFilter).
+  if (config.pattern === 'noise') {
+    return {
+      type: 'shape',
+      id: 'persistent-grain',
+      content: {
+        shape: 'rect',
+        fill: '#000000',
+        filter: { type: 'noise', opacity: config.opacity ?? 0.05 },
+      },
+      position: { x: 0, y: 0, width: '100%', height: '100%' },
+    };
+  }
 
-  // Pattern as SVG data URI for rect patterns
-  // For simplicity, use a solid subtle color with reduced opacity
+  // dots / grid / diagonal render as native SVG <pattern> fills.
+  const opacity = config.opacity ?? 0.06;
   return {
     type: 'shape',
     id: 'persistent-bg-pattern',
     content: {
       shape: 'rect',
-      fill: color,
+      pattern: {
+        kind: config.pattern,
+        color: config.color ?? '#ffffff',
+        size: Math.round(24 * (config.scale ?? 1)),
+        opacity,
+      },
     },
     position: { x: 0, y: 0, width: '100%', height: '100%' },
   };
 }
 
+/**
+ * Expand a vignette config: transparent center darkening toward the frame
+ * edges. Rides the CSS-gradient rect path in the renderer.
+ */
+function expandVignette(config: VignetteConfig): Layer {
+  const strength = Math.max(0, Math.min(1, config.strength ?? 0.3));
+  const color = config.color ?? '#000000';
+  const edge = withAlpha(color, strength);
+  const clear = withAlpha(color, 0);
+  return {
+    type: 'shape',
+    id: 'persistent-vignette',
+    content: {
+      shape: 'rect',
+      fill: `radial-gradient(ellipse at center, ${clear} 55%, ${edge} 100%)`,
+    },
+    position: { x: 0, y: 0, width: '100%', height: '100%' },
+  };
+}
+
+/**
+ * Expand an ambient drifting gradient: an oversized surface gradient with
+ * a very slow Ken Burns loop. Deterministic (no randomness).
+ */
+function expandAmbientGradient(config: AmbientGradientConfig, theme?: Theme): Layer {
+  const from = config.from ?? theme?.colors.backgroundLight ?? '#1a202c';
+  const to = config.to ?? (theme ? oklchDarken(theme.colors.background, 0.04) : '#0f141d');
+  return {
+    type: 'shape',
+    id: 'persistent-ambient-gradient',
+    content: {
+      shape: 'rect',
+      fill: `linear-gradient(150deg, ${from} 0%, ${to} 100%)`,
+    },
+    // Oversized so the slow pan never reveals the frame edge.
+    position: { x: '-5%', y: '-5%', width: '110%', height: '110%' },
+    animation: { type: 'slowZoom', panDirection: 'left', duration: config.duration ?? 40 },
+  };
+}
+
 // ============================================
 // Overlay Layer Expansion
 // ============================================
@@ -349,7 +414,7 @@ function expandProgressIndicator(config: ProgressIndicatorConfig): Layer {
 /**
  * Expand a single persistent layer (template or raw) to raw Layer(s).
  */
-export function expandPersistentLayer(layer: PersistentLayer): Layer[] {
+export function expandPersistentLayer(layer: PersistentLayer, theme?: Theme): Layer[] {
   // If already a raw Layer, return as-is
   if (!isPersistentLayerTemplate(layer)) {
     return [layer as Layer];
@@ -367,6 +432,10 @@ export function expandPersistentLayer(layer: PersistentLayer): Layer[] {
       return expandImageBackground(config);
     case 'patternBackground':
       return [expandPatternBackground(config)];
+    case 'vignette':
+      return [expandVignette(config)];
+    case 'ambientGradient':
+      return [expandAmbientGradient(config, theme)];
     case 'titleCaption':
       return expandTitleCaption(config);
     case 'cornerBranding':
@@ -382,13 +451,19 @@ export function expandPersistentLayer(layer: PersistentLayer): Layer[] {
 /**
  * Expand all persistent layers in a config to raw Layer arrays.
  */
-export function expandPersistentLayers(layers: PersistentLayer[] | undefined): Layer[] {
+export function expandPersistentLayers(
+  layers: PersistentLayer[] | undefined,
+  theme?: Theme,
+): Layer[] {
   if (!layers || layers.length === 0) {
     return [];
   }
 
   // Use reduce+concat instead of flatMap for Coherent GT compatibility (ES2017)
-  return layers.reduce<Layer[]>((acc, layer) => acc.concat(expandPersistentLayer(layer)), []);
+  return layers.reduce<Layer[]>(
+    (acc, layer) => acc.concat(expandPersistentLayer(layer, theme)),
+    [],
+  );
 }
 
 // ============================================
@@ -520,3 +595,46 @@ export function getDocStyleConfig(
 export function getPersistentLayersFromTheme(theme: Theme): PersistentLayerConfig {
   return theme.persistentLayers ?? {};
 }
+
+/**
+ * Resolve the effective persistent-layer config for a doc: the doc's own
+ * config wins **wholesale** when present; only docs with no persistent
+ * layers inherit the theme's.
+ *
+ * Doc-wins-wholesale (rather than merging) protects pre-baked documents
+ * that carry their own background/branding layers — merging a theme's
+ * atmosphere on top of those would double up backgrounds and stack
+ * overlays the doc author never saw.
+ */
+export function resolvePersistentLayers(
+  doc: { persistentLayers?: PersistentLayerConfig },
+  theme: Theme,
+): PersistentLayerConfig | undefined {
+  const docConfig = doc.persistentLayers;
+  const hasDocLayers =
+    !!docConfig &&
+    ((docConfig.bottomLayers?.length ?? 0) > 0 || (docConfig.topLayers?.length ?? 0) > 0);
+  if (hasDocLayers) return docConfig;
+  const themeConfig = theme.persistentLayers;
+  const hasThemeLayers =
+    !!themeConfig &&
+    ((themeConfig.bottomLayers?.length ?? 0) > 0 || (themeConfig.topLayers?.length ?? 0) > 0);
+  return hasThemeLayers ? themeConfig : docConfig;
+}
+
+/**
+ * Compose a block's layers between pre-expanded persistent bottom/top
+ * layers, honoring the per-block `useBottomLayer` / `useTopLayer` opt-outs.
+ * Single shared implementation for `expandDocBlocks` and `getLayers`.
+ */
+export function wrapWithPersistentLayers(
+  layers: Layer[],
+  block: { useBottomLayer?: boolean; useTopLayer?: boolean },
+  bottomLayers: Layer[],
+  topLayers: Layer[],
+): Layer[] {
+  if (bottomLayers.length === 0 && topLayers.length === 0) return layers;
+  const useBottom = block.useBottomLayer !== false;
+  const useTop = block.useTopLayer !== false;
+  return [...(useBottom ? bottomLayers : []), ...layers, ...(useTop ? topLayers : [])];
+}

package/src/doc/templates/photoGrid.ts

@@ -17,12 +17,12 @@
 
 import type { Layer } from '../../schemas/Doc.js';
 import type { PhotoGridInput, TemplateContext } from '../../schemas/BlockTemplates.js';
-import { scaledFontSize } from '../../schemas/BlockTemplates.js';
-import { getThemeFont } from '../utils/themeUtils.js';
+import { getThemeFont, themedFontSize, themedImageTreatment } from '../utils/themeUtils.js';
+import { withAlpha } from '../../schemas/colorUtils.js';
 import { cleanCaption } from './captionUtils.js';
 
 /** Gap between images as percentage */
-const GAP = 0.5;
+const GAP = 1.2;
 
 export function photoGrid(input: PhotoGridInput, context: TemplateContext): Layer[] {
   const { images, caption: rawCaption, ambientMotion } = input;
@@ -33,25 +33,23 @@ export function photoGrid(input: PhotoGridInput, context: TemplateContext): Laye
   const caption = rawCaption ? cleanCaption(rawCaption) : rawCaption;
   const { theme, layout } = context;
 
+  const treatment = themedImageTreatment(context, input.imageTreatment);
+
   const layers: Layer[] = [
-    // Black background (visible in gaps between images)
+    // Theme surface background (visible in gaps between images)
     {
       type: 'shape',
       id: 'bg',
-      content: { shape: 'rect', fill: '#000000' },
+      content: { shape: 'rect', fill: theme.colors.background },
       position: { x: 0, y: 0, width: '100%', height: '100%' },
     },
   ];
 
-  // Reserve bottom space for caption — more room in landscape for larger text
-  const captionHeight = caption ? (layout.stackColumns ? 18 : 22) : 0;
-  const gridHeight = 100 - captionHeight;
+  const gridHeight = 100;
 
   // Generate image positions based on count; stack vertically in portrait
   const positions = getGridPositions(images.length, gridHeight, layout.stackColumns);
 
-  const altFontSize = scaledFontSize(24, context, false);
-
   for (let i = 0; i < Math.min(images.length, 4); i++) {
     const img = images[i];
     const pos = positions[i];
@@ -64,24 +62,6 @@ export function photoGrid(input: PhotoGridInput, context: TemplateContext): Laye
       position: { x: `${pos.x}%`, y: `${pos.y}%`, width: `${pos.w}%`, height: `${pos.h}%` },
     });
 
-    // Alt-text label on placeholder
-    if (img.alt) {
-      layers.push({
-        type: 'text',
-        id: `grid-alt-${i}`,
-        content: {
-          text: img.alt,
-          style: {
-            fontSize: altFontSize,
-            fontFamily: getThemeFont(context, 'body'),
-            color: theme.colors.textMuted,
-            textAlign: 'center' as const,
-          },
-        },
-        position: { x: `${pos.x + pos.w / 2}%`, y: `${pos.y + pos.h / 2}%`, anchor: 'center' },
-      });
-    }
-
     // Image layer (covers placeholder when loaded)
     layers.push({
       type: 'image',
@@ -92,6 +72,7 @@ export function photoGrid(input: PhotoGridInput, context: TemplateContext): Laye
         fit: 'cover',
         credit: img.credit,
         license: img.license,
+        ...(treatment ? { treatment } : {}),
       },
       position: {
         x: `${pos.x}%`,
@@ -107,18 +88,23 @@ export function photoGrid(input: PhotoGridInput, context: TemplateContext): Laye
     });
   }
 
-  // Caption with gradient overlay
+  // Caption in a compact translucent chip above player controls. Long
+  // archival/Wikimedia descriptions are intentionally clamped.
   if (caption) {
-    const captionFontSize = scaledFontSize(layout.stackColumns ? 28 : 40, context, false);
+    const captionFontSize = themedFontSize(layout.stackColumns ? 24 : 26, context, false);
+    const captionY = layout.stackColumns ? '78%' : '74%';
+    const captionBgY = layout.stackColumns ? '72%' : '68%';
+    const captionHeight = layout.stackColumns ? '13%' : '16%';
+    const bg = theme.colors.background;
 
     layers.push({
       type: 'shape',
       id: 'caption-bg',
       content: {
         shape: 'rect',
-        fill: 'linear-gradient(transparent, rgba(0,0,0,0.8))',
+        fill: `linear-gradient(90deg, ${withAlpha(bg, 0)}, ${withAlpha(bg, 0.78)} 16%, ${withAlpha(bg, 0.78)} 84%, ${withAlpha(bg, 0)})`,
       },
-      position: { x: 0, y: `${gridHeight - 4}%`, width: '100%', height: `${captionHeight + 4}%` },
+      position: { x: 0, y: captionBgY, width: '100%', height: captionHeight },
     });
 
     layers.push({
@@ -132,13 +118,15 @@ export function photoGrid(input: PhotoGridInput, context: TemplateContext): Laye
           color: theme.colors.text,
           textAlign: 'center',
           shadow: true,
+          lineHeight: 1.18,
+          maxLines: layout.stackColumns ? 2 : 1,
         },
       },
       position: {
         x: '50%',
-        y: `${gridHeight + (layout.stackColumns ? captionHeight / 2 : captionHeight * 0.3)}%`,
+        y: captionY,
         anchor: 'center',
-        width: '90%',
+        width: '78%',
       },
       animation: { type: 'fadeIn', duration: 1, delay: 0.5 },
     });

package/src/doc/templates/pullQuote.ts

@@ -10,18 +10,28 @@
 
 import type { Layer } from '../../schemas/Doc.js';
 import type { PullQuoteInput, TemplateContext } from '../../schemas/BlockTemplates.js';
-import { scaledFontSize } from '../../schemas/BlockTemplates.js';
-import { getThemeFont } from '../utils/themeUtils.js';
+import {
+  getThemeFont,
+  themedEntrance,
+  themedFontSize,
+  themedImageTreatment,
+} from '../utils/themeUtils.js';
+import { estimateTextHeight } from './captionUtils.js';
 
 export function pullQuote(input: PullQuoteInput, context: TemplateContext): Layer[] {
   const { text, attribution, backgroundImage, ambientMotion } = input;
+  const { viewport } = context;
+
+  const treatment = themedImageTreatment(context, input.imageTreatment);
 
   // Guard: backgroundImage is required
   if (!backgroundImage?.src) return [];
 
-  const quoteFontSize = scaledFontSize(52, context, true);
-  const attrFontSize = scaledFontSize(24, context, false);
-  const decoFontSize = scaledFontSize(200, context, true);
+  const quoteFontSize = themedFontSize(52, context, true);
+  const attrFontSize = themedFontSize(26, context, false);
+  const decoFontSize = themedFontSize(200, context, true);
+  const quoteLineHeight = 1.4;
+  const quoteYPct = attribution ? 45 : 50;
 
   const layers: Layer[] = [
     // Full-bleed background image
@@ -34,6 +44,7 @@ export function pullQuote(input: PullQuoteInput, context: TemplateContext): Laye
         fit: 'cover',
         credit: backgroundImage.credit,
         license: backgroundImage.license,
+        ...(treatment ? { treatment } : {}),
       },
       position: { x: 0, y: 0, width: '100%', height: '100%' },
       animation: ambientMotion ? { type: ambientMotion, duration: 15 } : undefined,
@@ -81,22 +92,29 @@ export function pullQuote(input: PullQuoteInput, context: TemplateContext): Laye
           fontFamily: getThemeFont(context, 'title'),
           color: '#ffffff',
           textAlign: 'center',
-          lineHeight: 1.5,
+          lineHeight: quoteLineHeight,
           shadow: true,
         },
       },
       position: {
         x: '50%',
-        y: attribution ? '45%' : '50%',
+        y: `${quoteYPct}%`,
         anchor: 'center',
-        width: '80%',
+        width: '72%',
       },
-      animation: { type: 'fadeIn', duration: 2 },
+      animation: themedEntrance(context, 'text', { type: 'fadeIn', duration: 2 }),
     },
   ];
 
-  // Attribution
+  // Attribution \u2014 hangs just below the quote's estimated bottom edge so
+  // the two read as one lockup instead of stranding near the bottom.
   if (attribution) {
+    const quoteWidthPx = 0.72 * viewport.width;
+    const quoteHeightPx = estimateTextHeight(text, quoteFontSize, quoteWidthPx, quoteLineHeight);
+    const attrYPct = Math.min(
+      82,
+      quoteYPct + ((quoteHeightPx / 2 + quoteFontSize * 1.7) / viewport.height) * 100,
+    );
     layers.push({
       type: 'text',
       id: 'attribution',
@@ -105,14 +123,14 @@ export function pullQuote(input: PullQuoteInput, context: TemplateContext): Laye
         style: {
           fontSize: attrFontSize,
           fontFamily: getThemeFont(context, 'body'),
-          color: 'rgba(255, 255, 255, 0.7)',
+          color: 'rgba(255, 255, 255, 0.85)',
           textAlign: 'center',
           shadow: true,
         },
       },
       position: {
         x: '50%',
-        y: '72%',
+        y: `${attrYPct}%`,
         anchor: 'center',
       },
       animation: { type: 'fadeIn', duration: 1, delay: 1.5 },

package/src/doc/templates/quoteBlock.ts

@@ -1,8 +1,10 @@
 /**
  * Quote Block Template
  *
- * Large centered quote with optional attribution.
- * Good for impactful statements or descriptions.
+ * Large centered quote with optional attribution, composed as one
+ * vertically-centered lockup: the attribution hangs a fixed distance
+ * below the quote's estimated bottom edge instead of being pinned to a
+ * far-away layout slot.
  * Adapts font sizes and positioning for different viewports.
  *
  * Supports optional accent images that appear as tasteful side/bottom strips.
@@ -12,59 +14,72 @@
 
 import type { Layer } from '../../schemas/Doc.js';
 import type { QuoteBlockInput, TemplateContext } from '../../schemas/BlockTemplates.js';
-import { scaledFontSize } from '../../schemas/BlockTemplates.js';
-import { getThemeFont } from '../utils/themeUtils.js';
+import {
+  getThemeFont,
+  shouldUseShadow,
+  themedEntrance,
+  themedFontSize,
+  themedSurfaceGradient,
+  themedImageTreatment,
+} from '../utils/themeUtils.js';
+import { withAlpha } from '../../schemas/colorUtils.js';
 import { createAccentLayers, getAccentLayout, adjustY, DEFAULT_LAYOUT } from './accentImage.js';
-import { createBackgroundLayer } from './captionUtils.js';
+import { createBackgroundLayer, estimateTextHeight } from './captionUtils.js';
 
 export function quoteBlock(input: QuoteBlockInput, context: TemplateContext): Layer[] {
   const { quote, attribution, accentImage } = input;
-  const { theme, layout } = context;
+  const { theme, viewport } = context;
 
   // Get layout adjustments if accent image is present
   const accentLayout = accentImage ? getAccentLayout(accentImage.position) : DEFAULT_LAYOUT;
 
   // Scale font sizes for viewport
-  const quoteFontSize = scaledFontSize(48, context, true);
-  const attrFontSize = scaledFontSize(24, context, false);
+  const quoteFontSize = themedFontSize(48, context, true);
+  const attrFontSize = themedFontSize(26, context, false);
+  const quoteLineHeight = Math.max(theme.typography.titleLineHeight ?? 1.4, 1.25);
 
   // Decorative quotation mark font size
-  const decorativeQuoteFontSize = scaledFontSize(280, context, true);
+  const decorativeQuoteFontSize = themedFontSize(280, context, true);
 
-  const layers: Layer[] = [
-    createBackgroundLayer(
-      'bg',
-      `linear-gradient(160deg, ${theme.colors.backgroundLight} 0%, #1e2636 100%)`,
-    ),
-  ];
+  const layers: Layer[] = [createBackgroundLayer('bg', themedSurfaceGradient(context, 160))];
 
   // Add accent image layers (behind text, after background)
   if (accentImage) {
-    layers.push(...createAccentLayers(accentImage, input.id));
+    layers.push(
+      ...createAccentLayers(
+        accentImage,
+        input.id,
+        themedImageTreatment(context, input.imageTreatment),
+      ),
+    );
   }
 
-  // Decorative opening quotation mark — oversized, low-opacity behind quote
+  // Decorative opening quotation mark — oversized, low-opacity behind the
+  // quote. Derived from the theme text color so it stays a subtle ornament
+  // on light and dark surfaces alike (a hard-coded white glyph was
+  // invisible on both).
   layers.push({
     type: 'text',
     id: 'deco-quote',
     content: {
-      text: '\u201C',
+      text: '“',
       style: {
         fontSize: decorativeQuoteFontSize,
         fontFamily: getThemeFont(context, 'title'),
-        color: 'rgba(255, 255, 255, 0.06)',
+        color: withAlpha(theme.colors.text, 0.09),
         textAlign: 'center',
       },
     },
     position: {
       x: accentLayout.textCenterX,
-      y: adjustY('18%', accentLayout),
+      y: adjustY('26%', accentLayout),
       anchor: 'center',
     },
   });
 
-  // Quote text - positioned based on accent layout
-  const quoteY = attribution ? layout.primaryY : '50%';
+  // Quote text — optically centered, nudged up slightly when an
+  // attribution hangs below it.
+  const quoteYPct = attribution ? 45 : 50;
   layers.push({
     type: 'text',
     id: 'quote',
@@ -75,21 +90,31 @@ export function quoteBlock(input: QuoteBlockInput, context: TemplateContext): La
         fontFamily: getThemeFont(context, 'title'),
         color: theme.colors.text,
         textAlign: 'center',
-        lineHeight: 1.6,
-        shadow: true,
+        lineHeight: quoteLineHeight,
+        shadow: shouldUseShadow(context),
       },
     },
     position: {
       x: accentLayout.textCenterX,
-      y: adjustY(quoteY, accentLayout),
+      y: adjustY(`${quoteYPct}%`, accentLayout),
       anchor: 'center',
       width: accentLayout.textWidth,
     },
-    animation: { type: 'fadeIn', duration: 2 },
+    animation: themedEntrance(context, 'text', { type: 'fadeIn', duration: 2 }),
   });
 
-  // Add attribution if provided
+  // Attribution hangs just below the quote's estimated bottom edge, so
+  // the two read as one lockup instead of the attribution stranding near
+  // the bottom of the block.
   if (attribution) {
+    const quoteWidthPx = (parseFloat(accentLayout.textWidth) / 100) * viewport.width;
+    const quoteHeightPx = estimateTextHeight(quote, quoteFontSize, quoteWidthPx, quoteLineHeight);
+    const gapPx = quoteFontSize * 1.7;
+    const attrYPct = Math.min(
+      82,
+      quoteYPct + ((quoteHeightPx / 2 + gapPx) / viewport.height) * 100,
+    );
+
     layers.push({
       type: 'text',
       id: 'attribution',
@@ -100,12 +125,12 @@ export function quoteBlock(input: QuoteBlockInput, context: TemplateContext): La
           fontFamily: getThemeFont(context, 'body'),
           color: theme.colors.textMuted,
           textAlign: 'center',
-          shadow: !!accentImage,
+          shadow: shouldUseShadow(context),
         },
       },
       position: {
         x: accentLayout.textCenterX,
-        y: adjustY(layout.captionY, accentLayout),
+        y: adjustY(`${attrYPct}%`, accentLayout),
         anchor: 'center',
       },
       animation: { type: 'fadeIn', duration: 1, delay: 1.5 },