Advanced

Tutor model

i62 💰:9.4

i52 💰:7.9

🏆 i67 💰:62.5

i70 💰:125.0

i68 💰:125.0

🏆 i66 💰:75.0

i65 💰:125.0

i63 💰:62.5

i61 💰:75.0

i60 💰:9.4

i60 💰:37.5

i58 💰:62.5

i57 💰:22.5

i57 💰:37.5

i56 💰:45.0

⚡ i55 💰:11.25

i55 💰:37.5

i54 💰:62.5

i52 💰:35.0

i51 💰:37.5

i49 💰:15.0

i49 💰:62.5

i48 💰:11.3

i47 💰:7.5

i44 💰:25.0

i43 💰:37.5

i42 💰:187.5

i40 💰:5.0

i39 💰:100.0

i38 💰:37.5

i37 💰:11.0

i36 💰:187.5

i34 💰:12.5

i33 💰:37.5

i30 💰:1.0

i29 💰:1.5

i28 💰:150.0

i23 💰:20.0

i20 💰:4.0

i18 💰:1.0

i16 💰:25.0

i13 💰:1.5

Keep session private

What would you like to learn?

Override for the tutor's lesson content generation calls. Auto uses the system default (Claude Sonnet 5 for lesson text, Opus 5 for diagrams).

Lesson generation model

System default

i58 💰:18.8

i31 💰:11.0

i25 💰:31.3

Tutoring abilities

Imagine spending three hours sewing a phone pouch, only for the strap to snap the first time you use it!

Sharing your **textile** plans—designs made with fabrics, threads, and fasteners—before you cut or sew helps you spot problems early.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <title>Sharing and Improving Textile Ideas</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      user-select: none;
    }
    body {
      background: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 12px;
      overflow-x: hidden;
    }

    /* Step Navigation Bar */
    .nav-bar {
      display: flex;
      gap: 8px;
      width: 100%;
      max-width: 440px;
      justify-content: center;
    }
    .nav-btn {
      flex: 1;
      padding: 8px 6px;
      background: #ffffff;
      border: 2px solid #e6e6e6;
      border-radius: 10px;
      font-size: 14px;
      font-weight: 600;
      color: #6b7280;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      transition: all 0.3s ease;
    }
    .nav-btn.active {
      border-color: #22b7ff;
      background: #e8f7ff;
      color: #0284c7;
      box-shadow: 0 2px 8px rgba(34, 183, 255, 0.2);
    }

    /* Main Stage Workspace */
    .workspace {
      position: relative;
      width: 100%;
      max-width: 440px;
      height: 240px;
      background: #ffffff;
      border-radius: 16px;
      border: 1px solid #e5e7eb;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    /* Pattern Canvas */
    .pattern-card {
      position: relative;
      width: 200px;
      height: 190px;
      background: #fff8eb;
      border: 2px dashed #f59e0b;
      border-radius: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 12px;
      transition: all 0.4s ease;
    }

    /* Pocket Pattern Shape */
    .pocket-shape {
      width: 120px;
      height: 110px;
      background: #60a5fa;
      clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%);
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.4s ease;
      box-shadow: inset 0 0 0 3px rgba(255,255,255,0.4);
    }

    /* Button Fastener */
    .fastener {
      width: 28px;
      height: 28px;
      background: #d97706;
      border-radius: 50%;
      border: 3px solid #fef3c7;
      position: absolute;
      transition: all 0.4s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 10px;
      color: #ffffff;
    }

    /* Seam Stitching Line */
    .stitch-line {
      position: absolute;
      top: 6px;
      left: 10px;
      right: 10px;
      height: 0;
      border-top: 2px dashed #ffffff;
      opacity: 0.8;
    }

    /* Visual Feedback Overlays */
    .callout {
      position: absolute;
      padding: 6px 10px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 5px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      transition: all 0.3s ease;
      z-index: 10;
    }
    .callout-warning {
      background: #fef2f2;
      border: 1.5px solid #ef4444;
      color: #b91c1c;
      top: 18px;
      right: 14px;
    }
    .callout-success {
      background: #ecfdf5;
      border: 1.5px solid #10b981;
      color: #047857;
      bottom: 18px;
      right: 18px;
    }

    .tool-badge {
      position: absolute;
      font-size: 26px;
      transition: all 0.4s ease;
      z-index: 5;
    }

    /* Step States */
    /* State 1: Plan */
    .state-1 .fastener {
      top: -8px; /* Bad alignment - too high! */
    }
    .state-1 .callout,
    .state-1 .tool-badge {
      opacity: 0;
      transform: scale(0.8);
      pointer-events: none;
    }

    /* State 2: Share */
    .state-2 .fastener {
      top: -8px;
      animation: pulse-ring 1.5s infinite ease-in-out;
    }
    .state-2 .callout-warning {
      opacity: 1;
      transform: scale(1);
    }
    .state-2 .callout-success {
      opacity: 0;
      transform: scale(0.8);
      pointer-events: none;
    }
    .state-2 .tool-badge {
      left: 20px;
      top: 20px;
      opacity: 1;
      transform: scale(1);
    }

    /* State 3: Improve */
    .state-3 .pocket-shape {
      background: #3b82f6;
      width: 130px;
      height: 120px;
    }
    .state-3 .fastener {
      top: 24px; /* Correctly aligned inside pocket */
      background: #059669;
      border-color: #a7f3d0;
    }
    .state-3 .callout-warning {
      opacity: 0;
      transform: scale(0.8);
      pointer-events: none;
    }
    .state-3 .callout-success {
      opacity: 1;
      transform: scale(1);
    }
    .state-3 .tool-badge {
      left: 24px;
      bottom: 24px;
      opacity: 1;
      transform: scale(1.1) rotate(-15deg);
    }

    @keyframes pulse-ring {
      0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
      50% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
    }

    /* Footer Controls */
    .bottom-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      width: 100%;
    }
    .ctrl-btn {
      background: #ffffff;
      border: 1px solid #d1d5db;
      border-radius: 8px;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 600;
      color: #374151;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .ctrl-btn:hover {
      background: #f3f4f6;
    }
    .indicator-dots {
      display: flex;
      gap: 6px;
    }
    .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #d1d5db;
      cursor: pointer;
      transition: all 0.3s;
    }
    .dot.active {
      background: #22b7ff;
      width: 18px;
      border-radius: 4px;
    }
  </style>
