Design Your Own Bracelet

const { useState, useRef, useEffect, useMemo } = React;

const CATEGORIES = window.SHOPIFY_BEAD_CATEGORIES && window.SHOPIFY_BEAD_CATEGORIES.length > 0 
    ? window.SHOPIFY_BEAD_CATEGORIES[0] && window.SHOPIFY_BEAD_CATEGORIES[0].beads ? window.SHOPIFY_BEAD_CATEGORIES : []
    : [];

const IMG_RAW = {};
  CATEGORIES.forEach(cat => {
    cat.beads.forEach(b => {
      
      IMG_RAW[b.id] = b.imgSrc;
    });
  });

function BraceletDesigner() {
    const [beads, setBeads] = useState([]);
    const [cat, setCat] = useState(CATEGORIES.length > 0 ? CATEGORIES[0].id : null);
    const [wrist, setWrist] = useState(16);
    const [sel, setSel] = useState(null);
    const [showSize, setShowSize] = useState(false);
    const [showHelp, setShowHelp] = useState(false);
    const [flying, setFlying] = useState(null);
    const [drag, setDrag] = useState(null);
    const svgRef = useRef(null);

const { images: IMG, ready: imgsReady } = useProcessedImages(IMG_RAW);
    const getImg = (key) => IMG[key] || IMG_RAW[key];

const curCat = CATEGORIES.find(c => c.id === cat);
    const total = beads.reduce((s, b) => s + b.price, 0);

const maxString = calcStringCapacity(wrist);
    const usedString = totalStringUsed(beads);
    const fillPct = Math.min(100, (usedString / maxString) * 100);
    const isFull = usedString >= maxString;

const S = 420, CX = S / 2, CY = S / 2, R = 150;
    const CIRC = 2 * Math.PI * R;
    const SCALE = CIRC / maxString * 1.02;

useEffect(() => {
        if (!drag) return;
        function onMove(e) { setDrag(d => d ? { ...d, curX: e.clientX, curY: e.clientY } : null); }
        function onUp(e) {
          if (e.type === 'pointercancel') { setDrag(null); return; }
          setDrag(d => {
            if (!d) return null;
            const dx = e.clientX - d.startX; const dy = e.clientY - d.startY;
            const dist = Math.sqrt(dx * dx + dy * dy);
            if (dist < 5) { setSel(sel => sel === d.idx ? null : d.idx); return null; }
            const svgEl = svgRef.current; if (!svgEl) return null;
            const rect = svgEl.getBoundingClientRect();
            const dropSvgX = (e.clientX - rect.left) * (S / rect.width);
            const dropSvgY = (e.clientY - rect.top) * (S / rect.height);
            const distToCenter = Math.sqrt((dropSvgX - CX) ** 2 + (dropSvgY - CY) ** 2);
            if (distToCenter < R - 50 || distToCenter > R + 50) {
              setBeads(prev => prev.filter((_, i) => i !== d.idx));
              setSel(s => s === d.idx ? null : (s > d.idx ? s - 1 : s));
            } else {
              let angle = Math.atan2(dropSvgY - CY, dropSvgX - CX);
              let normAngle = angle + Math.PI/2; if (normAngle < 0) normAngle += 2*Math.PI;
              setBeads(prev => {
                const currentAngles = positions.map(p => {
                  let a = p.angle + Math.PI/2; if (a < 0) a += 2*Math.PI; return a;
                });
                let newIdx = prev.length - 1;
                for (let i = 0; i < currentAngles.length; i++) {
                  if (i === d.idx) continue;
                  if (normAngle < currentAngles[i]) { newIdx = i > d.idx ? i - 1 : i; break; }
                }
                const newBeads = [...prev]; const [moved] = newBeads.splice(d.idx, 1);
                newBeads.splice(newIdx, 0, moved);
                setSel(s => {
                  if (s === d.idx) return newIdx;
                  if (s !== null) {
                    if (s > d.idx && s <= newIdx) return s - 1;
                    if (s < d.idx && s >= newIdx) return s + 1;
                  }
                  return s;
                });
                return newBeads;
              });
            }
            return null;
          });
        }
        window.addEventListener('pointermove', onMove); window.addEventListener('pointerup', onUp); window.addEventListener('pointercancel', onUp);
        return () => { window.removeEventListener('pointermove', onMove); window.removeEventListener('pointerup', onUp); window.removeEventListener('pointercancel', onUp); };
      }, [drag !== null, positions]);

function addBead(bead, ev) {
      const isReplace = sel !== null && sel < beads.length;
      if (!isReplace && usedString + bead.size > maxString + 2) return;
      
      
      const newBeads = isReplace
        ? beads.map((b, i) => i === sel ? { ...bead, uid: Date.now() + Math.random() } : b)
        : [...beads, { ...bead, uid: Date.now() + Math.random() }];
      const idx = isReplace ? sel : newBeads.length - 1;

const newUsed = totalStringUsed(newBeads);
      const newScale = CIRC / maxString;
      const newVisuals = newBeads.map(b => (b.size * newScale));
      const totalBeadArc = newVisuals.reduce((s, d) => s + d, 0);
      const gap = Math.max(0, CIRC - totalBeadArc) / newBeads.length;
      let arc = 0; let tgtAngle = 0;
      for (let i = 0; i < newBeads.length; i++) {
        const d = newVisuals[i]; const center = arc + d / 2 + gap / 2;
        if (i === idx) { tgtAngle = -Math.PI / 2 + (center / CIRC) * 2 * Math.PI; }
        arc += d + gap;
      }
      const tgt = svgToScreen(CX + R * Math.cos(tgtAngle), CY + R * Math.sin(tgtAngle));
      const sz = Math.max(24, bead.size * newScale * 1.1);

setFlying({
        img: getImg(bead.id), size: sz,
        fx: ev?.clientX ?? window.innerWidth / 2, fy: ev?.clientY ?? window.innerHeight - 100,
        tx: tgt.x, ty: tgt.y,
      });

setTimeout(() => { setBeads(newBeads); if (isReplace) setSel(null); }, 300);
    }

function removeBead() {
      if (sel !== null) { setBeads(p => p.filter((_, i) => i !== sel)); setSel(null); }
    }

async function handleShopifyCheckout() {
      if (beads.length < 3) return;
      
      const itemsToAdd = {};
      beads.forEach(b => {
        
        if (itemsToAdd[b.id]) {
          itemsToAdd[b.id].quantity += 1;
        } else {
          itemsToAdd[b.id] = { id: b.id, quantity: 1, properties: { '_custom_bracelet': 'true' } };
        }
      });
      const itemsArray = Object.values(itemsToAdd);

try {
        const response = await fetch('/cart/add.js', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ items: itemsArray })
        });
        
        if (response.ok) {
          
          window.location.href = '/cart';
        } else {
          const err = await response.json();
          alert("Failed to add to cart: " + (err.description || err.message));
        }
      } catch (error) {
        console.error("Cart Error:", error);
        alert("Network error, please try again later.");
      }
    }

