@appinternalleads/ui 0.4.0 → 0.4.1

package/src/motion/neon/layers.tsx

@@ -0,0 +1,209 @@
+import type { ReactNode, SVGProps } from 'react';
+import type { FlickerLevels } from './flicker';
+import type { GlitchState } from './glitch';
+import type { NeonMaterial } from './material';
+
+/**
+ * **The five light layers, for any shape.** The shape itself lives elsewhere (a `<text>`, an SVG
+ * artwork's `<g>`, an emoji glyph, a raster image) and is referenced by id; this paints it:
+ *
+ *   shadow → bloom → glow   blurred (feGaussianBlur); light layers blend with `screen`
+ *   tube → core             never filtered: the centre stays sharp at any size
+ *
+ * - `vector` sources are painted by `<use>` with a stroke (and a fill when `filled`), so the tube
+ *   follows the shape's outline exactly.
+ * - `raster` sources are outlined by a filter: the image's alpha (or luminance) is thresholded to a
+ *   silhouette, and a band of the tube's width is cut around its edge with feMorphology (dilate minus
+ *   erode). Each layer then colours that band. It is the closest a bitmap gets to a bent tube.
+ *
+ * Everything is in the shape's local units: the caller's transform places and scales the group.
+ * Glitch offsets arrive in em and are multiplied by `em`.
+ */
+export type NeonSource =
+  | { kind: 'vector'; href: string; filled: boolean }
+  | { kind: 'raster'; href: string; width: number; height: number; mode: 'alpha' | 'luminance'; threshold: number; filled: boolean };
+
+export type NeonLayersProps = {
+  source: NeonSource;
+  material: NeonMaterial;
+  levels: FlickerLevels;
+  glitch: GlitchState | null;
+  /** The shape's box, local units: glitch slices and filter regions are cut from it. */
+  box: { x: number; y: number; width: number; height: number };
+  /** One em in local units (glitch offsets are in em). */
+  em: number;
+  /** Room around the box for the light, local units. */
+  pad: number;
+  /** Unique id prefix for this element's filters and clips. */
+  idPrefix: string;
+  /** `shadow` draws only the cast shadow, `light` everything else (the canvas puts all shadows under the wall light); default both. */
+  part?: 'all' | 'shadow' | 'light';
+};
+
+const r3 = (v: number) => Math.round(v * 1000) / 1000;
+const clamp01 = (v: number) => Math.max(0, Math.min(1, v));
+/* The RGB split's ghosts are additive primaries by definition, not theme colours. */
+// eslint-disable-next-line comppack/no-raw-colour
+const GHOST = { red: '#FF0000', cyan: '#00FFFF' };
+export const NEON_LAYER_ORDER = ['shadow', 'bloom', 'glow', 'tube', 'core'] as const;
+
+export function NeonLayers({ source, material: m, levels, glitch, box, em, pad, idPrefix: p, part = 'all' }: NeonLayersProps) {
+  const region = { filterUnits: 'userSpaceOnUse' as const, x: r3(box.x - pad - em), y: r3(box.y - pad - em), width: r3(box.width + 2 * (pad + em)), height: r3(box.height + 2 * (pad + em)) };
+  const raster = source.kind === 'raster';
+
+  /* ---- raster: silhouette bands, one per width, as white shapes the layers colour ---- */
+  const band = (id: string, width: number) => {
+    const s = source as Extract<NeonSource, { kind: 'raster' }>;
+    const alpha = s.mode === 'luminance'
+      ? <feColorMatrix in="SourceGraphic" type="luminanceToAlpha" result="a" />
+      : <feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0" result="a" />;
+    const t = clamp01(s.threshold);
+    const table = Array.from({ length: 20 }, (_, i) => (i / 20 >= t ? 1 : 0)).join(' ');
+    const half = r3(Math.max(0.5, width / 2));
+    return (
+      <filter id={id} {...region} colorInterpolationFilters="sRGB">
+        {alpha}
+        <feComponentTransfer in="a" result="s"><feFuncA type="discrete" tableValues={table} /></feComponentTransfer>
+        <feMorphology in="s" operator="dilate" radius={half} result="d" />
+        {s.filled ? null : <feMorphology in="s" operator="erode" radius={half} result="e" />}
+        {s.filled ? null : <feComposite in="d" in2="e" operator="out" result="d" />}
+        {/* eslint-disable-next-line comppack/no-raw-colour -- a white mask the layers tint, not a colour */}
+        <feFlood floodColor="#fff" result="w" />
+        <feComposite in="w" in2="d" operator="in" />
+      </filter>
+    );
+  };
+  const bandIds = { tube: `${p}band-tube`, interior: `${p}band-interior`, core: `${p}band-core`, glow: `${p}band-glow`, bloom: `${p}band-bloom` };
+
+  /** One copy of the shape, painted. `width` picks the raster band; vectors stroke at `width`. */
+  const paint = (key: string, color: string, width: number, which: keyof typeof bandIds = 'tube', extra: SVGProps<SVGElement> = {}): ReactNode => {
+    if (source.kind === 'vector') {
+      return <use key={key} href={`#${source.href}`} fill={source.filled ? color : 'none'} stroke={color} strokeWidth={r3(width)} strokeLinejoin="round" strokeLinecap="round" {...(extra as SVGProps<SVGUseElement>)} />;
+    }
+    /* Raster: the band (a white shape) tinted by a flood; blur and width come from the layer. */
+    return (
+      <g key={key} {...(extra as SVGProps<SVGGElement>)}>
+        <g filter={`url(#${p}tint-${key})`}>
+          <g filter={`url(#${bandIds[which]})`}><use href={`#${source.href}`} /></g>
+        </g>
+      </g>
+    );
+  };
+  const tints: { key: string; color: string }[] = [];
+  const tint = (key: string, color: string) => { if (!tints.some((t) => t.key === key)) tints.push({ key, color }); return key; };
+
+  /* ---- glitch geometry: slice bands, and the bands outside them ---- */
+  const slices = glitch?.slices ?? [];
+  const bands = slices.map((s) => ({ y: box.y + s.y * box.height, h: s.h * box.height, dx: s.dx * em, keep: s.keep }));
+  const outside = { y0: box.y - pad - em, y1: box.y + box.height + pad + em };
+  const rest: { y: number; h: number }[] = [];
+  if (bands.length) {
+    let y = outside.y0;
+    for (const b of [...bands].sort((a, c) => a.y - c.y)) {
+      if (b.y > y) rest.push({ y, h: b.y - y });
+      y = Math.max(y, b.y + b.h);
+    }
+    rest.push({ y, h: outside.y1 - y });
+  }
+  const wide = { x: box.x - pad - 2 * em, width: box.width + 2 * pad + 4 * em };
+  const sliced = (layer: string, content: (keep: number) => ReactNode) => {
+    if (!bands.length) return content(1);
+    return (
+      <>
+        <g key={`${layer}-rest`} clipPath={`url(#${p}rest)`}>{content(1)}</g>
+        {bands.map((b, i) => (
+          <g key={`${layer}-slice-${i}`} clipPath={`url(#${p}slice-${i})`}>
+            <g transform={`translate(${r3(b.dx)} 0)`}>{content(b.keep)}</g>
+          </g>
+        ))}
+      </>
+    );
+  };
+
+  const shift = glitch ? glitch.shiftX * em : 0;
+  const glowShift = glitch ? glitch.glowShiftX * em : 0;
+  const split = glitch ? glitch.rgbSplit * em : 0;
+  const lightTransform = glowShift || shift ? `translate(${r3(shift + glowShift)} 0)` : undefined;
+  const sharpTransform = shift ? `translate(${r3(shift)} 0)` : undefined;
+  const blurred = (id: string, sd: number, child: ReactNode) => (sd > 0 ? <g filter={`url(#${p}${id})`}>{child}</g> : child);
+
+  const layers = (
+    <>
+      {m.shadow.enabled && part !== 'light' ? (
+        <g data-layer="shadow" opacity={r3(m.opacity.shadow)} transform={`translate(${r3(m.shadow.dx + shift)} ${r3(m.shadow.dy)})`}>
+          {blurred('shadow', m.blur.shadow, paint(tint('shadow', m.colors.shadow), m.colors.shadow, m.width.shadow))}
+        </g>
+      ) : null}
+      {part === 'shadow' ? null : <>
+      {m.opacity.bloom > 0 ? (
+        <g data-layer="bloom" opacity={r3(clamp01(m.opacity.bloom * levels.bloom))} transform={lightTransform} style={{ mixBlendMode: 'screen' }}>
+          {blurred('bloom', m.blur.bloom, paint(tint('bloom', m.colors.bloom), m.colors.bloom, m.width.bloom, 'bloom'))}
+        </g>
+      ) : null}
+      {m.opacity.glow > 0 ? (
+        <g data-layer="glow" opacity={r3(clamp01(m.opacity.glow * levels.glow))} transform={lightTransform} style={{ mixBlendMode: 'screen' }}>
+          {blurred('glow', m.blur.glow, paint(tint('glow', m.colors.glow), m.colors.glow, m.width.glow, 'glow'))}
+        </g>
+      ) : null}
+      <g data-layer="tube" transform={sharpTransform}>
+        {sliced('tube', (keep) => (
+          <>
+            {m.opacity.glass > 0 ? paint(tint('glass', m.colors.glass), m.colors.glass, m.width.tube, 'tube', { opacity: r3(m.opacity.glass) }) : null}
+            <g opacity={r3(clamp01(levels.tube * keep * m.opacity.tube))}>
+              {paint(tint('rim', m.colors.tube), m.colors.tube, m.width.tube)}
+              {paint(tint('interior', m.colors.interior), m.colors.interior, m.width.interior, 'interior')}
+            </g>
+          </>
+        ))}
+        {split > 0 ? (
+          <g data-glitch="rgb-split" opacity={r3(clamp01(0.45 * levels.tube))} style={{ mixBlendMode: 'screen' }}>
+            {paint(tint('ghost-red', GHOST.red), GHOST.red, m.width.tube * 0.8, 'tube', { transform: `translate(${r3(split)} 0)` })}
+            {paint(tint('ghost-cyan', GHOST.cyan), GHOST.cyan, m.width.tube * 0.8, 'tube', { transform: `translate(${r3(-split)} 0)` })}
+          </g>
+        ) : null}
+      </g>
+      <g data-layer="core" transform={sharpTransform}>
+        {sliced('core', (keep) => <g opacity={r3(clamp01(levels.core * keep * m.opacity.core))}>{paint(tint('core', m.colors.core), m.colors.core, m.width.core, 'core')}</g>)}
+      </g>
+      </>}
+    </>
+  );
+
+  return (
+    <>
+      <defs>
+        {m.blur.shadow > 0 ? <filter id={`${p}shadow`} {...region}><feGaussianBlur stdDeviation={r3(m.blur.shadow)} /></filter> : null}
+        {m.blur.bloom > 0 ? <filter id={`${p}bloom`} {...region}><feGaussianBlur stdDeviation={r3(m.blur.bloom)} /></filter> : null}
+        {m.blur.glow > 0 ? <filter id={`${p}glow`} {...region}><feGaussianBlur stdDeviation={r3(m.blur.glow)} /></filter> : null}
+        {raster ? (
+          <>
+            {band(bandIds.tube, m.width.tube)}
+            {band(bandIds.interior, m.width.interior)}
+            {band(bandIds.core, m.width.core)}
+            {part !== 'shadow' && m.opacity.glow > 0 ? band(bandIds.glow, m.width.glow) : null}
+            {part !== 'shadow' && m.opacity.bloom > 0 ? band(bandIds.bloom, m.width.bloom) : null}
+            {tints.map((t) => (
+              <filter key={t.key} id={`${p}tint-${t.key}`} {...region} colorInterpolationFilters="sRGB">
+                <feFlood floodColor={t.color} result="c" />
+                <feComposite in="c" in2="SourceAlpha" operator="in" />
+              </filter>
+            ))}
+          </>
+        ) : null}
+        {bands.length ? (
+          <>
+            <clipPath id={`${p}rest`} clipPathUnits="userSpaceOnUse">
+              {rest.map((b, i) => <rect key={i} x={r3(wide.x)} y={r3(b.y)} width={r3(wide.width)} height={r3(Math.max(0, b.h))} />)}
+            </clipPath>
+            {bands.map((b, i) => (
+              <clipPath key={i} id={`${p}slice-${i}`} clipPathUnits="userSpaceOnUse">
+                <rect x={r3(wide.x)} y={r3(b.y)} width={r3(wide.width)} height={r3(b.h)} />
+              </clipPath>
+            ))}
+          </>
+        ) : null}
+      </defs>
+      {layers}
+    </>
+  );
+}

