Focus in

import {Fill, Easing, interpolate, useBrand, useFrame, useDesignScale} from "odori";

export type FocusInProps = {
  text: string;
  detail?: string;
  /** Frames between one word and the next. */
  stagger?: number;
  /** Starting blur radius in design pixels. */
  blur?: number;
};

/**
 * Each word starts blurred, slightly oversized and transparent, then settles
 * crisp in place. The size change is a transform rather than a font-size
 * change, so the line is laid out once and never reflows while a word is
 * still soft.
 */
export const FocusIn = ({text, detail, stagger = 5, blur = 22}: FocusInProps) => {
  const frame = useFrame();
  const brand = useBrand();
  const scale = useDesignScale();
  const words = text.split(/\s+/).filter(Boolean);
  const settled = 6 + words.length * stagger + 26;

  return (
    <Fill
      style={{
        alignItems: "center",
        gap: 32 * scale,
        justifyContent: "center",
        padding: `${120 * scale}px ${140 * scale}px`,
      }}
    >
      <div
        style={{
          display: "flex",
          flexWrap: "wrap",
          gap: `0 ${30 * scale}px`,
          justifyContent: "center",
          maxWidth: 1560 * scale,
        }}
      >
        {words.map((word, index) => {
          const delay = 6 + index * stagger;
          const progress = interpolate(frame, [delay, delay + 26], [0, 1], {easing: Easing.standard});
          return (
            <span
              key={`${word}-${index}`}
              style={{
                display: "inline-block",
                filter: `blur(${(1 - progress) * blur * scale}px)`,
                fontSize: 120 * scale,
                fontWeight: 580,
                letterSpacing: "-0.04em",
                lineHeight: 1.06,
                opacity: progress,
                transform: `scale(${1 + (1 - progress) * 0.08})`,
              }}
            >
              {word}
            </span>
          );
        })}
      </div>
      {detail ? (
        <div
          style={{
            color: brand.colors.muted,
            fontSize: 34 * scale,
            opacity: interpolate(frame, [settled, settled + 18], [0, 1], {easing: Easing.standard}),
          }}
        >
          {detail}
        </div>
      ) : null}
    </Fill>
  );
};

import {defineComponentPreview} from "odori/preview";
import {FocusIn} from "./focus-in";

export default defineComponentPreview({
  title: "Focus in",
  category: "Typography/Titles",
  description: "Words settle from a soft blur into a crisp line.",
  component: FocusIn,
  canvas: {width: 1920, height: 1080, duration: "4s"},
  controls: {
    text: {type: "text", defaultValue: "Clarity takes a moment", maxLength: 48},
    detail: {type: "text", defaultValue: "Then it holds."},
    stagger: {type: "number", defaultValue: 5, min: 1, max: 12},
    blur: {type: "number", defaultValue: 22, min: 4, max: 60},
  },
  examples: [
    {name: "Default", props: {text: "Clarity takes a moment", detail: "Then it holds."}},
    {name: "Heavy blur", props: {text: "Out of the fog", blur: 48, stagger: 8}},
  ],
});

import {Scene, Video} from "odori";
import {FocusIn} from "../components/focus-in/focus-in";

<Video>
  <Scene id="focus-in" duration="4s">
    <FocusIn
      text="Clarity takes a moment"
      detail="Then it holds."
      stagger={5}
      blur={22}
    />
  </Scene>
</Video>