@appinternalleads/ui 0.4.0 → 0.4.1

package/src/motion/promo/PromoFrame.tsx

@@ -0,0 +1,501 @@
+/* eslint-disable comppack/no-raw-colour -- a video frame, not site UI: every colour is config content; the few literals are fixed tints (white highlights, black shade) of the procedural drawing (DECISIONS §26). */
+import type { ComponentType, CSSProperties, ReactNode } from 'react';
+import { getPath, type PromoConfig } from './config';
+import { frameState, rgba, type Anim, type FrameState, type Rect, type TextBlock } from './engine';
+import { Icon } from './icons';
+
+/**
+ * **The procedural renderer.** Draws one frame of promo-product-showcase from the engine's state:
+ * plain DOM (divs, CSS gradients and filters, one generated SVG turbulence for grain). No Remotion,
+ * no clock: the Remotion composition passes `useCurrentFrame()`, the web player a rAF clock, and both
+ * get the same pixels. Everything is laid out at the render size itself, so a 4K render is 4K
+ * vector drawing, never an enlarged raster.
+ *
+ * Copy is rendered as React text (escaped); images only from validated asset references.
+ */
+export type ImageProps = { src: string; style?: CSSProperties; alt: string };
+export type PromoFrameProps = {
+  /** A validated, complete config (resolveConfig). */
+  config: PromoConfig;
+  /** Motion frame (60 fps). */
+  frame: number;
+  width: number;
+  height: number;
+  /** Turns an asset reference into a URL: `static:x.png` → where the host serves it. Defaults to `/x.png`. */
+  resolveAsset?: (ref: string) => string;
+  /** The image element; Remotion passes its `Img` so renders wait for images to load. */
+  ImageComponent?: ComponentType<ImageProps>;
+};
+
+const DefaultImage = ({ src, style, alt }: ImageProps) => <img src={src} style={style} alt={alt} />;
+const defaultResolve = (ref: string) => (ref.startsWith('static:') ? `/${ref.slice(7)}` : ref);
+export const FONT_STACK = (family: string) => `'${family}', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif`;
+
+type Ctx = { st: FrameState; n: (p: string) => number; s: (p: string) => string; b: (p: string) => boolean; u: number; img: (ref: string, style: CSSProperties, alt: string) => ReactNode };
+
+const animTransform = (a: Anim, extra = '') => `translate(${a.x}px, ${a.y}px) rotate(${a.rotation}deg) scale(${a.scale}) ${extra}`.trim();
+const animFilter = (a: Anim) => (a.blur > 0.05 ? `blur(${a.blur}px)` : undefined);
+const abs = (r: Rect): CSSProperties => ({ position: 'absolute', left: r.x, top: r.y, width: r.width, height: r.height });
+
+export function PromoFrame({ config, frame, width, height, resolveAsset = defaultResolve, ImageComponent = DefaultImage }: PromoFrameProps) {
+  const st = frameState(config, frame, width, height);
+  const cfg = st.cfg;
+  const n = (p: string) => getPath(cfg, p) as number;
+  const s = (p: string) => getPath(cfg, p) as string;
+  const b = (p: string) => getPath(cfg, p) as boolean;
+  const u = st.size.unit;
+  const img = (ref: string, style: CSSProperties, alt: string) => <ImageComponent src={resolveAsset(ref)} style={style} alt={alt} />;
+  const ctx: Ctx = { st, n, s, b, u, img };
+  const cam = st.camera;
+  const bgScale = 1 + (cam.scale - 1) * 0.35;
+
+  return (
+    <div
+      data-promo-frame={Math.round(st.frame * 100) / 100}
+      style={{ position: 'relative', width, height, overflow: 'hidden', background: s('canvas.backgroundColor'), fontFamily: FONT_STACK(s('typography.fontFamily')) }}
+    >
+      <div style={{ position: 'absolute', inset: 0, transform: `scale(${bgScale}) translate(${cam.driftX * 0.3}px, ${cam.driftY * 0.3}px)` }}>
+        <Background ctx={ctx} />
+      </div>
+      <Particles ctx={ctx} />
+      <div
+        style={{
+          position: 'absolute', inset: 0, opacity: st.exit.opacity, transformOrigin: '50% 50%',
+          transform: `perspective(${cam.perspective}px) translate(${-cam.x + cam.driftX}px, ${-cam.y + cam.driftY}px) rotateX(${cam.tilt}deg) rotate(${cam.rotation}deg) scale(${cam.scale})`,
+        }}
+      >
+        <Headline ctx={ctx} />
+        {st.product.visible && <Product ctx={ctx} />}
+        {st.floating.map((f, i) => <Floating key={i} ctx={ctx} i={i} f={f} />)}
+        <Cta ctx={ctx} />
+      </div>
+      <Logo ctx={ctx} />
+      {st.exit.toBase > 0 && <div style={{ position: 'absolute', inset: 0, background: s('canvas.backgroundColor'), opacity: st.exit.toBase }} />}
+    </div>
+  );
+}
+
+/* ─── background ──────────────────────────────────────────────────────────────────────────────── */
+function Background({ ctx }: { ctx: Ctx }) {
+  const { st, n, s, b, u } = ctx;
+  const { width, height } = st.size;
+  const short = Math.min(width, height);
+  const stops = getPath(st.cfg, 'background.gradient.stops') as { offset: number; color: string; opacity: number }[];
+  const layers: ReactNode[] = [<div key="base" style={{ position: 'absolute', inset: 0, background: s('background.baseColor') }} />];
+  if (b('background.gradient.enabled')) {
+    const type = s('background.gradient.type');
+    const list = stops.map((x) => `${rgba(x.color, x.opacity)} ${Math.round(x.offset * 1000) / 10}%`).join(', ');
+    if (type === 'linear') layers.push(<div key="g" style={{ position: 'absolute', inset: 0, background: `linear-gradient(${n('background.gradient.angle')}deg, ${list})` }} />);
+    else if (type === 'radial') layers.push(<div key="g" style={{ position: 'absolute', inset: 0, background: `radial-gradient(ellipse at 50% 55%, ${list})` }} />);
+    else {
+      // Mesh: a soft blob of each stop colour, placed around the canvas by its offset and the angle.
+      const soft = n('background.gradient.softness');
+      const blobs = stops.map((x, i) => {
+        const a = ((n('background.gradient.angle') + x.offset * 300 + i * 17) * Math.PI) / 180;
+        const cx = 50 + 38 * Math.cos(a), cy = 50 + 38 * Math.sin(a);
+        return `radial-gradient(circle at ${cx}% ${cy}%, ${rgba(x.color, x.opacity)} 0%, ${rgba(x.color, 0)} ${Math.round(45 + soft * 45)}%)`;
+      });
+      layers.push(<div key="g" style={{ position: 'absolute', inset: 0, background: `${blobs.join(', ')}, linear-gradient(${n('background.gradient.angle')}deg, ${list})` }} />);
+    }
+  }
+  const glow = (key: string, p: string, blur: number) => {
+    if (!b(`${p}.enabled`)) return;
+    const r = n(`${p}.radius`) * short;
+    layers.push(
+      <div key={key} style={{
+        position: 'absolute', left: n(`${p}.x`) * width - r, top: n(`${p}.y`) * height - r, width: 2 * r, height: 2 * r, borderRadius: '50%',
+        background: `radial-gradient(circle, ${rgba(s(`${p}.color`), n(`${p}.intensity`) * st.lightsIn)} 0%, ${rgba(s(`${p}.color`), 0)} 70%)`,
+        filter: blur > 0 ? `blur(${blur}px)` : undefined,
+      }} />,
+    );
+  };
+  glow('glow', 'background.glow', n('background.glow.blur') * u);
+  glow('glow2', 'background.secondaryGlow', 0);
+  st.lights.forEach((l, i) => layers.push(
+    <div key={`l${i}`} style={{
+      position: 'absolute', left: l.x - l.radius, top: l.y - l.radius, width: 2 * l.radius, height: 2 * l.radius, borderRadius: '50%',
+      background: `radial-gradient(circle, ${rgba(l.color, l.opacity)} 0%, ${rgba(l.color, l.opacity * 0.35)} 40%, ${rgba(l.color, 0)} 70%)`,
+      filter: l.blur > 0 ? `blur(${l.blur}px)` : undefined, mixBlendMode: 'screen',
+    }} />,
+  ));
+  if (b('background.vignette.enabled')) {
+    layers.push(<div key="v" style={{ position: 'absolute', inset: 0, background: `radial-gradient(ellipse at 50% 50%, ${rgba(s('background.vignette.color'), 0)} 45%, ${rgba(s('background.vignette.color'), n('background.vignette.intensity'))} 100%)` }} />);
+  }
+  if (b('background.noise.enabled')) {
+    const seed = n('background.noise.seed');
+    layers.push(
+      <svg key="n" width={width} height={height} style={{ position: 'absolute', inset: 0, opacity: n('background.noise.opacity'), mixBlendMode: 'overlay' }} aria-hidden="true">
+        <filter id={`promo-grain-${seed}`} x="0" y="0" width="100%" height="100%">
+          <feTurbulence type="fractalNoise" baseFrequency={0.9 / (n('background.noise.scale') * Math.max(1, u))} numOctaves={2} seed={seed} stitchTiles="stitch" />
+          <feColorMatrix type="saturate" values="0" />
+        </filter>
+        <rect width="100%" height="100%" filter={`url(#promo-grain-${seed})`} />
+      </svg>,
+    );
+  }
+  return <>{layers}</>;
+}
+
+function Particles({ ctx }: { ctx: Ctx }) {
+  const { st, n, s, u } = ctx;
+  if (!st.particles.length) return null;
+  const color = s('particles.color');
+  const glow = n('particles.glow'), blur = n('particles.blur') * u;
+  return (
+    <div style={{ position: 'absolute', inset: 0, filter: blur > 0 ? `blur(${blur}px)` : undefined }} aria-hidden="true">
+      {st.particles.map((p, i) => (
+        <div key={i} style={{
+          position: 'absolute', left: p.x - p.size / 2, top: p.y - p.size / 2, width: p.size, height: p.size, borderRadius: '50%',
+          background: color, opacity: p.opacity, boxShadow: glow > 0 ? `0 0 ${p.size * 2.5}px ${p.size * 0.6}px ${rgba(color, glow)}` : undefined,
+        }} />
+      ))}
+    </div>
+  );
+}
+
+/* ─── copy ────────────────────────────────────────────────────────────────────────────────────── */
+function Units({ block, style, reveal, unitStyle }: { block: TextBlock; style: CSSProperties; reveal: boolean; unitStyle?: CSSProperties }) {
+  if (!block.units.length) return null;
+  return (
+    <div style={style}>
+      {block.units.map((w, i) => {
+        const a = block.anims[i]!;
+        const inner = (
+          <span style={{ ...unitStyle, display: 'inline-block', transform: animTransform(reveal ? { ...a, y: a.y + (1 - a.clip) * 1.1 * Number(style.fontSize ?? 0) } : a), filter: animFilter(a), opacity: a.opacity, whiteSpace: 'pre' }}>
+            {w}
+          </span>
+        );
+        const last = i === block.units.length - 1;
+        return (
+          <span key={i}>
+            {reveal ? <span style={{ display: 'inline-block', overflow: 'hidden', verticalAlign: 'top', paddingBottom: '0.08em' }}>{inner}</span> : inner}
+            {last ? null : block.split === 'lines' ? <br /> : ' '}
+          </span>
+        );
+      })}
+    </div>
+  );
+}
+
+function Headline({ ctx }: { ctx: Ctx }) {
+  const { st, n, s, b, u } = ctx;
+  const t = st.layout.text;
+  const align = t.align;
+  const left = t.x - t.width / 2;
+  const titleSize = n('typography.titleSize') * u * t.titleScale;
+  const gradient = b('typography.titleGradient.enabled');
+  const titleFill: CSSProperties = gradient
+    ? { backgroundImage: `linear-gradient(180deg, ${s('typography.titleGradient.from')}, ${s('typography.titleGradient.to')})`, WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent', WebkitTextFillColor: 'transparent', paddingBottom: '0.08em', marginBottom: '-0.08em' }
+    : { color: s('typography.titleColor') };
+  const shadows = [
+    n('typography.shadowOpacity') > 0 ? `drop-shadow(0 ${6 * u}px ${n('typography.shadowBlur') * u}px ${rgba(s('typography.shadowColor'), n('typography.shadowOpacity'))})` : '',
+    st.bloom.title > 0 ? `drop-shadow(0 0 ${n('glow.radius') * u * 0.25}px ${rgba(s('glow.color'), st.bloom.title * 0.9)})` : '',
+  ].filter(Boolean).join(' ');
+  const eyebrowPill = s('typography.eyebrowStyle') === 'pill';
+  const eyebrowSize = n('typography.eyebrowSize') * u;
+  const column = (children: ReactNode, key: string, opacity = 1, extra: Anim | undefined = undefined) => (
+    <div key={key} style={{
+      position: 'absolute', left, top: t.y, width: t.width, display: 'flex', flexDirection: 'column', gap: n('typography.gap') * u,
+      alignItems: align === 'left' ? 'flex-start' : align === 'right' ? 'flex-end' : 'center', textAlign: align, opacity,
+      transform: extra ? animTransform(extra) : undefined, filter: extra ? animFilter(extra) : undefined,
+    }}>
+      {children}
+    </div>
+  );
+  const parts = (eyebrow: TextBlock, title: TextBlock, subtitle: TextBlock) => [
+    eyebrow.units.length ? (
+      <div key="e" style={{
+        display: 'inline-flex', alignItems: 'center', padding: eyebrowPill ? `${eyebrowSize * 0.45}px ${eyebrowSize * 1.05}px` : 0, borderRadius: 999,
+        background: eyebrowPill ? rgba(s('typography.eyebrowBackground'), n('typography.eyebrowBackgroundOpacity')) : undefined,
+        border: eyebrowPill ? `${Math.max(1, u)}px solid ${rgba(s('typography.eyebrowBackground'), n('typography.eyebrowBackgroundOpacity') * 1.6)}` : undefined,
+        opacity: eyebrow.anims[0]?.opacity ?? 1, transform: eyebrow.anims.length === 1 ? animTransform(eyebrow.anims[0]!) : undefined, filter: eyebrow.anims.length === 1 ? animFilter(eyebrow.anims[0]!) : undefined,
+      }}>
+        <Units block={eyebrow.anims.length === 1 ? { ...eyebrow, anims: [{ opacity: 1, x: 0, y: 0, scale: 1, rotation: 0, blur: 0, clip: eyebrow.anims[0]!.clip }] } : eyebrow} reveal={s('textAnimation.eyebrow.mode') === 'reveal'} style={{
+          fontSize: eyebrowSize, fontWeight: n('typography.eyebrowWeight'), letterSpacing: `${n('typography.eyebrowLetterSpacing')}em`,
+          textTransform: s('typography.eyebrowCase') === 'uppercase' ? 'uppercase' : 'none', color: s('typography.eyebrowColor'), lineHeight: 1.2, whiteSpace: 'nowrap',
+        }} />
+      </div>
+    ) : null,
+    <Units key="t" block={title} reveal={s('textAnimation.title.mode') === 'reveal'} unitStyle={titleFill} style={{
+      fontSize: titleSize, fontWeight: n('typography.titleWeight'), letterSpacing: `${n('typography.titleLetterSpacing')}em`, lineHeight: n('typography.titleLineHeight'),
+      filter: shadows || undefined, textWrap: 'balance', color: s('typography.titleColor'),
+    } as CSSProperties} />,
+    <Units key="s" block={subtitle} reveal={s('textAnimation.subtitle.mode') === 'reveal'} style={{
+      fontSize: n('typography.subtitleSize') * u, fontWeight: n('typography.subtitleWeight'), lineHeight: n('typography.subtitleLineHeight'),
+      color: rgba(s('typography.subtitleColor'), n('typography.subtitleOpacity')), maxWidth: t.width * 0.9, textWrap: 'balance',
+    } as CSSProperties} />,
+  ];
+  const cur = st.text;
+  const nodes = [column(parts(cur.eyebrow, cur.title, cur.subtitle), 'cur')];
+  if (cur.leaving) {
+    const one = (text: string): TextBlock => ({ text, split: 'none', units: text ? [text] : [], anims: text ? [{ opacity: 1, x: 0, y: 0, scale: 1, rotation: 0, blur: 0, clip: 1 }] : [] });
+    nodes.unshift(column(parts(one(cur.leaving.eyebrow), one(cur.leaving.title), one(cur.leaving.subtitle)), 'old', cur.leaving.anim.opacity, cur.leaving.anim));
+  }
+  return <>{nodes}</>;
+}
+
+function Cta({ ctx }: { ctx: Ctx }) {
+  const { st, n, s, b, u } = ctx;
+  if (!b('content.cta.enabled') || !s('content.cta.text')) return null;
+  const a = st.text.cta;
+  const size = n('typography.ctaSize') * u;
+  const style = s('content.cta.style');
+  const bg = s('content.cta.backgroundColor');
+  const outline = style === 'outline';
+  return (
+    <div style={{ position: 'absolute', left: st.layout.cta.x, top: st.layout.cta.y, transform: `translate(-50%, -50%) ${animTransform(a)}`, opacity: a.opacity, filter: animFilter(a) }}>
+      <div style={{
+        display: 'flex', alignItems: 'center', gap: size * 0.5, whiteSpace: 'nowrap', padding: `${size * 0.72}px ${size * 1.5}px`,
+        borderRadius: style === 'rounded' ? size * 0.5 : 999, background: outline ? 'transparent' : bg, border: outline ? `${2 * u}px solid ${bg}` : undefined,
+        color: outline ? bg : s('content.cta.textColor'), fontSize: size, fontWeight: n('typography.ctaWeight'), letterSpacing: '-0.01em',
+        boxShadow: outline ? undefined : `0 ${10 * u}px ${36 * u}px ${rgba(s('productWindow.shadowColor'), 0.35)}, 0 0 ${n('glow.radius') * u * 0.3}px ${rgba(s('glow.color'), st.bloom.product * 0.6)}`,
+      }}>
+        {s('content.cta.text')}
+        {b('content.cta.arrow') && <Icon name="arrow" size={size * 1.05} color={outline ? bg : s('content.cta.textColor')} />}
+      </div>
+    </div>
+  );
+}
+
+function Logo({ ctx }: { ctx: Ctx }) {
+  const { st, n, s, b, u, img } = ctx;
+  if (!b('content.logo.enabled')) return null;
+  const size = n('content.logo.size') * u;
+  const a = st.logo;
+  const logoRef = s('assets.logo');
+  const mark = s('content.logo.mark');
+  const mc = s('content.logo.markColor');
+  const markNode = mark === 'none' ? null
+    : mark === 'spark' ? <Icon name="sparkle" size={size * 1.15} color={mc} />
+    : <div style={{ width: size * 0.9, height: size * 0.9, borderRadius: mark === 'square' ? size * 0.22 : '50%', background: mark === 'ring' ? 'transparent' : mc, border: mark === 'ring' ? `${size * 0.16}px solid ${mc}` : undefined, flex: 'none' }} />;
+  return (
+    <div style={{ position: 'absolute', left: st.layout.logo.x, top: st.layout.logo.y, transform: 'translateY(-50%)', opacity: a.opacity * st.exit.opacity, display: 'flex', alignItems: 'center', gap: size * 0.4 }}>
+      {logoRef ? img(logoRef, { height: size * 1.4, width: 'auto', display: 'block' }, s('content.logo.text') || 'Logo')
+        : <>{markNode}<span style={{ fontSize: size, fontWeight: 800, letterSpacing: '0.04em', color: s('content.logo.color'), lineHeight: 1 }}>{s('content.logo.text')}</span></>}
+    </div>
+  );
+}
+
+/* ─── the product ─────────────────────────────────────────────────────────────────────────────── */
+function Product({ ctx }: { ctx: Ctx }) {
+  const { st, n, s, b, u } = ctx;
+  const w = st.layout.window;
+  const p = st.product;
+  const radius = n('productWindow.radius') * u;
+  const shadow = b('productWindow.shadow') ? `0 ${n('productWindow.shadowOffsetY') * u}px ${n('productWindow.shadowBlur') * u}px ${rgba(s('productWindow.shadowColor'), n('productWindow.shadowOpacity'))}` : '';
+  const bloom = st.bloom.product > 0 ? `0 0 ${n('glow.radius') * u}px ${n('glow.radius') * u * 0.15}px ${rgba(s('glow.color'), st.bloom.product)}` : '';
+  return (
+    <div style={{
+      position: 'absolute', left: w.cx - w.width / 2, top: w.cy - w.height / 2, width: w.width, height: w.height, opacity: p.opacity,
+      transform: `translate(${p.x}px, ${p.y}px) perspective(${n('window.perspective') * u}px) rotateX(${p.tilt}deg) rotateY(${p.tiltY}deg) rotate(${p.rotation}deg) scale(${p.scale})`,
+      transformOrigin: '50% 60%',
+    }}>
+      <div style={{
+        position: 'absolute', inset: 0, borderRadius: radius, overflow: 'hidden', background: s('productWindow.backgroundColor'),
+        boxShadow: [shadow, bloom].filter(Boolean).join(', ') || undefined,
+        border: n('productWindow.borderWidth') > 0 ? `${n('productWindow.borderWidth') * u}px solid ${rgba(s('productWindow.borderColor'), n('productWindow.borderOpacity'))}` : undefined,
+        boxSizing: 'border-box', fontFamily: FONT_STACK(s('typography.uiFontFamily')),
+      }}>
+        <TopBar ctx={ctx} />
+        <Header ctx={ctx} />
+        <Content ctx={ctx} />
+      </div>
+      <Badge ctx={ctx} />
+    </div>
+  );
+}
+
+function TopBar({ ctx }: { ctx: Ctx }) {
+  const { st, n, s, b, u } = ctx;
+  const h = st.layout.ui.topBar;
+  if (!h) return null;
+  const dot = h * 0.24;
+  return (
+    <div style={{ position: 'absolute', left: 0, top: 0, right: 0, height: h, background: s('window.topBarColor'), display: 'flex', alignItems: 'center', padding: `0 ${h * 0.45}px`, gap: h * 0.4, color: s('window.topBarTextColor'), fontSize: h * 0.34 }}>
+      {b('window.showTrafficLights') && (
+        <div style={{ display: 'flex', gap: dot * 0.65, flex: 'none' }}>
+          {['window.trafficLight1', 'window.trafficLight2', 'window.trafficLight3'].map((k) => <div key={k} style={{ width: dot, height: dot, borderRadius: '50%', background: s(k) }} />)}
+        </div>
+      )}
+      {b('content.showTopBarTitle') && <span style={{ fontWeight: 600, whiteSpace: 'nowrap', flex: 'none' }}>{s('content.productName')}</span>}
+      {b('window.showAddressBar') && (
+        <div style={{ flex: 1, display: 'flex', justifyContent: 'center' }}>
+          <div style={{ minWidth: '38%', maxWidth: '60%', height: h * 0.6, borderRadius: h * 0.3, background: rgba('#ffffff', 0.9), border: `${Math.max(1, u)}px solid ${rgba('#000000', 0.06)}`, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: h * 0.14, padding: `0 ${h * 0.4}px`, whiteSpace: 'nowrap', overflow: 'hidden' }}>
+            <Icon name="lock" size={h * 0.26} color={s('window.topBarTextColor')} />
+            {s('window.addressText')}
+          </div>
+        </div>
+      )}
+      {!b('window.showAddressBar') && <div style={{ flex: 1 }} />}
+      <div style={{ width: n('window.topBarHeight') * u * 0.9, flex: 'none' }} />
+    </div>
+  );
+}
+
+function Header({ ctx }: { ctx: Ctx }) {
+  const { st, n, s, b, u, img } = ctx;
+  const h = st.layout.ui.header;
+  if (!h) return null;
+  const fs = n('productHeader.fontSize') * u;
+  const nav = getPath(st.cfg, 'productHeader.navItems') as string[];
+  const active = s('productHeader.activeItem');
+  return (
+    <div style={{
+      position: 'absolute', left: 0, right: 0, top: st.layout.ui.topBar, height: h, background: s('productHeader.backgroundColor'), display: 'flex', alignItems: 'center',
+      padding: `0 ${n('productHeader.padding') * u}px`, gap: fs * 1.6, fontSize: fs, fontWeight: n('productHeader.fontWeight'),
+      borderBottom: b('productHeader.showDivider') ? `${Math.max(1, u * 1.5)}px solid ${s('productHeader.dividerColor')}` : undefined, boxSizing: 'border-box',
+    }}>
+      {b('productHeader.showLogo') && (s('assets.appLogo')
+        ? img(s('assets.appLogo'), { height: fs * 1.6, width: 'auto', display: 'block' }, s('productHeader.logo') || 'App logo')
+        : <span style={{ fontWeight: 800, letterSpacing: '0.06em', color: s('productHeader.logoColor'), whiteSpace: 'nowrap' }}>{s('productHeader.logo')}</span>)}
+      <div style={{ flex: 1, display: 'flex', justifyContent: 'center', gap: fs * 0.5 }}>
+        {nav.map((item, i) => {
+          const on = item === active;
+          return <span key={i} style={{ padding: `${fs * 0.45}px ${fs * 1}px`, borderRadius: 999, whiteSpace: 'nowrap', color: on ? s('productHeader.activeColor') : s('productHeader.textColor'), background: on ? s('productHeader.activeBackground') : 'transparent', fontWeight: on ? Math.min(800, n('productHeader.fontWeight') + 100) : undefined }}>{item}</span>;
+        })}
+      </div>
+      {b('productHeader.showAction') && s('productHeader.actionText') && (
+        <span style={{ padding: `${fs * 0.5}px ${fs * 1.1}px`, borderRadius: 999, background: s('productHeader.accentColor'), color: '#ffffff', fontWeight: 600, whiteSpace: 'nowrap' }}>{s('productHeader.actionText')}</span>
+      )}
+    </div>
+  );
+}
+
+function Content({ ctx }: { ctx: Ctx }) {
+  const { st, s, b, u, img } = ctx;
+  const ui = st.layout.ui;
+  const fs = ui.fontSize;
+  const cards = getPath(st.cfg, 'productContent.cards') as Record<string, unknown>[];
+  const accent = s('productContent.accentColor');
+  const anim = (a: Anim): CSSProperties => ({ opacity: a.opacity, transform: animTransform(a), filter: animFilter(a) });
+  return (
+    <div style={{ position: 'absolute', left: 0, right: 0, top: ui.topBar + ui.header, bottom: 0, background: s('productContent.backgroundColor') }}>
+      <div style={{ position: 'absolute', left: 0, top: -(ui.topBar + ui.header), width: '100%', height: '100%', fontSize: fs, color: s('productContent.textColor') }}>
+        {ui.greeting && (
+          <div style={{ ...abs(ui.greeting), ...anim(st.ui.greeting), background: s('productContent.greeting.bubbleColor'), color: s('productContent.greeting.textColor'), borderRadius: fs * 1.1, borderBottomRightRadius: s('productContent.greeting.align') === 'right' ? fs * 0.3 : fs * 1.1, borderBottomLeftRadius: s('productContent.greeting.align') === 'left' ? fs * 0.3 : fs * 1.1, padding: `${fs * 0.7}px ${fs * 0.9}px`, boxSizing: 'border-box', lineHeight: 1.4, overflow: 'hidden' }}>
+            {s('productContent.greeting.text')}
+          </div>
+        )}
+        {ui.response && (
+          <div style={{ ...abs(ui.response), ...anim(st.ui.response), display: 'flex', alignItems: 'center', gap: fs * 0.6 }}>
+            {b('productContent.avatar.enabled') && (s('assets.avatar')
+              ? img(s('assets.avatar'), { width: fs * 1.9, height: fs * 1.9, borderRadius: '50%', objectFit: 'cover', flex: 'none' }, 'Assistant')
+              : <div style={{ width: fs * 1.9, height: fs * 1.9, borderRadius: '50%', flex: 'none', background: `linear-gradient(135deg, ${s('productContent.avatar.color')}, ${accent})`, color: '#ffffff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: fs * 0.8 }}>{s('productContent.avatar.initials')}</div>)}
+            <span style={{ color: s('productContent.textColor'), fontWeight: 500, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{s('productContent.response.text')}</span>
+          </div>
+        )}
+        {ui.hero && (
+          <div style={{ ...abs(ui.hero), ...anim(st.ui.hero), borderRadius: fs * 0.9, overflow: 'hidden', background: `linear-gradient(120deg, ${rgba(accent, 0.18)}, ${rgba(accent, 0.45)})` }}>
+            {s('assets.heroImage') ? img(s('assets.heroImage'), { width: '100%', height: '100%', objectFit: 'cover', display: 'block' }, 'Hero') : <Placeholder kind="website" accent={accent} u={u} />}
+          </div>
+        )}
+        {ui.cards.map((r, i) => <Card key={i} r={r} a={st.ui.cards[i]!} c={cards[i]!} fs={fs} u={u} img={img} />)}
+        {ui.input && (
+          <div style={{ ...abs(ui.input), display: 'flex', alignItems: 'center', gap: fs * 0.6, padding: `0 ${fs * 0.4}px 0 ${fs * 1}px`, boxSizing: 'border-box', borderRadius: 999, background: s('productContent.input.backgroundColor'), border: `${Math.max(1, u * 1.5)}px solid ${s('productContent.input.borderColor')}` }}>
+            <span style={{ flex: 1, whiteSpace: 'nowrap', overflow: 'hidden', color: st.ui.typed ? s('productContent.textColor') : s('productContent.mutedColor') }}>
+              {st.ui.typed || s('productContent.input.placeholder')}
+              {st.ui.typed && st.ui.caret && <span style={{ display: 'inline-block', width: Math.max(1, u * 2), height: fs * 1.1, background: accent, marginLeft: u * 2, verticalAlign: 'middle' }} />}
+            </span>
+            <div style={{ width: ui.input.height * 0.74, height: ui.input.height * 0.74, borderRadius: '50%', background: s('productContent.sendButtonColor'), color: s('productContent.sendButtonTextColor'), display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: fs * 1.05, flex: 'none' }}>
+              {s('productContent.sendButton')}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function Card({ r, a, c, fs, u, img }: { r: Rect; a: Anim; c: Record<string, unknown>; fs: number; u: number; img: Ctx['img'] }) {
+  const accent = c.accentColor as string;
+  const radius = (c.radius as number) * u;
+  const titleFs = Math.min(fs * 1.02, r.width * 0.085);
+  const hasText = Boolean(c.title || c.subtitle);
+  return (
+    <div style={{
+      ...abs(r), opacity: a.opacity * (c.opacity as number), filter: animFilter(a), borderRadius: radius, background: c.backgroundColor as string, overflow: 'hidden',
+      transform: `${animTransform(a)} rotate(${c.rotation as number}deg) scale(${c.scale as number})`, boxShadow: `0 ${8 * u}px ${28 * u}px ${rgba('#1c1432', 0.1)}`,
+      border: `${Math.max(1, u)}px solid ${rgba(accent, 0.18)}`, boxSizing: 'border-box', display: 'flex', flexDirection: 'column',
+    }}>
+      <div style={{ position: 'relative', flex: 1, margin: radius * 0.45, marginBottom: hasText ? 0 : radius * 0.45, borderRadius: radius * 0.7, overflow: 'hidden', background: rgba(accent, 0.12) }}>
+        {c.image ? img(c.image as string, { width: '100%', height: '100%', objectFit: c.imageFit as 'cover' | 'contain', display: 'block' }, (c.title as string) || 'Preview') : <Placeholder kind={c.placeholder as string} accent={accent} u={u} />}
+      </div>
+      {hasText && (
+        <div style={{ padding: `${titleFs * 0.6}px ${radius * 0.6}px ${titleFs * 0.75}px`, color: c.textColor as string, lineHeight: 1.25 }}>
+          {c.title ? <div style={{ fontSize: titleFs, fontWeight: 700, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{c.title as string}</div> : null}
+          {c.subtitle ? <div style={{ fontSize: titleFs * 0.78, opacity: 0.6, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{c.subtitle as string}</div> : null}
+        </div>
+      )}
+    </div>
+  );
+}
+
+/** Procedural previews: small, generic drawings of a website, a gallery, a chart… in the card's accent. */
+function Placeholder({ kind, accent, u }: { kind: string; accent: string; u: number }) {
+  const box: CSSProperties = { position: 'absolute', borderRadius: 6 * u };
+  const line = (top: string, left: string, width: string, op = 0.35, h = '7%') => <div style={{ ...box, top, left, width, height: h, background: rgba(accent, op) }} />;
+  switch (kind) {
+    case 'website': return (
+      <div style={{ position: 'absolute', inset: 0 }}>
+        {line('8%', '8%', '22%', 0.5, '6%')}{line('8%', '60%', '32%', 0.2, '6%')}
+        <div style={{ ...box, top: '22%', left: '8%', right: '8%', height: '40%', background: `linear-gradient(120deg, ${rgba(accent, 0.85)}, ${rgba(accent, 0.35)})` }} />
+        {line('70%', '8%', '60%', 0.3)}{line('82%', '8%', '40%', 0.2)}
+        <div style={{ ...box, top: '72%', right: '8%', width: '22%', height: '14%', borderRadius: 999, background: rgba(accent, 0.9) }} />
+      </div>
+    );
+    case 'gallery': return (
+      <div style={{ position: 'absolute', inset: '8%', display: 'grid', gridTemplateColumns: '1fr 1fr', gridTemplateRows: '1fr 1fr', gap: '8%' }}>
+        {[0.85, 0.45, 0.3, 0.65].map((o, i) => <div key={i} style={{ borderRadius: 8 * u, background: `linear-gradient(${40 + i * 70}deg, ${rgba(accent, o)}, ${rgba(accent, o * 0.4)})` }} />)}
+      </div>
+    );
+    case 'chart': return (
+      <div style={{ position: 'absolute', inset: '10%', display: 'flex', alignItems: 'flex-end', gap: '6%' }}>
+        {[0.35, 0.55, 0.45, 0.72, 0.6, 0.9].map((h, i) => <div key={i} style={{ flex: 1, height: `${h * 100}%`, borderRadius: 5 * u, background: rgba(accent, 0.35 + h * 0.6) }} />)}
+      </div>
+    );
+    case 'gradient': return <div style={{ position: 'absolute', inset: 0, background: `radial-gradient(circle at 30% 30%, ${rgba('#ffffff', 0.7)}, ${rgba(accent, 0.9)} 45%, ${rgba(accent, 0.5)})` }} />;
+    case 'text': return <div style={{ position: 'absolute', inset: 0 }}>{line('14%', '10%', '70%', 0.55, '9%')}{line('34%', '10%', '80%', 0.25)}{line('48%', '10%', '74%', 0.25)}{line('62%', '10%', '56%', 0.25)}</div>;
+    default: return null;
+  }
+}
+
+function Badge({ ctx }: { ctx: Ctx }) {
+  const { st, n, s, b, u } = ctx;
+  if (!b('content.badge.enabled') || !s('content.badge.text')) return null;
+  const a = st.badge;
+  const fs = n('typography.badgeSize') * u;
+  return (
+    <div style={{ position: 'absolute', right: -fs * 1.2, top: -fs * 1.3, opacity: a.opacity, transform: animTransform(a, 'rotate(4deg)'), transformOrigin: '100% 0' }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: fs * 0.45, padding: `${fs * 0.6}px ${fs * 1}px`, borderRadius: 999, background: s('content.badge.backgroundColor'), color: s('content.badge.textColor'), fontSize: fs, fontWeight: 700, whiteSpace: 'nowrap', boxShadow: `0 ${8 * u}px ${30 * u}px ${rgba(s('productWindow.shadowColor'), 0.3)}` }}>
+        <Icon name={s('content.badge.icon')} size={fs * 1.15} color={s('content.badge.textColor')} />
+        {s('content.badge.text')}
+      </div>
+    </div>
+  );
+}
+
+function Floating({ ctx, i, f }: { ctx: Ctx; i: number; f: FrameState['floating'][number] }) {
+  const { st, u } = ctx;
+  const item = (getPath(st.cfg, 'floatingElements') as Record<string, unknown>[])[i]!;
+  const fs = (item.fontSize as number) * u;
+  const bg = rgba(item.backgroundColor as string, item.backgroundOpacity as number);
+  const fg = item.textColor as string;
+  const radius = (item.borderRadius as number) * u;
+  const type = item.type as string;
+  const shadow = `0 ${10 * u}px ${34 * u}px ${rgba('#1c0a3a', 0.22)}`;
+  let body: ReactNode;
+  if (type === 'icon') body = <div style={{ width: fs * 2.4, height: fs * 2.4, borderRadius: Math.min(radius, fs * 1.2), background: bg, display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: shadow }}><Icon name={item.icon as string} size={fs * 1.3} color={fg} /></div>;
+  else if (type === 'text') body = <span style={{ fontSize: fs, fontWeight: 700, color: fg, whiteSpace: 'nowrap' }}>{item.content as string}</span>;
+  else body = (
+    <div style={{ display: 'flex', alignItems: 'center', gap: fs * 0.5, padding: type === 'badge' ? `${fs * 0.7}px ${fs * 0.95}px` : `${fs * 0.5}px ${fs * 0.95}px`, borderRadius: type === 'badge' ? Math.min(radius, fs * 0.8) : radius, background: bg, color: fg, fontSize: fs, fontWeight: 700, whiteSpace: 'nowrap', boxShadow: shadow, border: `${Math.max(1, u)}px solid ${rgba('#ffffff', 0.5)}` }}>
+      {type === 'badge' && item.icon !== 'none' && <div style={{ width: fs * 1.6, height: fs * 1.6, borderRadius: fs * 0.45, background: rgba(fg, 0.12), display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon name={item.icon as string} size={fs * 1.05} color={fg} /></div>}
+      {item.content as string}
+    </div>
+  );
+  const blur = (item.blur as number) * u + f.blur;
+  return (
+    <div style={{ position: 'absolute', left: f.x, top: f.y, opacity: f.opacity, transform: `translate(-50%, -50%) rotate(${f.rotation}deg) scale(${f.scale})`, filter: blur > 0.05 ? `blur(${blur}px)` : undefined }}>
+      {body}
+    </div>
+  );
+}

package/src/motion/promo/PromoShowcasePlayer.tsx

@@ -0,0 +1,78 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { getPath, validateConfig, type ConfigError, type PromoConfig } from './config';
+import { MOTION_FPS, timeline } from './engine';
+import { installPromoFonts } from './fonts';
+import { PromoFrame, type PromoFrameProps } from './PromoFrame';
+
+export type PromoShowcasePlayerProps = {
+  /** The canonical config (any subset; defaults fill the rest). Validated before anything is drawn. */
+  config: unknown;
+  autoPlay?: boolean;
+  /** Overrides loop.enabled for playback (a non-looping config replays from the start). */
+  loop?: boolean;
+  /** Rendered width in CSS px; the height follows the config's aspect ratio. Defaults to 640. */
+  width?: number;
+  /** Seek to this motion frame and hold (scrubbing). */
+  frame?: number;
+  onFrame?: (frame: number) => void;
+  onInvalid?: (errors: ConfigError[]) => void;
+  resolveAsset?: PromoFrameProps['resolveAsset'];
+  className?: string;
+};
+
+const RATIO: Record<string, number> = { '16:9': 16 / 9, '9:16': 9 / 16, '1:1': 1 };
+
+/**
+ * **promo-product-showcase in a React web app.** Validates the config, then draws each frame with the
+ * package's procedural renderer at the player's own size (vector, never a scaled bitmap). A rAF clock
+ * turns time into 60 fps motion frames; the engine does the rest. The drawing is `aria-hidden` inside
+ * a `role="img"` box labelled with the copy. Reduced motion shows the settled final frame.
+ */
+export function PromoShowcasePlayer({ config, autoPlay = true, loop, width = 640, frame, onFrame, onInvalid, resolveAsset, className }: PromoShowcasePlayerProps) {
+  const key = JSON.stringify(config ?? {});
+  const checked = useMemo(() => validateConfig(JSON.parse(key)), [key]);
+  const cfg = checked.config as PromoConfig | undefined;
+  const [now, setNow] = useState(0);
+  const cb = useRef({ onFrame, onInvalid });
+  cb.current = { onFrame, onInvalid };
+  const aspect = cfg ? String(getPath(cfg, 'canvas.aspectRatio')) : '16:9';
+  const height = Math.round(width / (RATIO[aspect] ?? 16 / 9));
+
+  useEffect(() => installPromoFonts(), []);
+  useEffect(() => { if (!checked.valid) cb.current.onInvalid?.(checked.errors); }, [checked]);
+  useEffect(() => {
+    if (!cfg) return;
+    const total = timeline(cfg).length;
+    const reduced = typeof window !== 'undefined' && window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+    if (frame !== undefined || !autoPlay || reduced) { setNow(frame ?? (reduced ? total - 1 : 0)); return; }
+    const looping = loop ?? true;
+    let raf = 0;
+    const start = performance.now();
+    const tick = (t: number) => {
+      const m = ((t - start) / 1000) * MOTION_FPS;
+      const f = looping ? m % total : Math.min(m, total - 1);
+      setNow(f);
+      cb.current.onFrame?.(f);
+      if (looping || m < total) raf = requestAnimationFrame(tick);
+    };
+    raf = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(raf);
+  }, [cfg, frame, autoPlay, loop]);
+
+  if (!checked.valid) {
+    return (
+      <div role="alert" className={className} style={{ width, padding: 12, font: '13px/1.4 system-ui', border: '1px solid currentColor' }}>
+        <strong>This promo configuration is not valid.</strong>
+        <ul>{checked.errors.slice(0, 8).map((e) => <li key={e.path + e.message}>{e.message}</li>)}</ul>
+      </div>
+    );
+  }
+  const label = [getPath(cfg, 'content.productName'), getPath(cfg, 'content.title'), getPath(cfg, 'content.subtitle')].filter(Boolean).join(' — ');
+  return (
+    <div role="img" aria-label={label} className={className} style={{ width, height, position: 'relative', overflow: 'hidden' }}>
+      <div aria-hidden="true">
+        <PromoFrame config={cfg!} frame={now} width={width} height={height} resolveAsset={resolveAsset} />
+      </div>
+    </div>
+  );
+}