reelme 0.2.2 → 0.4.0

package/template/src/cinematic/look.ts

@@ -0,0 +1,106 @@
+// Art-direction presets ("looks"). A look is the production design of a reel:
+// how the atmosphere is lit, how the camera moves, how cuts are edited, and how
+// the frame is graded. Two briefs with different looks should read as the work
+// of two different studios, not the same template with a new accent color.
+//
+// Looks are pure data; colors come from the resolved Theme at render time.
+
+import { MotionProfile } from "../theme";
+
+export type LookId = "keynote" | "noir" | "arcade" | "blueprint" | "editorial";
+
+export type TransitionStyle = "cut" | "fade" | "dip" | "whip" | "rise" | "punch" | "zoom" | "wipe" | "flip";
+
+export type CameraMove = "push" | "drift" | "pan" | "float" | "still";
+
+export type AtmosphereOverlay = "none" | "grid" | "scanlines" | "dust";
+
+export interface Grade {
+  /** Tint color layered over the whole frame. */
+  color: string;
+  blend: "multiply" | "screen" | "overlay" | "soft-light";
+  alpha: number;
+}
+
+export interface CinematicLook {
+  id: LookId;
+  /** Radial accent-light intensity behind the content (0..1). */
+  glow: number;
+  /** Whether a second, cooler light source is added for depth. */
+  twoTone: boolean;
+  /** Vignette darkness at the edges (0..1). */
+  vignette: number;
+  /** Film-grain opacity on the final frame (0..1); skipped for gif output. */
+  grain: number;
+  overlay: AtmosphereOverlay;
+  /** Base camera move applied to every scene's content. */
+  camera: CameraMove;
+  /** Camera amplitude multiplier (1 = default). */
+  cameraIntensity: number;
+  grade: Grade;
+  /** Editing energy: higher tightens enter timings and favors hard cuts. */
+  energy: number;
+  /**
+   * Spring physics for in-scene element animation. Motion is part of the
+   * production design: a look should *move* differently, not just look
+   * different. The Reel feeds this into the theme so every scene's springs
+   * inherit the look's personality (smooth, snappy, weighty, ...).
+   */
+  motion: MotionProfile;
+}
+
+const LOOKS: Record<LookId, Omit<CinematicLook, "id">> = {
+  // Clean keynote stage — soft key light, gentle push, long dissolves.
+  // Motion: settled, no bounce — elements arrive and hold.
+  keynote: {
+    glow: 0.5, twoTone: false, vignette: 0.35, grain: 0.04, overlay: "none",
+    camera: "push", cameraIntensity: 1, grade: { color: "#ffffff", blend: "soft-light", alpha: 0.05 },
+    energy: 0.4,
+    motion: { damping: 22, stiffness: 100, mass: 1.0 },
+  },
+  // Low-key cinema — deep vignette, cool grade, slow drift, dips to black.
+  // Motion: heavy and deliberate — weighty mass, slow to settle.
+  noir: {
+    glow: 0.42, twoTone: true, vignette: 0.62, grain: 0.09, overlay: "dust",
+    camera: "drift", cameraIntensity: 1.1, grade: { color: "#2a3550", blend: "multiply", alpha: 0.22 },
+    energy: 0.35,
+    motion: { damping: 28, stiffness: 78, mass: 1.4 },
+  },
+  // Saturated arcade — dual lights, scanlines, snappy whips and zooms.
+  // Motion: snappy with a playful overshoot — light mass, low damping.
+  arcade: {
+    glow: 0.72, twoTone: true, vignette: 0.3, grain: 0.05, overlay: "scanlines",
+    camera: "float", cameraIntensity: 1.25, grade: { color: "#ff3da6", blend: "screen", alpha: 0.06 },
+    energy: 0.85,
+    motion: { damping: 11, stiffness: 155, mass: 0.7 },
+  },
+  // Engineering blueprint — cool tint, faint grid, measured pans, mixed cuts.
+  // Motion: stiff and precise — quick, minimal bounce, machined.
+  blueprint: {
+    glow: 0.45, twoTone: false, vignette: 0.42, grain: 0.06, overlay: "grid",
+    camera: "pan", cameraIntensity: 1, grade: { color: "#1e3a5f", blend: "soft-light", alpha: 0.12 },
+    energy: 0.6,
+    motion: { damping: 30, stiffness: 150, mass: 1.1 },
+  },
+  // Premium brand film — warm grade, big soft vignette, very slow elegant push.
+  // Motion: the smoothest — elegant glide, no perceptible bounce.
+  editorial: {
+    glow: 0.55, twoTone: false, vignette: 0.5, grain: 0.07, overlay: "none",
+    camera: "push", cameraIntensity: 0.7, grade: { color: "#ffb27a", blend: "overlay", alpha: 0.08 },
+    energy: 0.3,
+    motion: { damping: 26, stiffness: 88, mass: 1.15 },
+  },
+};
+
+const TONE_DEFAULT: Record<string, LookId> = {
+  professional: "keynote",
+  playful: "arcade",
+  technical: "blueprint",
+};
+
+export function resolveLook(look: string | undefined, tone: string | undefined): CinematicLook {
+  const id = (look && look in LOOKS ? look : TONE_DEFAULT[tone ?? "professional"] ?? "keynote") as LookId;
+  return { id, ...LOOKS[id] };
+}
+
+export const LOOK_IDS = Object.keys(LOOKS) as LookId[];