</head>
<body>

  
  <div class="nav-bar">
    <button class="nav-btn active" id="btn-0" onclick="setStep(0)">
      <span>1.</span> Plan
    </button>
    <button class="nav-btn" id="btn-1" onclick="setStep(1)">
      <span>2.</span> Share
    </button>
    <button class="nav-btn" id="btn-2" onclick="setStep(2)">
      <span>3.</span> Improve
    </button>
  </div>

  
  <div class="workspace state-1" id="workspace">
    
    <div class="tool-badge" id="tool-icon">💬</div>

    
    <div class="pattern-card">
      <div style="font-size: 11px; font-weight: bold; color: #b45309; letter-spacing: 0.5px;">PATTERN</div>
      
      
      <div class="pocket-shape">
        <div class="stitch-line"></div>
        <div class="fastener">⚬</div>
      </div>

      <div style="font-size: 11px; color: #78716c;">Fabric</div>
    </div>

    
    <div class="callout callout-warning">
      <span>⚠️ Fastener off edge!</span>
    </div>

    <div class="callout callout-success">
      <span>✂️ Ready to cut!</span>
    </div>
  </div>

  
  <div class="bottom-bar">
    <button class="ctrl-btn" id="playBtn" onclick="togglePlay()">
      <span id="playIcon">⏸</span> Auto
    </button>
    <div class="indicator-dots">
      <div class="dot active" onclick="setStep(0)"></div>
      <div class="dot" onclick="setStep(1)"></div>
      <div class="dot" onclick="setStep(2)"></div>
    </div>
  </div>

  <script>
    let currentStep = 0;
    let playing = true;
    let timer = null;

    const workspace = document.getElementById('workspace');
    const playIcon = document.getElementById('playIcon');
    const toolIcon = document.getElementById('tool-icon');

    function updateView() {
      // Update workspace class
      workspace.className = 'workspace state-' + (currentStep + 1);

      // Update nav buttons
      for (let i = 0; i < 3; i++) {
        document.getElementById('btn-' + i).classList.toggle('active', i === currentStep);
        document.querySelectorAll('.dot')[i].classList.toggle('active', i === currentStep);
      }

      // Update tool icon
      if (currentStep === 1) {
        toolIcon.textContent = '🔍';
      } else if (currentStep === 2) {
        toolIcon.textContent = '✨';
      } else {
        toolIcon.textContent = '📐';
      }
    }

    function setStep(index) {
      currentStep = index;
      updateView();
      if (playing) {
        resetTimer();
      }
    }

    function nextStep() {
      currentStep = (currentStep + 1) % 3;
      updateView();
    }

    function resetTimer() {
      clearInterval(timer);
      if (playing) {
        timer = setInterval(nextStep, 3200);
      }
    }

    function togglePlay() {
      playing = !playing;
      playIcon.textContent = playing ? '⏸' : '▶';
      if (playing) {
        nextStep();
        resetTimer();
      } else {
        clearInterval(timer);
      }
    }

    // Initialize stepper
    resetTimer();
  </script>
