{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "background-lines",
  "type": "registry:ui",
  "title": "Background Lines",
  "description": "A full-bleed backdrop of twelve long, sweeping SVG curves that draw themselves in and fade out on a loop, each staggered by a fixed delay so the field never pulses in unison.",
  "author": "ofri-peretz <https://github.com/ofri-peretz>",
  "categories": [
    "decorative",
    "effect"
  ],
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "https://ds.interlace.tools/r/theme.json",
    "https://ds.interlace.tools/r/cn.json",
    "https://ds.interlace.tools/r/use-reduced-motion.json"
  ],
  "files": [
    {
      "path": "registry/interlace-ui/aceternity/background-lines.tsx",
      "target": "components/ui/aceternity/background-lines.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport { cn } from \"@/lib/utils\";\n\n// @interlace/background-lines v1.1.0 — Interlace design system.\n// Docs, props and live preview: https://ds.interlace.tools/c/background-lines\n// What changed since: https://ds.interlace.tools/c/background-lines#history\n// Generated banner — keep it, the upgrade diff reads this version.\n\n/**\n * @interlace/ui — BackgroundLines\n *\n * A full-bleed backdrop of twelve long, sweeping SVG curves that draw\n * themselves in and fade out on a loop, each staggered by a fixed delay so the\n * field never pulses in unison.\n *\n * Your children render above it on a `z-10` layer; the container is\n * `h-[20rem] md:h-screen`.\n *\n * Our reimplementation of the Aceternity UI effect of the same name. What is\n * ours: the path count is cut to twelve, the per-path delays are a fixed\n * lookup table rather than `Math.random()` (so server and client agree and the\n * field is reproducible), and both the wrapper and the SVG are `memo`'d behind\n * an `IntersectionObserver` that unmounts the whole layer off-screen.\n *\n * ## Anatomy\n *\n *   BackgroundLines                  (div — bg-white dark:bg-black, isolate,\n *                                     contain: layout style paint)\n *     ├─ div.absolute.inset-0\n *     │   └─ SVG                     (motion.svg, viewBox 0 0 1440 900,\n *     │       └─ motion.path ×12      opacity 0.4, aria-hidden,\n *     │                               pointer-events-none)\n *     └─ div.z-10                    (your children)\n *\n * Each path animates `strokeDashoffset 800 → 0` with the dash pattern\n * tightening from `\"50 800\"` to `\"20 800\"` and opacity running `[0, 1, 1, 0]`,\n * so the stroke reads as a comet drawing along the curve.\n *\n * ## Motion\n *\n * JS-driven — `motion/react` variants on twelve paths, `repeat: Infinity`. The\n * CSS reset in `styles/preflight.css` cannot reach motion's inline styles, so\n * the gate is in JS and it is total: the layer renders only under\n * `{isVisible && !reduceMotion && <SVG …/>}`, so under\n * `prefers-reduced-motion: reduce` no SVG mounts at all and the surface is a\n * plain white (or black) box behind your content.\n *\n * ## What it does not give you\n *\n * - The twelve stroke colours are a hard-coded hex array in this file and are\n *   not props. Neither are the paths. `svgOptions.duration` (default 10s) is\n *   the only knob.\n * - The surface is `bg-white dark:bg-black`, not a background token.\n * - `paths.slice(0, 12)` is a no-op: the array holds exactly twelve entries.\n *   The adjacent \"reduced from 42\" comment describes an edit already made.\n */\n\nimport { useReducedMotion } from \"@/hooks/use-reduced-motion\";\nimport { motion } from \"motion/react\";\nimport React, { useState, useEffect, useRef, useMemo, memo } from \"react\";\n\nexport const BackgroundLines = memo(({\n  children,\n  className,\n  svgOptions,\n}: {\n  children: React.ReactNode;\n  className?: string;\n  svgOptions?: {\n    duration?: number;\n  };\n}) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [isVisible, setIsVisible] = useState(true);\n  const reduceMotion = useReducedMotion();\n\n  // Pause SVG animations when component is not visible\n  useEffect(() => {\n    if (!containerRef.current) return;\n    \n    const observer = new IntersectionObserver(\n      ([entry]) => {\n        setIsVisible(entry.isIntersecting);\n      },\n      { threshold: 0.1 }\n    );\n    \n    observer.observe(containerRef.current);\n    return () => observer.disconnect();\n  }, []);\n\n  return (\n    <div\n      ref={containerRef}\n      className={cn(\n        \"relative h-[20rem] md:h-screen w-full bg-white dark:bg-black overflow-hidden isolate\",\n        className\n      )}\n      // Performance: CSS containment to reduce layout thrashing\n      style={{ contain: 'layout style paint' }}\n    >\n      <div className=\"absolute inset-0 z-0 overflow-hidden\">\n        {isVisible && !reduceMotion && <SVG svgOptions={svgOptions} />}\n      </div>\n      <div className=\"relative z-10 h-full\">\n        {children}\n      </div>\n    </div>\n  );\n});\n\nconst pathVariants = {\n  initial: { strokeDashoffset: 800, strokeDasharray: \"50 800\" },\n  animate: {\n    strokeDashoffset: 0,\n    strokeDasharray: \"20 800\",\n    opacity: [0, 1, 1, 0],\n  },\n};\n\n// Pre-computed stable delays to avoid recalculation on each render\nconst STABLE_DELAYS = [2, 5, 8, 1, 4, 7, 3, 6, 9, 0, 5, 2, 8, 4, 1, 7, 3, 6, 9, 0, 5];\nconst STABLE_REPEAT_DELAYS = [4, 7, 3, 6, 9, 2, 5, 8, 4, 7, 3, 6, 9, 2, 5, 8, 4, 7, 3, 6, 9];\n\nconst SVG = memo(({\n  svgOptions,\n}: {\n  svgOptions?: {\n    duration?: number;\n  };\n}) => {\n  // Memoize paths to prevent recreation on every render\n  const paths = useMemo(() => [\n    \"M720 450C720 450 742.459 440.315 755.249 425.626C768.039 410.937 778.88 418.741 789.478 401.499C800.076 384.258 817.06 389.269 826.741 380.436C836.423 371.603 851.957 364.826 863.182 356.242C874.408 347.657 877.993 342.678 898.867 333.214C919.741 323.75 923.618 319.88 934.875 310.177C946.133 300.474 960.784 300.837 970.584 287.701C980.384 274.564 993.538 273.334 1004.85 263.087C1016.15 252.84 1026.42 250.801 1038.22 242.1C1050.02 233.399 1065.19 230.418 1074.63 215.721C1084.07 201.024 1085.49 209.128 1112.65 194.884C1139.8 180.64 1132.49 178.205 1146.43 170.636C1160.37 163.066 1168.97 158.613 1181.46 147.982C1193.95 137.35 1191.16 131.382 1217.55 125.645C1243.93 119.907 1234.19 118.899 1254.53 100.846C1274.86 82.7922 1275.12 92.8914 1290.37 76.09C1305.62 59.2886 1313.91 62.1868 1323.19 56.7536C1332.48 51.3204 1347.93 42.8082 1361.95 32.1468C1375.96 21.4855 1374.06 25.168 1397.08 10.1863C1420.09 -4.79534 1421.41 -3.16992 1431.52 -15.0078\",\n    \"M720 450C720 450 741.044 435.759 753.062 410.636C765.079 385.514 770.541 386.148 782.73 370.489C794.918 354.83 799.378 353.188 811.338 332.597C823.298 312.005 825.578 306.419 843.707 295.493C861.837 284.568 856.194 273.248 877.376 256.48C898.558 239.713 887.536 227.843 909.648 214.958C931.759 202.073 925.133 188.092 941.063 177.621C956.994 167.151 952.171 154.663 971.197 135.041C990.222 115.418 990.785 109.375 999.488 96.1291C1008.19 82.8827 1011.4 82.2181 1032.65 61.8861C1053.9 41.5541 1045.74 48.0281 1064.01 19.5798C1082.29 -8.86844 1077.21 -3.89415 1093.7 -19.66C1110.18 -35.4258 1105.91 -46.1146 1127.68 -60.2834C1149.46 -74.4523 1144.37 -72.1024 1154.18 -97.6802C1163.99 -123.258 1165.6 -111.332 1186.21 -135.809C1206.81 -160.285 1203.29 -160.861 1220.31 -177.633C1237.33 -194.406 1236.97 -204.408 1250.42 -214.196\",\n    \"M720 450C720 450 712.336 437.768 690.248 407.156C668.161 376.544 672.543 394.253 665.951 365.784C659.358 337.316 647.903 347.461 636.929 323.197C625.956 298.933 626.831 303.639 609.939 281.01C593.048 258.381 598.7 255.282 582.342 242.504C565.985 229.726 566.053 217.66 559.169 197.116C552.284 176.572 549.348 171.846 529.347 156.529C509.345 141.211 522.053 134.054 505.192 115.653C488.33 97.2527 482.671 82.5627 473.599 70.7833C464.527 59.0039 464.784 50.2169 447 32.0721C429.215 13.9272 436.29 0.858563 423.534 -12.6868C410.777 -26.2322 407.424 -44.0808 394.364 -56.4916C381.303 -68.9024 373.709 -72.6804 365.591 -96.1992C357.473 -119.718 358.364 -111.509 338.222 -136.495C318.08 -161.481 322.797 -149.499 315.32 -181.761C307.843 -214.023 294.563 -202.561 285.795 -223.25C277.026 -243.94 275.199 -244.055 258.602 -263.871\",\n    \"M720 450C720 450 738.983 448.651 790.209 446.852C841.436 445.052 816.31 441.421 861.866 437.296C907.422 433.172 886.273 437.037 930.656 436.651C975.04 436.264 951.399 432.343 1001.57 425.74C1051.73 419.138 1020.72 425.208 1072.85 424.127C1124.97 423.047 1114.39 420.097 1140.02 414.426C1165.65 408.754 1173.1 412.143 1214.55 411.063C1256.01 409.983 1242.78 406.182 1285.56 401.536C1328.35 396.889 1304.66 400.796 1354.41 399.573C1404.16 398.35 1381.34 394.315 1428.34 389.376C1475.35 384.438 1445.96 386.509 1497.93 385.313C1549.9 384.117 1534.63 382.499 1567.23 381.48\",\n    \"M720 450C720 450 696.366 458.841 682.407 472.967C668.448 487.093 673.23 487.471 647.919 492.882C622.608 498.293 636.85 499.899 609.016 512.944C581.182 525.989 596.778 528.494 571.937 533.778C547.095 539.062 551.762 548.656 536.862 556.816C521.962 564.975 515.626 563.279 497.589 575.159C479.552 587.04 484.343 590.435 461.111 598.728C437.879 607.021 442.512 605.226 423.603 618.397C404.694 631.569 402.411 629.541 390.805 641.555C379.2 653.568 369.754 658.175 353.238 663.929C336.722 669.683 330.161 674.689 312.831 684.116C295.5 693.543 288.711 698.815 278.229 704.041C267.747 709.267 258.395 712.506 240.378 726.65C222.361 740.795 230.097 738.379 203.447 745.613C176.797 752.847 193.747 752.523 166.401 767.148C139.056 781.774 151.342 783.641 130.156 791.074C108.97 798.507 116.461 802.688 96.0974 808.817C75.7334 814.946 83.8553 819.505 59.4513 830.576C35.0473 841.648 48.2548 847.874 21.8337 853.886C-4.58739 859.898 10.5966 869.102 -16.396 874.524\",\n    \"M720 450C720 450 695.644 482.465 682.699 506.197C669.755 529.929 671.059 521.996 643.673 556.974C616.286 591.951 625.698 590.8 606.938 615.255C588.178 639.71 592.715 642.351 569.76 665.92C546.805 689.49 557.014 687.498 538.136 722.318C519.258 757.137 520.671 760.818 503.256 774.428C485.841 788.038 491.288 790.063 463.484 831.358C435.681 872.653 437.554 867.001 425.147 885.248C412.74 903.495 411.451 911.175 389.505 934.331C367.559 957.486 375.779 966.276 352.213 990.918C328.647 1015.56 341.908 1008.07 316.804 1047.24C291.699 1086.42 301.938 1060.92 276.644 1100.23C251.349 1139.54 259.792 1138.78 243.151 1153.64\",\n    \"M719.974 450C719.974 450 765.293 459.346 789.305 476.402C813.318 493.459 825.526 487.104 865.093 495.586C904.659 504.068 908.361 510.231 943.918 523.51C979.475 536.789 963.13 535.277 1009.79 547.428C1056.45 559.579 1062.34 555.797 1089.82 568.96C1117.31 582.124 1133.96 582.816 1159.12 592.861C1184.28 602.906 1182.84 603.359 1233.48 614.514C1284.12 625.67 1254.63 632.207 1306.33 644.465C1358.04 656.723 1359.27 656.568 1378.67 670.21C1398.07 683.852 1406.16 676.466 1456.34 692.827C1506.51 709.188 1497.73 708.471 1527.54 715.212\",\n    \"M720 450C720 450 727.941 430.821 734.406 379.251C740.87 327.681 742.857 359.402 757.864 309.798C772.871 260.194 761.947 271.093 772.992 244.308C784.036 217.524 777.105 200.533 786.808 175.699C796.511 150.864 797.141 144.333 808.694 107.307C820.247 70.2821 812.404 88.4169 819.202 37.1016C826 -14.2137 829.525 -0.990829 839.341 -30.3874C849.157 -59.784 844.404 -61.5924 855.042 -98.7516C865.68 -135.911 862.018 -144.559 876.924 -167.488C891.83 -190.418 886.075 -213.535 892.87 -237.945C899.664 -262.355 903.01 -255.031 909.701 -305.588C916.393 -356.144 917.232 -330.612 925.531 -374.777\",\n    \"M720 450C720 450 722.468 499.363 726.104 520.449C729.739 541.535 730.644 550.025 738.836 589.07C747.028 628.115 743.766 639.319 746.146 659.812C748.526 680.306 754.006 693.598 757.006 732.469C760.007 771.34 760.322 765.244 763.893 805.195C767.465 845.146 769.92 822.227 773.398 868.469C776.875 914.71 776.207 901.365 778.233 940.19C780.259 979.015 782.53 990.477 787.977 1010.39C793.424 1030.3 791.788 1060.01 797.243 1082.24C802.698 1104.47 801.758 1130.29 808.181 1149.64C814.604 1168.99 813.135 1171.5 818.026 1225.28C822.918 1279.06 820.269 1267.92 822.905 1293.75\",\n    \"M720 450C720 450 737.033 492.46 757.251 515.772C777.468 539.084 768.146 548.687 785.517 570.846C802.887 593.005 814.782 609.698 824.589 634.112C834.395 658.525 838.791 656.702 855.55 695.611C872.31 734.519 875.197 724.854 890.204 764.253C905.21 803.653 899.844 790.872 919.927 820.763C940.01 850.654 939.071 862.583 954.382 886.946C969.693 911.309 968.683 909.254 993.997 945.221C1019.31 981.187 1006.67 964.436 1023.49 1007.61C1040.32 1050.79 1046.15 1038.25 1059.01 1073.05C1071.88 1107.86 1081.39 1096.19 1089.45 1131.96C1097.51 1167.73 1106.52 1162.12 1125.77 1196.89\",\n    \"M720 450C720 450 687.302 455.326 670.489 467.898C653.676 480.47 653.159 476.959 626.58 485.127C600.002 493.295 599.626 495.362 577.94 503.841C556.254 512.319 556.35 507.426 533.958 517.44C511.566 527.454 505.82 526.441 486.464 539.172C467.108 551.904 461.312 546.36 439.357 553.508C417.402 560.657 406.993 567.736 389.393 572.603C371.794 577.47 371.139 583.76 344.54 587.931C317.941 592.102 327.375 593.682 299.411 607.275C271.447 620.868 283.617 615.022 249.868 622.622C216.119 630.223 227.07 630.86 203.77 638.635C180.47 646.41 168.948 652.487 156.407 657.28C143.866 662.073 132.426 669.534 110.894 675.555C89.3615 681.575 90.3234 680.232 61.1669 689.897C32.0105 699.562 34.3696 702.021 15.9011 709.789C-2.56738 717.558 2.38861 719.841 -29.9494 729.462C-62.2873 739.083 -52.5552 738.225 -77.4307 744.286\",\n    \"M720 450C720 450 743.97 465.061 754.884 490.648C765.798 516.235 781.032 501.34 791.376 525.115C801.72 548.889 808.417 538.333 829.306 564.807C850.195 591.281 852.336 582.531 865.086 601.843C877.835 621.155 874.512 621.773 902.383 643.857C930.255 665.94 921.885 655.976 938.025 681.74C954.164 707.505 959.384 709.719 977.273 720.525C995.162 731.33 994.233 731.096 1015.92 757.676C1037.61 784.257 1025.74 768.848 1047.82 795.343C1069.91 821.837 1065.95 815.45 1085.93 834.73C1105.91 854.009 1110.53 848.089 1124.97 869.759C1139.4 891.428 1140.57 881.585 1158.53 911.499C1176.5 941.414 1184.96 933.829 1194.53 948.792C1204.09 963.755 1221.35 973.711 1232.08 986.224C1242.8 998.738 1257.34 1015.61 1269.99 1026.53C1282.63 1037.45 1293.81 1040.91 1307.21 1064.56\",\n  ], []);\n\n  const colors = useMemo(() => [\n    \"#46A5CA\", \"#8C2F2F\", \"#4FAE4D\", \"#D6590C\", \"#811010\", \"#247AFB\",\n    \"#A534A0\", \"#A8A438\", \"#D6590C\", \"#46A29C\", \"#670F6D\", \"#D7C200\",\n  ], []);\n\n  const duration = svgOptions?.duration || 10;\n\n  return (\n    <motion.svg\n      // Purely decorative — twelve unlabelled curves carrying no information.\n      // `pointer-events-none` keeps it out of the pointer's way; this keeps it\n      // out of the a11y tree, matching every other `aceternity/` backdrop.\n      aria-hidden=\"true\"\n      viewBox=\"0 0 1440 900\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      initial={{ opacity: 0 }}\n      animate={{ opacity: 1 }}\n      transition={{ duration: 1 }}\n      className=\"absolute inset-0 w-full h-full pointer-events-none\"\n      style={{ clipPath: 'inset(0)', opacity: 0.4, willChange: 'opacity' }}\n    >\n      {/* Reduced from 42 paths to 12 - sufficient for visual effect with 70% less DOM nodes */}\n      {paths.slice(0, 12).map((path, idx) => (\n        <motion.path\n          d={path}\n          stroke={colors[idx]}\n          strokeWidth=\"2.3\"\n          strokeLinecap=\"round\"\n          variants={pathVariants}\n          initial=\"initial\"\n          animate=\"animate\"\n          transition={{\n            duration: duration,\n            ease: \"linear\",\n            repeat: Infinity,\n            repeatType: \"loop\",\n            delay: STABLE_DELAYS[idx],\n            repeatDelay: STABLE_REPEAT_DELAYS[idx],\n          }}\n          key={`path-${idx}`}\n        />\n      ))}\n    </motion.svg>\n  );\n});\n\nBackgroundLines.displayName = \"BackgroundLines\";\nSVG.displayName = \"SVG\";\n"
    }
  ],
  "meta": {
    "tier": "effect",
    "client": true,
    "minViewport": null,
    "loading": false,
    "version": "1.1.0",
    "since": "1.0.0"
  },
  "docs": "## @interlace/background-lines\n\nInstalled to `components/ui/aceternity/background-lines.tsx`.\n\n```tsx\nimport { /* … */ } from '@/components/ui/aceternity/background-lines';\n```\n\nProps, a11y contract, live preview and source: https://ds.interlace.tools/c/background-lines\n\nRequires the `@interlace/theme` CSS baseline (installed automatically as a registry dependency)."
}