package/template/src/cinematic/transitions.tsx

@@ -0,0 +1,110 @@
+import React from "react";
+import { AbsoluteFill, useCurrentFrame, interpolate, Easing } from "remotion";
+import { CinematicLook, TransitionStyle } from "./look";
+
+// Per-look cut rhythm. The picker cycles these across scenes so the edit has a
+// pattern instead of one uniform crossfade everywhere. Scene 0 always opens
+// from black; the final scene lands on a punch so the CTA arrives, not drifts.
+const RHYTHM: Record<string, TransitionStyle[]> = {
+  keynote: ["fade", "rise", "fade", "rise"],
+  noir: ["dip", "fade", "dip", "rise"],
+  arcade: ["whip", "flip", "zoom", "whip"],
+  blueprint: ["cut", "wipe", "cut", "whip"],
+  editorial: ["fade", "wipe", "rise", "fade"],
+};
+
+export function transitionFor(look: CinematicLook, index: number, total: number): TransitionStyle {
+  if (index === 0) return "fade"; // open from black
+  if (index === total - 1) return look.energy > 0.7 ? "punch" : "rise";
+  const seq = RHYTHM[look.id] ?? RHYTHM.keynote;
+  return seq[index % seq.length];
+}
+
+interface EnterProps {
+  style: TransitionStyle;
+  look: CinematicLook;
+  /** True only for the first scene: reveal from a real black frame. */
+  fromBlack: boolean;
+  seed: number;
+  children: React.ReactNode;
+}
+
+/**
+ * Applies a scene's entrance. Scenes are sequenced back-to-back with no exit
+ * fade, so a "cut" is a true hard cut and the others are how the shot arrives.
+ * The continuous Atmosphere behind keeps even hard cuts feeling connected.
+ */
+export const Enter: React.FC<EnterProps> = ({ style, look, fromBlack, seed, children }) => {
+  const frame = useCurrentFrame();
+  // Faster entrances for higher-energy looks.
+  const win = Math.round(interpolate(look.energy, [0, 1], [18, 8]));
+  const dir = seed % 2 === 0 ? 1 : -1;
+  const ease = { extrapolateLeft: "clamp" as const, extrapolateRight: "clamp" as const };
+  const p = interpolate(frame, [0, win], [0, 1], { ...ease, easing: Easing.out(Easing.cubic) });
+
+  let opacity = 1;
+  let scale: string | undefined;
+  let translate: string | undefined;
+  let filter: string | undefined;
+  let transform: string | undefined;
+  let clipPath: string | undefined;
+
+  switch (style) {
+    case "cut":
+      break;
+    case "fade":
+      opacity = interpolate(frame, [0, fromBlack ? win + 6 : win], [0, 1], ease);
+      break;
+    case "rise":
+      opacity = p;
+      translate = `0 ${interpolate(p, [0, 1], [44, 0])}px`;
+      break;
+    case "whip":
+      opacity = interpolate(frame, [0, win * 0.7], [0, 1], ease);
+      translate = `${interpolate(p, [0, 1], [90 * dir, 0])}px 0`;
+      filter = `blur(${interpolate(p, [0, 1], [14, 0])}px)`;
+      break;
+    case "punch":
+      opacity = interpolate(frame, [0, win * 0.6], [0, 1], ease);
+      scale = String(interpolate(p, [0, 1], [1.12, 1]));
+      break;
+    case "zoom":
+      opacity = p;
+      scale = String(interpolate(p, [0, 1], [0.9, 1]));
+      break;
+    case "dip":
+      // Content snaps in; a black veil over the top lifts away → dip-to-black.
+      opacity = interpolate(frame, [0, win * 0.5], [0, 1], ease);
+      break;
+    case "wipe": {
+      // A hard edge sweeps across, revealing the shot. Direction alternates by
+      // seed so consecutive wipes don't all travel the same way.
+      opacity = interpolate(frame, [0, win * 0.3], [0, 1], ease);
+      const remain = interpolate(p, [0, 1], [100, 0]);
+      clipPath = dir > 0 ? `inset(0 ${remain}% 0 0)` : `inset(0 0 0 ${remain}%)`;
+      break;
+    }
+    case "flip":
+      // Shot swings in on a vertical hinge — a single playful rotation.
+      opacity = interpolate(frame, [0, win * 0.5], [0, 1], ease);
+      transform = `perspective(1400px) rotateY(${interpolate(p, [0, 1], [62 * dir, 0])}deg)`;
+      break;
+  }
+
+  const dipVeil = style === "dip" && (
+    <AbsoluteFill
+      style={{ background: "#000", opacity: interpolate(frame, [0, win], [1, 0], ease), pointerEvents: "none" }}
+    />
+  );
+
+  return (
+    <>
+      <AbsoluteFill
+        style={{ opacity, scale, translate, filter, transform, clipPath, willChange: "scale, translate, opacity, transform, clip-path" }}
+      >
+        {children}
+      </AbsoluteFill>
+      {dipVeil}
+    </>
+  );
+};

