{"id":12056,"date":"2026-03-30T10:05:24","date_gmt":"2026-03-30T07:05:24","guid":{"rendered":"https:\/\/cinemagicmaker.ai\/?page_id=12056"},"modified":"2026-03-30T14:14:56","modified_gmt":"2026-03-30T11:14:56","slug":"circle","status":"publish","type":"page","link":"https:\/\/cinemagicmaker.ai\/ar\/circle\/","title":{"rendered":"circle"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"12056\" class=\"elementor elementor-12056\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5d6a116 e-flex e-con-boxed e-con e-parent\" data-id=\"5d6a116\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2a9458c elementor-widget elementor-widget-html\" data-id=\"2a9458c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n  :root{\r\n    --bg:#f4f4f2;\r\n    --text:#111;\r\n    --muted:#6b6b6b;\r\n    --line:rgba(0,0,0,.12);\r\n    --ease:cubic-bezier(.22,.80,.18,1);\r\n    --card-radius:28px;\r\n  }\r\n\r\n  *{ box-sizing:border-box; }\r\n\r\n  .scene{\r\n    position:relative;\r\n    width:100%;\r\n    height:100vh;\r\n    overflow:hidden;\r\n    isolation:isolate;\r\n    background:\r\n      radial-gradient(circle at 50% 12%, rgba(255,255,255,.96), rgba(255,255,255,0) 30%),\r\n      linear-gradient(180deg, #f7f7f5 0%, #f1f1ef 100%);\r\n    color:var(--text);\r\n    font-family:Neulis, Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\r\n    cursor:grab;\r\n  }\r\n\r\n  .scene.is-dragging,\r\n  .scene.is-dragging *{\r\n    cursor:grabbing !important;\r\n  }\r\n\r\n  .arc-svg{\r\n    position:absolute;\r\n    inset:0;\r\n    width:100%;\r\n    height:100%;\r\n    z-index:8;\r\n    pointer-events:none;\r\n  }\r\n\r\n  .arc-path{\r\n    fill:none;\r\n    stroke:var(--line);\r\n    stroke-width:0;\r\n    vector-effect:non-scaling-stroke;\r\n  }\r\n\r\n  .drag-surface{\r\n    position:absolute;\r\n    inset:0;\r\n    z-index:18;\r\n    background:transparent;\r\n    pointer-events:auto;\r\n    touch-action:none;\r\n    cursor:grab;\r\n  }\r\n\r\n  .wheel{\r\n    position:absolute;\r\n    left:50%;\r\n    top:50%;\r\n    transform:translate(-50%, -50%) rotate(0deg);\r\n    z-index:22;\r\n    pointer-events:none;\r\n    will-change:transform;\r\n    border:1px solid rgb(204, 204, 204);\r\n    border-radius:100%;\r\n    mix-blend-mode:multiply;\r\n  }\r\n  \r\n  @media (max-width: 780px){ \r\n   \r\n   .wheel{\r\n    position:absolute;\r\n    left:50%!important;\r\n    top:80%!important;\r\n    zoom:1.1;\r\n      }\r\n      \r\n  }\r\n\r\n  .director{\r\n    position:absolute;\r\n    left:0;\r\n    top:0;\r\n    transform-origin:center center;\r\n    border:0;\r\n    background-color:#fff !important;\r\n    color:#2c2c2c !important;\r\n    padding:8px 12px;\r\n    margin:0;\r\n    cursor:grab;\r\n    pointer-events:auto;\r\n    white-space:wrap;\r\n    line-height:1;\r\n    letter-spacing:-0.035em;\r\n    font-size:clamp(18px, 1.18vw, 24px);\r\n    width:min-content;\r\n    user-select:none;\r\n  }\r\n\r\n  .director:hover{\r\n    color:#000 !important;\r\n  }\r\n\r\n  .director.is-active{\r\n    color:#0e0e0e !important;\r\n    font-weight:500;\r\n  }\r\n\r\n  .director:not(.is-active){\r\n    font-weight:400;\r\n  }\r\n\r\n  .carousel{\r\n    position:absolute;\r\n    inset:0;\r\n    z-index:15;\r\n    overflow:hidden;\r\n    pointer-events:none;\r\n  }\r\n\r\n  .card{\r\n    position:absolute;\r\n    left:50%;\r\n    top:66%;\r\n    width:min(610px, 54vw);\r\n    aspect-ratio:1.78\/1;\r\n    transform:translate(-50%, -50%);\r\n    border:0;\r\n    margin:0;\r\n    padding:0;\r\n    background:transparent;\r\n    pointer-events:none;\r\n    will-change:transform, opacity, filter;\r\n  }\r\n\r\n  .card-shell{\r\n    position:relative;\r\n    width:100%;\r\n    height:100%;\r\n    border-radius:var(--card-radius);\r\n    overflow:hidden;\r\n    background:#d9d9d9;\r\n    box-shadow:\r\n      0 12px 24px rgba(0,0,0,.07),\r\n      0 40px 90px rgba(0,0,0,.12);\r\n  }\r\n\r\n  .card.is-active .card-shell{\r\n    box-shadow:\r\n      0 14px 30px rgba(0,0,0,.08),\r\n      0 46px 110px rgba(0,0,0,.16);\r\n  }\r\n\r\n  .card-visual{\r\n    position:absolute;\r\n    inset:0;\r\n    background-size:cover;\r\n    background-position:center;\r\n    transform:scale(1.04);\r\n  }\r\n\r\n  .card-visual::before{\r\n    content:\"\";\r\n    position:absolute;\r\n    inset:0;\r\n    background:\r\n      linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.18)),\r\n      radial-gradient(circle at 74% 18%, rgba(255,255,255,.18), rgba(255,255,255,0) 14%);\r\n    pointer-events:none;\r\n  }\r\n\r\n  .card-visual::after{\r\n    content:\"\";\r\n    position:absolute;\r\n    inset:0;\r\n    background:linear-gradient(180deg, rgba(0,0,0,0) 38%, rgba(0,0,0,.38) 100%);\r\n    pointer-events:none;\r\n  }\r\n\r\n  .bg-0{\r\n    background:\r\n      radial-gradient(circle at 68% 28%, rgba(255,224,186,.35), rgba(255,224,186,0) 13%),\r\n      radial-gradient(circle at 16% 25%, rgba(255,255,255,.16), rgba(255,255,255,0) 15%),\r\n      linear-gradient(130deg, rgba(34,17,10,.18), rgba(0,0,0,0) 34%),\r\n      linear-gradient(135deg, #d8c7b6 0%, #b1947e 38%, #6d5546 100%);\r\n  }\r\n\r\n  .bg-1{\r\n    background:\r\n      radial-gradient(circle at 72% 18%, rgba(255,255,255,.14), rgba(255,255,255,0) 12%),\r\n      radial-gradient(circle at 34% 34%, rgba(88,117,166,.24), rgba(88,117,166,0) 18%),\r\n      linear-gradient(135deg, #1a2030 0%, #536379 52%, #9d978b 100%);\r\n  }\r\n\r\n  .bg-2{\r\n    background:\r\n      radial-gradient(circle at 78% 18%, rgba(255,244,176,.52), rgba(255,244,176,0) 12%),\r\n      radial-gradient(circle at 30% 42%, rgba(17,129,198,.42), rgba(17,129,198,0) 20%),\r\n      linear-gradient(135deg, #061420 0%, #0c355e 34%, #1977a3 60%, #97b6be 100%);\r\n  }\r\n\r\n  .bg-3{\r\n    background:\r\n      radial-gradient(circle at 65% 24%, rgba(161,241,255,.30), rgba(161,241,255,0) 13%),\r\n      radial-gradient(circle at 24% 38%, rgba(26,84,206,.24), rgba(26,84,206,0) 18%),\r\n      linear-gradient(135deg, #131b3e 0%, #2a3f8a 36%, #2aa2f4 70%, #d7edf7 100%);\r\n  }\r\n\r\n  .bg-4{\r\n    background:\r\n      radial-gradient(circle at 67% 21%, rgba(255,216,133,.22), rgba(255,216,133,0) 13%),\r\n      radial-gradient(circle at 24% 48%, rgba(0,156,168,.22), rgba(0,156,168,0) 18%),\r\n      linear-gradient(135deg, #173248 0%, #2f4d60 46%, #9db5bc 100%);\r\n  }\r\n\r\n  .card-copy{\r\n    position:absolute;\r\n    left:20px;\r\n    right:20px;\r\n    bottom:18px;\r\n    display:flex;\r\n    justify-content:space-between;\r\n    align-items:flex-end;\r\n    gap:16px;\r\n    z-index:3;\r\n  }\r\n\r\n  .card-copy .name{\r\n    color:#fff;\r\n    font-size:clamp(18px, 1.24vw, 24px);\r\n    font-weight:700;\r\n    line-height:1;\r\n    letter-spacing:-0.04em;\r\n    margin-bottom:6px;\r\n  }\r\n\r\n  .card-copy .tag{\r\n    color:rgba(255,255,255,.88);\r\n    font-size:clamp(12px, .82vw, 14px);\r\n    line-height:1.15;\r\n    max-width:210px;\r\n  }\r\n\r\n  .card-copy .index{\r\n    color:rgba(255,255,255,.82);\r\n    font-size:13px;\r\n    font-weight:700;\r\n    white-space:nowrap;\r\n  }\r\n\r\n  .card-shadow-fade{\r\n    position:absolute;\r\n    inset:auto 0 0 0;\r\n    height:40%;\r\n    background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.26));\r\n    z-index:2;\r\n    pointer-events:none;\r\n  }\r\n\r\n  .helper{\r\n    position:absolute;\r\n    left:50%;\r\n    bottom:2.6vh;\r\n    transform:translateX(-50%);\r\n    z-index:30;\r\n    color:#767676;\r\n    font-size:12px;\r\n    line-height:1;\r\n    padding:10px 14px;\r\n    border-radius:999px;\r\n    background:rgba(255,255,255,.62);\r\n    border:1px solid rgba(0,0,0,.06);\r\n    backdrop-filter:blur(10px);\r\n    user-select:none;\r\n    pointer-events:none;\r\n    white-space:nowrap;\r\n  }\r\n\r\n  @media (max-width:1100px){\r\n    .card{ width:min(720px, 72vw); top:67%; }\r\n  }\r\n\r\n  @media (max-width:780px){\r\n    .card{\r\n      width:min(84vw, 620px);\r\n      top:66%;\r\n    }\r\n\r\n    .card-copy{\r\n      left:16px;\r\n      right:16px;\r\n      bottom:14px;\r\n    }\r\n\r\n    .helper{\r\n      max-width:90vw;\r\n      text-align:center;\r\n      white-space:normal;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<div class=\"scene\" id=\"scene\">\r\n  <svg class=\"arc-svg\" id=\"arcSvg\" preserveAspectRatio=\"none\" aria-hidden=\"true\">\r\n    <path class=\"arc-path\" id=\"arcPath\" d=\"\"><\/path>\r\n  <\/svg>\r\n\r\n  <div class=\"carousel\" id=\"carousel\"><\/div>\r\n  <div class=\"drag-surface\" id=\"dragSurface\" aria-hidden=\"true\"><\/div>\r\n  <div class=\"wheel\" id=\"wheel\"><\/div>\r\n\r\n  <div class=\"helper\">Drag anywhere or click a director<\/div>\r\n<\/div>\r\n\r\n<script>\r\n(() => {\r\n  const items = [\r\n    { name: \"Christopher Nolan\",   tag: \"Structured scale \/ urban tension\",          bg: \"bg-0\", image: \"\" },\r\n    { name: \"Stanley Kubrick\",     tag: \"Geometric composition \/ cold symmetry\",     bg: \"bg-1\", image: \"\" },\r\n    { name: \"Tim Burton\",          tag: \"Moonlit fantasy \/ eccentric gothic mood\",   bg: \"bg-2\", image: \"\" },\r\n    { name: \"James Cameron\",       tag: \"Epic spectacle \/ clean sci-fi contrast\",    bg: \"bg-3\", image: \"\" },\r\n    { name: \"Mohammad Al-Kandari\", tag: \"Poetic atmosphere \/ luminous modern drama\", bg: \"bg-4\", image: \"\" }\r\n  ];\r\n\r\n  const SLOT_ANGLE = 36;\r\n  const SLOT_COUNT = Math.round(360 \/ SLOT_ANGLE);\r\n  const TOP_SLOT_ANGLE = -90;\r\n  const visibleSlotRange = 2;\r\n\r\n  const scene = document.getElementById(\"scene\");\r\n  const wheel = document.getElementById(\"wheel\");\r\n  const carousel = document.getElementById(\"carousel\");\r\n  const arcPath = document.getElementById(\"arcPath\");\r\n  const dragSurface = document.getElementById(\"dragSurface\");\r\n\r\n  const directors = [];\r\n  const cards = [];\r\n  const slots = [];\r\n\r\n  let radius = 0;\r\n  let centerX = 0;\r\n  let centerY = 0;\r\n  let visibleHalfArc = 0;\r\n  let cardSpacing = 0;\r\n\r\n  let currentRotation = 0;\r\n  let currentIndexFloat = 2;\r\n  let currentSelectedIndex = 2;\r\n  let animationFrame = null;\r\n\r\n  let isDragging = false;\r\n  let dragPointerId = null;\r\n  let dragStartX = 0;\r\n  let dragStartRotation = 0;\r\n  let dragStartIndexFloat = 0;\r\n  let didDrag = false;\r\n  let dragCaptureEl = null;\r\n  let suppressDirectorClick = false;\r\n\r\n  function mod(n, m){\r\n    return ((n % m) + m) % m;\r\n  }\r\n\r\n  function clamp(v, min, max){\r\n    return Math.min(Math.max(v, min), max);\r\n  }\r\n\r\n  function lerp(a, b, t){\r\n    return a + (b - a) * t;\r\n  }\r\n\r\n  function easeInOutCubic(t){\r\n    return t < 0.5\r\n      ? 4 * t * t * t\r\n      : 1 - Math.pow(-2 * t + 2, 3) \/ 2;\r\n  }\r\n\r\n  function normalizeAngle(a){\r\n    let angle = a % 360;\r\n    if(angle > 180) angle -= 360;\r\n    if(angle < -180) angle += 360;\r\n    return angle;\r\n  }\r\n\r\n  function wrappedDiff(index, activeFloat, count){\r\n    let diff = index - activeFloat;\r\n    while(diff > count \/ 2) diff -= count;\r\n    while(diff < -count \/ 2) diff += count;\r\n    return diff;\r\n  }\r\n\r\n  function shortestIndexDelta(from, to, count){\r\n    let delta = to - from;\r\n    while(delta > count \/ 2) delta -= count;\r\n    while(delta < -count \/ 2) delta += count;\r\n    return delta;\r\n  }\r\n\r\n  function polarX(r, angleDeg){\r\n    return r + Math.cos(angleDeg * Math.PI \/ 180) * r;\r\n  }\r\n\r\n  function polarY(r, angleDeg){\r\n    return r + Math.sin(angleDeg * Math.PI \/ 180) * r;\r\n  }\r\n\r\n  function visibilityFromAngle(screenAngle){\r\n    const dist = Math.abs(normalizeAngle(screenAngle - TOP_SLOT_ANGLE));\r\n    const fullVisible = visibleSlotRange * SLOT_ANGLE;\r\n    const fadeUntil = fullVisible + SLOT_ANGLE * 0.75;\r\n\r\n    if(dist <= fullVisible) return 1;\r\n    if(dist >= fadeUntil) return 0;\r\n\r\n    return 1 - ((dist - fullVisible) \/ (fadeUntil - fullVisible));\r\n  }\r\n\r\n  function nearestIndexFromFloat(value){\r\n    return mod(Math.round(value), items.length);\r\n  }\r\n\r\n  function buildSlots(){\r\n    slots.length = 0;\r\n\r\n    const topSlotIndex = 3;\r\n    for(let i = 0; i < SLOT_COUNT; i++){\r\n      const itemIndex = mod(currentSelectedIndex + (i - topSlotIndex), items.length);\r\n      slots.push({\r\n        slotIndex: i,\r\n        itemIndex,\r\n        baseAngle: -180 + i * SLOT_ANGLE\r\n      });\r\n    }\r\n  }\r\n\r\n  function findBestRotationForItem(targetItemIndex){\r\n    const matchingSlots = slots.filter(slot => slot.itemIndex === targetItemIndex);\r\n    let bestRotation = currentRotation;\r\n    let bestDistance = Infinity;\r\n\r\n    matchingSlots.forEach((slot) => {\r\n      const baseTargetRotation = TOP_SLOT_ANGLE - slot.baseAngle;\r\n\r\n      for(let k = -2; k <= 2; k++){\r\n        const candidate = baseTargetRotation + (k * 360);\r\n        const dist = Math.abs(candidate - currentRotation);\r\n        if(dist < bestDistance){\r\n          bestDistance = dist;\r\n          bestRotation = candidate;\r\n        }\r\n      }\r\n    });\r\n\r\n    return bestRotation;\r\n  }\r\n\r\n  function layout(){\r\n    const w = window.innerWidth;\r\n    const h = window.innerHeight;\r\n\r\n    centerX = w \/ 2;\r\n    centerY = h * (w < 780 ? 0.92 : 0.905);\r\n    radius = clamp(w * 0.31, 255, 560);\r\n\r\n    visibleHalfArc = visibleSlotRange * SLOT_ANGLE;\r\n    cardSpacing = clamp(w * 0.355, 250, 470);\r\n\r\n    wheel.style.width = `${radius * 2}px`;\r\n    wheel.style.height = `${radius * 2}px`;\r\n    wheel.style.left = `${centerX}px`;\r\n    wheel.style.top = `${centerY}px`;\r\n\r\n    directors.forEach((director) => {\r\n      const baseAngle = parseFloat(director.dataset.baseAngle);\r\n      const x = polarX(radius, baseAngle);\r\n      const y = polarY(radius, baseAngle);\r\n      director.style.left = `${x}px`;\r\n      director.style.top = `${y}px`;\r\n    });\r\n\r\n    drawArc();\r\n  }\r\n\r\n  function drawArc(){\r\n    const start = TOP_SLOT_ANGLE - visibleHalfArc;\r\n    const end = TOP_SLOT_ANGLE + visibleHalfArc;\r\n\r\n    const x1 = centerX + Math.cos(start * Math.PI \/ 180) * radius;\r\n    const y1 = centerY + Math.sin(start * Math.PI \/ 180) * radius;\r\n    const x2 = centerX + Math.cos(end * Math.PI \/ 180) * radius;\r\n    const y2 = centerY + Math.sin(end * Math.PI \/ 180) * radius;\r\n\r\n    arcPath.setAttribute(\"d\", `M ${x1} ${y1} A ${radius} ${radius} 0 0 1 ${x2} ${y2}`);\r\n  }\r\n\r\n  function render(){\r\n    wheel.style.transform = `translate(-50%, -50%) rotate(${currentRotation}deg)`;\r\n\r\n    directors.forEach((director) => {\r\n      const baseAngle = parseFloat(director.dataset.baseAngle);\r\n      const itemIndex = parseInt(director.dataset.itemIndex, 10);\r\n      const screenAngle = normalizeAngle(baseAngle + currentRotation);\r\n      const vis = visibilityFromAngle(screenAngle);\r\n\r\n      const distToTop = Math.abs(normalizeAngle(screenAngle - TOP_SLOT_ANGLE));\r\n      const emphasis = clamp(1 - (distToTop \/ SLOT_ANGLE), 0, 1);\r\n      const fullOpacityZone = distToTop <= visibleHalfArc + 0.001;\r\n\r\n      const scale = 0.7 + (0.3 * emphasis);\r\n\r\n      director.style.opacity = fullOpacityZone ? \"1\" : String(vis);\r\n      director.style.pointerEvents = vis > 0.08 ? \"auto\" : \"none\";\r\n      director.style.transform = `translate(-50%, -50%) rotate(${baseAngle + 90}deg) scale(${scale})`;\r\n\r\n      director.classList.toggle(\"is-active\", itemIndex === currentSelectedIndex && emphasis > 0.92);\r\n    });\r\n\r\n    cards.forEach((card, index) => {\r\n      const diff = wrappedDiff(index, currentIndexFloat, items.length);\r\n      const abs = Math.abs(diff);\r\n      const limited = Math.min(abs, 2);\r\n\r\n      let scale, opacity, blur, yShift;\r\n      if(limited <= 1){\r\n        scale = lerp(1, 0.56, limited);\r\n        opacity = lerp(1, 0.34, limited);\r\n        blur = lerp(0, 16, limited);\r\n        yShift = lerp(0, 8, limited);\r\n      } else {\r\n        const t = limited - 1;\r\n        scale = lerp(0.56, 0.42, t);\r\n        opacity = lerp(0.34, 0.08, t);\r\n        blur = lerp(16, 24, t);\r\n        yShift = lerp(8, 12, t);\r\n      }\r\n\r\n      const x = diff * cardSpacing;\r\n\r\n      card.style.zIndex = String(100 - Math.round(abs * 20));\r\n      card.style.opacity = opacity;\r\n      card.style.filter = `blur(${blur}px) saturate(${lerp(1, 0.78, Math.min(abs, 1))})`;\r\n      card.style.transform = `\r\n        translate(-50%, -50%)\r\n        translateX(${x}px)\r\n        translateY(${yShift}px)\r\n        scale(${scale})\r\n      `;\r\n      card.classList.toggle(\"is-active\", abs < 0.02);\r\n    });\r\n  }\r\n\r\n  function animateTo(targetIndex){\r\n    if(animationFrame) cancelAnimationFrame(animationFrame);\r\n\r\n    targetIndex = mod(targetIndex, items.length);\r\n\r\n    const startRotation = currentRotation;\r\n    const endRotation = findBestRotationForItem(targetIndex);\r\n\r\n    const startIndexFloat = currentIndexFloat;\r\n    const endIndexFloat = startIndexFloat + shortestIndexDelta(startIndexFloat, targetIndex, items.length);\r\n\r\n    const distance = Math.abs(endRotation - startRotation);\r\n    const duration = clamp(520 + distance * 1.4, 520, 1100);\r\n    const startTime = performance.now();\r\n\r\n    function tick(now){\r\n      const elapsed = now - startTime;\r\n      const t = clamp(elapsed \/ duration, 0, 1);\r\n      const eased = easeInOutCubic(t);\r\n\r\n      currentRotation = lerp(startRotation, endRotation, eased);\r\n      currentIndexFloat = lerp(startIndexFloat, endIndexFloat, eased);\r\n\r\n      if(t > 0.5) currentSelectedIndex = targetIndex;\r\n\r\n      render();\r\n\r\n      if(t < 1){\r\n        animationFrame = requestAnimationFrame(tick);\r\n      } else {\r\n        currentRotation = endRotation;\r\n        currentIndexFloat = targetIndex;\r\n        currentSelectedIndex = targetIndex;\r\n        render();\r\n        animationFrame = null;\r\n      }\r\n    }\r\n\r\n    animationFrame = requestAnimationFrame(tick);\r\n  }\r\n\r\n  function goTo(targetIndex){\r\n    animateTo(mod(targetIndex, items.length));\r\n  }\r\n\r\n  function beginDrag(e){\r\n    if(animationFrame){\r\n      cancelAnimationFrame(animationFrame);\r\n      animationFrame = null;\r\n    }\r\n\r\n    isDragging = true;\r\n    dragPointerId = e.pointerId;\r\n    dragStartX = e.clientX;\r\n    dragStartRotation = currentRotation;\r\n    dragStartIndexFloat = currentIndexFloat;\r\n    didDrag = false;\r\n    dragCaptureEl = e.currentTarget;\r\n\r\n    scene.classList.add(\"is-dragging\");\r\n    document.body.style.userSelect = \"none\";\r\n\r\n    try{\r\n      dragCaptureEl.setPointerCapture(e.pointerId);\r\n    } catch(err){}\r\n  }\r\n\r\n  function moveDrag(e){\r\n    if(!isDragging || e.pointerId !== dragPointerId) return;\r\n\r\n    const deltaX = e.clientX - dragStartX;\r\n\r\n    if(Math.abs(deltaX) > 4) didDrag = true;\r\n\r\n    const indexDelta = deltaX \/ (cardSpacing * 0.92);\r\n\r\n    currentIndexFloat = dragStartIndexFloat - indexDelta;\r\n    currentRotation = dragStartRotation + (indexDelta * SLOT_ANGLE);\r\n    currentSelectedIndex = nearestIndexFromFloat(currentIndexFloat);\r\n\r\n    render();\r\n  }\r\n\r\n  function endDrag(e){\r\n    if(!isDragging || e.pointerId !== dragPointerId) return;\r\n\r\n    const wasDragged = didDrag;\r\n\r\n    isDragging = false;\r\n    dragPointerId = null;\r\n    didDrag = false;\r\n    scene.classList.remove(\"is-dragging\");\r\n    document.body.style.userSelect = \"\";\r\n\r\n    try{\r\n      dragCaptureEl?.releasePointerCapture(e.pointerId);\r\n    } catch(err){}\r\n\r\n    dragCaptureEl = null;\r\n\r\n    if(wasDragged){\r\n      suppressDirectorClick = true;\r\n      const targetIndex = nearestIndexFromFloat(currentIndexFloat);\r\n      goTo(targetIndex);\r\n    }\r\n  }\r\n\r\n  function bindGlobalDrag(el){\r\n    el.addEventListener(\"pointerdown\", beginDrag);\r\n    el.addEventListener(\"pointermove\", moveDrag);\r\n    el.addEventListener(\"pointerup\", endDrag);\r\n    el.addEventListener(\"pointercancel\", endDrag);\r\n  }\r\n\r\n  function build(){\r\n    buildSlots();\r\n\r\n    currentRotation = findBestRotationForItem(currentSelectedIndex);\r\n    currentIndexFloat = currentSelectedIndex;\r\n\r\n    slots.forEach((slot) => {\r\n      const director = document.createElement(\"button\");\r\n      director.className = \"director\";\r\n      director.type = \"button\";\r\n      director.textContent = items[slot.itemIndex].name;\r\n      director.dataset.itemIndex = slot.itemIndex;\r\n      director.dataset.baseAngle = slot.baseAngle;\r\n      director.setAttribute(\"aria-label\", `Go to ${items[slot.itemIndex].name}`);\r\n\r\n      director.addEventListener(\"click\", () => {\r\n        if(suppressDirectorClick){\r\n          suppressDirectorClick = false;\r\n          return;\r\n        }\r\n        goTo(slot.itemIndex);\r\n      });\r\n\r\n      bindGlobalDrag(director);\r\n\r\n      wheel.appendChild(director);\r\n      directors.push(director);\r\n    });\r\n\r\n    items.forEach((item, index) => {\r\n      const card = document.createElement(\"div\");\r\n      card.className = \"card\";\r\n\r\n      const visualStyle = item.image\r\n        ? `style=\"background-image:url('${item.image}');\"`\r\n        : `class=\"card-visual ${item.bg}\"`;\r\n\r\n      card.innerHTML = `\r\n        <div class=\"card-shell\">\r\n          ${item.image\r\n            ? `<div class=\"card-visual\" ${visualStyle}><\/div>`\r\n            : `<div ${visualStyle}><\/div>`\r\n          }\r\n          <div class=\"card-shadow-fade\"><\/div>\r\n          <div class=\"card-copy\">\r\n            <div>\r\n              <div class=\"name\">${item.name}<\/div>\r\n              <div class=\"tag\">${item.tag}<\/div>\r\n            <\/div>\r\n            <div class=\"index\">${String(index + 1).padStart(2, \"0\")}<\/div>\r\n          <\/div>\r\n        <\/div>\r\n      `;\r\n\r\n      carousel.appendChild(card);\r\n      cards.push(card);\r\n    });\r\n\r\n    bindGlobalDrag(dragSurface);\r\n\r\n    layout();\r\n    render();\r\n  }\r\n\r\n  window.addEventListener(\"resize\", () => {\r\n    layout();\r\n    render();\r\n  });\r\n\r\n  build();\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Drag anywhere or click a director<\/p>","protected":false},"author":363,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-12056","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>circle - Magic Maker Ai<\/title>\n<meta name=\"description\" content=\"Drag anywhere or click a director\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cinemagicmaker.ai\/ar\/circle\/\" \/>\n<meta property=\"og:locale\" content=\"ar_AR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"circle - Magic Maker Ai\" \/>\n<meta property=\"og:description\" content=\"Drag anywhere or click a director\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cinemagicmaker.ai\/ar\/circle\/\" \/>\n<meta property=\"og:site_name\" content=\"Magic Maker Ai\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Cinemagics\/\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-30T11:14:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cinemagicmaker.ai\/wp-content\/uploads\/2025\/01\/c85f68_b4f4607772ec48f08e068d5a123fb610mv2.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1452\" \/>\n\t<meta property=\"og:image:height\" content=\"242\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@cinemagics\" \/>\n<meta name=\"twitter:label1\" content=\"\u0648\u0642\u062a \u0627\u0644\u0642\u0631\u0627\u0621\u0629 \u0627\u0644\u0645\u064f\u0642\u062f\u0651\u0631\" \/>\n\t<meta name=\"twitter:data1\" content=\"\u062f\u0642\u064a\u0642\u0629 \u0648\u0627\u062d\u062f\u0629\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/cinemagicmaker.ai\\\/circle\\\/\",\"url\":\"https:\\\/\\\/cinemagicmaker.ai\\\/circle\\\/\",\"name\":\"circle - Magic Maker Ai\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/cinemagicmaker.ai\\\/#website\"},\"datePublished\":\"2026-03-30T07:05:24+00:00\",\"dateModified\":\"2026-03-30T11:14:56+00:00\",\"description\":\"Drag anywhere or click a director\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/cinemagicmaker.ai\\\/circle\\\/#breadcrumb\"},\"inLanguage\":\"ar\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/cinemagicmaker.ai\\\/circle\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/cinemagicmaker.ai\\\/circle\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/cinemagicmaker.ai\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"circle\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/cinemagicmaker.ai\\\/#website\",\"url\":\"https:\\\/\\\/cinemagicmaker.ai\\\/\",\"name\":\"Magicmaker Ai\",\"description\":\"Magic Maker is our AI engine connecting you to top creative models for image, video, and design \u2013 turning ideas into cinematic realities that blend human...\",\"publisher\":{\"@id\":\"https:\\\/\\\/cinemagicmaker.ai\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/cinemagicmaker.ai\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ar\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/cinemagicmaker.ai\\\/#organization\",\"name\":\"%%sitename%%\",\"url\":\"https:\\\/\\\/cinemagicmaker.ai\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ar\",\"@id\":\"https:\\\/\\\/cinemagicmaker.ai\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/cinemagicmaker.ai\\\/wp-content\\\/uploads\\\/2024\\\/10\\\/cinemagic-video-production-company-logo.webp\",\"contentUrl\":\"https:\\\/\\\/cinemagicmaker.ai\\\/wp-content\\\/uploads\\\/2024\\\/10\\\/cinemagic-video-production-company-logo.webp\",\"width\":454,\"height\":454,\"caption\":\"%%sitename%%\"},\"image\":{\"@id\":\"https:\\\/\\\/cinemagicmaker.ai\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/Cinemagics\\\/\",\"https:\\\/\\\/x.com\\\/cinemagics\",\"https:\\\/\\\/www.youtube.com\\\/cinemagics\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/cinemagics\",\"https:\\\/\\\/vimeo.com\\\/cinemagics\",\"https:\\\/\\\/news.google.com\\\/publications\\\/CAAqBwgKMIOC9Qowsq7bAg?hl=en-US&gl=US&ceid=USen\",\"https:\\\/\\\/g.page\\\/cinemagic-kuwait-ltd-?share\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"circle - Magic Maker Ai","description":"Drag anywhere or click a director","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cinemagicmaker.ai\/ar\/circle\/","og_locale":"ar_AR","og_type":"article","og_title":"circle - Magic Maker Ai","og_description":"Drag anywhere or click a director","og_url":"https:\/\/cinemagicmaker.ai\/ar\/circle\/","og_site_name":"Magic Maker Ai","article_publisher":"https:\/\/www.facebook.com\/Cinemagics\/","article_modified_time":"2026-03-30T11:14:56+00:00","og_image":[{"width":1452,"height":242,"url":"https:\/\/cinemagicmaker.ai\/wp-content\/uploads\/2025\/01\/c85f68_b4f4607772ec48f08e068d5a123fb610mv2.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_site":"@cinemagics","twitter_misc":{"\u0648\u0642\u062a \u0627\u0644\u0642\u0631\u0627\u0621\u0629 \u0627\u0644\u0645\u064f\u0642\u062f\u0651\u0631":"\u062f\u0642\u064a\u0642\u0629 \u0648\u0627\u062d\u062f\u0629"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/cinemagicmaker.ai\/circle\/","url":"https:\/\/cinemagicmaker.ai\/circle\/","name":"circle - Magic Maker Ai","isPartOf":{"@id":"https:\/\/cinemagicmaker.ai\/#website"},"datePublished":"2026-03-30T07:05:24+00:00","dateModified":"2026-03-30T11:14:56+00:00","description":"Drag anywhere or click a director","breadcrumb":{"@id":"https:\/\/cinemagicmaker.ai\/circle\/#breadcrumb"},"inLanguage":"ar","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cinemagicmaker.ai\/circle\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/cinemagicmaker.ai\/circle\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cinemagicmaker.ai\/"},{"@type":"ListItem","position":2,"name":"circle"}]},{"@type":"WebSite","@id":"https:\/\/cinemagicmaker.ai\/#website","url":"https:\/\/cinemagicmaker.ai\/","name":"Magicmaker Ai","description":"Magic Maker is our AI engine connecting you to top creative models for image, video, and design \u2013 turning ideas into cinematic realities that blend human...","publisher":{"@id":"https:\/\/cinemagicmaker.ai\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cinemagicmaker.ai\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ar"},{"@type":"Organization","@id":"https:\/\/cinemagicmaker.ai\/#organization","name":"%%sitename%%","url":"https:\/\/cinemagicmaker.ai\/","logo":{"@type":"ImageObject","inLanguage":"ar","@id":"https:\/\/cinemagicmaker.ai\/#\/schema\/logo\/image\/","url":"https:\/\/cinemagicmaker.ai\/wp-content\/uploads\/2024\/10\/cinemagic-video-production-company-logo.webp","contentUrl":"https:\/\/cinemagicmaker.ai\/wp-content\/uploads\/2024\/10\/cinemagic-video-production-company-logo.webp","width":454,"height":454,"caption":"%%sitename%%"},"image":{"@id":"https:\/\/cinemagicmaker.ai\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Cinemagics\/","https:\/\/x.com\/cinemagics","https:\/\/www.youtube.com\/cinemagics","https:\/\/www.linkedin.com\/company\/cinemagics","https:\/\/vimeo.com\/cinemagics","https:\/\/news.google.com\/publications\/CAAqBwgKMIOC9Qowsq7bAg?hl=en-US&gl=US&ceid=USen","https:\/\/g.page\/cinemagic-kuwait-ltd-?share"]}]}},"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/cinemagicmaker.ai\/ar\/wp-json\/wp\/v2\/pages\/12056","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cinemagicmaker.ai\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cinemagicmaker.ai\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cinemagicmaker.ai\/ar\/wp-json\/wp\/v2\/users\/363"}],"replies":[{"embeddable":true,"href":"https:\/\/cinemagicmaker.ai\/ar\/wp-json\/wp\/v2\/comments?post=12056"}],"version-history":[{"count":152,"href":"https:\/\/cinemagicmaker.ai\/ar\/wp-json\/wp\/v2\/pages\/12056\/revisions"}],"predecessor-version":[{"id":12214,"href":"https:\/\/cinemagicmaker.ai\/ar\/wp-json\/wp\/v2\/pages\/12056\/revisions\/12214"}],"wp:attachment":[{"href":"https:\/\/cinemagicmaker.ai\/ar\/wp-json\/wp\/v2\/media?parent=12056"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}