package/src/motion/neon/material.ts

@@ -0,0 +1,88 @@
+import { mixHex, neonColors, type NeonMaterialConfig, type NeonTypography } from './config';
+
+/**
+ * **The neon material: colours and widths for each of the five layers**, from the material config
+ * and the tube width. Nothing here knows the words or the time.
+ *
+ * Measured on the reference (`assets/neon-text/reference-measurements.json`): a lit outline tube is a
+ * saturated rim around a paler interior (rim #ff0606, interior #ff7fb9 on the outline lettering; 15 px tube, 7 px
+ * whitest band → core ≈ 0.47 × tube), casting a dark shadow down-right, with a tight halo and a wide,
+ * dim bloom on the wall. So the tube is drawn as rim + interior, and the core sits in the middle.
+ *
+ *   1 shadow   the tube, dark, offset down-right, softly blurred
+ *   2 bloom    the tube, wide, very blurred, bloom colour — light on the wall
+ *   3 glow     the tube, a little wider, blurred, glow colour — the halo
+ *   4 tube     SHARP: unlit glass, lit rim (tube colour), paler interior
+ *   5 core     SHARP: the hot centre line (core colour)
+ *
+ * Only layers 1–3 are blurred; 4 and 5 are never filtered, which keeps the centre crisp at any size.
+ */
+export type NeonLayerId = 'shadow' | 'bloom' | 'glow' | 'tube' | 'core';
+export const NEON_LAYERS: readonly NeonLayerId[] = ['shadow', 'bloom', 'glow', 'tube', 'core'];
+
+export type NeonMaterial = {
+  colors: { core: string; tube: string; interior: string; glass: string; glow: string; bloom: string; shadow: string };
+  /** Stroke widths, user units. */
+  width: { tube: number; interior: number; core: number; glow: number; bloom: number; shadow: number };
+  /** Gaussian standard deviations, user units (0 → layer not blurred). */
+  blur: { glow: number; bloom: number; shadow: number };
+  /** Resting opacities (brightness 1); the flicker scales these. */
+  opacity: { glass: number; tube: number; core: number; glow: number; bloom: number; shadow: number };
+  shadow: { enabled: boolean; dx: number; dy: number };
+  /** Whether the glyph is filled (monoline) or only stroked (outline). */
+  filled: boolean;
+};
+
+/** The room the light needs around the letters' box, in user units. */
+/** What the material needs to know about the shape: its em size, tube width and construction. */
+export type NeonShapeMetrics = Pick<NeonTypography, 'fontSize' | 'strokeWidth' | 'construction'>;
+
+export function materialPad(neon: NeonMaterialConfig, t: NeonShapeMetrics): number {
+  const shadow = neon.shadow.enabled ? Math.hypot(neon.shadow.offsetX, neon.shadow.offsetY) * t.fontSize + neon.shadow.blur * 2 : 0;
+  const light = neon.intensity > 0 ? Math.max(neon.bloomRadius * 1.25, neon.glowRadius * 1.6) : 0;
+  return Math.ceil(Math.max(shadow, light) + t.strokeWidth * 2 + t.fontSize * 0.04);
+}
+
+export function resolveMaterial(neon: NeonMaterialConfig, t: NeonShapeMetrics): NeonMaterial {
+  const c = neonColors(neon);
+  const tube = t.strokeWidth;
+  const i = Math.max(0, neon.intensity);
+  return {
+    colors: {
+      core: c.coreColor,
+      tube: c.tubeColor,
+      /* The paler interior between rim and core (the reference's #ff7fb9 band). */
+      interior: mixHex(c.tubeColor, c.coreColor, 0.45),
+      /* Unlit glass: the tube's hue, dark. Shows through when the gas dims. */
+      // eslint-disable-next-line comppack/no-raw-colour -- darkening toward black is maths, not a theme colour
+      glass: mixHex(c.tubeColor, '#000000', 0.55),
+      glow: c.glowColor,
+      bloom: c.bloomColor,
+      shadow: neon.shadow.color,
+    },
+    width: {
+      tube,
+      interior: tube * 0.72,
+      core: t.construction === 'monoline' ? tube * neon.coreWidth * 0.5 : tube * neon.coreWidth,
+      /* A little wider than the tube, and a little wider again as the intensity rises. */
+      glow: tube * (1.4 + 0.5 * Math.sqrt(i)),
+      bloom: tube * 4 + neon.glowRadius * 0.6,
+      shadow: tube * 1.05,
+    },
+    blur: {
+      glow: Math.max(0, neon.glowRadius) / 2,
+      bloom: Math.max(0, neon.bloomRadius) / 2,
+      shadow: Math.max(0, neon.shadow.blur) / 2,
+    },
+    opacity: {
+      glass: neon.glassOpacity,
+      tube: Math.max(0, neon.tubeBrightness ?? 1),
+      core: Math.max(0, neon.coreBrightness ?? 1),
+      glow: Math.min(1, 0.9 * i),
+      bloom: Math.min(1, 0.8 * i * Math.max(0, neon.bloomIntensity ?? 1)),
+      shadow: neon.shadow.opacity,
+    },
+    shadow: { enabled: neon.shadow.enabled && neon.shadow.opacity > 0, dx: neon.shadow.offsetX * t.fontSize, dy: neon.shadow.offsetY * t.fontSize },
+    filled: t.construction === 'monoline',
+  };
+}