package/template/src/components/primitives/Bar.tsx

@@ -0,0 +1,86 @@
+import React from "react";
+import { useCurrentFrame, useVideoConfig, spring, interpolate, Easing } from "remotion";
+import { Theme } from "../../theme";
+
+interface Props {
+  label: string;
+  valueText: string;
+  /** Target fill width as a fraction of the track (0..1). */
+  fraction: number;
+  hero?: boolean;
+  theme: Theme;
+  startFrame: number;
+}
+
+export const Bar: React.FC<Props> = ({ label, valueText, fraction, hero, theme, startFrame }) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  const progress = spring({
+    frame: frame - startFrame,
+    fps,
+    config: theme.motion,
+  });
+  const width = interpolate(Math.max(0, progress), [0, 1], [0, Math.max(0, Math.min(1, fraction))], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const valueOpacity = interpolate(frame - startFrame, [10, 22], [0, 1], {
+    easing: Easing.bezier(0.16, 1, 0.3, 1),
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  return (
+    <div style={{ display: "flex", alignItems: "center", gap: 28 }}>
+      <div
+        style={{
+          width: 300,
+          textAlign: "right",
+          flexShrink: 0,
+          fontFamily: theme.fontSans,
+          fontSize: 30,
+          fontWeight: hero ? 700 : 500,
+          color: hero ? theme.text : theme.textMuted,
+          letterSpacing: "-0.01em",
+        }}
+      >
+        {label}
+      </div>
+
+      <div
+        style={{
+          flex: 1,
+          height: 56,
+          background: theme.surface,
+          borderRadius: 12,
+          display: "flex",
+          alignItems: "center",
+        }}
+      >
+        <div
+          style={{
+            width: `${width * 100}%`,
+            height: "100%",
+            background: hero ? theme.accent : theme.border,
+            borderRadius: 12,
+            flexShrink: 0,
+          }}
+        />
+        <div
+          style={{
+            opacity: valueOpacity,
+            marginLeft: 18,
+            whiteSpace: "nowrap",
+            fontFamily: theme.fontMono,
+            fontSize: 30,
+            fontWeight: 700,
+            color: hero ? theme.accent : theme.textMuted,
+          }}
+        >
+          {valueText}
+        </div>
+      </div>
+    </div>
+  );
+};

package/template/src/components/primitives/Caption.tsx

@@ -6,9 +6,10 @@ interface CaptionProps {
   text: string;
   theme: Theme;
   startFrame?: number;
+  bottomInset?: number;
 }
 
-export const Caption: React.FC<CaptionProps> = ({ text, theme, startFrame = 0 }) => {
+export const Caption: React.FC<CaptionProps> = ({ text, theme, startFrame = 0, bottomInset = 0 }) => {
   const frame = useCurrentFrame();
   const { fps } = useVideoConfig();
   const elapsed = frame - startFrame;
@@ -21,13 +22,13 @@ export const Caption: React.FC<CaptionProps> = ({ text, theme, startFrame = 0 })
     <div
       style={{
         position: "absolute",
-        bottom: 72,
+        bottom: 72 + bottomInset,
         left: 0,
         right: 0,
         display: "flex",
         justifyContent: "center",
         opacity,
-        transform: `translateY(${translateY}px)`,
+        translate: `0 ${translateY}px`,
       }}
     >
       <div
@@ -37,7 +38,7 @@ export const Caption: React.FC<CaptionProps> = ({ text, theme, startFrame = 0 })
           borderRadius: 999,
           padding: "10px 28px",
           fontFamily: theme.fontSans,
-          fontSize: 22,
+          fontSize: 32,
           fontWeight: 500,
           color: theme.text,
           letterSpacing: "-0.01em",

package/template/src/components/primitives/Icon.tsx

@@ -54,6 +54,13 @@ const ICON_MAP: Record<string, LucideIcon> = {
   zap: Zap,
 };
 
+// Whether a name resolves to a real icon. Callers use this to fall back visibly
+// (e.g. to a numbered marker) instead of rendering an empty slot when a brief
+// names an icon outside the registry (F6).
+export function hasIcon(name: string): boolean {
+  return name.toLowerCase() in ICON_MAP;
+}
+
 export interface IconProps {
   name: string;
   size?: number;

package/template/src/components/primitives/KeyPill.tsx

@@ -34,7 +34,7 @@ export const KeyPill: React.FC<KeyPillProps> = ({ label, theme, startFrame = 0 }
         color: theme.text,
         minWidth: 60,
         letterSpacing: "-0.01em",
-        transform: `scale(${scale})`,
+        scale: String(scale),
         opacity,
       }}
     >

package/template/src/components/primitives/Kicker.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { useCurrentFrame, useVideoConfig, spring, interpolate } from "remotion";
+import { Theme } from "../../theme";
+
+interface KickerProps {
+  text: string;
+  theme: Theme;
+  startFrame?: number;
+  align?: "left" | "center";
+}
+
+/** A small eyebrow label above a headline: an accent tick + uppercase mono tag. */
+export const Kicker: React.FC<KickerProps> = ({ text, theme, startFrame = 0, align = "left" }) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+  const p = spring({ frame: frame - startFrame, fps, config: theme.motion });
+  const opacity = interpolate(Math.max(0, p), [0, 1], [0, 1]);
+  const lineW = interpolate(Math.max(0, p), [0, 1], [0, 40]);
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        alignItems: "center",
+        gap: 14,
+        justifyContent: align === "center" ? "center" : "flex-start",
+        marginBottom: 22,
+        opacity,
+      }}
+    >
+      <div style={{ width: lineW, height: 3, background: theme.accent, borderRadius: 2 }} />
+      <span
+        style={{
+          fontFamily: theme.fontMono,
+          fontSize: 22,
+          fontWeight: 600,
+          letterSpacing: "0.22em",
+          textTransform: "uppercase",
+          color: theme.accent,
+        }}
+      >
+        {text}
+      </span>
+    </div>
+  );
+};

