@breathe-ds/ui 0.2.0 → 0.4.0

package/components/MediaCard.tsx

@@ -0,0 +1,266 @@
+"use client";
+
+import { useEffect, useRef, useState, type ComponentType, type ElementType, type ReactNode } from "react";
+
+/** lucide-style icon component (the badge sets the size). */
+type IconType = ComponentType<{ size?: number; strokeWidth?: number; className?: string; "aria-hidden"?: boolean | "true" }>;
+
+/** Event the card videos listen to when the person pauses/resumes them all
+ *  (dispatch it on `window` after toggling the attribute below). */
+export const MEDIA_CARD_VIDEO_PAUSE_EVENT = "cg-media-card-videos";
+/** Attribute on <html> while the card videos are paused (WCAG 2.2.2: what
+ *  moves for more than 5s must be pausable; the button lives outside the
+ *  card, which is one whole link). */
+export const MEDIA_CARD_VIDEO_PAUSED_ATTR = "data-media-card-videos-paused";
+
+export type MediaCardVideo = {
+  src: string;
+  poster?: string;
+  /** `always` (default): loops while the card is on screen (a quarter in view
+   *  counts). `hover`: only with the mouse over, or keyboard focus on, the
+   *  card; on touch the photo stays. */
+  when?: "always" | "hover";
+};
+
+type Props = {
+  href: string;
+  title: ReactNode;
+  /** Supporting text. Accepts elements, to break the line where it makes sense. */
+  text?: ReactNode;
+  /** Top-left corner, over dark glass: a MediaCardBadge (icon, label, address). */
+  badge?: ReactNode;
+  /** Small line above the title ("Who created the method"), lighter. */
+  eyebrow?: ReactNode;
+  /** Text link line under the text ("See the team ↗"). The card is already the
+   *  link, so this is a label with the arrow, not a second anchor. */
+  linkLabel?: ReactNode;
+  /** The round arrow button top-right. Off for the portrait card, which says
+   *  where it goes with `linkLabel` instead. */
+  arrowButton?: boolean;
+  /** h2 on list pages, h3 inside a section that already has an h2. */
+  headingLevel?: "h2" | "h3";
+  /** Background media rendered to cover the card: an <img>, a video element or
+   *  the app's next/image (with `fill`, pass it `className="object-cover"`). */
+  media?: ReactNode;
+  /** Plain image alternative to `media`. Decorative by default (`alt=""`): the
+   *  card already has title and text. */
+  src?: string;
+  alt?: string;
+  srcSet?: string;
+  sizes?: string;
+  /** true only when the card is the page's LCP: eager + high fetch priority. */
+  priority?: boolean;
+  /** Short muted clip that plays over the photo. Without it, or if it does not
+   *  play, the photo stands. */
+  video?: MediaCardVideo;
+  /** Aspect-ratio class of the card. Default `aspect-[3/4]`; replaces the
+   *  default instead of fighting it (e.g. `aspect-[4/5] md:aspect-auto md:min-h-[460px]`). */
+  aspect?: string;
+  /** Padding class of the card. Default `p-4` (e.g. `p-6 md:p-8`). */
+  padding?: string;
+  /** Link component of the app (e.g. next-intl Link). Default: <a>. */
+  linkComponent?: ElementType;
+  className?: string;
+};
+
+/**
+ * Media card of the Cuidado Global family — the `CartaoFoto` of novo.creeta
+ * ("Get to know the clinic", the treatment cards) with the Breathe tokens. A
+ * tall card with the photo (or video) bleeding to the edges and the text over
+ * it; the whole card is the link. The ink film at the bottom keeps the text
+ * readable over any photo. On hover (mouse only) the photo zooms in slowly
+ * and steadily, like a Ken Burns: 2.5s to reach 107%; it comes back in half a
+ * second and does not move for people who asked for less motion. The round
+ * arrow button turns `action` on hover.
+ */
+export function MediaCard({
+  href,
+  title,
+  text,
+  badge,
+  eyebrow,
+  linkLabel,
+  arrowButton = true,
+  headingLevel: Heading = "h3",
+  media,
+  src,
+  alt = "",
+  srcSet,
+  sizes,
+  priority = false,
+  video,
+  aspect = "aspect-[3/4]",
+  padding = "p-4",
+  linkComponent,
+  className = "",
+}: Props) {
+  const L: ElementType = linkComponent ?? "a";
+
+  return (
+    <L
+      href={href}
+      className={`group relative isolate flex ${aspect} flex-col justify-between overflow-hidden rounded-2xl bg-ink ${padding} text-white transition-transform duration-200 ease-out active:scale-[0.98] motion-reduce:transition-none motion-reduce:active:scale-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink ${className}`}
+    >
+      {/* Zooms in slowly with the mouse over, at a constant pace, like a Ken
+          Burns: 2.5s to reach 107%. Only where there is a mouse: on a phone
+          the tap would fire a false "hover". Comes back in half a second, and
+          stays still for people who asked for less motion. */}
+      <div
+        className="absolute inset-0 -z-20 transition-transform duration-500 ease-[var(--ease-cg)] motion-reduce:transition-none [@media(hover:hover)_and_(pointer:fine)]:group-hover:scale-[1.07] [@media(hover:hover)_and_(pointer:fine)]:group-hover:duration-[2500ms] [@media(hover:hover)_and_(pointer:fine)]:group-hover:ease-linear motion-reduce:[@media(hover:hover)_and_(pointer:fine)]:group-hover:scale-100 [&>img]:h-full [&>img]:w-full [&>img]:object-cover [&>video]:h-full [&>video]:w-full [&>video]:object-cover"
+      >
+        {media ??
+          (src && (
+            <img
+              src={src}
+              srcSet={srcSet}
+              sizes={sizes}
+              alt={alt}
+              loading={priority ? "eager" : "lazy"}
+              decoding="async"
+              // React 18 only knows the lowercase attribute (19 accepts fetchPriority too)
+              {...({ fetchpriority: priority ? "high" : undefined } as Record<string, unknown>)}
+            />
+          ))}
+      </div>
+      {/* between the photo and the film: the text keeps the same contrast */}
+      {video && <CardVideo {...video} className="absolute inset-0 -z-20" />}
+      <span aria-hidden="true" className="absolute inset-0 -z-10 bg-gradient-to-t from-ink via-ink/75 via-40% to-ink/15" />
+
+      {(badge || arrowButton) && (
+        <div className="flex items-start justify-between gap-3">
+          <div>{badge}</div>
+          {arrowButton && (
+            <span
+              aria-hidden="true"
+              className="flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-card text-ink transition-colors duration-200 group-hover:bg-action group-hover:text-on-action motion-reduce:transition-none"
+            >
+              <svg viewBox="0 0 24 24" width={20} height={20} className="cg-arrow-go" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M7 17 17 7M9 7h8v8" /></svg>
+            </span>
+          )}
+        </div>
+      )}
+
+      <div className={badge || arrowButton ? "" : "mt-auto"}>
+        {eyebrow && <span className="block text-sm text-white/75">{eyebrow}</span>}
+        <Heading className={`font-heading text-2xl font-medium leading-tight ${eyebrow ? "mt-1" : ""}`}>{title}</Heading>
+        {text && <p className="m-0 mt-2 text-sm leading-relaxed text-white/85">{text}</p>}
+        {linkLabel && (
+          <span className="mt-3 inline-flex items-center gap-1.5 text-sm font-semibold underline underline-offset-4">
+            {linkLabel}
+            <svg aria-hidden="true" viewBox="0 0 24 24" width={16} height={16} className="cg-arrow-go" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M7 17 17 7M9 7h8v8" /></svg>
+          </span>
+        )}
+      </div>
+    </L>
+  );
+}
+
+/**
+ * Badge for the corner of the card. Dark glass, not light: over the bright
+ * part of a photo, white text on white glass measured 1.59:1. With `Icon`
+ * alone (no children) it becomes a 44px round icon badge.
+ */
+export function MediaCardBadge({ Icon, children, className = "" }: { Icon?: IconType; children?: ReactNode; className?: string }) {
+  const iconOnly = Boolean(Icon) && children === undefined;
+  return (
+    <span
+      className={`inline-flex items-center gap-1.5 rounded-full border border-white/15 bg-ink/80 px-3 py-2 text-xs font-medium text-white backdrop-blur-md ${iconOnly ? "h-11 w-11 justify-center p-0" : ""} ${className}`}
+    >
+      {Icon && <Icon aria-hidden="true" size={iconOnly ? 20 : 14} strokeWidth={2} />}
+      {children}
+    </span>
+  );
+}
+
+/**
+ * Short muted clip over the photo of a card (creeta's `VideoDoCartao`).
+ *
+ * Invisible until it has frames to show, then fades in: without this it would
+ * flash black while the file arrives. If it does not play, the card is the
+ * usual one, with the photo.
+ *
+ * Does not play, in either mode: for people who asked for less motion; with
+ * data saver on (the video is not even requested: `preload="none"`); while
+ * the person has paused the card videos (MEDIA_CARD_VIDEO_PAUSED_ATTR on <html>).
+ *
+ * In `always`, pauses when the card leaves the screen: three videos running
+ * with nobody watching waste battery for nothing.
+ *
+ * Muted, no controls, out of the screen-reader flow: it is decoration, the
+ * card already has title and text. The card is the link (<a>) around it.
+ */
+function CardVideo({ src, poster, when = "always", className = "" }: MediaCardVideo & { className?: string }) {
+  const video = useRef<HTMLVideoElement>(null);
+  const [playing, setPlaying] = useState(false);
+
+  useEffect(() => {
+    const v = video.current;
+    const card = v?.closest("a") ?? v?.parentElement;
+    if (!v || !card || typeof window.matchMedia !== "function") return;
+
+    const saveData = (navigator as Navigator & { connection?: { saveData?: boolean } }).connection?.saveData === true;
+    const lessMotion = () => window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    const paused = () => document.documentElement.hasAttribute(MEDIA_CARD_VIDEO_PAUSED_ATTR);
+    const play = () => {
+      if (lessMotion() || saveData || paused()) return;
+      v.play()
+        .then(() => setPlaying(true))
+        .catch(() => {});
+    };
+    const stop = () => {
+      setPlaying(false);
+      v.pause();
+    };
+
+    if (when === "hover") {
+      const withMouse = () => window.matchMedia("(hover: hover) and (pointer: fine)").matches;
+      const enter = () => withMouse() && play();
+      card.addEventListener("pointerenter", enter);
+      card.addEventListener("pointerleave", stop);
+      card.addEventListener("focusin", enter);
+      card.addEventListener("focusout", stop);
+      return () => {
+        card.removeEventListener("pointerenter", enter);
+        card.removeEventListener("pointerleave", stop);
+        card.removeEventListener("focusin", enter);
+        card.removeEventListener("focusout", stop);
+      };
+    }
+
+    if (typeof IntersectionObserver !== "function") return;
+    let onScreen = false;
+    // a quarter of the card in view already counts
+    const watcher = new IntersectionObserver(
+      ([e]) => {
+        onScreen = e.isIntersecting;
+        if (onScreen) play();
+        else stop();
+      },
+      { threshold: 0.25 },
+    );
+    watcher.observe(card);
+    // the person paused or resumed the videos
+    const onNotice = () => (paused() || !onScreen ? stop() : play());
+    window.addEventListener(MEDIA_CARD_VIDEO_PAUSE_EVENT, onNotice);
+    return () => {
+      watcher.disconnect();
+      window.removeEventListener(MEDIA_CARD_VIDEO_PAUSE_EVENT, onNotice);
+    };
+  }, [when]);
+
+  return (
+    <video
+      ref={video}
+      src={src}
+      poster={poster}
+      muted
+      loop
+      playsInline
+      preload="none"
+      aria-hidden="true"
+      tabIndex={-1}
+      data-media-card-video={when}
+      className={`pointer-events-none h-full w-full object-cover transition-opacity duration-500 ease-out motion-reduce:transition-none ${playing ? "opacity-100" : "opacity-0"} ${className}`}
+    />
+  );
+}