</body>
</html>

How can you share ideas and talk about changes without hurting anyone's feelings?

Designers use a simple three-step method to discuss textile projects: **Notice**, **Wonder**, and **Suggest**.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <title>Sharing and Improving Textile Ideas</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      color: #1e2945;
      background: transparent;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
    }
    .stepper-nav {
      display: flex;
      gap: 8px;
      width: 100%;
      max-width: 440px;
      justify-content: center;
      margin-bottom: 8px;
    }
    .step-btn {
      flex: 1;
      padding: 8px 4px;
      font-size: 14px;
      font-weight: 700;
      background: #ffffff;
      border: 2px solid #e6e6e6;
      border-radius: 10px;
      color: #6b7280;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      transition: all 0.25s ease;
    }
    .step-btn.active {
      border-color: #22b7ff;
      background: #eef9ff;
      color: #0284c7;
      box-shadow: 0 2px 8px rgba(34, 183, 255, 0.25);
    }
    .step-btn .icon {
      font-size: 20px;
    }

    .stage-area {
      position: relative;
      width: 100%;
      max-width: 440px;
      height: 230px;
      background: #ffffff;
      border-radius: 16px;
      border: 1px solid #e6e6e6;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Fabric Display */
    .textile-canvas {
      width: 170px;
      height: 170px;
      background: #fdf2f8;
      border: 3px dashed #f472b6;
      border-radius: 16px;
      position: relative;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      gap: 6px;
      padding: 6px;
      box-shadow: inset 0 0 10px rgba(244, 114, 182, 0.15);
    }
    .patch {
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
    }
    .patch-1 { background: #fed7aa; border: 2px dotted #f97316; }
    .patch-2 { background: #bbf7d0; border: 2px dotted #22c55e; }
    .patch-3 { background: #bae6fd; border: 2px dotted #0284c7; }
    .patch-4 { background: #fef08a; border: 2px dotted #eab308; }

    /* Step Overlays */
    .overlay {
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.35s ease;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 12px;
    }
    .overlay.active {
      opacity: 1;
    }

    .lens-box {
      position: absolute;
      top: 25px;
      left: 35px;
      font-size: 42px;
      filter: drop-shadow(0 4px 6px rgba(0,0,0,0.15));
      animation: inspect 3s ease-in-out infinite;
    }
    @keyframes inspect {
      0%, 100% { transform: translate(0, 0); }
      50% { transform: translate(45px, 35px); }
    }

    .thought-box {
      position: absolute;
      top: 15px;
      right: 30px;
      background: #ffffff;
      border: 2px solid #a855f7;
      border-radius: 20px;
      padding: 6px 14px;
      font-size: 22px;
      box-shadow: 0 4px 12px rgba(168, 85, 247, 0.2);
    }

    .suggestion-item {
      position: absolute;
      bottom: 25px;
      right: 35px;
      background: #fef08a;
      border: 2px solid #eab308;
      border-radius: 50%;
      width: 48px;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      box-shadow: 0 4px 10px rgba(234, 179, 8, 0.3);
      animation: pulse 2s ease-in-out infinite;
    }
    @keyframes pulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.15); }
    }

    .caption-pill {
      background: #1e2945;
      color: #ffffff;
      font-size: 14px;
      font-weight: 600;
      padding: 5px 14px;
      border-radius: 20px;
      align-self: center;
      margin-top: auto;
    }

    .controls {
      display: flex;
      gap: 12px;
      align-items: center;
      margin-top: 10px;
    }
    .play-btn {
      background: #ffffff;
      border: 1px solid #d1d5db;
      border-radius: 20px;
      padding: 4px 14px;
      font-size: 13px;
      font-weight: 600;
      color: #4b5563;
      cursor: pointer;
    }
    .dots {
      display: flex;
      gap: 6px;
    }
    .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #d1d5db;
      cursor: pointer;
      transition: background 0.25s ease;
    }
    .dot.active {
      background: #22b7ff;
      transform: scale(1.2);
    }
  </style>
</head>
<body>

  
  <div class="stepper-nav" role="tablist">
    <button class="step-btn active" data-step="0" role="tab" aria-selected="true">
      <span class="icon">🔍</span>
      <span>1. Notice</span>
    </button>
    <button class="step-btn" data-step="1" role="tab" aria-selected="false">
      <span class="icon">💭</span>
      <span>2. Wonder</span>
    </button>
    <button class="step-btn" data-step="2" role="tab" aria-selected="false">
      <span class="icon">💡</span>
      <span>3. Suggest</span>
    </button>
  </div>

  
  <div class="stage-area">
    <div class="textile-canvas">
      <div class="patch patch-1">🌸</div>
      <div class="patch patch-2">🧵</div>
      <div class="patch patch-3">⭐</div>
      <div class="patch patch-4">🎀</div>
    </div>

    
    <div class="overlay active" id="overlay-0">
      <div class="lens-box">🔎</div>
      <div class="caption-pill">Look closely</div>
    </div>

    
    <div class="overlay" id="overlay-1">
      <div class="thought-box">❓💭</div>
      <div class="caption-pill">Ask questions</div>
    </div>

    
    <div class="overlay" id="overlay-2">
      <div class="suggestion-item">✨</div>
      <div class="caption-pill">Share ideas</div>
    </div>
  </div>

  
  <div class="controls">
    <div class="dots">
      <div class="dot active" data-step="0"></div>
      <div class="dot" data-step="1"></div>
      <div class="dot" data-step="2"></div>
    </div>
    <button class="play-btn" id="playToggle">⏸ Pause</button>
  </div>

  <script>
    let currentStep = 0;
    let isPlaying = true;
    let timer = null;

    const stepBtns = document.querySelectorAll('.step-btn');
    const overlays = [
      document.getElementById('overlay-0'),
      document.getElementById('overlay-1'),
      document.getElementById('overlay-2')
    ];
    const dots = document.querySelectorAll('.dot');
    const playToggle = document.getElementById('playToggle');

    function setStep(index) {
      currentStep = index;
      stepBtns.forEach((btn, i) => {
        const active = i === index;
        btn.classList.toggle('active', active);
        btn.setAttribute('aria-selected', active);
      });
      overlays.forEach((ov, i) => {
        ov.classList.toggle('active', i === index);
      });
      dots.forEach((dot, i) => {
        dot.classList.toggle('active', i === index);
      });
    }

    function nextStep() {
      setStep((currentStep + 1) % 3);
    }

    function startAutoPlay() {
      if (timer) clearInterval(timer);
      timer = setInterval(nextStep, 3200);
      isPlaying = true;
      playToggle.textContent = '⏸ Pause';
    }

    function stopAutoPlay() {
      if (timer) clearInterval(timer);
      isPlaying = false;
      playToggle.textContent = '▶ Play';
    }

    stepBtns.forEach((btn) => {
      btn.addEventListener('click', () => {
        const step = parseInt(btn.dataset.step, 10);
        setStep(step);
        stopAutoPlay();
      });
    });

    dots.forEach((dot) => {
      dot.addEventListener('click', () => {
        const step = parseInt(dot.dataset.step, 10);
        setStep(step);
        stopAutoPlay();
      });
    });

    playToggle.addEventListener('click', () => {
      if (isPlaying) {
        stopAutoPlay();
      } else {
        startAutoPlay();
      }
    });

    startAutoPlay();
  </script>
</body>
</html>

Another helpful framework is **Two Stars and a Wish**, which keeps feedback kind and **constructive** by separating the work from the person.

You highlight two specific strengths of the textile project (**Two Stars**) before offering one thoughtful idea to improve it (a Wish).

Giving **kind and constructive feedback** helps improve a project without hurting feelings.

Using a framework like **Two Stars and a Wish** highlights two strengths before offering one helpful change. This separates the work from the person so creators feel supported rather than criticized.

What turns an ordinary suggestion into an improvement that truly convinces your team?

A great improvement always includes a **clear explanation** that links your idea to how the item works.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <title>Improving Textile Ideas</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      -webkit-tap-highlight-color: transparent;
    }

    body {
      background-color: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 16px;
      overflow: hidden;
    }

    .display-area {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      max-width: 420px;
      flex: 1;
      position: relative;
    }

    .svg-container {
      width: 100%;
      max-width: 260px;
      height: 200px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    svg {
      width: 100%;
      height: 100%;
    }

    .explanation-pill {
      margin-top: 12px;
      display: flex;
      align-items: center;
      gap: 8px;
      background: #ffffff;
      padding: 8px 16px;
      border-radius: 24px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.06);
      font-size: 16px;
      font-weight: 600;
      color: #1e2945;
      min-height: 44px;
    }

    .feature-part {
      transition: opacity 0.3s ease;
      opacity: 0;
    }

    .feature-part.visible {
      opacity: 1;
    }

    .controls {
      display: flex;
      gap: 8px;
      width: 100%;
      max-width: 420px;
      justify-content: center;
      margin-top: 12px;
    }

    .btn-tab {
      flex: 1;
      padding: 10px 6px;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      font-size: 14px;
      font-weight: 600;
      color: #1e2945;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      transition: background-color 0.2s ease, border-color 0.2s ease;
    }

    .btn-tab .icon {
      font-size: 20px;
    }

    .btn-tab.active {
      border-color: #22b7ff;
      background: #e0f4ff;
    }
  </style>
