[
  {
    "id": "codrops-854593f9b6b2-article-0",
    "source": "design-engineering/component-contract.md",
    "anchor": "drag-operations-need-two-alternatives",
    "sourceSha256": "79e496160e28ab26397d2c5b68075fd14c732d13002ff6c6e41c031d86cac039",
    "title": "04 / SDF bevels & recycled cards · panBy",
    "principle": "Visible native pan buttons and a native range input reach the same pan value as the field drag, without requiring a held gesture.",
    "application": "A rounded-rectangle signed distance drives a bevel height field and finite-difference normals in a native WebGL shader. Three refracted samples of an original procedural texture create dispersion. A bounded pool reprojects over a spherical field, and selectable HTML labels use the same projected card data. GPU cloth and the publisher’s full camera-matrix implementation are outside this study. This binding describes the authored study and does not verify the original project.",
    "code": [
      {
        "file": "vendor/codrops-article-studies/records/codrops-854593f9b6b2/script.js",
        "symbol": "panBy",
        "explanation": "The named local function implements this mechanism in the downloadable standalone page; its source hash is listed in codeFiles."
      }
    ],
    "checks": [
      {
        "id": "codrops-854593f9b6b2-panBy",
        "action": "Move the field using drag, then Pan left/right, then the focused range input.",
        "expected": "Every path updates one pan value; selectable labels remain tied to their card projection."
      }
    ],
    "runtime_verified": false
  },
  {
    "id": "codrops-854593f9b6b2-article-1",
    "source": "motion/rendering-and-performance.md",
    "anchor": "a-diagnostic-sequence",
    "sourceSha256": "1523fdeaa290fa064c4db17d36040de3f35ad39bb18a37517ceb5995f97d1dfd",
    "title": "04 / SDF bevels & recycled cards · projectGlassPool",
    "principle": "The bounded card pool and shader inputs make bevel, refraction and projection independently inspectable without a performance claim.",
    "application": "A rounded-rectangle signed distance drives a bevel height field and finite-difference normals in a native WebGL shader. Three refracted samples of an original procedural texture create dispersion. A bounded pool reprojects over a spherical field, and selectable HTML labels use the same projected card data. GPU cloth and the publisher’s full camera-matrix implementation are outside this study. This binding describes the authored study and does not verify the original project.",
    "code": [
      {
        "file": "vendor/codrops-article-studies/records/codrops-854593f9b6b2/script.js",
        "symbol": "projectGlassPool",
        "explanation": "The named local function implements this mechanism in the downloadable standalone page; its source hash is listed in codeFiles."
      }
    ],
    "checks": [
      {
        "id": "codrops-854593f9b6b2-projectGlassPool",
        "action": "Set dispersion to 0, increase it, then set curvature to 0.",
        "expected": "Color fringe changes independently of the field’s curvature; twelve labels remain attached to twelve local card projections."
      }
    ],
    "runtime_verified": false
  },
  {
    "id": "codrops-854593f9b6b2-article-2",
    "source": "motion/accessible-motion.md",
    "anchor": "preference-changes-during-work",
    "sourceSha256": "db0ad692d5bb3103a3cbe13ec08dbe5cf12552aed7ecf2c93b1d7cc0b8a34b8b",
    "title": "04 / SDF bevels & recycled cards · applyMotionPreference",
    "principle": "One effective preference owns CSS and script playback. The initial view is stationary, and manual controls retain the study values.",
    "application": "A rounded-rectangle signed distance drives a bevel height field and finite-difference normals in a native WebGL shader. Three refracted samples of an original procedural texture create dispersion. A bounded pool reprojects over a spherical field, and selectable HTML labels use the same projected card data. GPU cloth and the publisher’s full camera-matrix implementation are outside this study. This binding describes the authored study and does not verify the original project.",
    "code": [
      {
        "file": "vendor/codrops-article-studies/records/codrops-854593f9b6b2/script.js",
        "symbol": "applyMotionPreference",
        "explanation": "The named local function implements this mechanism in the downloadable standalone page; its source hash is listed in codeFiles."
      }
    ],
    "checks": [
      {
        "id": "codrops-854593f9b6b2-applyMotionPreference",
        "action": "Enable Static view during playback, then adjust the visible native controls.",
        "expected": "Playback stops, its button is disabled while the preference applies, and the current values remain inspectable without continuous motion."
      }
    ],
    "runtime_verified": false
  }
]