package/components/PageVideoHero.tsx

@@ -17,20 +17,33 @@ type LoopPreview = {
 
 /** Two kinds of video hero:
  *  - loop:   a local clip on repeat (no player). Background = BackgroundVideo.
- *  - player: the YouTube video ITSELF plays muted, on repeat, as the background
- *            (16:9, covering the card, no false crop/zoom). Turning the sound on
- *            remounts it from zero — with audio and controls — and the close bar
- *            appears at the bottom. Keeps things consistent: the preview and the
- *            video are the same footage. */
+ *  - player: the video ITSELF plays muted, on repeat, as the background.
+ *            Turning the sound on remounts it from zero — with audio and controls —
+ *            and the close bar appears at the bottom. Keeps things consistent: the
+ *            preview and the video are the same footage. The source is either a
+ *            YouTube id (16:9 iframe covering the card, no false crop/zoom) or an
+ *            mp4 hosted by the site (`src` + `poster`; the sound version plays in
+ *            the browser's own player, letterboxed like the iframe). */
 type VideoLoop = { mode: "loop"; preview: LoopPreview };
-type VideoPlayer = {
-  mode: "player";
+type PlayerCommon = { mode: "player"; playerCaption?: ReactNode };
+type VideoPlayerYouTube = PlayerCommon & {
   youtubeId: string;
   /** Still frame (reduced motion / data saver). Without it, uses YouTube's own
    *  thumbnail (maxresdefault). */
   poster?: string;
-  playerCaption?: ReactNode;
 };
+type VideoPlayerFile = PlayerCommon & {
+  /** The mp4 itself: muted and looping as the background, with sound after the tap. */
+  src: string;
+  /** Larger file for wide screens (background only). */
+  srcLarge?: string;
+  /** Still frame (reduced motion / data saver, and the <video> poster). */
+  poster: string;
+  posterLarge?: string;
+  objectPosition?: string;
+};
+type VideoPlayer = VideoPlayerYouTube | VideoPlayerFile;
+const isFile = (v: VideoPlayer): v is VideoPlayerFile => "src" in v;
 
 type Props = {
   /** Video background — defines the hero kind (loop or player). */
@@ -144,10 +157,10 @@ function YouTubeBackground({
  * in the Breathe language (tokens: ink/surface).
  *
  * - loop:   the background is a local clip on repeat (BackgroundVideo).
- * - player: the background is the YouTube video ITSELF playing muted, on repeat.
- *           Turning the sound on remounts it from zero (with audio and controls)
- *           inside the card and opens the close bar at the bottom (caption on
- *           the left, "Close" on the right).
+ * - player: the background is the video ITSELF (YouTube id or the site's mp4)
+ *           playing muted, on repeat. Turning the sound on remounts it from zero
+ *           (with audio and controls) inside the card and opens the close bar at
+ *           the bottom (caption on the left, "Close" on the right).
  */
 export function PageVideoHero({
   video,
@@ -179,20 +192,49 @@ export function PageVideoHero({
         {/* media — background (preview) or, when playing, the full video with sound */}
         <div className={`absolute inset-x-0 top-0 ${playing ? "bottom-[4.5rem]" : "bottom-0 -z-10"}`}>
           {playing ? (
-            <iframe
-              key="cg-hero-sound"
-              title={videoTitle ?? "Video"}
-              src={`https://www.youtube-nocookie.com/embed/${(video as VideoPlayer).youtubeId}?autoplay=1&mute=0&start=0&rel=0&modestbranding=1&playsinline=1&iv_load_policy=3`}
-              allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"
-              allowFullScreen
-              className="absolute inset-0 h-full w-full border-0 bg-black"
-            />
+            isFile(video as VideoPlayer) ? (
+              // the site's own mp4, with sound and the browser's controls; the
+              // click came from the person, so autoplay with audio is allowed
+              <video
+                key="cg-hero-sound"
+                src={(video as VideoPlayerFile).src}
+                poster={(video as VideoPlayerFile).poster}
+                controls
+                autoPlay
+                playsInline
+                aria-label={videoTitle ?? "Video"}
+                onEnded={() => setPlaying(false)}
+                className="absolute inset-0 h-full w-full bg-black object-contain"
+              />
+            ) : (
+              <iframe
+                key="cg-hero-sound"
+                title={videoTitle ?? "Video"}
+                src={`https://www.youtube-nocookie.com/embed/${(video as VideoPlayerYouTube).youtubeId}?autoplay=1&mute=0&start=0&rel=0&modestbranding=1&playsinline=1&iv_load_policy=3`}
+                allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"
+                allowFullScreen
+                className="absolute inset-0 h-full w-full border-0 bg-black"
+              />
+            )
           ) : (
             <>
-              {isPlayer ? (
+              {isPlayer && isFile(video as VideoPlayer) ? (
+                // the mp4 itself, muted and on repeat (BackgroundVideo: reduced
+                // motion, data saver and the pause button come with it)
+                <BackgroundVideo
+                  key={(video as VideoPlayerFile).src}
+                  src={(video as VideoPlayerFile).src}
+                  srcLarge={(video as VideoPlayerFile).srcLarge}
+                  poster={(video as VideoPlayerFile).poster}
+                  posterLarge={(video as VideoPlayerFile).posterLarge}
+                  objectPosition={(video as VideoPlayerFile).objectPosition}
+                  labels={previewLabels}
+                  className="absolute inset-0"
+                />
+              ) : isPlayer ? (
                 <YouTubeBackground
-                  id={(video as VideoPlayer).youtubeId}
-                  poster={(video as VideoPlayer).poster}
+                  id={(video as VideoPlayerYouTube).youtubeId}
+                  poster={(video as VideoPlayerYouTube).poster}
                   title={videoTitle}
                   labels={previewLabels}
                 />

package/components/PauseButton.tsx

@@ -0,0 +1,41 @@
+import { Pause, Play } from "lucide-react";
+
+type Labels = {
+  /** sr-only name: "Pause {what}" / "Resume {what}". */
+  pause: (what: string) => string;
+  resume: (what: string) => string;
+};
+const EN: Labels = { pause: (what) => `Pause ${what}`, resume: (what) => `Resume ${what}` };
+
+type Props = {
+  paused: boolean;
+  onToggle: () => void;
+  /** What it pauses, in the page's language: "the sample conversation". */
+  what: string;
+  /** Colour of the circle: card (white) over the surface, surface over a card. */
+  bubble?: "card" | "surface";
+  /** Position (absolute) inside the drawing: "right-0 top-0". */
+  className?: string;
+  labels?: Partial<Labels>;
+};
+
+/** Pause/resume button of the looping drawings (creeta's `Pausa`). What moves
+ *  by itself for more than 5s must be pausable (WCAG 2.2.2). 44px tap area,
+ *  32px circle. */
+export function PauseButton({ paused, onToggle, what, bubble = "card", className = "", labels }: Props) {
+  const t = { ...EN, ...labels };
+  const Icon = paused ? Play : Pause;
+  return (
+    <button
+      type="button"
+      onClick={onToggle}
+      aria-pressed={paused}
+      className={`absolute flex h-11 w-11 items-center justify-center rounded-full text-ink transition-transform duration-150 ease-out active:scale-[0.94] focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-4 focus-visible:outline-ink motion-reduce:transition-none motion-reduce:active:scale-100 ${className}`}
+    >
+      <span className={`flex h-8 w-8 items-center justify-center rounded-full ${bubble === "card" ? "bg-card" : "bg-surface"}`}>
+        <Icon aria-hidden="true" size={14} strokeWidth={2} className={paused ? "ml-0.5" : ""} />
+      </span>
+      <span className="sr-only">{paused ? t.resume(what) : t.pause(what)}</span>
+    </button>
+  );
+}

package/components/PersonChip.tsx

@@ -0,0 +1,49 @@
+import type { ElementType, ReactNode } from "react";
+import { Avatar } from "./Avatar";
+
+type Props = {
+  name: string;
+  /** Second line: role · registration ("Physiotherapist · CREFITO-10/…"). The
+   *  family rule: a health professional always shows the council number. */
+  description?: ReactNode;
+  photo?: string;
+  avatar?: ReactNode;
+  /** With an href the chip is a link (to the person's card) and shows the arrow bubble. */
+  href?: string;
+  linkComponent?: ElementType;
+  className?: string;
+};
+
+/**
+ * Person chip — the "who signs" of a novo.creeta article: one pill with the
+ * portrait, the name and, below, role and registration. With a link it leads
+ * to the person's card and the arrow says so, like the site's shortcuts.
+ */
+export function PersonChip({ name, description, photo, avatar, href, linkComponent, className = "" }: Props) {
+  const L: ElementType = linkComponent ?? "a";
+  const inner = (
+    <>
+      <Avatar name={name} photo={photo} size={44}>{avatar}</Avatar>
+      <span className="leading-snug">
+        <span className="block font-semibold text-ink">{name}</span>
+        {description && <span className="block text-[0.8125rem] text-ink/80">{description}</span>}
+      </span>
+    </>
+  );
+  /* The avatar (photo or initials) always sits 6px from the edge, like the
+     arrow bubble on the other side; a chip that ends in text gets 20px (Pill). */
+  const box = "inline-flex min-h-11 items-center gap-3 rounded-full bg-card py-1.5 pl-1.5";
+  if (!href) return <p className={`m-0 ${box} pr-5 ${className}`}>{inner}</p>;
+  return (
+    <L
+      href={href}
+      className={`${box} pr-1.5 transition-transform duration-150 ease-out active:scale-[0.98] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink motion-reduce:transition-none motion-reduce:active:scale-100 ${className}`}
+    >
+      {inner}
+      <span aria-hidden="true" className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-ink/[0.12] text-ink">
+        <svg viewBox="0 0 24 24" width={15} height={15} className="cg-arrow-go" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M7 17 17 7M9 7h8v8" /></svg>
+      </span>
+    </L>
+  );
+}
+

package/components/PhotoSequence.tsx

@@ -0,0 +1,99 @@
+import type { CSSProperties } from "react";
+import { Pause, Play } from "lucide-react";
+
+export type SequencePhoto = { src: string; alt: string; srcSet?: string; sizes?: string };
+
+type Labels = {
+  /** sr-only of the pause control. */
+  pause: string;
+};
+const EN: Labels = { pause: "Pause the photos" };
+
+type Props = {
+  photos: SequencePhoto[];
+  /** Unique in the page: ties the pause control to the sequence. */
+  id: string;
+  /** Seconds each photo stays, not counting the fade. */
+  seconds?: number;
+  labels?: Partial<Labels>;
+  className?: string;
+};
+
+/** Seconds of fade between one photo and the next. */
+const FADE = 1;
+/** Ken Burns: how much the photo grows while it shows. */
+const ZOOM = 1.08;
+const CURVE = "cubic-bezier(0.77, 0, 0.175, 1)";
+const pct = (n: number) => `${Number(n.toFixed(3))}%`;
+
+/** Keyframes for a sequence of `n` photos. The cycle lasts n × seconds and
+ *  each photo owns its slice: middle ones fade in, stay and vanish at once
+ *  when the next has covered them; the last fades out revealing the first;
+ *  the zoom grows while the photo shows and resets while hidden. */
+export function sequenceKeyframes(n: number, seconds: number): string {
+  const cycle = n * seconds;
+  const enter = (FADE / cycle) * 100;
+  const stay = (seconds / cycle) * 100;
+  const leave = ((seconds + FADE) / cycle) * 100;
+  return [
+    `@keyframes cg-seq-mid-${n}{0%{opacity:0}${pct(enter)}{opacity:1}${pct(leave)}{opacity:1}${pct(leave + 0.01)},100%{opacity:0}}`,
+    `@keyframes cg-seq-end-${n}{0%{opacity:0}${pct(enter)}{opacity:1}${pct(stay)}{opacity:1}${pct(leave)},100%{opacity:0}}`,
+    `@keyframes cg-seq-zoom-${n}{0%{transform:scale(1)}${pct(leave)}{transform:scale(${ZOOM})}${pct(leave + 0.01)},100%{transform:scale(1)}}`,
+  ].join("");
+}
+
+/** Photos that alternate with a fade and slowly zoom in, no JavaScript
+ *  (creeta's `SequenciaFotos`). Only opacity and transform. Content that moves
+ *  by itself for more than 5s must be pausable (WCAG 2.2.2): the hidden
+ *  checkbox does it through CSS (theme.css). Reduced motion: first photo, still. */
+export function PhotoSequence({ photos, id, seconds = 4, labels, className = "" }: Props) {
+  const t = { ...EN, ...labels };
+  const n = photos.length;
+  const cycle = n * seconds;
+
+  const animation = (i: number): CSSProperties => {
+    const zoom = `cg-seq-zoom-${n} ${cycle}s linear infinite`;
+    if (i === 0) return { animation: zoom };
+    const fade = `${i === n - 1 ? `cg-seq-end-${n}` : `cg-seq-mid-${n}`} ${cycle}s ${CURVE} infinite`;
+    return { animation: `${fade}, ${zoom}`, animationDelay: `${i * seconds}s` };
+  };
+
+  // position and radius are defaults: a className with `absolute` or `rounded-*`
+  // (filling a CareSteps frame) takes their place instead of fighting them
+  const position = /\babsolute\b|\bfixed\b/.test(className) ? "" : "relative";
+  const radius = /\brounded/.test(className) ? "" : "rounded-[28px]";
+  return (
+    <div className={`${position} ${radius} overflow-hidden bg-ink ${className}`}>
+      {n > 1 && <style dangerouslySetInnerHTML={{ __html: sequenceKeyframes(n, seconds) }} />}
+      <input id={id} type="checkbox" className="cg-seq-pause peer sr-only" />
+
+      <div className="cg-seq absolute inset-0">
+        {photos.map((p, i) => (
+          // eslint-disable-next-line @next/next/no-img-element
+          <img
+            key={p.src}
+            src={p.src}
+            srcSet={p.srcSet}
+            sizes={p.sizes}
+            alt={p.alt}
+            loading="lazy"
+            decoding="async"
+            style={n > 1 ? animation(i) : undefined}
+            className="absolute inset-0 h-full w-full object-cover"
+          />
+        ))}
+      </div>
+
+      {n > 1 && (
+        <label
+          htmlFor={id}
+          className="cg-seq-control absolute bottom-3 right-3 flex h-11 w-11 cursor-pointer items-center justify-center rounded-full bg-ink/85 text-surface backdrop-blur-md peer-checked:[&_.cg-on-pause]:block peer-checked:[&_.cg-on-play]:hidden peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-surface"
+        >
+          <Pause aria-hidden="true" size={18} strokeWidth={2} className="cg-on-play" />
+          <Play aria-hidden="true" size={18} strokeWidth={2} className="cg-on-pause ml-0.5 hidden" />
+          <span className="sr-only">{t.pause}</span>
+        </label>
+      )}
+    </div>
+  );
+}

package/components/Pill.tsx

@@ -0,0 +1,42 @@
+import type { ElementType, ReactNode } from "react";
+
+type Props = {
+  href: string;
+  children: ReactNode;
+  /** Lighter supporting info after the label, e.g. "4 videos". */
+  meta?: ReactNode;
+  /** Link component of the app for page links (anchors always use <a>). */
+  linkComponent?: ElementType;
+  className?: string;
+};
+
+/**
+ * Pill that leads somewhere — the Atalho of novo.creeta, the site's only white
+ * pill (information-only pills are labels, not this).
+ *
+ * What says "tap me" is not the color, it is the shape: a full pill, 44px
+ * tall, with an arrow in a circle. The arrow also says where it goes: down
+ * when it is on the same page (an anchor), diagonal when it opens another page.
+ */
+export function Pill({ href, children, meta, linkComponent, className = "" }: Props) {
+  const onPage = href.startsWith("#");
+  const L: ElementType = onPage ? "a" : linkComponent ?? "a";
+  const classes = `group inline-flex min-h-11 items-center gap-2 rounded-full bg-card py-1.5 pl-4 pr-1.5 text-sm font-medium text-ink shadow-[0_1px_2px_rgba(0,0,0,0.12)] transition duration-200 hover:bg-ink hover:text-surface active:scale-[0.98] motion-reduce:active:scale-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink motion-reduce:transition-none ${className}`;
+  return (
+    <L href={href} className={classes}>
+      <span>{children}</span>
+      {meta && <span className="font-normal text-ink/80 group-hover:text-surface/85">{meta}</span>}
+      <span
+        aria-hidden="true"
+        data-arrow={onPage ? "down" : "other-page"}
+        className="ml-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-ink/[0.12] transition-colors duration-200 group-hover:bg-surface/15 motion-reduce:transition-none"
+      >
+        {onPage ? (
+          <svg viewBox="0 0 24 24" width={16} height={16} className="cg-arrow-down" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 5v14M19 12l-7 7-7-7" /></svg>
+        ) : (
+          <svg viewBox="0 0 24 24" width={16} height={16} className="cg-arrow-go" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M7 17 17 7M9 7h8v8" /></svg>
+        )}
+      </span>
+    </L>
+  );
+}