if (CATEGORIES.length === 0) {
      return (
        <div style={{ padding: 40, textAlign: "center", color: "#666", background: "#f9f9f9" }}>
          <h3>🎨 Bracelet Designer Not Configured</h3>
          <p>Please bind at least one Collection in the Shopify Theme Editor.</p>
        </div>
      );
    }

return (
      <div className="bd-container">
        {flying && <FlyingBead imgSrc={flying.img} fromX={flying.fx} fromY={flying.fy}
          toX={flying.tx} toY={flying.ty} size={flying.size} onDone={() => setFlying(null)} />}

{}
        <div className="bd-preview">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "16px 20px 10px" }}>
          <button className="premium-btn" onClick={() => setShowHelp(true)} style={{
            background: "linear-gradient(135deg, #e8e8e8, #d4d4d4)", color: "#444",
            border: "1px solid #fff", borderRadius: 24, padding: "8px 16px", fontSize: 13,
            fontWeight: 600, cursor: "pointer", boxShadow: "0 4px 12px rgba(0,0,0,.08)",
            textShadow: "0 1px 1px #fff"
          }}>✦ <span style={{ letterSpacing: "1px" }}>Instructions</span></button>

<button className="premium-btn" onClick={() => setShowSize(!showSize)} style={{
            background: "#fff", border: "none", borderRadius: 24,
            padding: "8px 18px", fontSize: 13, fontWeight: 500, cursor: "pointer", color: "#666",
            boxShadow: "0 2px 10px rgba(0,0,0,.04), 0 1px 3px rgba(0,0,0,.02)"
          }}>Wrist · <span style={{ fontWeight: 600 }}>{wrist}</span><span style={{ fontSize: 10, marginLeft: 2 }}>cm</span></button>

<div style={{
            background: "#fff", color: "#333",
            border: "1px solid #f0f0f0",
            borderRadius: 24, padding: "8px 18px", fontSize: 13, fontWeight: 600,
            boxShadow: "0 2px 10px rgba(0,0,0,.04), 0 1px 3px rgba(0,0,0,.02)"
          }}>Total: <span style={{ fontFamily: "'DM Sans'", fontSize: 15, fontWeight: 700, marginLeft: 2 }}>${total.toFixed(2)}</span></div>
        </div>