package/src/motion/neon/random.ts

@@ -0,0 +1,40 @@
+/**
+ * **Seeded, stateless randomness.** Every random decision in the neon animation is a hash of
+ * (seed, a slot index, a salt), so any moment can be computed on its own: frame 9000 needs no
+ * frames before it, and the same seed always plays the same sign. That is what lets Remotion
+ * render a frame in isolation and a test sample ten minutes of flicker in milliseconds.
+ */
+
+/** A 32-bit integer hash of up to four integers (a murmur3-style finaliser over a mixed key). */
+export function hash32(a: number, b = 0, c = 0, d = 0): number {
+  let h = 0x9e3779b9 ^ Math.imul(a | 0, 0x85ebca6b);
+  h = Math.imul(h ^ (h >>> 15), 0xc2b2ae35) ^ Math.imul(b | 0, 0x27d4eb2f);
+  h = Math.imul(h ^ (h >>> 13), 0x165667b1) ^ Math.imul(c | 0, 0x9e3779b1);
+  h = Math.imul(h ^ (h >>> 16), 0x85ebca77) ^ Math.imul(d | 0, 0xc2b2ae3d);
+  h ^= h >>> 16;
+  h = Math.imul(h, 0x7feb352d);
+  h ^= h >>> 15;
+  h = Math.imul(h, 0x846ca68b);
+  h ^= h >>> 16;
+  return h >>> 0;
+}
+
+/** A uniform number in [0, 1) for (seed, slot, salt). */
+export function rand(seed: number, slot: number, salt = 0, extra = 0): number {
+  return hash32(seed, slot, salt, extra) / 4294967296;
+}
+
+/** A number in [min, max) for (seed, slot, salt). */
+export function between(min: number, max: number, seed: number, slot: number, salt = 0): number {
+  return min + (max - min) * rand(seed, slot, salt);
+}
+
+/** Smooth 1D value noise in [-1, 1]: random values on integer knots, eased between them. */
+export function valueNoise(seed: number, x: number, salt = 0): number {
+  const i = Math.floor(x);
+  const f = x - i;
+  const s = f * f * (3 - 2 * f);
+  const a = rand(seed, i, salt) * 2 - 1;
+  const b = rand(seed, i + 1, salt) * 2 - 1;
+  return a + (b - a) * s;
+}