package/template/src/components/primitives/Label.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { useCurrentFrame, useVideoConfig, spring, interpolate } from "remotion";
 import { Theme } from "../../theme";
+import { RevealText } from "./RevealText";
 
 interface LabelProps {
   text: string;
@@ -9,9 +9,13 @@ interface LabelProps {
   size?: "sm" | "md" | "lg" | "xl";
   align?: "left" | "center" | "right";
   muted?: boolean;
+  emphasis?: string;
 }
 
-const sizeMap = { sm: 22, md: 32, lg: 48, xl: 72 };
+// Floors from the video-layout rules at 1080-wide: labels >=32, supporting >=44,
+// headline >=84. Each step meets or clears its floor so text stays readable at
+// viewing distance.
+const sizeMap = { sm: 32, md: 44, lg: 60, xl: 88 };
 
 export const Label: React.FC<LabelProps> = ({
   text,
@@ -20,30 +24,23 @@ export const Label: React.FC<LabelProps> = ({
   size = "md",
   align = "center",
   muted = false,
+  emphasis,
 }) => {
-  const frame = useCurrentFrame();
-  const { fps } = useVideoConfig();
-  const elapsed = frame - startFrame;
-
-  const progress = spring({ frame: elapsed, fps, config: theme.motion });
-  const opacity = interpolate(progress, [0, 1], [0, 1]);
-  const translateY = interpolate(progress, [0, 1], [20, 0]);
-
+  const big = size === "xl" || size === "lg";
   return (
-    <div
-      style={{
-        opacity,
-        transform: `translateY(${translateY}px)`,
-        fontFamily: theme.fontSans,
-        fontSize: sizeMap[size],
-        fontWeight: size === "xl" || size === "lg" ? 700 : 500,
-        color: muted ? theme.textMuted : theme.text,
-        textAlign: align,
-        lineHeight: 1.25,
-        letterSpacing: size === "xl" ? "-0.02em" : "-0.01em",
-      }}
-    >
-      {text}
-    </div>
+    <RevealText
+      text={text}
+      theme={theme}
+      startFrame={startFrame}
+      fontSize={sizeMap[size]}
+      fontWeight={big ? 700 : 500}
+      color={muted ? theme.textMuted : theme.text}
+      align={align}
+      emphasis={emphasis}
+      stagger={big ? 3 : 1.5}
+      letterSpacing={size === "xl" ? "-0.03em" : "-0.01em"}
+      lineHeight={big ? 1.1 : 1.25}
+      glow={big && !muted}
+    />
   );
 };

package/template/src/components/primitives/Loop.tsx

@@ -0,0 +1,65 @@
+import React from "react";
+import { useCurrentFrame, useVideoConfig } from "remotion";
+
+type LoopProperty = "scale" | "translateX" | "translateY" | "rotate";
+
+interface Props {
+  /** Which transform channel oscillates. */
+  property?: LoopProperty;
+  /**
+   * Peak deviation from rest: px for translate, degrees for rotate, and a
+   * scale delta for scale (0.02 = breathes between 0.98 and 1.02).
+   */
+  amplitude?: number;
+  /** Seconds for one full cycle. */
+  period?: number;
+  /** 0..1 phase offset so several looped elements don't move in lockstep. */
+  phase?: number;
+  /**
+   * Skip the motion (gif output): a perpetually moving element changes every
+   * frame and defeats gif compression, same reasoning as the Camera.
+   */
+  disabled?: boolean;
+  children: React.ReactNode;
+}
+
+/**
+ * Applies a subtle, continuous, seamless oscillation to a held element — the
+ * declarative "loop" channel the entrance springs don't cover. Motion is a sine
+ * driven by useCurrentFrame, so it loops without a seam and renders
+ * deterministically. Keep amplitudes small: this is meant to read as "alive",
+ * not as a bounce.
+ */
+export const Loop: React.FC<Props> = ({
+  property = "translateY",
+  amplitude = 6,
+  period = 3.5,
+  phase = 0,
+  disabled,
+  children,
+}) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+  if (disabled) return <>{children}</>;
+
+  const v = Math.sin((frame / (period * fps) + phase) * Math.PI * 2) * amplitude;
+
+  let style: React.CSSProperties;
+  switch (property) {
+    case "scale":
+      style = { scale: String(1 + v) };
+      break;
+    case "translateX":
+      style = { translate: `${v}px 0` };
+      break;
+    case "rotate":
+      style = { rotate: `${v}deg` };
+      break;
+    case "translateY":
+    default:
+      style = { translate: `0 ${v}px` };
+      break;
+  }
+
+  return <div style={{ ...style, willChange: "transform" }}>{children}</div>;
+};

package/template/src/components/primitives/RevealText.tsx

@@ -0,0 +1,123 @@
+import React from "react";
+import { useCurrentFrame, useVideoConfig, spring, interpolate, Easing } from "remotion";
+import { Theme } from "../../theme";
+
+interface RevealTextProps {
+  text: string;
+  theme: Theme;
+  fontSize: number;
+  startFrame?: number;
+  fontWeight?: number;
+  color?: string;
+  /** A whole word (or exact substring) rendered in the accent color. */
+  emphasis?: string;
+  align?: "left" | "center" | "right";
+  /** Frames between each word's rise. */
+  stagger?: number;
+  letterSpacing?: string;
+  lineHeight?: number;
+  /** Soft shadow so the type sits in the lit scene instead of floating flat. */
+  glow?: boolean;
+  maxWidth?: number;
+}
+
+/**
+ * Masked kinetic typography: each word rises out from behind a clip edge with a
+ * staggered spring — the headline reveal used in premium launch films, not a
+ * flat fade. Words wrap naturally; descenders are preserved by the mask padding.
+ */
+export const RevealText: React.FC<RevealTextProps> = ({
+  text,
+  theme,
+  fontSize,
+  startFrame = 0,
+  fontWeight = 800,
+  color,
+  emphasis,
+  align = "center",
+  stagger = 3,
+  letterSpacing = "-0.03em",
+  lineHeight = 1.06,
+  glow = true,
+  maxWidth,
+}) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+  const words = text.split(" ");
+
+  // Resolve which word indices the accent covers. A multi-word accent phrase
+  // ("one command") must emphasize the whole contiguous run, not silently no-op
+  // because no single word equals the phrase (F2). Punctuation is stripped from
+  // both sides so "video." matches "video".
+  const clean = (w: string) => w.replace(/[.,!?:;]/g, "").toLowerCase();
+  const cleanedWords = words.map(clean);
+  const emphIndices = new Set<number>();
+  const accentWords = emphasis?.trim() ? emphasis.trim().split(/\s+/).map(clean).filter(Boolean) : [];
+  if (accentWords.length === 1) {
+    const a = accentWords[0];
+    cleanedWords.forEach((c, i) => {
+      if (c === a || c.includes(a)) emphIndices.add(i);
+    });
+  } else if (accentWords.length > 1) {
+    for (let i = 0; i + accentWords.length <= cleanedWords.length; i++) {
+      const matches = accentWords.every((a, j) => {
+        const c = cleanedWords[i + j];
+        return c === a || c.includes(a);
+      });
+      if (matches) accentWords.forEach((_, j) => emphIndices.add(i + j));
+    }
+  }
+
+  return (
+    <div
+      style={{
+        fontFamily: theme.fontSans,
+        fontSize,
+        fontWeight,
+        color: color ?? theme.text,
+        textAlign: align,
+        lineHeight,
+        letterSpacing,
+        maxWidth,
+        textShadow: glow ? "0 6px 40px rgba(0,0,0,0.45)" : undefined,
+      }}
+    >
+      {words.map((word, i) => {
+        const elapsed = frame - startFrame - i * stagger;
+        const p = spring({ frame: elapsed, fps, config: theme.motion });
+        const y = interpolate(p, [0, 1], [112, 0], { extrapolateRight: "clamp" });
+        const opacity = interpolate(elapsed, [0, 6], [0, 1], {
+          easing: Easing.bezier(0.16, 1, 0.3, 1),
+          extrapolateLeft: "clamp",
+          extrapolateRight: "clamp",
+        });
+        const isEmph = emphIndices.has(i);
+        return (
+          <React.Fragment key={i}>
+            <span
+              style={{
+                display: "inline-block",
+                overflow: "hidden",
+                paddingBottom: "0.14em",
+                marginBottom: "-0.14em",
+                verticalAlign: "bottom",
+              }}
+            >
+              <span
+                style={{
+                  display: "inline-block",
+                  translate: `0 ${y}%`,
+                  opacity,
+                  color: isEmph ? theme.accent : undefined,
+                }}
+              >
+                {word}
+              </span>
+            </span>
+            {i < words.length - 1 ? " " : null}
+          </React.Fragment>
+        );
+      })}
+    </div>
+  );
+};