{}
        {showSize && (
          <div style={{
            margin: "0 16px 8px", background: "#fff", borderRadius: 14, padding: "14px 16px",
            boxShadow: "0 4px 20px rgba(0,0,0,.06)", border: "1px solid #e0e0e0"
          }}>
            <div style={{ fontSize: 11, color: "#888", marginBottom: 10, fontWeight: 600, letterSpacing: ".8px" }}>Wrist Size (CM)</div>
            <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
              {WRIST_SIZES.map(s => (
                <button key={s} onClick={() => { setWrist(s); setShowSize(false); }} style={{
                  width: 42, height: 42, borderRadius: "50%",
                  border: s === wrist ? "2px solid #666" : "1px solid #e5e5e5",
                  background: s === wrist ? "linear-gradient(135deg,#666,#444)" : "#f8f8f8",
                  color: s === wrist ? "#fff" : "#777", fontSize: 13,
                  fontWeight: s === wrist ? 700 : 400, cursor: "pointer",
                }}>{s}</button>
              ))}
            </div>
            <div style={{ marginTop: 10, fontSize: 10, color: "#aaa", lineHeight: "1.6" }}>
              8mm ≈ {calcMaxBeads(wrist, 8)} beads · 10mm ≈ {calcMaxBeads(wrist, 10)} beads · 12mm ≈ {calcMaxBeads(wrist, 12)} beads
            </div>
          </div>
        )}

{}
        <div style={{ margin: "12px 0 0", padding: "8px", position: "relative" }}>
          <svg ref={svgRef} viewBox={`0 0 ${S} ${S}`} width="100%" style={{ display: "block" }}>
            <defs>
              <filter id="bSh" x="-50%" y="-40%" width="200%" height="220%">
                <feDropShadow dx="1" dy="4" stdDeviation="5" floodColor="#000" floodOpacity=".15" result="softSh" />
                <feDropShadow dx="0.5" dy="2" stdDeviation="1.5" floodColor="#000" floodOpacity=".1" />
              </filter>
              <filter id="ropeSh"><feDropShadow dx="0" dy="1.5" stdDeviation="2.5" floodOpacity=".08" /></filter>
              {positions.map((p, i) => <clipPath key={i} id={`bc${i}`}><circle cx={p.x} cy={p.y} r={p.r} /></clipPath>)}
              <linearGradient id="ropeGrad" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0" stopColor="#f5f5f5" />
                <stop offset="0.3" stopColor="#e8e8e8" />
                <stop offset="0.7" stopColor="#d0d0d0" />
                <stop offset="1" stopColor="#c0c0c0" />
              </linearGradient>
              <radialGradient id="beadEdge" cx=".5" cy=".5" r=".5">
                <stop offset=".7" stopColor="transparent" />
                <stop offset=".88" stopColor="rgba(0,0,0,.06)" />
                <stop offset=".96" stopColor="rgba(0,0,0,.12)" />
                <stop offset="1" stopColor="rgba(0,0,0,.18)" />
              </radialGradient>
              <radialGradient id="beadHighlight" cx=".35" cy=".3" r=".4">
                <stop offset="0" stopColor="rgba(255,255,255,.5)" />
                <stop offset=".5" stopColor="rgba(255,255,255,.15)" />
                <stop offset="1" stopColor="transparent" />
              </radialGradient>
            </defs>
            <circle cx={CX} cy={CY} r={R} fill="none" stroke="rgba(0,0,0,.04)" strokeWidth="8" filter="url(#ropeSh)" />
            <circle cx={CX} cy={CY} r={R} fill="none" stroke="url(#ropeGrad)" strokeWidth="5.5" />
            <circle cx={CX} cy={CY} r={R - 0.8} fill="none" stroke="rgba(255,255,255,.6)" strokeWidth="1.2" />
            <text x={CX} y={CY - 4} textAnchor="middle" fontSize="14" fill="rgba(50,50,50,.8)" fontWeight="700">Design Your</text>
            <text x={CX} y={CY + 12} textAnchor="middle" fontSize="10" fill="rgba(50,50,50,.6)" fontWeight="600">Bracelet</text>
            
            {beads.map((bead, i) => {
              const p = positions[i]; if (!p) return null;
              const d = p.r * 2; const zoom = 1.35; const imgSize = d * zoom; const imgOffset = (imgSize - d) / 2;
              const rotDeg = (p.angle + Math.PI / 2) * (180 / Math.PI);
              
              const isDrag = drag && drag.idx === i;
              let gTransform = "";
              if (isDrag) {
                const svgEl = svgRef.current;
                if (svgEl) {
                  const rect = svgEl.getBoundingClientRect();
                  const dx = (drag.curX - drag.startX) * (S / rect.width);
                  const dy = (drag.curY - drag.startY) * (S / rect.height);
                  gTransform = `translate(${dx}, ${dy})`;
                }
              }

return (
                <g key={bead.uid} style={{ cursor: isDrag ? "grabbing" : "grab", touchAction: "none" }} filter="url(#bSh)"
                  transform={gTransform || undefined}
                  onDragStart={e => e.preventDefault()}
                  onMouseDown={e => e.preventDefault()}
                  onPointerDown={e => {
                    e.preventDefault();
                    e.target.setPointerCapture(e.pointerId);
                    setDrag({ idx: i, startX: e.clientX, startY: e.clientY, curX: e.clientX, curY: e.clientY });
                  }}>
                  {sel === i && !isDrag && (
                    <circle cx={p.x} cy={p.y} r={p.r + 4} fill="none"
                      stroke="#666" strokeWidth="2" opacity=".7" strokeDasharray="5 3"
                      style={{ animation: "dash-spin 2s linear infinite" }} />
                  )}
                  {}
                  <image href={getImg(bead.id)} style={{ pointerEvents: 'none' }}
                    x={p.x - p.r - imgOffset} y={p.y - p.r - imgOffset}
                    width={imgSize} height={imgSize} clipPath={`url(#bc${i})`}
                    preserveAspectRatio="xMidYMid slice"
                    transform={`rotate(${rotDeg}, ${p.x}, ${p.y})`} />
                  <circle cx={p.x} cy={p.y} r={p.r} fill="url(#beadEdge)" />
                  <circle cx={p.x} cy={p.y} r={p.r} fill="url(#beadHighlight)" />
                </g>
              );
            })}
            
            {beads.length >= 2 && positions.length >= 2 && (() => {
              const segs = [];
              for (let i = 0; i < positions.length; i++) {
                const cur = positions[i]; const nxt = positions[(i + 1) % positions.length];
                let a1 = cur.angle + Math.asin(Math.min(1, cur.r / R * 0.85));
                let a2 = nxt.angle - Math.asin(Math.min(1, nxt.r / R * 0.85));
                if (i === positions.length - 1) a2 += 2 * Math.PI;
                if (a2 - a1 < 0.02) continue;
                const x1 = CX + R * Math.cos(a1); const y1 = CY + R * Math.sin(a1);
                const x2 = CX + R * Math.cos(a2); const y2 = CY + R * Math.sin(a2);
                const large = (a2 - a1) > Math.PI ? 1 : 0;
                segs.push(<path key={`rope-${i}`} d={`M${x1},${y1} A${R},${R} 0 ${large} 1 ${x2},${y2}`} fill="none" stroke="url(#ropeGrad)" strokeWidth="4.5" strokeLinecap="round" />);
              }
              return segs;
            })()}
          </svg>
        </div>

