@breathe-ds/ui 0.2.0 → 0.4.0

package/components/VideoInviteCard.tsx

@@ -0,0 +1,168 @@
+"use client";
+
+import { useState, type ReactNode } from "react";
+import { BackgroundVideo } from "./BackgroundVideo";
+
+/** Muted looping clip shown while idle (same fields as BackgroundVideo). */
+export type InviteLoop = {
+  src: string;
+  /** Larger version, downloaded only on wide screens (from `from` up). */
+  srcLarge?: string;
+  /** Minimum width (px) for the larger version. Defaults to 1024. */
+  from?: 768 | 1024;
+  /** Still frame: shown before the clip loads, without JS, and with reduced motion. */
+  poster: string;
+  posterLarge?: string;
+};
+
+/** Text track drawn by the browser over the full video (.vtt). */
+export type InviteTrack = {
+  src: string;
+  /** BCP 47 language tag, e.g. "pt-BR", "en". */
+  srcLang: string;
+  /** Name shown in the browser's track menu, e.g. "Português". */
+  label: string;
+  kind?: "captions" | "subtitles";
+  default?: boolean;
+};
+
+/** Full video with sound, played on tap. Only downloaded then. */
+export type InviteVideo = {
+  src: string;
+  poster?: string;
+  tracks?: InviteTrack[];
+};
+
+type Labels = {
+  /** Screen-reader label of the play button (the circle, bottom-right). */
+  listen: string;
+  /** aria-label of the full video while it plays. */
+  video: string;
+  /** Labels of the loop's pause button (top-right), passed to BackgroundVideo. */
+  pause: string;
+  play: string;
+};
+
+const EN: Labels = {
+  listen: "Listen to the invitation",
+  video: "Video invitation, with sound",
+  pause: "Pause the video",
+  play: "Play the video",
+};
+
+export type VideoInviteCardProps = {
+  /** Overlay title, top-left, in both phases (on the site: who appears). Ink text, no background. */
+  title: ReactNode;
+  /** Second line under the title (on the site: the person's role). */
+  description?: ReactNode;
+  /** Idle phase: muted looping clip. */
+  loop: InviteLoop;
+  /** Tap phase: the full video with sound, browser controls and captions. */
+  video: InviteVideo;
+  /** Called when the person taps play (e.g. to pause other media on the page). */
+  onPlay?: () => void;
+  /** Called when the full video ends and the card goes back to the loop. */
+  onEnded?: () => void;
+  labels?: Partial<Labels>;
+  /** Size/position of the frame (aspect, min-height, grid order…). */
+  className?: string;
+};
+
+function PlayGlyph({ size = 22 }: { size?: number }) {
+  return <svg viewBox="0 0 24 24" width={size} height={size} className="ml-0.5" fill="currentColor" aria-hidden="true"><path d="M6 3v18l15-9z" /></svg>;
+}
+
+/**
+ * Video invitation card of the Cuidado Global family — mirrors the
+ * `VideoConvite` of novo.creeta with the Breathe tokens, in two phases.
+ *
+ * Idle, it is a background video: the speaker on a muted loop (BackgroundVideo:
+ * respects reduced motion and data saver, has the pause button top-right —
+ * WCAG 2.2.2). Over it, the title and description top-left and a play button
+ * bottom-right, outside the face. On tap, the second video takes over, with
+ * sound: the invitation itself, with captions and the browser's controls.
+ * Because play is a click by the person, the browser allows the audio. When
+ * the invitation ends, the card goes back to the loop.
+ *
+ * The full video only downloads on tap. The frame is a 28px-radius card
+ * (`rounded-2xl` in the DS scale); the consumer sets aspect/min-height via
+ * `className`.
+ */
+export function VideoInviteCard({ title, description, loop, video, onPlay, onEnded, labels, className = "" }: VideoInviteCardProps) {
+  const [inviting, setInviting] = useState(false);
+  const t = { ...EN, ...labels };
+
+  /* No background, straight over the video, in ink top-left, where the frame
+     is the light wall in both phases (measured on the site's footage: 6.18:1
+     median on the loop, 5.86:1 on the invitation). The light text-shadow
+     holds it on the darker frames. */
+  const caption = (
+    <p className="inline-block text-sm font-medium leading-snug text-ink [text-shadow:0_1px_2px_rgba(255,255,255,0.5)]">
+      <span className="block">{title}</span>
+      {description && <span className="block font-normal">{description}</span>}
+    </p>
+  );
+
+  const frame = `relative overflow-hidden rounded-2xl bg-ink ${className}`;
+
+  if (inviting) {
+    return (
+      <div className={frame}>
+        <video
+          src={video.src}
+          poster={video.poster}
+          controls
+          autoPlay
+          playsInline
+          onEnded={() => {
+            setInviting(false);
+            onEnded?.();
+          }}
+          aria-label={t.video}
+          className="absolute inset-0 h-full w-full bg-ink object-cover"
+        >
+          {video.tracks?.map((track) => (
+            <track
+              key={track.src}
+              kind={track.kind ?? "captions"}
+              src={track.src}
+              srcLang={track.srcLang}
+              label={track.label}
+              default={track.default}
+            />
+          ))}
+        </video>
+        <div className="pointer-events-none absolute top-4 left-4 right-4">{caption}</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={frame}>
+      <BackgroundVideo
+        src={loop.src}
+        srcLarge={loop.srcLarge}
+        from={loop.from}
+        poster={loop.poster}
+        posterLarge={loop.posterLarge}
+        labels={{ pause: t.pause, play: t.play }}
+        className="absolute inset-0"
+      />
+      {/* right-16: the loop's pause button sits in the top-right corner. */}
+      <div className="pointer-events-none absolute top-4 left-4 right-16">{caption}</div>
+      {/* Only the circle is a button, so the loop's pause button (top corner)
+          stays reachable. Bottom-right, outside the face. */}
+      <button
+        type="button"
+        onClick={() => {
+          onPlay?.();
+          setInviting(true);
+        }}
+        className="group absolute right-4 bottom-4 z-10 flex h-14 w-14 items-center justify-center rounded-full bg-card text-ink shadow-[0_8px_24px_-8px_rgba(0,0,0,0.6)] transition-transform duration-200 ease-out hover:scale-105 active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-surface motion-reduce:transition-none motion-reduce:hover:scale-100 motion-reduce:active:scale-100"
+      >
+        <PlayGlyph size={22} />
+        <span className="sr-only">{t.listen}</span>
+      </button>
+    </div>
+  );
+}

package/components/VideoStoryCard.tsx

@@ -0,0 +1,382 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState, type ElementType, type ReactNode } from "react";
+import { Check, Play } from "lucide-react";
+
+/* ── Pause-all coordination (ported from creeta's `pausa-dos-videos.tsx`) ──
+   A page-level "pause the card videos" button (WCAG 2.2.2) does two things:
+   `document.documentElement.toggleAttribute(CARD_VIDEOS_PAUSED_ATTR, paused)`
+   and `window.dispatchEvent(new Event(CARD_VIDEOS_PAUSE_EVENT))`. The hover
+   preview of this card checks the attribute before playing, and listens to
+   the event to stop a preview that is already running. The button itself
+   lives in the site (it is one per page, next to the grid), not here. */
+
+/** Event name the card previews listen to. */
+export const CARD_VIDEOS_PAUSE_EVENT = "cg-card-videos";
+/** Attribute on <html> while the card previews are paused by the person. */
+export const CARD_VIDEOS_PAUSED_ATTR = "data-card-videos-paused";
+
+/** Seconds → "1 min 39 s" (the site's `duracaoPorExtenso`, English units).
+ *  Pass an already formatted string to `duration` for other languages. */
+export function formatDuration(seconds: number): string {
+  const m = Math.floor(seconds / 60);
+  const s = seconds % 60;
+  if (m === 0) return `${s} s`;
+  return s === 0 ? `${m} min` : `${m} min ${s} s`;
+}
+
+type Labels = {
+  /** sr-only text of the poster button: "Watch: {title}, {duration}". */
+  watch: (title: string, duration: string) => string;
+  /** sr-only text of the poster button once watched: "Watched. Watch again: …". */
+  watchAgain: (title: string, duration: string) => string;
+  /** The badge shown on the poster once the video has been watched to the end. */
+  watched: string;
+};
+const EN: Labels = {
+  watch: (title, duration) => `Watch: ${title}, ${duration}`,
+  watchAgain: (title, duration) => `Watched. Watch again: ${title}, ${duration}`,
+  watched: "Watched",
+};
+
+/** localStorage key of the set of watched clips (by `src`), with `remember`. */
+export const WATCHED_STORAGE_KEY = "cg-watched";
+
+function readWatched(): string[] {
+  try {
+    const raw = localStorage.getItem(WATCHED_STORAGE_KEY);
+    const list = raw ? JSON.parse(raw) : [];
+    return Array.isArray(list) ? list : [];
+  } catch {
+    return [];
+  }
+}
+
+function storeWatched(src: string) {
+  try {
+    const list = readWatched();
+    if (!list.includes(src)) localStorage.setItem(WATCHED_STORAGE_KEY, JSON.stringify([...list, src]));
+  } catch {
+    /* private mode, blocked storage: the badge still shows for this visit */
+  }
+}
+
+export type VideoStoryCardCaptions = {
+  /** WebVTT file in the page's language. */
+  src: string;
+  /** BCP 47 tag of the captions ("en", "pt-BR"). */
+  lang: string;
+};
+
+type Props = {
+  /** Title of the clip (the heading of the card). */
+  title: string;
+  /** Who speaks, under the title ("Mariangela Fonseca"). */
+  speaker?: ReactNode;
+  /** One sentence. Collapsed by default; opens on hover (mouse only) or on
+   *  keyboard focus. In the side layout it is always visible. */
+  lead?: ReactNode;
+  /** The clip. Downloaded only when the person presses play (with sound and
+   *  the browser's controls). */
+  src: string;
+  /** Still frame shown before play (a few kB: with ten cards on a page this is
+   *  what makes it load on 4G). Also used as the <video> poster. */
+  poster: string;
+  /** Responsive variants of the poster ("/v/x-480.webp 480w"). */
+  posterSrcSet?: string;
+  /** `sizes` of the poster. Default: one of three columns from md up. */
+  sizes?: string;
+  /** Replaces the default <img>: the site's own image component. Must fill
+   *  the box (h-full w-full object-cover). */
+  media?: ReactNode;
+  /** Dominant color of the poster, shown while it loads. */
+  color?: string;
+  /** "1 min 39 s" (string) or the seconds (formatted in English by formatDuration). */
+  duration: string | number;
+  /** Optional muted, looping clip layered over the poster while the mouse is
+   *  on the card or the card has keyboard focus (the `hover` mode of creeta's
+   *  `VideoDoCartao`). Only where a mouse exists (hover: hover and pointer:
+   *  fine); never with reduced motion, data saver, or while the page's
+   *  pause-all is on. Fades in once it is really playing; otherwise the
+   *  poster stays. Not in the source card: opt-in. */
+  previewSrc?: string;
+  /** Hidden subtitle track + a caption band under the video while it plays
+   *  (creeta's `legenda.tsx`): many clips already have burned-in captions,
+   *  so the browser's overlay would collide with them. */
+  captions?: VideoStoryCardCaptions;
+  /** h2 on list pages, h3 inside a section that already has an h2. */
+  headingLevel?: "h2" | "h3";
+  /** `stacked` (default): title, speaker and lead over the poster, bottom
+   *  gradient. `side`: from md the video takes one column of three and the
+   *  text sits beside it (the card is alone in its group). */
+  layout?: "stacked" | "side";
+  /** Element rendered as the card root (default <article>); `li` in a list. */
+  as?: ElementType;
+  /** id of the root (anchor target: scroll-mt-24 is built in). */
+  id?: string;
+  /** Marks the card as watched from the start (the site keeps its own record).
+   *  Either way the card marks itself once the video plays to the end. */
+  watched?: boolean;
+  /** Called once when the video plays to the end (to store it on the site). */
+  onWatched?: () => void;
+  /** Remembers watched clips in localStorage (by `src`) across visits, for a
+   *  page with many videos. Off by default: the site decides. */
+  remember?: boolean;
+  /** What goes right under the video: a transcript, on the videos page. */
+  children?: ReactNode;
+  labels?: Partial<Labels>;
+  className?: string;
+};
+
+/** The spoken line right now, read from the hidden <track>. 'hidden' mode:
+ *  the browser loads and fires cuechange but does not draw. */
+function useCaptionLine() {
+  const [line, setLine] = useState("");
+  const attach = useCallback((el: HTMLTrackElement | null) => {
+    const track = el?.track;
+    if (!track) return;
+    track.mode = "hidden";
+    track.addEventListener("cuechange", () => {
+      const cue = track.activeCues?.[0] as VTTCue | undefined;
+      setLine(cue ? cue.text : "");
+    });
+  }, []);
+  return { line, attach };
+}
+
+/** Caption band under the video: fixed height of three lines so the page does
+ *  not jump at every line; hidden from screen readers (the transcript is on
+ *  the page). On mount it scrolls the least needed to be in view: on phones it
+ *  would be born behind the bottom bar. */
+function CaptionLine({ text, lang }: { text: string; lang: string }) {
+  const band = useRef<HTMLParagraphElement>(null);
+  useEffect(() => {
+    const calm = typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+    band.current?.scrollIntoView?.({ block: "nearest", behavior: calm ? "auto" : "smooth" });
+  }, []);
+  return (
+    <p
+      ref={band}
+      aria-hidden="true"
+      lang={lang}
+      className="mt-2 flex min-h-[4.75rem] scroll-mb-28 items-center justify-center rounded-[20px] bg-ink px-4 py-2.5 text-center text-[0.9375rem] font-medium leading-snug text-white md:scroll-mb-6"
+    >
+      {text}
+    </p>
+  );
+}
+
+/**
+ * Vertical (9:16) video card of the Cuidado Global family — the Instagram-post
+ * card of novo.creeta (`VideoCartao`), by tokens. Until the person presses
+ * play it is a poster with the round play button and the duration badge in the
+ * top-left corner; the title and the speaker sit on a short ink gradient at the
+ * bottom. On hover (mouse) or keyboard focus the gradient grows and the lead
+ * slides open (grid-rows 0fr → 1fr, no height animation). Tap/click swaps the
+ * poster for the <video> with sound and controls, and the overlay text leaves.
+ * Optional muted preview on hover (`previewSrc`) and caption band (`captions`).
+ * When the video ends the card goes back to the poster with a "Watched" badge
+ * (check + word, never color alone) in the top-right corner, opposite the play:
+ * on a page with many clips it says which ones are done.
+ */
+export function VideoStoryCard({
+  title,
+  speaker,
+  lead,
+  src,
+  poster,
+  posterSrcSet,
+  sizes = "(min-width: 1152px) 360px, (min-width: 768px) 33vw, 78vw",
+  media,
+  color,
+  duration,
+  previewSrc,
+  captions,
+  headingLevel: Heading = "h3",
+  layout = "stacked",
+  as: Root = "article",
+  id,
+  watched: watchedProp = false,
+  onWatched,
+  remember = false,
+  children,
+  labels,
+  className = "",
+}: Props) {
+  const t = { ...EN, ...labels };
+  const side = layout === "side";
+  const durationText = typeof duration === "number" ? formatDuration(duration) : duration;
+  const [playing, setPlaying] = useState(false);
+  const { line, attach } = useCaptionLine();
+
+  // ── watched: from the prop, from storage (after mount, so SSR and the first
+  // paint agree), or from the video reaching the end ──
+  const [watchedHere, setWatchedHere] = useState(false);
+  useEffect(() => {
+    if (remember && readWatched().includes(src)) setWatchedHere(true);
+  }, [remember, src]);
+  const watched = watchedProp || watchedHere;
+  const onEnded = () => {
+    setPlaying(false);
+    if (!watched) onWatched?.();
+    setWatchedHere(true);
+    if (remember) storeWatched(src);
+  };
+
+  // ── hover preview (muted loop over the poster) ──
+  const card = useRef<HTMLElement>(null);
+  const preview = useRef<HTMLVideoElement>(null);
+  const [previewing, setPreviewing] = useState(false);
+
+  useEffect(() => {
+    const v = preview.current;
+    const root = card.current;
+    if (!previewSrc || !v || !root || typeof window.matchMedia !== "function") return;
+
+    const saveData = (navigator as Navigator & { connection?: { saveData?: boolean } }).connection?.saveData === true;
+    const calm = () => window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    const pausedByPerson = () => document.documentElement.hasAttribute(CARD_VIDEOS_PAUSED_ATTR);
+    const play = () => {
+      if (calm() || saveData || pausedByPerson()) return;
+      v.play()
+        .then(() => setPreviewing(true))
+        .catch(() => {});
+    };
+    const stop = () => {
+      setPreviewing(false);
+      v.pause();
+    };
+    const withMouse = () => window.matchMedia("(hover: hover) and (pointer: fine)").matches;
+    const enter = () => withMouse() && play();
+    // the person pressed the page's pause-all while the preview was running
+    const onPauseAll = () => pausedByPerson() && stop();
+
+    root.addEventListener("pointerenter", enter);
+    root.addEventListener("pointerleave", stop);
+    root.addEventListener("focusin", enter);
+    root.addEventListener("focusout", stop);
+    window.addEventListener(CARD_VIDEOS_PAUSE_EVENT, onPauseAll);
+    return () => {
+      root.removeEventListener("pointerenter", enter);
+      root.removeEventListener("pointerleave", stop);
+      root.removeEventListener("focusin", enter);
+      root.removeEventListener("focusout", stop);
+      window.removeEventListener(CARD_VIDEOS_PAUSE_EVENT, onPauseAll);
+    };
+  }, [previewSrc, playing]);
+
+  const overlayTitle = `font-heading text-xl font-medium leading-snug md:text-[1.375rem]`;
+
+  return (
+    <Root
+      ref={card}
+      id={id}
+      className={`group/card scroll-mt-24 ${side ? "md:grid md:grid-cols-3 md:items-center md:gap-5" : ""} ${className}`}
+    >
+      {/* the video and what is glued to it: the caption band and the transcript */}
+      <div>
+        <div className="relative aspect-[9/16] overflow-hidden rounded-[28px]" style={color ? { backgroundColor: color } : undefined}>
+          {playing ? (
+            <video
+              src={src}
+              poster={poster}
+              controls
+              autoPlay
+              playsInline
+              onEnded={onEnded}
+              className="absolute inset-0 h-full w-full bg-ink object-contain"
+            >
+              {captions && <track ref={attach} kind="subtitles" src={captions.src} srcLang={captions.lang} default />}
+            </video>
+          ) : (
+            <button
+              type="button"
+              onClick={() => setPlaying(true)}
+              className="group absolute inset-0 h-full w-full focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-4 focus-visible:outline-white"
+            >
+              {media ?? (
+                // eslint-disable-next-line @next/next/no-img-element
+                <img
+                  src={poster}
+                  srcSet={posterSrcSet}
+                  sizes={posterSrcSet ? sizes : undefined}
+                  alt=""
+                  width={540}
+                  height={960}
+                  loading="lazy"
+                  decoding="async"
+                  className="h-full w-full object-cover"
+                />
+              )}
+              {/* muted preview: invisible until it really plays, then fades in
+                  (otherwise it would flash black while the file arrives) */}
+              {previewSrc && (
+                <video
+                  ref={preview}
+                  src={previewSrc}
+                  muted
+                  loop
+                  playsInline
+                  preload="none"
+                  aria-hidden="true"
+                  tabIndex={-1}
+                  className={`pointer-events-none absolute inset-0 h-full w-full object-cover transition-opacity duration-500 ease-out motion-reduce:transition-none ${previewing ? "opacity-100" : "opacity-0"}`}
+                />
+              )}
+              {/* watched: top-right, opposite the play, check and word (not color alone) */}
+              {watched && (
+                <span aria-hidden="true" className="absolute right-3 top-3 flex items-center gap-1.5 rounded-full bg-card/90 py-1.5 pl-2.5 pr-3 text-xs font-semibold text-ink backdrop-blur-md">
+                  <Check size={14} strokeWidth={2.5} />
+                  {t.watched}
+                </span>
+              )}
+              {/* play and duration, together in the top corner */}
+              <span aria-hidden="true" className="absolute left-3 top-3 flex items-center gap-2">
+                <span className="flex h-11 w-11 items-center justify-center rounded-full bg-card text-ink shadow-[0_8px_24px_-8px_rgba(0,0,0,0.6)] transition-transform duration-200 ease-out group-hover:scale-105 group-active:scale-95 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-active:scale-100">
+                  <Play size={18} strokeWidth={2} className="ml-0.5 fill-current" />
+                </span>
+                <span className="rounded-full bg-ink/85 px-3 py-1.5 text-xs font-medium text-white backdrop-blur-md">
+                  {durationText}
+                </span>
+              </span>
+              {/* the gradient that holds the text: full ink at the bottom,
+                  nothing at the top; grows when the lead appears */}
+              <span
+                aria-hidden="true"
+                className="pointer-events-none absolute inset-x-0 bottom-0 h-[45%] bg-gradient-to-t from-ink from-20% via-ink/80 via-55% to-transparent transition-[height] duration-300 ease-out group-focus-within/card:h-[70%] motion-reduce:transition-none [@media(hover:hover)_and_(pointer:fine)]:group-hover/card:h-[70%]"
+              />
+              <span className="sr-only">{watched ? t.watchAgain(title, durationText) : t.watch(title, durationText)}</span>
+            </button>
+          )}
+          {/* Caption over the gradient. Outside the button so the title stays a
+              heading. Leaves when the video plays. */}
+          {!playing && !side && (
+            <div className="pointer-events-none absolute inset-x-0 bottom-0 p-5 text-white md:p-6">
+              <Heading className={overlayTitle}>{title}</Heading>
+              {speaker && <p className="mt-1 text-sm font-semibold text-white/80">{speaker}</p>}
+              {/* the lead: collapsed, opens on hover or on focus of the play
+                  (grid-rows 0fr → 1fr, no height animation) */}
+              {lead && (
+                <div className="grid grid-rows-[0fr] transition-[grid-template-rows] duration-300 ease-out group-focus-within/card:grid-rows-[1fr] motion-reduce:transition-none [@media(hover:hover)_and_(pointer:fine)]:group-hover/card:grid-rows-[1fr]">
+                  <p className="min-h-0 overflow-hidden text-sm leading-relaxed text-white/85 opacity-0 transition-opacity duration-300 ease-out group-focus-within/card:opacity-100 motion-reduce:transition-none [@media(hover:hover)_and_(pointer:fine)]:group-hover/card:opacity-100">
+                    <span className="block pt-1.5">{lead}</span>
+                  </p>
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+        {playing && captions && <CaptionLine text={line} lang={captions.lang} />}
+        {children}
+      </div>
+      {/* Side layout (card alone in its group): the text sits beside the video. */}
+      {side && (
+        <div className="px-6 pt-4 md:col-span-2 md:max-w-md md:pt-0">
+          <Heading className={`${overlayTitle} text-ink`}>{title}</Heading>
+          {speaker && <p className="mt-1 text-sm font-semibold text-ink">{speaker}</p>}
+          {lead && <p className="mt-1.5 text-[0.9375rem] leading-relaxed text-ink/80">{lead}</p>}
+        </div>
+      )}
+    </Root>
+  );
+}

package/components/useOnAppear.ts

@@ -0,0 +1,39 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+
+/** whole:   the drawing finished, not animating (no JavaScript, no
+ *           IntersectionObserver, or reduced motion).
+ *  waiting: hidden, until it shows up on screen.
+ *  playing: it showed up; the animation runs. */
+export type AppearState = "whole" | "waiting" | "playing";
+
+export const reducedMotion = () =>
+  typeof window !== "undefined" && !!window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+
+/** For drawings that animate once half of them is on screen (creeta's
+ *  `useAoAparecer`). The default is the finished drawing: it only hides to
+ *  animate when it can animate. `onScreen` follows the drawing the whole time:
+ *  a looping animation only runs while someone can see it. */
+export function useOnAppear<T extends HTMLElement>() {
+  const ref = useRef<T>(null);
+  const [state, setState] = useState<AppearState>("whole");
+  const [onScreen, setOnScreen] = useState(false);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el || typeof IntersectionObserver === "undefined" || reducedMotion()) return;
+    setState("waiting");
+    const eye = new IntersectionObserver(
+      ([e]) => {
+        setOnScreen(!!e.isIntersecting);
+        if (e.isIntersecting) setState("playing");
+      },
+      { threshold: 0.5 },
+    );
+    eye.observe(el);
+    return () => eye.disconnect();
+  }, []);
+
+  return { ref, state, onScreen };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@breathe-ds/ui",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "Breathe DS — the design system of the Cuidado Global family of sites (creeta, ttcab, metodorta). Themeable tokens + React components.",
   "license": "MIT",
   "type": "module",
@@ -24,8 +24,19 @@
     "./components/Button": "./components/Button.tsx",
     "./components/Container": "./components/Container.tsx",
     "./components/SectionKicker": "./components/SectionKicker.tsx",
+    "./components/Heading": "./components/Heading.tsx",
+    "./components/CtaCard": "./components/CtaCard.tsx",
+    "./components/InfoCard": "./components/InfoCard.tsx",
+    "./components/FactStrip": "./components/FactStrip.tsx",
+    "./components/VideoStoryCard": "./components/VideoStoryCard.tsx",
+    "./components/TestimonialCard": "./components/TestimonialCard.tsx",
+    "./components/MediaCard": "./components/MediaCard.tsx",
+    "./components/MapCard": "./components/MapCard.tsx",
+    "./components/VideoInviteCard": "./components/VideoInviteCard.tsx",
+    "./components/Text": "./components/Text.tsx",
     "./components/Card": "./components/Card.tsx",
     "./components/PillList": "./components/PillList.tsx",
+    "./components/Pill": "./components/Pill.tsx",
     "./components/Header": "./components/Header.tsx",
     "./components/BottomNav": "./components/BottomNav.tsx",
     "./components/BreatheMark": "./components/BreatheMark.tsx",
@@ -35,8 +46,29 @@
     "./components/icons": "./components/icons.tsx",
     "./components/AnchorNav": "./components/AnchorNav.tsx",
     "./components/LanguageSwitcher": "./components/LanguageSwitcher.tsx",
+    "./components/List": "./components/List.tsx",
+    "./components/Rows": "./components/Rows.tsx",
+    "./components/Rail": "./components/Rail.tsx",
+    "./components/Avatar": "./components/Avatar.tsx",
+    "./components/Byline": "./components/Byline.tsx",
+    "./components/ProfessionalCard": "./components/ProfessionalCard.tsx",
+    "./components/ProfessionalModal": "./components/ProfessionalModal.tsx",
+    "./components/CaptionBand": "./components/CaptionBand.tsx",
+    "./components/PersonChip": "./components/PersonChip.tsx",
+    "./components/Breadcrumb": "./components/Breadcrumb.tsx",
+    "./components/Timeline": "./components/Timeline.tsx",
     "./components/marks/ttcab": "./components/marks/ttcab.tsx",
-    "./components/marks/creeta": "./components/marks/creeta.tsx"
+    "./components/marks/creeta": "./components/marks/creeta.tsx",
+    "./components/CareSteps": "./components/CareSteps.tsx",
+    "./components/ChatPreview": "./components/ChatPreview.tsx",
+    "./components/PlanTimeline": "./components/PlanTimeline.tsx",
+    "./components/PhotoSequence": "./components/PhotoSequence.tsx",
+    "./components/PauseButton": "./components/PauseButton.tsx",
+    "./components/useOnAppear": "./components/useOnAppear.ts",
+    "./components/StoryPanel": "./components/StoryPanel.tsx",
+    "./components/PostCard": "./components/PostCard.tsx",
+    "./components/FeaturedPosts": "./components/FeaturedPosts.tsx",
+    "./components/PostArticle": "./components/PostArticle.tsx"
   },
   "publishConfig": {
     "access": "public"