</head>
<body>

  <div class="display-area">
    <div class="svg-container">
      <svg viewBox="0 0 200 170">
        
        <g fill="#3b82f6" stroke="#1d4ed8" stroke-width="3" stroke-linejoin="round">
          
          <polygon points="65,55 20,95 38,110 70,80" />
          
          <polygon points="135,55 180,95 162,110 130,80" />
          
          <polygon points="65,50 135,50 145,150 55,150" />
          
          <line x1="100" y1="50" x2="100" y2="150" stroke="#1e2945" stroke-width="2" />
          
          <polygon points="65,50 100,68 135,50 100,42" fill="#2563eb" />
        </g>

        
        <g id="feat-hood" class="feature-part">
          <path d="M 60,52 C 55,5 145,5 140,52 Z" fill="#60a5fa" stroke="#1d4ed8" stroke-width="3" />
          <path d="M 75,50 C 75,20 125,20 125,50 Z" fill="#93c5fd" opacity="0.6" />
        </g>

        
        <g id="feat-pocket" class="feature-part">
          <rect x="110" y="95" width="26" height="30" rx="4" fill="#fbbf24" stroke="#d97706" stroke-width="2" />
          <line x1="112" y1="102" x2="134" y2="102" stroke="#78350f" stroke-width="2" />
          <circle cx="123" cy="115" r="3" fill="#d97706" />
        </g>

        
        <g id="feat-glow" class="feature-part">
          
          <rect x="57" y="130" width="86" height="8" fill="#facc15" stroke="#ca8a04" stroke-width="1.5" />
          
          <line x1="28" y1="102" x2="40" y2="92" stroke="#facc15" stroke-width="6" stroke-linecap="round" />
          <line x1="172" y1="102" x2="160" y2="92" stroke="#facc15" stroke-width="6" stroke-linecap="round" />
        </g>
      </svg>
    </div>

    
    <div class="explanation-pill" id="explainPill">
      <span id="ideaIcon">🌧️</span>
      <span>→</span>
      <span id="reasonText">Keeps dry</span>
    </div>
  </div>

  
  <div class="controls">
    <button class="btn-tab active" id="btn-0">
      <span class="icon">🌧️</span>
      <span>Hood</span>
    </button>
    <button class="btn-tab" id="btn-1">
      <span class="icon">🎒</span>
      <span>Pocket</span>
    </button>
    <button class="btn-tab" id="btn-2">
      <span class="icon">✨</span>
      <span>Reflector</span>
    </button>
  </div>

  <script>
    const improvements = [
      { id: 'feat-hood', icon: '🌧️', text: 'Keeps dry' },
      { id: 'feat-pocket', icon: '🔑', text: 'Holds items' },
      { id: 'feat-glow', icon: '🌙', text: 'Seen in dark' }
    ];

    let current = 0;
    const buttons = [
      document.getElementById('btn-0'),
      document.getElementById('btn-1'),
      document.getElementById('btn-2')
    ];

    const ideaIcon = document.getElementById('ideaIcon');
    const reasonText = document.getElementById('reasonText');

    function setImprovement(index) {
      current = index;
      improvements.forEach((imp, i) => {
        const el = document.getElementById(imp.id);
        if (i === index) {
          el.classList.add('visible');
          buttons[i].classList.add('active');
        } else {
          el.classList.remove('visible');
          buttons[i].classList.remove('active');
        }
      });

      ideaIcon.textContent = improvements[index].icon;
      reasonText.textContent = improvements[index].text;
    }

    buttons.forEach((btn, idx) => {
      btn.addEventListener('click', () => setImprovement(idx));
    });

    // Initialize first state
    setImprovement(0);
  </script>