{}
        <div style={{ padding: "16px 24px 4px" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
            <div style={{ flex: 1, height: 4, background: "#e0e0e0", borderRadius: 2, overflow: "hidden" }}>
              <div className="capacity-bar-fill" style={{
                width: `${fillPct}%`, height: "100%", borderRadius: 2,
                background: isFull ? "linear-gradient(90deg, #e56d53, #d34a40)" : fillPct > 80 ? "linear-gradient(90deg, #888, #666)" : "linear-gradient(90deg, #999, #777)",
                boxShadow: "0 1px 3px rgba(0,0,0,0.1)"
              }} />
            </div>
            <span style={{ fontSize: 11, color: "#999", minWidth: 36, textAlign: "right", fontWeight: 500 }}>
              {isFull ? "MAX" : `${Math.round(fillPct)}%`}
            </span>
          </div>
        </div>
        <div style={{ textAlign: "center", padding: "4px 16px 6px", fontSize: 12, color: "#999", fontStyle: "italic", letterSpacing: "0.5px" }}>{statusText}</div>

{}
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "8px 20px 16px" }}>
          <div style={{ display: "flex", gap: 10 }}>
            <button className="premium-btn" onClick={() => { setBeads([]); setSel(null); }} style={{
              background: "#f8f8f8", border: "1px solid #e0e0e0", borderRadius: 16,
              padding: "10px 18px", fontSize: 13, fontWeight: 500, cursor: "pointer", color: "#777",
            }}>🗑 Clear</button>
            {sel !== null && <button className="premium-btn" onClick={removeBead} style={{
              background: "#fff5f3", border: "1px solid #ffdcd6", borderRadius: 16,
              padding: "10px 18px", fontSize: 13, fontWeight: 500, cursor: "pointer", color: "#d65d4b",
            }}>✕ Remove Selected</button>}
          </div>
          <button className="premium-btn" disabled={beads.length < 3}
            onClick={handleShopifyCheckout}
            style={{
              background: beads.length >= 3 ? "linear-gradient(135deg, #333, #111)" : "#e0e0e0",
              color: beads.length >= 3 ? "#fff" : "#999", border: "none", borderRadius: 16,
              padding: "12px 26px", fontSize: 14, fontWeight: 600, letterSpacing: "1px",
              cursor: beads.length >= 3 ? "pointer" : "not-allowed",
              boxShadow: beads.length >= 3 ? "0 6px 20px rgba(0,0,0,.2)" : "none",
            }}>✓ Checkout</button>
          </div>
        </div>

