{
  "name": "ScrollCue",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/ScrollCue.tsx",
  "chapterTag": "11 Narrative Systems",
  "chapter": "12-narrative-systems.html",
  "sectionId": "scroll-cue",
  "elName": "Pulsing hairline cue",
  "demoUrl": "https://brand.magicblocks.ai/components/12-narrative-systems#scroll-cue",
  "hasLiveDemo": false,
  "description": "Animated \"scroll for more\" indicator — mono uppercase label above a\nvertical hairline that pulses on a 2.4s loop. Honours\n`prefers-reduced-motion` (line stays static).",
  "useClient": false,
  "interactivity": "display",
  "namedExports": [
    {
      "name": "ScrollCue",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "ScrollCueProps",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { ScrollCue } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "children",
      "optional": true,
      "type": "ReactNode",
      "doc": "Label text (default: `\"Scroll\"`). Rendered mono uppercase."
    }
  ],
  "classesUsed": [
    "hero",
    "scroll-cue",
    "scroll-cue-line"
  ],
  "examples": {
    "react": "<section className=\"hero\" style={{ position: \"relative\" }}>\n  …\n  <ScrollCue style={{ position: \"absolute\", bottom: 24, left: \"50%\", transform: \"translateX(-50%)\" }}>\n    Scroll for the data\n  </ScrollCue>\n</section>",
    "html": null,
    "css": ".hero {\n  position: relative;\n  padding: var(--s-11) var(--s-6);\n  background: var(--warm-3);\n  border-radius: var(--r-xl);\n  overflow: hidden;\n  isolation: isolate;\n  /* pinned warm surface — rescope type tokens to ink so copy stays legible in dark */\n  --fg:      var(--ink);\n  --fg-soft: color-mix(in oklab, var(--ink) 68%, transparent);\n  --fg-dim:  color-mix(in oklab, var(--ink) 48%, transparent);\n  --hair:    rgba(25, 30, 50, 0.09);\n  color: var(--fg);\n}\n\n.scroll-cue {\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 10px;\n  font-family: var(--f-mono);\n  font-size: 11px;\n  letter-spacing: 0.10em;\n  text-transform: uppercase;\n  color: var(--fg-dim);\n}\n\n.scroll-cue-line {\n  width: 1px;\n  height: 38px;\n  background: currentColor;\n  opacity: 0.4;\n  transform-origin: top;\n  animation: scroll-cue-pulse 2.4s ease-in-out infinite;\n}"
  }
}