@kolkrabbi/kol-component 0.2.0 → 0.3.0

package/src/organisms/BentoCard.jsx

@@ -0,0 +1,187 @@
+import { useEffect, useState } from 'react'
+import { motion } from 'framer-motion'
+import HlsVideo from '../atoms/HlsVideo.jsx'
+import AssetPlaceholder from '../atoms/AssetPlaceholder.jsx'
+import Button from '../atoms/Button.jsx'
+import Image from '../molecules/Image.jsx'
+import useTilt from '../hooks/useTilt.js'
+import usePrefersReducedMotion from '../hooks/usePrefersReducedMotion.js'
+
+/* taxonomy-ok: nests the same-file Media helper plus DS atoms/molecules
+ * (HlsVideo, AssetPlaceholder, Button, Image) it composes — an organism. */
+
+/**
+ * True on coarse-pointer (touch/no-hover) devices. Local to BentoCard, mirrors
+ * TiltCard's copy; re-evaluates on device/orientation change via the
+ * media-query change event (the monorepo source froze `useIsTouchDevice` in a
+ * module-load const — fixed on recreate).
+ */
+function useCoarsePointer() {
+  const [coarse, setCoarse] = useState(
+    () => typeof window !== 'undefined' && window.matchMedia('(pointer: coarse)').matches,
+  )
+
+  useEffect(() => {
+    const mq = window.matchMedia('(pointer: coarse)')
+    const onChange = () => setCoarse(mq.matches)
+    mq.addEventListener('change', onChange)
+    return () => mq.removeEventListener('change', onChange)
+  }, [])
+
+  return coarse
+}
+
+/**
+ * Media — internal, NOT exported. Sniffs `src` by extension and renders the
+ * right full-bleed media element: `.m3u8` → HlsVideo, `.mov|.mp4|.webm` →
+ * autoplay <video>, any other src → the Image molecule (its own broken-asset
+ * fallback), and no src → AssetPlaceholder. Positioning/fit arrive via
+ * `className`; Image gets an inline height so its base `h-auto` can't beat the
+ * `size-full` cover fill.
+ */
+function Media({ src, poster, className }) {
+  if (!src) return <AssetPlaceholder className={className} />
+  if (/\.m3u8$/i.test(src)) return <HlsVideo src={src} poster={poster} className={className} />
+  if (/\.(mov|mp4|webm)$/i.test(src)) {
+    return (
+      <video
+        src={src}
+        poster={poster}
+        autoPlay
+        muted
+        loop
+        playsInline
+        preload="auto"
+        className={className}
+      />
+    )
+  }
+  return <Image src={src} alt="" className={className} style={{ width: '100%', height: '100%' }} />
+}
+
+/**
+ * BentoCard — media hover-card for grid/bento walls. Full-bleed auto-detected
+ * media (HLS / video / image / placeholder) sits behind a content stack; on a
+ * fine pointer, hover reveals a darkening scrim plus subtitle / description /
+ * CTA over an always-visible title. No-hover (coarse-pointer) devices show
+ * everything statically and drop the media's pointer capture.
+ *
+ * Motion is gated: the pointer-following 3D tilt (shared `useTilt` framer
+ * springs — the monorepo's forked CSS `useBentoTilt` is gone) renders only on
+ * a fine pointer with motion allowed; reduced-motion, coarse pointer, or
+ * `enableTilt={false}` all fall back to a static card, and reduced-motion also
+ * drops the reveal's opacity transition.
+ *
+ * Zero CMS coupling — flat props. The CTA is a DS Button link (`<a href>`, no
+ * router import): `http*`/`mailto` open a new tab; any other href is a
+ * same-tab anchor whose `onNavigate(event)` seam lets an SPA intercept
+ * (preventDefault + its router) — wired capture-phase so it fires before the
+ * default navigation. Title/subtitle/description render exactly as authored;
+ * no casing transforms (author strings in their final case at the call site).
+ *
+ * @param {string}    src            media source; type auto-detected by extension
+ * @param {string}    poster         poster frame for HLS/video
+ * @param {ReactNode} title          always-visible heading
+ * @param {ReactNode} subtitle       hover-revealed line
+ * @param {ReactNode} description    hover-revealed paragraph
+ * @param {string}    href           CTA target; `http*`/`mailto` → new-tab anchor, else same-tab (onNavigate seam)
+ * @param {Function}  onNavigate     (event) => void — same-tab CTA click seam (SPA intercept)
+ * @param {ReactNode} buttonLabel    CTA label (no default — author it)
+ * @param {ReactNode} bodyContent    extra content injected into the stack
+ * @param {number}    overlayOpacity scrim darkness % over the media, 0 disables (default 60)
+ * @param {boolean}   alignRight     right-align the card (ms-auto) vs fill (size-full)
+ * @param {boolean}   enableTilt     master tilt switch (default true)
+ * @param {string}    titleClassName title classes
+ * @param {string}    contentClassName inner content-box classes
+ * @param {string}    imageClassName media fit/position classes
+ * @param {string}    contentStackClassName stack layout classes
+ * @param {string}    className      extra classes on the root
+ */
+export default function BentoCard({
+  src,
+  poster,
+  title,
+  subtitle,
+  description,
+  href,
+  onNavigate,
+  buttonLabel,
+  bodyContent = null,
+  overlayOpacity = 60,
+  alignRight = false,
+  enableTilt = true,
+  titleClassName = 'kol-sans-heading-01 text-absolute-white',
+  contentClassName = 'max-w-[384px]',
+  imageClassName = 'object-cover object-center',
+  contentStackClassName = 'relative z-20 h-full flex flex-col justify-start items-start gap-4 p-6 md:p-8',
+  className = '',
+  ...rest
+}) {
+  const reduced = usePrefersReducedMotion()
+  const coarse = useCoarsePointer()
+  const tilt = useTilt()
+
+  const tiltOff = !enableTilt || reduced || coarse
+  const Component = tiltOff ? 'div' : motion.div
+  const rootStyle = {
+    ...(tiltOff ? {} : tilt.style),
+    backfaceVisibility: 'hidden',
+    WebkitBackfaceVisibility: 'hidden',
+  }
+  const tiltHandlers = tiltOff
+    ? {}
+    : { ref: tilt.ref, onMouseMove: tilt.onMouseMove, onMouseLeave: tilt.onMouseLeave }
+
+  // Reveal choreography. Coarse (no-hover) devices show everything statically;
+  // fine pointers reveal on group-hover. The opacity transition is motion, so
+  // reduced-motion drops it (content still reveals, just without the fade).
+  const fade = reduced ? '' : 'transition-opacity duration-300'
+  const revealClass = `${coarse ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'} ${fade}`.trim()
+
+  const mediaClass =
+    `absolute left-0 top-0 size-full rounded overflow-hidden ${imageClassName} ${coarse ? 'pointer-events-none' : ''}`.trim()
+
+  const isExternal = href && (href.startsWith('http') || href.startsWith('mailto'))
+
+  return (
+    <Component
+      className={`relative group ${alignRight ? 'ms-auto' : 'size-full'} ${className}`.trim()}
+      {...tiltHandlers}
+      {...rest}
+      style={{ ...rootStyle, ...rest.style }}
+    >
+      <Media src={src} poster={poster} className={mediaClass} />
+
+      <div className="relative z-10 flex size-full h-full flex-col justify-start items-start text-auto">
+        <div className={`relative z-10 ${contentClassName} w-full h-full self-stretch`}>
+          {overlayOpacity > 0 && (
+            <div
+              className={`absolute -inset-1 rounded ${coarse ? 'opacity-60' : 'opacity-0 group-hover:opacity-100'} ${fade} pointer-events-none`.trim()}
+              style={{ backgroundColor: `rgba(0, 0, 0, ${overlayOpacity / 100})` }}
+            />
+          )}
+          <div className={contentStackClassName}>
+            {title && <h3 className={titleClassName}>{title}</h3>}
+            {subtitle && <p className={`kol-mono-text text-absolute-white ${revealClass}`}>{subtitle}</p>}
+            {description && <p className={`kol-mono-12 text-absolute-white pb-6 ${revealClass}`}>{description}</p>}
+            {bodyContent}
+            {href && (
+              <div className={revealClass}>
+                <Button
+                  href={href}
+                  variant="primary"
+                  size="sm"
+                  {...(isExternal
+                    ? { target: '_blank', rel: 'noreferrer noopener' }
+                    : { onClickCapture: onNavigate })}
+                >
+                  {buttonLabel}
+                </Button>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </Component>
+  )
+}

package/src/organisms/Canvas.jsx

@@ -0,0 +1,299 @@
+import { useEffect, useRef, useState } from 'react'
+
+/**
+ * Canvas — the editor's aspect-ratio stage.
+ *
+ * A letterboxed frame (dashed guide border + mono ratio label) that hosts its
+ * children in a **fixed 1080-virtual-pixel coordinate space** and scales the
+ * whole layer to fit the viewport via a single CSS `transform`. Because
+ * children always render at 1080px-wide logical coords, a `168px` element is
+ * always `168/1080` of the frame regardless of zoom or viewport size — the
+ * scale seam is the only place real pixels enter. This 1080-virtual contract
+ * is the whole point: anything placed inside (SelectionOverlay, boxes, guides)
+ * shares it, so a consumer's drag math converts screen deltas to virtual by
+ * dividing by the live scale (frameWidth / 1080).
+ *
+ * Three parts ship from this file: `CanvasFrame` (the bare scale layer),
+ * `Canvas` (the letterbox, default export), and `PanViewport` (Space+drag pan).
+ * Export all three so a consumer can place a bare frame or compose their own
+ * viewport.
+ *
+ * Ported from the brand editor with three app-couplings dropped (per lobby
+ * spec): the static `ASPECTS` table → an `aspects` prop (+ DEFAULT_ASPECTS);
+ * the `#0E0E11` dark bg default → `transparent` (let the theme own the stage);
+ * and the hardwired `kol-grid-bg` grid → a `backdrop` slot the consumer fills.
+ */
+
+/* Fixed virtual canvas width — children render in this pixel space and the
+ * outer rect scales to fit the viewport via CSS transform. Height is derived
+ * from the active aspect ratio. Load-bearing: the coordinate contract. */
+export const CANVAS_VIRTUAL_W = 1080
+
+/* Sensible DS default ratio table; a consumer passes its own `aspects` to
+ * override. Each entry is { id, label, ratio }. */
+export const DEFAULT_ASPECTS = [
+  { id: '1:1',  label: '1:1',  ratio: 1 },
+  { id: '4:5',  label: '4:5',  ratio: 4 / 5 },
+  { id: '9:16', label: '9:16', ratio: 9 / 16 },
+  { id: '5:4',  label: '5:4',  ratio: 5 / 4 },
+  { id: '16:9', label: '16:9', ratio: 16 / 9 },
+]
+
+export const CANVAS_DEFAULTS = {
+  guideColor: '#F5F3EF',
+}
+
+function resolveAspect(aspect, customRatio, aspects) {
+  const table = aspects?.length ? aspects : DEFAULT_ASPECTS
+  const found = table.find((x) => x.id === aspect) ?? table[0]
+  const ratio = aspect === 'custom' && customRatio ? customRatio : found.ratio
+  const label = aspect === 'custom' && customRatio
+    ? `Custom · ${Number(customRatio).toFixed(2)}`
+    : found.label
+  return { ratio, label }
+}
+
+/**
+ * Bare aspect frame — dashed guide border + label + virtual-pixel scale layer.
+ * No outer letterbox. Sizes to its parent (`width: 100%; aspect-ratio: ratio`)
+ * so the parent decides the frame's width/height.
+ *
+ * @param {string}   aspect      aspect id, selects ratio+label from the table
+ * @param {number}   customRatio numeric ratio + `Custom · N.NN` label when aspect==='custom'
+ * @param {Array}    aspects     [{ id, label, ratio }] ratio table (default DEFAULT_ASPECTS)
+ * @param {string}   bgColor     frame background fill (default transparent)
+ * @param {string}   guideColor  dashed border (@24%) + label (@70%) color
+ * @param {ReactNode} children   rendered in the 1080-virtual scale layer
+ */
+export function CanvasFrame({
+  aspect,
+  customRatio,
+  aspects,
+  bgColor,
+  guideColor = CANVAS_DEFAULTS.guideColor,
+  children,
+}) {
+  const { ratio, label } = resolveAspect(aspect, customRatio, aspects)
+  const virtualH = CANVAS_VIRTUAL_W / ratio
+
+  const rectRef = useRef(null)
+  const [scale, setScale] = useState(0)
+
+  useEffect(() => {
+    const node = rectRef.current
+    if (!node) return
+    const compute = () => {
+      const w = node.getBoundingClientRect().width
+      if (w > 0) setScale(w / CANVAS_VIRTUAL_W)
+    }
+    compute()
+    const ro = new ResizeObserver(compute)
+    ro.observe(node)
+    return () => ro.disconnect()
+  }, [ratio])
+
+  return (
+    <div
+      ref={rectRef}
+      className="relative w-full"
+      style={{
+        aspectRatio: ratio,
+        background:  bgColor ?? 'transparent',
+      }}
+    >
+      <div
+        className="absolute inset-0 pointer-events-none z-[2]"
+        style={{
+          border:      '1px solid',
+          borderColor: `color-mix(in srgb, ${guideColor} 24%, transparent)`,
+        }}
+      />
+      <span
+        className="z-[2]"
+        style={{
+          position:      'absolute',
+          top:           6,
+          left:          8,
+          fontSize:      10,
+          fontFamily:    'var(--kol-font-family-mono)',
+          letterSpacing: '0.1em',
+          color:         `color-mix(in srgb, ${guideColor} 70%, transparent)`,
+          pointerEvents: 'none',
+        }}
+      >
+        {label}
+      </span>
+      {scale > 0 && (
+        <div
+          className="absolute top-0 left-0 z-[1]"
+          style={{
+            width:           `${CANVAS_VIRTUAL_W}px`,
+            height:          `${virtualH}px`,
+            transformOrigin: 'top left',
+            transform:       `scale(${scale})`,
+          }}
+        >
+          {children}
+        </div>
+      )}
+    </div>
+  )
+}
+
+/**
+ * Canvas — letterboxed stage (default export).
+ *
+ * The OUTER wrapper letterboxes the inner `<CanvasFrame>` (rect carries the
+ * optional `bgColor`, dashed border, label, and virtual-pixel scale layer).
+ *
+ * `panEnabled` opts into Space-key + drag panning. When held, the cursor
+ * flips to grab/grabbing and the frame translates with the cursor; pointer
+ * events on the frame are suppressed while Space is held so layer handlers
+ * don't fire mid-pan. Decorative chrome (grid bg / dark bg / inset borders)
+ * is the consumer's responsibility — pass a `backdrop` node to fill the pan
+ * viewport behind the frame.
+ *
+ * @param {string}    aspect      aspect id (see aspects table)
+ * @param {number}    customRatio numeric ratio when aspect==='custom'
+ * @param {Array}     aspects     [{ id, label, ratio }] ratio table
+ * @param {string}    bgColor     frame background fill
+ * @param {string}    guideColor  guide border + label color
+ * @param {'center'|'start'} align vertical placement in the letterbox
+ * @param {boolean}   panEnabled  wrap in a Space+drag PanViewport
+ * @param {ReactNode} backdrop    node placed behind the frame in the pan viewport (e.g. a grid)
+ * @param {ReactNode} children    rendered in the 1080-virtual scale layer
+ */
+export default function Canvas({
+  aspect,
+  customRatio,
+  aspects,
+  bgColor,
+  guideColor = CANVAS_DEFAULTS.guideColor,
+  align = 'center',
+  panEnabled = false,
+  backdrop,
+  children,
+}) {
+  const { ratio } = resolveAspect(aspect, customRatio, aspects)
+
+  const letterbox = (
+    <div
+      className={`flex ${align === 'start' ? 'items-start' : 'items-center'} justify-center w-full h-full`}
+      style={{ containerType: 'size' }}
+    >
+      <div
+        style={{
+          width: `min(calc(100cqw - 48px), calc((100cqh - 48px) * ${ratio}))`,
+        }}
+      >
+        <CanvasFrame
+          aspect={aspect}
+          customRatio={customRatio}
+          aspects={aspects}
+          bgColor={bgColor}
+          guideColor={guideColor}
+        >
+          {children}
+        </CanvasFrame>
+      </div>
+    </div>
+  )
+
+  if (!panEnabled) return letterbox
+  return <PanViewport backdrop={backdrop}>{letterbox}</PanViewport>
+}
+
+/**
+ * PanViewport — Space + drag pan wrapper.
+ *
+ * Hold Space → cursor `grab`. Mousedown while held → drag-pan, cursor
+ * `grabbing`. The pan transform applies to the child div that holds the frame;
+ * the viewport itself stays fixed. Pointer events on the transform layer
+ * disable while Space is held so layer-level mousedowns don't fire mid-pan.
+ * At rest the cursor is left unset so a consumer's tool cursor shows through.
+ *
+ * @param {ReactNode} backdrop  placed behind the frame (grid / dark bg); the
+ *                              consumer owns its sizing (oversize it so panning
+ *                              never reveals an edge)
+ * @param {ReactNode} children  the letterboxed frame
+ */
+export function PanViewport({ backdrop, children }) {
+  const [spaceHeld, setSpaceHeld] = useState(false)
+  const [pan, setPan]             = useState({ x: 0, y: 0 })
+  const [dragging, setDragging]   = useState(false)
+  const dragStart                 = useRef(null)
+
+  useEffect(() => {
+    const isInputTarget = (el) =>
+      el && (el.tagName === 'INPUT' || el.tagName === 'TEXTAREA' || el.isContentEditable)
+    const onKeyDown = (e) => {
+      if (e.code === 'Space' && !isInputTarget(e.target)) {
+        e.preventDefault()
+        setSpaceHeld(true)
+      }
+    }
+    const onKeyUp = (e) => {
+      if (e.code === 'Space') {
+        setSpaceHeld(false)
+        setDragging(false)
+        dragStart.current = null
+      }
+    }
+    window.addEventListener('keydown', onKeyDown)
+    window.addEventListener('keyup', onKeyUp)
+    return () => {
+      window.removeEventListener('keydown', onKeyDown)
+      window.removeEventListener('keyup', onKeyUp)
+    }
+  }, [])
+
+  useEffect(() => {
+    if (!dragging) return
+    const onMove = (e) => {
+      if (!dragStart.current) return
+      setPan({
+        x: e.clientX - dragStart.current.x,
+        y: e.clientY - dragStart.current.y,
+      })
+    }
+    const onUp = () => {
+      setDragging(false)
+      dragStart.current = null
+    }
+    window.addEventListener('mousemove', onMove)
+    window.addEventListener('mouseup', onUp)
+    return () => {
+      window.removeEventListener('mousemove', onMove)
+      window.removeEventListener('mouseup', onUp)
+    }
+  }, [dragging])
+
+  const onMouseDown = (e) => {
+    if (!spaceHeld) return
+    e.preventDefault()
+    dragStart.current = { x: e.clientX - pan.x, y: e.clientY - pan.y }
+    setDragging(true)
+  }
+
+  const cursor = dragging ? 'grabbing' : spaceHeld ? 'grab' : undefined
+
+  return (
+    <div
+      className="relative w-full h-full overflow-hidden select-none"
+      style={cursor ? { cursor } : undefined}
+      onMouseDown={onMouseDown}
+    >
+      <div
+        className="absolute inset-0"
+        style={{
+          transform:     `translate(${pan.x}px, ${pan.y}px)`,
+          transition:    dragging ? 'none' : 'transform 120ms ease-out',
+          pointerEvents: spaceHeld ? 'none' : 'auto',
+        }}
+      >
+        {backdrop}
+        <div className="relative w-full h-full">{children}</div>
+      </div>
+    </div>
+  )
+}

package/src/organisms/ColorLoader.jsx

@@ -0,0 +1,155 @@
+import { motion as Motion, useAnimationControls } from 'framer-motion'
+import { useEffect, useRef, useState } from 'react'
+import TextPressure from '../atoms/TextPressure.jsx'
+import usePrefersReducedMotion from '../hooks/usePrefersReducedMotion.js'
+
+/**
+ * ColorLoader — a full-height branded intro/loading curtain. Fills its parent
+ * on a solid backdrop, times in a variable-font wordmark (a live TextPressure
+ * effect) after `wordmarkDelay`, then reveals a bouncing down-chevron cue after
+ * `scrollDelay`. With `dismissOnClick`, clicking the curtain slides the whole
+ * thing up out of view and fires `onComplete`; otherwise the parent owns
+ * dismissal (unmount when its work is done). Generalized from the app's
+ * KOLKRABBI loader: the cursor trail, `cursor: none`, and window-scroll/keyboard
+ * gesture hijack are all dropped — exit is a plain click or parent-driven.
+ *
+ * Reduced motion → no timers, no tweens: one static frame (wordmark + cue shown
+ * at rest) and `onComplete` fires immediately on mount, so the curtain never
+ * makes a reduced-motion user wait.
+ *
+ * The wordmark needs a variable font — see TextPressure's font contract. Pass
+ * `fontFamily` / `fontUrl` to point at the KOL variable font (a consumer asset).
+ *
+ * @param {string}    text           wordmark string fed to TextPressure
+ * @param {string}    fontFamily     wordmark font family (→ TextPressure)
+ * @param {string}    [fontUrl]      variable-font URL → TextPressure @font-face
+ * @param {() => void} onComplete    fired after the exit slide-up (or at once, reduced)
+ * @param {boolean}   dismissOnClick click the curtain to slide up + complete
+ * @param {string}    bgColor        backdrop color (KOL token / CSS color)
+ * @param {string}    markColor      wordmark + chevron color (KOL token / CSS color)
+ * @param {number}    wordmarkDelay  ms before the wordmark fades in
+ * @param {number}    scrollDelay    ms before the chevron cue reveals
+ * @param {number}    exitDuration   seconds for the slide-up exit tween
+ */
+export default function ColorLoader({
+  text = 'KOLKRABBI',
+  fontFamily = 'var(--kol-font-family-sans)',
+  fontUrl,
+  onComplete,
+  dismissOnClick = false,
+  bgColor = 'var(--kol-surface-primary)',
+  markColor = 'var(--kol-fg-emphasis)',
+  wordmarkDelay = 1000,
+  scrollDelay = 2000,
+  exitDuration = 1.8,
+}) {
+  const reducedMotion = usePrefersReducedMotion()
+  const [showMark, setShowMark] = useState(reducedMotion)
+  const [showCue, setShowCue] = useState(reducedMotion)
+  const [exiting, setExiting] = useState(false)
+  const controls = useAnimationControls()
+  const firedRef = useRef(false)
+
+  const fireComplete = () => {
+    if (firedRef.current) return
+    firedRef.current = true
+    onComplete?.()
+  }
+
+  useEffect(() => {
+    if (reducedMotion) {
+      // Skip the whole sequence: static frame, signal done at once.
+      setShowMark(true)
+      setShowCue(true)
+      fireComplete()
+      return undefined
+    }
+    const markTimer = setTimeout(() => setShowMark(true), wordmarkDelay)
+    const cueTimer = setTimeout(() => setShowCue(true), scrollDelay)
+    return () => {
+      clearTimeout(markTimer)
+      clearTimeout(cueTimer)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [reducedMotion, wordmarkDelay, scrollDelay])
+
+  const dismiss = () => {
+    if (exiting) return
+    setExiting(true)
+    if (reducedMotion) {
+      fireComplete()
+      return
+    }
+    controls
+      .start({ y: '-100%', transition: { duration: exitDuration, ease: 'easeInOut' } })
+      .then(fireComplete)
+  }
+
+  return (
+    <Motion.div
+      className={`flex h-full w-full flex-col ${dismissOnClick ? 'cursor-pointer' : ''}`}
+      style={{ backgroundColor: bgColor }}
+      animate={controls}
+      initial={{ y: 0 }}
+      onClick={dismissOnClick ? dismiss : undefined}
+    >
+      {/* Top third — spacer */}
+      <div className="flex flex-1 items-end justify-center self-stretch" />
+
+      {/* Middle third — wordmark + cue */}
+      <div className="flex flex-1 flex-col items-center justify-center gap-12 self-stretch">
+        <Motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: showMark ? 1 : 0 }}
+          transition={{ duration: reducedMotion ? 0 : 0.5 }}
+          className="w-full px-6"
+        >
+          <div className="mx-auto h-20 w-full max-w-[280px] sm:h-24 sm:max-w-[400px] md:h-32 md:max-w-[600px]">
+            <TextPressure
+              text={text}
+              fontFamily={fontFamily}
+              fontUrl={fontUrl}
+              textColor={markColor}
+              flex
+              width
+              weight
+              italic={false}
+              minFontSize={40}
+            />
+          </div>
+        </Motion.div>
+
+        <Motion.div
+          initial={{ opacity: 0, y: 0 }}
+          animate={{
+            opacity: showCue ? 0.6 : 0,
+            y: showCue && !reducedMotion ? [0, 12, 0] : 0,
+          }}
+          transition={{
+            opacity: { duration: reducedMotion ? 0 : 0.5 },
+            y: reducedMotion ? { duration: 0 } : { duration: 1.5, repeat: Infinity, ease: 'easeInOut' },
+          }}
+          className="mt-12"
+          style={{ color: markColor }}
+        >
+          <svg
+            width="32"
+            height="32"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            aria-hidden="true"
+          >
+            <polyline points="6 9 12 15 18 9" />
+          </svg>
+        </Motion.div>
+      </div>
+
+      {/* Bottom third — spacer */}
+      <div className="flex flex-1 items-end justify-center self-stretch" />
+    </Motion.div>
+  )
+}