{}
        <div className="bd-selector">
          <div className="bd-selector-drag-handle" style={{ width: 40, height: 5, background: "#e0e0e0", borderRadius: 3, margin: "14px auto 12px", flexShrink: 0 }} />
          <div style={{ margin: "0 16px 16px", background: "#f8f8f8", borderRadius: 16, display: "flex", alignItems: "center", padding: "8px 12px", flexShrink: 0 }}>
            <span style={{ color: "#aaa", fontSize: 15 }}>🔍</span>
            <span style={{ color: "#aaa", fontSize: 12 }}>{curCat ? curCat.nameZh : ""}...</span>
          </div>

<div style={{ display: "flex", minHeight: 260 }}>
            {}
            <div style={{ width: 74, borderRight: "1px solid #f0f0f0", overflowY: "auto", flexShrink: 0, paddingBottom: 60, background: "#fff" }}>
              {CATEGORIES.map(c => (
                <button key={c.id} onClick={() => setCat(c.id)} style={{
                  display: "block", width: "100%", padding: "14px 4px", border: "none",
                  background: cat === c.id ? "#fafafa" : "transparent",
                  borderLeft: cat === c.id ? "3px solid #666" : "3px solid transparent",
                  cursor: "pointer", textAlign: "center", transition: "all 0.2s"
                }}>
                  <div style={{ fontSize: 11, fontWeight: cat === c.id ? 700 : 500, color: cat === c.id ? "#333" : "#888", lineHeight: "1.2" }}>
                    {c.nameZh}
                  </div>
                </button>
              ))}
            </div>

<div style={{ flex: 1, padding: "8px 12px 60px", overflowY: "auto", background: "#fcfcfc" }}>
              <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 10 }}>
                {curCat?.beads.map(bead => {
                  const canAdd = !isFull || (sel !== null && sel < beads.length);
                  return (
                    <button key={bead.id} className="cat-btn"
                      onClick={e => canAdd && addBead(bead, e.nativeEvent)}
                      style={{
                        background: "#fff", border: "1px solid #f0f0f0", borderRadius: 16, padding: "12px 6px 10px", 
                        cursor: canAdd ? "pointer" : "not-allowed", textAlign: "center", opacity: canAdd ? 1 : 0.5,
                        boxShadow: "0 4px 16px rgba(0,0,0,.04), 0 1px 4px rgba(0,0,0,.02)"
                      }}>
                      <div style={{
                        width: 56, height: 56, margin: "0 auto 8px", borderRadius: "50%",
                        overflow: "hidden", boxShadow: "0 6px 16px rgba(0,0,0,.15), inset 0 2px 4px rgba(255,255,255,0.5)"
                      }}>
                        <img src={getImg(bead.id)} alt={bead.nameZh} style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
                      </div>
                      <div style={{ fontSize: 11, color: "#333", fontWeight: 600, lineHeight: "1.2", marginBottom: 2, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
                        {bead.nameZh}
                      </div>
                      <div style={{ fontSize: 9.5, color: "#999" }}>{bead.size}mm</div>
                      <div style={{ fontSize: 13, color: "#555", fontWeight: 700, marginTop: 4 }}>¥{bead.price}</div>
                    </button>
                  );
                })}
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }

function mountApp() {
    const rootElements = document.querySelectorAll(".bracelet-designer-root-mount");
    rootElements.forEach(rootElement => {
      if (rootElement.dataset.mounted) return;
      rootElement.dataset.mounted = "true";
      const root = ReactDOM.createRoot(rootElement);
      root.render(<BraceletDesigner />);
    });
  }
  mountApp();

What are you looking for?

Design Your Own Bracelet

Your Cart (0)

Add Special instructions for your order

Coupon Code