</body>
</html>

Let's look at how two designers debate different choices for the same project.

Mia wants to make a reusable snack bag using thin cotton fabric sealed with craft glue.

Leo debates her choice: 'I suggest using nylon fabric with a hook-and-loop closure **because** snacks can leak moisture, and craft glue dissolves when washed.'

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 12px;
      user-select: none;
    }

    /* Interactive controls */
    .controls {
      display: flex;
      gap: 10px;
      margin-bottom: 16px;
      width: 100%;
      max-width: 420px;
    }

    .btn {
      flex: 1;
      padding: 10px 14px;
      border: 2px solid transparent;
      border-radius: 12px;
      background: #ffffff;
      color: #6b7280;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
      transition: background 0.2s, color 0.2s, border-color 0.2s;
    }

    .btn:active {
      opacity: 0.8;
    }

    .btn.active {
      background: #22b7ff;
      color: #ffffff;
      border-color: #0ea5e9;
    }

    /* Simulation display area */
    .stage {
      position: relative;
      width: 100%;
      max-width: 420px;
      height: 240px;
      background: #ffffff;
      border-radius: 16px;
      border: 1px solid #e6e6e6;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    /* Water animation */
    .water-spray {
      position: absolute;
      top: 12px;
      display: flex;
      gap: 16px;
      font-size: 22px;
      opacity: 0.9;
      animation: dropFall 1.5s ease-in-out infinite;
    }

    @keyframes dropFall {
      0% { transform: translateY(-10px); opacity: 0; }
      40% { opacity: 1; }
      100% { transform: translateY(35px); opacity: 0; }
    }

    /* Pouch representation */
    .pouch {
      width: 130px;
      height: 110px;
      border-radius: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      transition: background 0.4s ease, border-color 0.4s ease, transform 0.4s ease;
      margin-top: 18px;
    }

    .pouch-icon {
      font-size: 40px;
      transition: transform 0.3s ease;
    }

    /* State 1: Glue + Cotton */
    .state-glue .pouch {
      background: #fed7aa;
      border: 3px dashed #f97316;
      transform: rotate(4deg);
    }

    /* State 2: Nylon + Hook-loop */
    .state-nylon .pouch {
      background: #bae6fd;
      border: 3px solid #0284c7;
      box-shadow: 0 4px 12px rgba(34, 183, 255, 0.25);
    }

    /* Badge result */
    .result-badge {
      margin-top: 14px;
      padding: 6px 16px;
      border-radius: 20px;
      font-size: 15px;
      font-weight: bold;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: all 0.3s ease;
    }

    .state-glue .result-badge {
      background: #fee2e2;
      color: #dc2626;
    }

    .state-nylon .result-badge {
      background: #dcfce7;
      color: #16a34a;
    }

    /* Closure icon badge */
    .closure-tag {
      position: absolute;
      top: -12px;
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 8px;
      padding: 2px 8px;
      font-size: 13px;
      font-weight: 600;
      color: #4b5563;
    }
  </style>
</head>
<body>

  
  <div class="controls">
    <button class="btn active" id="btn1" onclick="showIdea(1)">
      🧴 Craft Glue
    </button>
    <button class="btn" id="btn2" onclick="showIdea(2)">
      ✨ Nylon & Loop
    </button>
  </div>

  
  <div class="stage state-glue" id="testStage">
    <div class="water-spray">
      <span>💧</span>
      <span>💧</span>
      <span>💧</span>
    </div>

    <div class="pouch">
      <span class="closure-tag" id="closureTag">Glue</span>
      <span class="pouch-icon" id="snackIcon">🥪</span>
    </div>

    <div class="result-badge" id="resultLabel">
      Dissolves ❌
    </div>
  </div>

  <script>
    function showIdea(num) {
      const stage = document.getElementById('testStage');
      const btn1 = document.getElementById('btn1');
      const btn2 = document.getElementById('btn2');
      const closureTag = document.getElementById('closureTag');
      const resultLabel = document.getElementById('resultLabel');
      const snackIcon = document.getElementById('snackIcon');

      if (num === 1) {
        stage.className = 'stage state-glue';
        btn1.classList.add('active');
        btn2.classList.remove('active');
        closureTag.textContent = 'Glue';
        resultLabel.innerHTML = 'Dissolves ❌';
        snackIcon.textContent = '🥪💧';
      } else {
        stage.className = 'stage state-nylon';
        btn2.classList.add('active');
        btn1.classList.remove('active');
        closureTag.textContent = 'Hook & Loop';
        resultLabel.innerHTML = 'Waterproof ✔️';
        snackIcon.textContent = '🥪';
      }
    }
  </script>
</body>
</html>

Remember, debating ideas is never about proving someone wrong—it is about finding the best materials and techniques together.

Next time you look at a classmate's textile sketch, find one part you like, and use the word **because** to explain how to make it even stronger.

technology

Sharing and Improving Textile Ideas. Learners will discuss and debate textile project ideas and suggest improvements with clear explanations.

Early and First Level Expressive Arts and Technologies: Exploring Materials and Design

MAKE Learn: Craft & Textile Education Resources for Scottish Primary Classrooms

Projects on a Page: Designing and Making with Textiles in the Early Years

At Early Level (P1 / age 4-6), discussions and debates must be strongly supported through tactile exploration, oral language scaffolds, and visual routines. Teachers should model constructive feedback by normalizing that 'first ideas are just beginnings'. Using tangible tools like swatches, sentence stems, and thumbs-up/lightbulb visual cues helps young learners articulate 'why' a change is helpful without conflating design critiques with personal criticism.

Sharing and Improving Textile Ideas

The 3-Step Feedback Tool

Two Stars and a Wish