{"id":84,"date":"2022-07-15T16:36:17","date_gmt":"2022-07-15T23:36:17","guid":{"rendered":"https:\/\/labs.engineering.asu.edu\/yanglab\/?page_id=84"},"modified":"2026-04-12T06:20:28","modified_gmt":"2026-04-12T13:20:28","slug":"welcome-to-the-yang-research-group","status":"publish","type":"page","link":"https:\/\/labs.engineering.asu.edu\/yanglab\/","title":{"rendered":""},"content":{"rendered":"\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Space+Grotesk:wght@300;400;600;700&display=swap');\n\n.lab-title-wrapper {\n  background: black;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 40px 20px;\n  border-radius: 12px;\n  overflow: hidden;\n  position: relative;\n}\n\n.lab-title-wrapper::before {\n  content: \"\";\n  position: absolute;\n  top: 0; left: 50%;\n  transform: translateX(-50%);\n  width: 300px;\n  height: 2px;\n  background: linear-gradient(to right, transparent, rgba(255,255,255,0.15), transparent);\n}\n\n.title-svg-wrap {\n  width: 100%;\n  max-width: 700px;\n}\n\n.subtitle-line {\n  font-family: 'Space Grotesk', sans-serif;\n  font-size:30px;\n  font-weight: 300;\n  letter-spacing: 6px;\n  text-transform: uppercase;\n  color: rgba(255,255,255,0.35);\n  margin-top: 10px;\n  text-align: center;\n}\n\n.subtitle-line span {\n  color: rgba(255,255,255,0.7);\n}\n<\/style>\n\n<div class=\"lab-title-wrapper\">\n  <div class=\"title-svg-wrap\">\n    <svg id=\"ylabSVG\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 800 300\">\n      <defs>\n        <filter id=\"ylabGlow\" x=\"-50%\" y=\"-50%\" width=\"300%\" height=\"300%\">\n          <feGaussianBlur stdDeviation=\"6 18\" result=\"coloredBlur\"\/>\n          <feMerge>\n            <feMergeNode in=\"coloredBlur\"\/>\n            <feMergeNode in=\"SourceGraphic\"\/>\n          <\/feMerge>\n        <\/filter>\n        <filter id=\"subtleGlow\" x=\"-20%\" y=\"-20%\" width=\"200%\" height=\"200%\">\n          <feGaussianBlur stdDeviation=\"2 4\" result=\"blur\"\/>\n          <feMerge>\n            <feMergeNode in=\"blur\"\/>\n            <feMergeNode in=\"SourceGraphic\"\/>\n          <\/feMerge>\n        <\/filter>\n        <linearGradient id=\"lampBeam\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n          <stop offset=\"0%\" stop-color=\"#fffbe6\" stop-opacity=\"0.9\"\/>\n          <stop offset=\"100%\" stop-color=\"#fffbe6\" stop-opacity=\"0\"\/>\n        <\/linearGradient>\n        <mask id=\"beamMask\">\n          <polygon id=\"beamShape\" points=\"400,90 340,280 460,280\" fill=\"white\"\/>\n        <\/mask>\n        <clipPath id=\"titleClip\">\n          <text x=\"400\" y=\"210\" text-anchor=\"middle\" font-family=\"Space Grotesk, sans-serif\" font-size=\"130\" font-weight=\"700\" letter-spacing=\"-4\">YLab<\/text>\n        <\/clipPath>\n        <clipPath id=\"subClip\">\n          <text x=\"400\" y=\"260\" text-anchor=\"middle\" font-family=\"Space Grotesk, sans-serif\" font-size=\"38\" font-weight=\"300\" letter-spacing=\"14\">MetaMatters<\/text>\n        <\/clipPath>\n      <\/defs>\n\n      <!-- Dark base text -->\n      <text x=\"400\" y=\"210\" text-anchor=\"middle\"\n        font-family=\"Space Grotesk, sans-serif\"\n        font-size=\"130\" font-weight=\"700\"\n        letter-spacing=\"-4\"\n        fill=\"#2a2a2a\">YLab<\/text>\n\n      <text x=\"400\" y=\"260\" text-anchor=\"middle\"\n        font-family=\"Space Grotesk, sans-serif\"\n        font-size=\"38\" font-weight=\"300\"\n        letter-spacing=\"14\"\n        fill=\"#2a2a2a\">MetaMatters<\/text>\n\n      <!-- Lamp fixture -->\n      <line x1=\"400\" y1=\"0\" x2=\"400\" y2=\"60\" stroke=\"rgba(255,255,255,0.15)\" stroke-width=\"2\"\/>\n      <ellipse cx=\"400\" cy=\"62\" rx=\"18\" ry=\"6\" fill=\"#333\"\/>\n      <polygon id=\"lampShade\" points=\"400,62 370,90 430,90\" fill=\"#444\"\/>\n      <ellipse cx=\"400\" cy=\"90\" rx=\"30\" ry=\"6\" fill=\"#555\"\/>\n      <!-- Bulb -->\n      <circle id=\"bulb\" cx=\"400\" cy=\"80\" r=\"5\" fill=\"#fffbe6\" filter=\"url(#ylabGlow)\"\/>\n\n      <!-- Light beam -->\n      <g mask=\"url(#beamMask)\" opacity=\"0.18\">\n        <rect x=\"300\" y=\"90\" width=\"200\" height=\"220\" fill=\"url(#lampBeam)\"\/>\n      <\/g>\n\n      <!-- Lit text - YLab -->\n      <g clip-path=\"url(#titleClip)\" filter=\"url(#ylabGlow)\">\n        <g mask=\"url(#beamMask)\">\n          <text x=\"400\" y=\"210\" text-anchor=\"middle\"\n            font-family=\"Space Grotesk, sans-serif\"\n            font-size=\"200\" font-weight=\"700\"\n            letter-spacing=\"-4\"\n            fill=\"#fffbe6\">YLab<\/text>\n        <\/g>\n      <\/g>\n\n      <!-- Lit text - MetaMatters -->\n      <g clip-path=\"url(#subClip)\" filter=\"url(#subtleGlow)\">\n        <g mask=\"url(#beamMask)\">\n          <text x=\"400\" y=\"260\" text-anchor=\"middle\"\n            font-family=\"Space Grotesk, sans-serif\"\n            font-size=\"38\" font-weight=\"300\"\n            letter-spacing=\"14\"\n            fill=\"#fffbe6\">MetaMatters<\/text>\n        <\/g>\n      <\/g>\n\n      <!-- Particle dots -->\n      <g id=\"particles\" fill=\"rgba(255,251,230,0.5)\">\n        <circle class=\"particle\" cx=\"370\" cy=\"150\" r=\"1.5\"\/>\n        <circle class=\"particle\" cx=\"420\" cy=\"170\" r=\"1\"\/>\n        <circle class=\"particle\" cx=\"390\" cy=\"190\" r=\"1.2\"\/>\n        <circle class=\"particle\" cx=\"410\" cy=\"130\" r=\"1\"\/>\n        <circle class=\"particle\" cx=\"385\" cy=\"160\" r=\"0.8\"\/>\n        <circle class=\"particle\" cx=\"415\" cy=\"145\" r=\"1.3\"\/>\n      <\/g>\n\n    <\/svg>\n  <\/div>\n  <p class=\"subtitle-line\">Yang Lab &nbsp;\u00b7&nbsp; <span>Arizona State University<\/span><\/p>\n<\/div>\n\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/gsap.min.js\"><\/script>\n<script>\n(function() {\n  gsap.set('#ylabSVG', { visibility: 'visible' });\n\n  \/\/ Swinging lamp\n  gsap.fromTo('#lampShade, #bulb, #beamShape', {\n    rotation: -18,\n    svgOrigin: '400 62'\n  }, {\n    rotation: 18,\n    svgOrigin: '400 62',\n    duration: 2.2,\n    ease: 'power1.inOut',\n    repeat: -1,\n    yoyo: true\n  });\n\n  \/\/ Beam follows lamp\n  gsap.fromTo('#beamShape', {\n    rotation: -18,\n    svgOrigin: '400 62'\n  }, {\n    rotation: 18,\n    svgOrigin: '400 62',\n    duration: 2.2,\n    ease: 'power1.inOut',\n    repeat: -1,\n    yoyo: true\n  });\n\n  \/\/ Particles floating up\n  gsap.utils.toArray('.particle').forEach((p, i) => {\n    gsap.to(p, {\n      y: -30,\n      opacity: 0,\n      duration: 1.5 + i * 0.3,\n      delay: i * 0.4,\n      repeat: -1,\n      ease: 'power1.out',\n      repeatDelay: 1\n    });\n  });\n\n  \/\/ Bulb flicker on load\n  gsap.fromTo('#bulb', {\n    opacity: 0.3,\n    scale: 0.8,\n    svgOrigin: '400 80'\n  }, {\n    opacity: 1,\n    scale: 1,\n    svgOrigin: '400 80',\n    duration: 0.1,\n    repeat: 5,\n    yoyo: true,\n    onComplete: () => gsap.set('#bulb', { opacity: 1, scale: 1 })\n  });\n})();\n<\/script>\n\n\n\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Space+Grotesk:wght@300;400;500;600&display=swap');\n\n.about-wrapper {\n  position: relative;\n  background: black;\n  border-radius: 16px;\n  padding: 48px 52px;\n  overflow: hidden;\n  font-family: 'Space Grotesk', sans-serif;\n}\n\n.about-canvas {\n  position: absolute;\n  top: 0; left: 0;\n  width: 100%; height: 100%;\n  pointer-events: none;\n}\n\n.about-content {\n  position: relative;\n  z-index: 2;\n  display: flex;\n  align-items: flex-start;\n  gap: 32px;\n}\n\n.big-y {\n  font-size: 200px;\n  font-weight: 700;\n  line-height: 1;\n  color: transparent;\n  -webkit-text-stroke: 5px rgba(100, 200, 255, 0.6);\n  flex-shrink: 0;\n  margin-top: -10px;\n  filter: drop-shadow(0 0 18px rgba(100,200,255,0.3));\n  letter-spacing: -4px;\n}\n\n.about-text-block {\n  display: flex;\n  flex-direction: column;\n  gap: 0;\n}\n\n.lab-label {\n  font-size: 25px;\n  font-weight: 500;\n  letter-spacing: 5px;\n  text-transform: uppercase;\n  color: rgba(100, 200, 255, 0.5);\n  margin-bottom: 12px;\n}\n\n.about-text {\n  font-size: 25px;\n  font-weight: 400;\n  line-height: 1.85;\n  color: rgba(220, 235, 255, 0.88);\n}\n\n.about-text .highlight {\n  color: #64c8ff;\n  font-weight: 500;\n}\n\n.about-text .highlight2 {\n  color: #a78bfa;\n  font-weight: 500;\n}\n\n.divider {\n  width: 40px;\n  height: 2px;\n  background: linear-gradient(to right, rgba(100,200,255,0.6), transparent);\n  margin-bottom: 16px;\n}\n<\/style>\n\n<div class=\"about-wrapper\">\n  <canvas class=\"about-canvas\" id=\"atomCanvas\"><\/canvas>\n\n  <div class=\"about-content\">\n    <div class=\"big-y\" id=\"bigY\">Y<\/div>\n    <div class=\"about-text-block\">\n      <div class=\"lab-label\">Yang Lab \u00b7 ASU<\/div>\n      <div class=\"divider\"><\/div>\n      <p class=\"about-text\" id=\"aboutText\">\n        <span class=\"highlight\">Lab (Yang Lab)<\/span> strives to bring scientific solutions to our world.\n        We study <span class=\"highlight2\">light\u2013matter interactions<\/span> with artificial structures,\n        molecules, and atoms to drive innovations and applications across\n        <span class=\"highlight\">science and engineering<\/span> disciplines.\n      <\/p>\n    <\/div>\n  <\/div>\n<\/div>\n\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/gsap.min.js\"><\/script>\n<script>\n(function () {\n\n  \/\/ \u2500\u2500 CANVAS ATOM\/MOLECULE ANIMATION \u2500\u2500\n  const canvas = document.getElementById('atomCanvas');\n  const wrapper = canvas.parentElement;\n\n  function resize() {\n    canvas.width = wrapper.offsetWidth;\n    canvas.height = wrapper.offsetHeight;\n  }\n  resize();\n  window.addEventListener('resize', resize);\n\n  const ctx = canvas.getContext('2d');\n\n  \/\/ Atom nodes\n  const atoms = Array.from({ length: 18 }, (_, i) => ({\n    x: Math.random() * canvas.width,\n    y: Math.random() * canvas.height,\n    r: Math.random() * 3.5 + 2,\n    vx: (Math.random() - 0.5) * 0.4,\n    vy: (Math.random() - 0.5) * 0.4,\n    color: ['rgba(100,200,255,', 'rgba(167,139,250,', 'rgba(0,255,180,'][Math.floor(Math.random() * 3)],\n    alpha: Math.random() * 0.5 + 0.4,\n    orbitR: Math.random() * 18 + 8,\n    orbitSpeed: (Math.random() * 0.02 + 0.01) * (Math.random() > 0.5 ? 1 : -1),\n    orbitAngle: Math.random() * Math.PI * 2,\n    electronColor: ['#64c8ff', '#a78bfa', '#00ffb4'][Math.floor(Math.random() * 3)]\n  }));\n\n  \/\/ Bond connections (molecule pairs)\n  const bonds = [];\n  for (let i = 0; i < atoms.length; i++) {\n    for (let j = i + 1; j < atoms.length; j++) {\n      if (Math.random() < 0.18) bonds.push([i, j]);\n    }\n  }\n\n  function drawAtoms() {\n    ctx.clearRect(0, 0, canvas.width, canvas.height);\n\n    \/\/ Move atoms\n    atoms.forEach(a => {\n      a.x += a.vx;\n      a.y += a.vy;\n      if (a.x < 0 || a.x > canvas.width) a.vx *= -1;\n      if (a.y < 0 || a.y > canvas.height) a.vy *= -1;\n      a.orbitAngle += a.orbitSpeed;\n    });\n\n    \/\/ Draw bonds\n    bonds.forEach(([i, j]) => {\n      const a = atoms[i], b = atoms[j];\n      const dist = Math.hypot(a.x - b.x, a.y - b.y);\n      if (dist < 160) {\n        const alpha = (1 - dist \/ 160) * 0.25;\n        ctx.beginPath();\n        ctx.moveTo(a.x, a.y);\n        ctx.lineTo(b.x, b.y);\n        ctx.strokeStyle = `rgba(100,200,255,${alpha})`;\n        ctx.lineWidth = 0.8;\n        ctx.stroke();\n      }\n    });\n\n    \/\/ Draw atoms + orbiting electrons\n    atoms.forEach(a => {\n      \/\/ Nucleus glow\n      const grad = ctx.createRadialGradient(a.x, a.y, 0, a.x, a.y, a.r * 2.5);\n      grad.addColorStop(0, a.color + a.alpha + ')');\n      grad.addColorStop(1, a.color + '0)');\n      ctx.beginPath();\n      ctx.arc(a.x, a.y, a.r * 2.5, 0, Math.PI * 2);\n      ctx.fillStyle = grad;\n      ctx.fill();\n\n      \/\/ Nucleus core\n      ctx.beginPath();\n      ctx.arc(a.x, a.y, a.r, 0, Math.PI * 2);\n      ctx.fillStyle = a.color + a.alpha + ')';\n      ctx.fill();\n\n      \/\/ Orbit ring\n      ctx.beginPath();\n      ctx.ellipse(a.x, a.y, a.orbitR, a.orbitR * 0.4, a.orbitAngle * 0.3, 0, Math.PI * 2);\n      ctx.strokeStyle = a.color + '0.15)';\n      ctx.lineWidth = 0.6;\n      ctx.stroke();\n\n      \/\/ Electron on orbit\n      const ex = a.x + Math.cos(a.orbitAngle) * a.orbitR;\n      const ey = a.y + Math.sin(a.orbitAngle) * a.orbitR * 0.4;\n      ctx.beginPath();\n      ctx.arc(ex, ey, 1.5, 0, Math.PI * 2);\n      ctx.fillStyle = a.electronColor;\n      ctx.fill();\n\n      \/\/ Second electron (opposite side)\n      const ex2 = a.x + Math.cos(a.orbitAngle + Math.PI) * a.orbitR;\n      const ey2 = a.y + Math.sin(a.orbitAngle + Math.PI) * a.orbitR * 0.4;\n      ctx.beginPath();\n      ctx.arc(ex2, ey2, 1.2, 0, Math.PI * 2);\n      ctx.fillStyle = a.electronColor;\n      ctx.globalAlpha = 0.6;\n      ctx.fill();\n      ctx.globalAlpha = 1;\n    });\n\n    requestAnimationFrame(drawAtoms);\n  }\n\n  drawAtoms();\n\n  \/\/ \u2500\u2500 GSAP TEXT ENTRANCE \u2500\u2500\n  gsap.set('#aboutText', { opacity: 0, y: 20 });\n  gsap.set('#bigY', { opacity: 0, x: -30 });\n  gsap.set('.lab-label', { opacity: 0, y: -10 });\n  gsap.set('.divider', { scaleX: 0, transformOrigin: 'left center' });\n\n  const tl = gsap.timeline({ delay: 0.3 });\n\n  tl.to('#bigY', {\n    opacity: 1, x: 0,\n    duration: 0.8,\n    ease: 'power3.out'\n  })\n  .to('.lab-label', {\n    opacity: 1, y: 0,\n    duration: 0.5,\n    ease: 'power2.out'\n  }, '-=0.4')\n  .to('.divider', {\n    scaleX: 1,\n    duration: 0.4,\n    ease: 'power2.out'\n  }, '-=0.2')\n  .to('#aboutText', {\n    opacity: 1, y: 0,\n    duration: 0.7,\n    ease: 'power2.out'\n  }, '-=0.2');\n\n  \/\/ Big Y subtle float\n  gsap.to('#bigY', {\n    y: -8,\n    duration: 3,\n    repeat: -1,\n    yoyo: true,\n    ease: 'power1.inOut',\n    delay: 1.2\n  });\n\n})();\n<\/script>\n\n\n\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');\n\n.nl-wrapper {\n  position: relative;\n  background: #08090f;\n  border-radius: 16px;\n  overflow: hidden;\n  font-family: 'Space Grotesk', sans-serif;\n  width: 100%;\n  max-width: 800px;\n  margin: 0 auto;\n}\n\n\/* Header *\/\n.nl-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 20px;\n  background: #0d1020;\n  border-bottom: 1px solid rgba(255,255,255,0.06);\n}\n\n.nl-header-left {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.nl-live-dot {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  background: #ff3333;\n  flex-shrink: 0;\n}\n\n.nl-channel {\n  font-size: 12px;\n  font-weight: 700;\n  letter-spacing: 4px;\n  color: white;\n  text-transform: uppercase;\n}\n\n.nl-sub {\n  font-size: 9px;\n  letter-spacing: 3px;\n  color: rgba(100,200,255,0.55);\n  text-transform: uppercase;\n  margin-top: 1px;\n}\n\n.nl-clock {\n  font-size: 12px;\n  color: rgba(255,255,255,0.4);\n  letter-spacing: 2px;\n  font-weight: 500;\n}\n\n\/* Slideshow area *\/\n.nl-slide-area {\n  position: relative;\n  width: 100%;\n  height: 420px;\n  overflow: hidden;\n}\n\n.nl-slide {\n  position: absolute;\n  inset: 0;\n  opacity: 0;\n  pointer-events: none;\n}\n\n.nl-slide.active {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n.nl-slide img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n}\n\n\/* Dark overlay gradient *\/\n.nl-slide-overlay {\n  position: absolute;\n  inset: 0;\n  background: linear-gradient(\n    to bottom,\n    rgba(0,0,0,0.15) 0%,\n    rgba(0,0,0,0.1) 40%,\n    rgba(0,0,0,0.82) 100%\n  );\n}\n\n\/* Slide number top right *\/\n.nl-slide-count {\n  position: absolute;\n  top: 16px;\n  right: 20px;\n  font-size: 11px;\n  font-weight: 600;\n  letter-spacing: 3px;\n  color: rgba(255,255,255,0.55);\n  z-index: 5;\n}\n\n\/* Category tag top left *\/\n.nl-category {\n  position: absolute;\n  top: 16px;\n  left: 20px;\n  font-size: 9px;\n  font-weight: 700;\n  letter-spacing: 3px;\n  text-transform: uppercase;\n  padding: 4px 10px;\n  border-radius: 3px;\n  z-index: 5;\n}\n\n\/* Bottom content area *\/\n.nl-slide-content {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  padding: 0 24px 20px;\n  z-index: 5;\n}\n\n\/* Ticker label line *\/\n.nl-ticker-bar {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  margin-bottom: 10px;\n  overflow: hidden;\n}\n\n.nl-ticker-label {\n  font-size: 9px;\n  font-weight: 700;\n  letter-spacing: 3px;\n  text-transform: uppercase;\n  padding: 3px 8px;\n  border-radius: 2px;\n  white-space: nowrap;\n  flex-shrink: 0;\n}\n\n.nl-ticker-clip {\n  flex: 1;\n  overflow: hidden;\n  height: 16px;\n  position: relative;\n}\n\n.nl-ticker-text {\n  position: absolute;\n  white-space: nowrap;\n  font-size: 10px;\n  font-weight: 600;\n  letter-spacing: 1px;\n  text-transform: uppercase;\n  top: 50%;\n  transform: translateY(-50%);\n}\n\n\/* Main headline *\/\n.nl-headline {\n  font-size: 22px;\n  font-weight: 700;\n  color: white;\n  line-height: 1.3;\n  margin-bottom: 8px;\n  opacity: 0;\n  transform: translateY(16px);\n}\n\n.nl-desc {\n  font-size: 13px;\n  font-weight: 400;\n  color: rgba(255,255,255,0.65);\n  line-height: 1.6;\n  opacity: 0;\n  transform: translateY(12px);\n}\n\n\/* Progress bar *\/\n.nl-progress-wrap {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 3px;\n  background: rgba(255,255,255,0.1);\n  z-index: 10;\n}\n\n.nl-progress-bar {\n  height: 100%;\n  width: 0%;\n  background: white;\n}\n\n\/* Dot indicators *\/\n.nl-dots {\n  position: absolute;\n  bottom: 12px;\n  right: 20px;\n  display: flex;\n  gap: 6px;\n  z-index: 10;\n}\n\n.nl-dot {\n  width: 5px;\n  height: 5px;\n  border-radius: 50%;\n  background: rgba(255,255,255,0.25);\n  transition: background 0.3s, transform 0.3s;\n}\n\n.nl-dot.active {\n  background: white;\n  transform: scale(1.3);\n}\n\n\/* Bottom global ticker *\/\n.nl-global-ticker {\n  background: #cc0000;\n  height: 32px;\n  display: flex;\n  align-items: center;\n  overflow: hidden;\n  border-top: 2px solid #ff4444;\n}\n\n.nl-global-label {\n  background: #880000;\n  color: white;\n  font-size: 10px;\n  font-weight: 700;\n  letter-spacing: 3px;\n  padding: 0 14px;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  white-space: nowrap;\n  flex-shrink: 0;\n  border-right: 1px solid rgba(255,255,255,0.15);\n  text-transform: uppercase;\n}\n\n.nl-global-clip {\n  flex: 1;\n  overflow: hidden;\n  height: 100%;\n  position: relative;\n}\n\n.nl-global-text {\n  position: absolute;\n  white-space: nowrap;\n  font-size: 11px;\n  font-weight: 500;\n  color: white;\n  letter-spacing: 0.5px;\n  top: 50%;\n  transform: translateY(-50%);\n}\n<\/style>\n\n<div class=\"nl-wrapper\">\n\n  <!-- Header -->\n  <div class=\"nl-header\">\n    <div class=\"nl-header-left\">\n      <div class=\"nl-live-dot\" id=\"nlLiveDot\"><\/div>\n      <div>\n        <div class=\"nl-channel\">YLab Newsletter<\/div>\n        <div class=\"nl-sub\">Yang Lab \u00b7 Arizona State University<\/div>\n      <\/div>\n    <\/div>\n    <div class=\"nl-clock\" id=\"nlClock\"><\/div>\n  <\/div>\n\n  <!-- Slides -->\n  <div class=\"nl-slide-area\">\n\n    <!-- Slide 1 -->\n    <div class=\"nl-slide active\" id=\"nlSlide0\">\n      <img decoding=\"async\" src=\"https:\/\/labs.engineering.asu.edu\/yanglab\/wp-content\/uploads\/sites\/85\/2026\/04\/yang-2w.jpg\" alt=\"News 1\">\n      <div class=\"nl-slide-overlay\"><\/div>\n      <div class=\"nl-slide-count\" id=\"nlCount\">01 \/ 04<\/div>\n      <div class=\"nl-category\" style=\"background:rgba(100,200,255,0.2);color:#64c8ff;border:1px solid rgba(100,200,255,0.3);\">Research<\/div>\n      <div class=\"nl-slide-content\">\n        <div class=\"nl-ticker-bar\">\n          <div class=\"nl-ticker-label\" style=\"background:#0033bb;color:white;\">Breaking<\/div>\n          <div class=\"nl-ticker-clip\">\n            <div class=\"nl-ticker-text\" style=\"color:rgba(200,225,255,0.7);\" id=\"nlTick0\">\n              3M AWARD \u00b7 NANOPHOTONICS \u00b7 YANG LAB \u00b7 ARIZONA STATE UNIVERSITY \u00b7 ASU RESEARCH \u00b7\n            <\/div>\n          <\/div>\n        <\/div>\n        <div class=\"nl-headline\" id=\"nlHead0\">3M awards ASU researcher for his work in nanophotonics<\/div>\n        <div class=\"nl-desc\" id=\"nlDesc0\">Prof. Sui Yang receives prestigious recognition from 3M for groundbreaking contributions to the field of nanophotonics and light\u2013matter interaction research.<\/div>\n      <\/div>\n    <\/div>\n\n    <!-- Slide 2 -->\n    <div class=\"nl-slide\" id=\"nlSlide1\">\n      <img decoding=\"async\" src=\"https:\/\/labs.engineering.asu.edu\/yanglab\/wp-content\/uploads\/sites\/85\/2026\/04\/MORE-Christabel-Arthur-Sui-Yang-2022-EG-1753w-1920x1080-1-1536x864-1.jpg\" alt=\"News 2\">\n      <div class=\"nl-slide-overlay\"><\/div>\n      <div class=\"nl-slide-count\" id=\"nlCount\">01 \/ 04<\/div>\n      <div class=\"nl-category\" style=\"background:rgba(167,139,250,0.2);color:#a78bfa;border:1px solid rgba(167,139,250,0.3);\">Innovation<\/div>\n      <div class=\"nl-slide-content\">\n        <div class=\"nl-ticker-bar\">\n          <div class=\"nl-ticker-label\" style=\"background:#5533bb;color:white;\">Feature<\/div>\n          <div class=\"nl-ticker-clip\">\n            <div class=\"nl-ticker-text\" style=\"color:rgba(200,200,255,0.7);\" id=\"nlTick1\">\n              STUDENT RESEARCH \u00b7 HEALTH CARE \u00b7 MACHINE LEARNING \u00b7 SUSTAINABLE INFRASTRUCTURE \u00b7 ASU INNOVATION \u00b7\n            <\/div>\n          <\/div>\n        <\/div>\n        <div class=\"nl-headline\" id=\"nlHead1\">Innovation at work: ASU students conduct impactful research<\/div>\n        <div class=\"nl-desc\" id=\"nlDesc1\">ASU students drive innovation across health care, machine learning and sustainable infrastructure \u2014 making real-world impact through cutting-edge research.<\/div>\n      <\/div>\n    <\/div>\n\n    <!-- Slide 3 -->\n    <div class=\"nl-slide\" id=\"nlSlide2\">\n      <img decoding=\"async\" src=\"https:\/\/labs.engineering.asu.edu\/yanglab\/wp-content\/uploads\/sites\/85\/2026\/04\/SEMTE-Yang-ABRC-Award-ISTB2-2024-RN-64w-1.jpg\" alt=\"News 3\">\n      <div class=\"nl-slide-overlay\"><\/div>\n      <div class=\"nl-slide-count\" id=\"nlCount\">01 \/ 04<\/div>\n      <div class=\"nl-category\" style=\"background:rgba(0,255,180,0.15);color:#00ffb4;border:1px solid rgba(0,255,180,0.25);\">Discovery<\/div>\n      <div class=\"nl-slide-content\">\n        <div class=\"nl-ticker-bar\">\n          <div class=\"nl-ticker-label\" style=\"background:#006644;color:white;\">Exclusive<\/div>\n          <div class=\"nl-ticker-clip\">\n            <div class=\"nl-ticker-text\" style=\"color:rgba(180,255,220,0.7);\" id=\"nlTick2\">\n              NANOSCALE OPTICS \u00b7 3D PRINTING \u00b7 OPTICAL PROPERTIES \u00b7 SEMTE \u00b7 LIGHT CONTROL \u00b7 YANG LAB \u00b7\n            <\/div>\n          <\/div>\n        <\/div>\n        <div class=\"nl-headline\" id=\"nlHead2\">ASU researcher unlocks novel way to control light at the nanoscale<\/div>\n        <div class=\"nl-desc\" id=\"nlDesc2\">Assistant Professor Sui Yang discovers a novel method to alter a material&#8217;s optical properties at the nanoscale using 3D printing technology.<\/div>\n      <\/div>\n    <\/div>\n\n    <!-- Slide 4 -->\n    <div class=\"nl-slide\" id=\"nlSlide3\">\n      <img decoding=\"async\" src=\"https:\/\/labs.engineering.asu.edu\/yanglab\/wp-content\/uploads\/sites\/85\/2026\/04\/SEMTE-Yang-ABRC-Award-ISTB2-2024-RN-53w.jpg\" alt=\"News 4\">\n      <div class=\"nl-slide-overlay\"><\/div>\n      <div class=\"nl-slide-count\" id=\"nlCount\">01 \/ 04<\/div>\n      <div class=\"nl-category\" style=\"background:rgba(255,180,0,0.15);color:#ffb400;border:1px solid rgba(255,180,0,0.25);\">Award<\/div>\n      <div class=\"nl-slide-content\">\n        <div class=\"nl-ticker-bar\">\n          <div class=\"nl-ticker-label\" style=\"background:#885500;color:white;\">Award<\/div>\n          <div class=\"nl-ticker-clip\">\n            <div class=\"nl-ticker-text\" style=\"color:rgba(255,220,150,0.7);\" id=\"nlTick3\">\n              ABRC AWARD 2024 \u00b7 SUI YANG \u00b7 HAMID MARVI \u00b7 ENDOSCOPIC SURGERY \u00b7 SURGICAL INNOVATION \u00b7 ASU \u00b7\n            <\/div>\n          <\/div>\n        <\/div>\n        <div class=\"nl-headline\" id=\"nlHead3\">New technology developments to help surgeons save lives<\/div>\n        <div class=\"nl-desc\" id=\"nlDesc3\">Sui Yang and Hamid Marvi receive the 2024 ABRC New Investigator Award to create innovative tools empowering endoscopic surgeons.<\/div>\n      <\/div>\n    <\/div>\n\n    <!-- Progress bar -->\n    <div class=\"nl-progress-wrap\">\n      <div class=\"nl-progress-bar\" id=\"nlProgress\"><\/div>\n    <\/div>\n\n    <!-- Dots -->\n    <div class=\"nl-dots\">\n      <div class=\"nl-dot active\" id=\"dot0\"><\/div>\n      <div class=\"nl-dot\" id=\"dot1\"><\/div>\n      <div class=\"nl-dot\" id=\"dot2\"><\/div>\n      <div class=\"nl-dot\" id=\"dot3\"><\/div>\n    <\/div>\n\n  <\/div>\n\n  <!-- Global ticker -->\n  <div class=\"nl-global-ticker\">\n    <div class=\"nl-global-label\">Latest<\/div>\n    <div class=\"nl-global-clip\">\n      <div class=\"nl-global-text\" id=\"nlGlobalTicker\">\n        3M awards ASU researcher for nanophotonics &nbsp;\u00b7&nbsp;\n        ASU students drive innovation in health care &amp; machine learning &nbsp;\u00b7&nbsp;\n        Sui Yang unlocks nanoscale light control via 3D printing &nbsp;\u00b7&nbsp;\n        Yang &amp; Marvi awarded 2024 ABRC New Investigator Award &nbsp;\u00b7&nbsp;\n        YLab \u00b7 MetaMatters \u00b7 Light\u2013Matter Interaction \u00b7 Arizona State University &nbsp;\u00b7&nbsp;\n      <\/div>\n    <\/div>\n  <\/div>\n\n<\/div>\n\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/gsap.min.js\"><\/script>\n<script>\n(function () {\n\n  const DURATION = 4000;\n  const total = 4;\n  let current = 0;\n  let interval = null;\n\n  \/\/ Clock\n  function updateClock() {\n    const now = new Date();\n    const h = String(now.getHours()).padStart(2,'0');\n    const m = String(now.getMinutes()).padStart(2,'0');\n    const s = String(now.getSeconds()).padStart(2,'0');\n    document.getElementById('nlClock').textContent = `${h}:${m}:${s}`;\n  }\n  updateClock();\n  setInterval(updateClock, 1000);\n\n  \/\/ Live dot blink\n  gsap.to('#nlLiveDot', {\n    opacity: 0, duration: 0.5,\n    repeat: -1, yoyo: true, ease: 'none'\n  });\n\n  \/\/ Slide counter label\n  const countLabels = ['01 \/ 04','02 \/ 04','03 \/ 04','04 \/ 04'];\n\n  \/\/ Ticker scroll per slide\n  function animateTicker(id) {\n    const el = document.getElementById(id);\n    if (!el) return;\n    const clip = el.parentElement;\n    const clipW = clip.offsetWidth || 300;\n    const textW = el.scrollWidth;\n    gsap.killTweensOf(el);\n    gsap.fromTo(el,\n      { x: clipW },\n      { x: -textW, duration: 12, ease: 'none', repeat: -1 }\n    );\n  }\n\n  \/\/ Text entrance per slide\n  function animateContent(index) {\n    const head = document.getElementById(`nlHead${index}`);\n    const desc = document.getElementById(`nlDesc${index}`);\n    gsap.killTweensOf([head, desc]);\n    gsap.set([head, desc], { opacity: 0, y: 18 });\n    gsap.to(head, { opacity: 1, y: 0, duration: 0.7, ease: 'power3.out', delay: 0.3 });\n    gsap.to(desc, { opacity: 1, y: 0, duration: 0.7, ease: 'power3.out', delay: 0.5 });\n    animateTicker(`nlTick${index}`);\n  }\n\n  \/\/ Progress bar\n  function startProgress() {\n    const bar = document.getElementById('nlProgress');\n    gsap.killTweensOf(bar);\n    gsap.set(bar, { width: '0%' });\n    gsap.to(bar, { width: '100%', duration: DURATION \/ 1000, ease: 'none' });\n  }\n\n  \/\/ Update dots\n  function updateDots(index) {\n    for (let i = 0; i < total; i++) {\n      const dot = document.getElementById(`dot${i}`);\n      dot.classList.toggle('active', i === index);\n    }\n  }\n\n  \/\/ Go to slide\n  function goTo(next) {\n    const prevSlide = document.getElementById(`nlSlide${current}`);\n    const nextSlide = document.getElementById(`nlSlide${next}`);\n    const prevHead = document.getElementById(`nlHead${current}`);\n    const prevDesc = document.getElementById(`nlDesc${current}`);\n\n    \/\/ Fade out current\n    gsap.to(prevSlide, { opacity: 0, duration: 0.8, ease: 'power2.inOut' });\n    gsap.to([prevHead, prevDesc], { opacity: 0, y: -10, duration: 0.4 });\n\n    current = next;\n\n    \/\/ Update counter\n    document.querySelectorAll('.nl-slide-count').forEach((el, i) => {\n      el.textContent = countLabels[current];\n    });\n\n    \/\/ Fade in next with Ken Burns\n    gsap.set(nextSlide, { opacity: 0 });\n    nextSlide.classList.add('active');\n    prevSlide.classList.remove('active');\n\n    gsap.to(nextSlide, { opacity: 1, duration: 0.8, ease: 'power2.inOut' });\n\n    \/\/ Ken Burns on image\n    const img = nextSlide.querySelector('img');\n    gsap.fromTo(img,\n      { scale: 1.08, x: 10 },\n      { scale: 1, x: 0, duration: 5, ease: 'power1.out' }\n    );\n\n    updateDots(current);\n    animateContent(current);\n    startProgress();\n  }\n\n  \/\/ Auto advance\n  function startAuto() {\n    interval = setInterval(() => {\n      const next = (current + 1) % total;\n      goTo(next);\n    }, DURATION);\n  }\n\n  \/\/ Global bottom ticker\n  function startGlobalTicker() {\n    const el = document.getElementById('nlGlobalTicker');\n    const clip = el.parentElement;\n    const clipW = clip.offsetWidth || 600;\n    const textW = el.scrollWidth;\n    gsap.fromTo(el,\n      { x: clipW },\n      { x: -textW, duration: 35, ease: 'none', repeat: -1 }\n    );\n  }\n\n  \/\/ Init\n  setTimeout(() => {\n    \/\/ First slide Ken Burns\n    const firstImg = document.querySelector('#nlSlide0 img');\n    gsap.fromTo(firstImg,\n      { scale: 1.08, x: 10 },\n      { scale: 1, x: 0, duration: 5, ease: 'power1.out' }\n    );\n    animateContent(0);\n    startProgress();\n    startAuto();\n    startGlobalTicker();\n    updateDots(0);\n  }, 300);\n\n})();\n<\/script>\n\n\n\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');\n\n.interests-wrapper {\n  background: #07090f;\n  border-radius: 16px;\n  padding: 40px 32px;\n  font-family: 'Space Grotesk', sans-serif;\n  position: relative;\n  overflow: hidden;\n}\n\n.interests-wrapper::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background:\n    radial-gradient(ellipse at 15% 50%, rgba(100,200,255,0.04) 0%, transparent 60%),\n    radial-gradient(ellipse at 85% 50%, rgba(167,139,250,0.04) 0%, transparent 60%);\n  pointer-events: none;\n}\n\n.interests-title {\n  font-size: 11px;\n  font-weight: 600;\n  letter-spacing: 5px;\n  text-transform: uppercase;\n  color: rgba(100,200,255,0.55);\n  margin-bottom: 32px;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.interests-title::after {\n  content: '';\n  flex: 1;\n  height: 1px;\n  background: linear-gradient(to right, rgba(100,200,255,0.2), transparent);\n}\n\n.interests-grid {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 16px;\n}\n\n.interest-card {\n  background: rgba(255,255,255,0.03);\n  border: 1px solid rgba(255,255,255,0.06);\n  border-radius: 14px;\n  padding: 28px 24px;\n  display: flex;\n  align-items: flex-start;\n  gap: 20px;\n  position: relative;\n  overflow: hidden;\n  transition: border-color 0.3s, background 0.3s;\n  cursor: default;\n}\n\n.interest-card:hover {\n  background: rgba(255,255,255,0.055);\n}\n\n.interest-card::before {\n  content: '';\n  position: absolute;\n  top: 0; left: 0; right: 0;\n  height: 1px;\n  opacity: 0.6;\n}\n\n.card-0::before { background: linear-gradient(to right, transparent, rgba(100,200,255,0.5), transparent); }\n.card-1::before { background: linear-gradient(to right, transparent, rgba(167,139,250,0.5), transparent); }\n.card-2::before { background: linear-gradient(to right, transparent, rgba(255,180,0,0.5), transparent); }\n.card-3::before { background: linear-gradient(to right, transparent, rgba(0,255,180,0.5), transparent); }\n\n.icon-wrap {\n  width: 64px;\n  height: 64px;\n  flex-shrink: 0;\n  position: relative;\n}\n\n.icon-wrap canvas {\n  width: 64px;\n  height: 64px;\n  display: block;\n}\n\n.card-text {\n  flex: 1;\n  padding-top: 4px;\n}\n\n.card-label {\n  font-size: 9px;\n  font-weight: 600;\n  letter-spacing: 3px;\n  text-transform: uppercase;\n  margin-bottom: 6px;\n}\n\n.card-0 .card-label { color: rgba(100,200,255,0.6); }\n.card-1 .card-label { color: rgba(167,139,250,0.6); }\n.card-2 .card-label { color: rgba(255,180,0,0.6); }\n.card-3 .card-label { color: rgba(0,255,180,0.6); }\n\n.card-title {\n  font-size: 16px;\n  font-weight: 600;\n  color: rgba(255,255,255,0.92);\n  line-height: 1.35;\n  margin-bottom: 8px;\n}\n\n.card-desc {\n  font-size: 12px;\n  font-weight: 400;\n  color: rgba(255,255,255,0.38);\n  line-height: 1.6;\n}\n\n@media (max-width: 580px) {\n  .interests-grid { grid-template-columns: 1fr; }\n}\n<\/style>\n\n<div class=\"interests-wrapper\">\n  <div class=\"interests-title\">Our Current Interests<\/div>\n\n  <div class=\"interests-grid\">\n\n    <!-- Card 1: Metamaterials -->\n    <div class=\"interest-card card-0\" id=\"icard0\">\n      <div class=\"icon-wrap\">\n        <canvas id=\"icon0\" width=\"128\" height=\"128\"><\/canvas>\n      <\/div>\n      <div class=\"card-text\">\n        <div class=\"card-label\">01 \u00b7 Photonics<\/div>\n        <div class=\"card-title\">Metamaterials and Metasurfaces<\/div>\n        <div class=\"card-desc\">Engineering sub-wavelength structures to control electromagnetic waves beyond natural limits.<\/div>\n      <\/div>\n    <\/div>\n\n    <!-- Card 2: Quantum -->\n    <div class=\"interest-card card-1\" id=\"icard1\">\n      <div class=\"icon-wrap\">\n        <canvas id=\"icon1\" width=\"128\" height=\"128\"><\/canvas>\n      <\/div>\n      <div class=\"card-text\">\n        <div class=\"card-label\">02 \u00b7 Quantum<\/div>\n        <div class=\"card-title\">Artificial Lattices and Quantum Technology<\/div>\n        <div class=\"card-desc\">Designing periodic atomic structures to explore quantum phenomena and next-gen computing.<\/div>\n      <\/div>\n    <\/div>\n\n    <!-- Card 3: Nanophotonics -->\n    <div class=\"interest-card card-2\" id=\"icard2\">\n      <div class=\"icon-wrap\">\n        <canvas id=\"icon2\" width=\"128\" height=\"128\"><\/canvas>\n      <\/div>\n      <div class=\"card-text\">\n        <div class=\"card-label\">03 \u00b7 Optoelectronics<\/div>\n        <div class=\"card-title\">Nanophotonics and Optoelectronics<\/div>\n        <div class=\"card-desc\">Manipulating light at the nanoscale for high-speed photonic and electronic device applications.<\/div>\n      <\/div>\n    <\/div>\n\n    <!-- Card 4: Self-assembly -->\n    <div class=\"interest-card card-3\" id=\"icard3\">\n      <div class=\"icon-wrap\">\n        <canvas id=\"icon3\" width=\"128\" height=\"128\"><\/canvas>\n      <\/div>\n      <div class=\"card-text\">\n        <div class=\"card-label\">04 \u00b7 Nanoscience<\/div>\n        <div class=\"card-title\">Self-assembly and Nanoscience<\/div>\n        <div class=\"card-desc\">Harnessing spontaneous molecular organization to build functional nanostructures from the bottom up.<\/div>\n      <\/div>\n    <\/div>\n\n  <\/div>\n<\/div>\n\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/gsap.min.js\"><\/script>\n<script>\n(function () {\n\n  const PI2 = Math.PI * 2;\n\n  \/\/ \u2500\u2500 ICON 0: Metamaterials \u2014 animated grid of unit cells with wave ripple \u2500\u2500\n  (function () {\n    const canvas = document.getElementById('icon0');\n    const ctx = canvas.getContext('2d');\n    const W = 128, H = 128, cx = W \/ 2, cy = H \/ 2;\n    let t = 0;\n\n    function draw() {\n      ctx.clearRect(0, 0, W, H);\n      const cols = 5, rows = 5;\n      const cellW = 22, cellH = 22;\n      const startX = cx - (cols * cellW) \/ 2;\n      const startY = cy - (rows * cellH) \/ 2;\n\n      for (let r = 0; r < rows; r++) {\n        for (let c = 0; c < cols; c++) {\n          const x = startX + c * cellW + cellW \/ 2;\n          const y = startY + r * cellH + cellH \/ 2;\n          const dist = Math.hypot(x - cx, y - cy);\n          const wave = Math.sin(dist * 0.18 - t * 2.5) * 0.5 + 0.5;\n          const size = 6 + wave * 4;\n          const alpha = 0.3 + wave * 0.7;\n\n          \/\/ Cell square\n          ctx.strokeStyle = `rgba(100,200,255,${alpha})`;\n          ctx.lineWidth = 1;\n          ctx.strokeRect(x - size \/ 2, y - size \/ 2, size, size);\n\n          \/\/ Center dot\n          ctx.beginPath();\n          ctx.arc(x, y, 1.5 + wave * 1.5, 0, PI2);\n          ctx.fillStyle = `rgba(100,200,255,${alpha})`;\n          ctx.fill();\n        }\n      }\n\n      \/\/ Outer ring pulse\n      const ringR = 52 + Math.sin(t * 2) * 4;\n      ctx.beginPath();\n      ctx.arc(cx, cy, ringR, 0, PI2);\n      ctx.strokeStyle = 'rgba(100,200,255,0.12)';\n      ctx.lineWidth = 1;\n      ctx.stroke();\n\n      t += 0.016;\n      requestAnimationFrame(draw);\n    }\n    draw();\n  })();\n\n  \/\/ \u2500\u2500 ICON 1: Quantum \u2014 atom orbital model with electron clouds \u2500\u2500\n  (function () {\n    const canvas = document.getElementById('icon1');\n    const ctx = canvas.getContext('2d');\n    const W = 128, H = 128, cx = W \/ 2, cy = H \/ 2;\n    let t = 0;\n\n    const orbitals = [\n      { rx: 44, ry: 14, angle: 0,        speed: 1.2,  color: 'rgba(167,139,250,' },\n      { rx: 44, ry: 14, angle: Math.PI \/ 3, speed: 0.9,  color: 'rgba(200,170,255,' },\n      { rx: 44, ry: 14, angle: Math.PI * 2 \/ 3, speed: 1.5, color: 'rgba(140,100,240,' },\n    ];\n\n    function draw() {\n      ctx.clearRect(0, 0, W, H);\n\n      \/\/ Nucleus glow\n      const grad = ctx.createRadialGradient(cx, cy, 0, cx, cy, 18);\n      grad.addColorStop(0, 'rgba(167,139,250,0.9)');\n      grad.addColorStop(0.4, 'rgba(167,139,250,0.4)');\n      grad.addColorStop(1, 'rgba(167,139,250,0)');\n      ctx.beginPath();\n      ctx.arc(cx, cy, 18, 0, PI2);\n      ctx.fillStyle = grad;\n      ctx.fill();\n\n      \/\/ Nucleus core\n      ctx.beginPath();\n      ctx.arc(cx, cy, 7, 0, PI2);\n      ctx.fillStyle = 'rgba(220,200,255,0.95)';\n      ctx.fill();\n\n      \/\/ Proton dots\n      for (let i = 0; i < 3; i++) {\n        const nx = cx + Math.cos(t * 0.5 + i * PI2 \/ 3) * 3;\n        const ny = cy + Math.sin(t * 0.5 + i * PI2 \/ 3) * 3;\n        ctx.beginPath();\n        ctx.arc(nx, ny, 2, 0, PI2);\n        ctx.fillStyle = 'rgba(255,200,255,0.8)';\n        ctx.fill();\n      }\n\n      orbitals.forEach((orb, i) => {\n        \/\/ Draw orbital ellipse\n        ctx.save();\n        ctx.translate(cx, cy);\n        ctx.rotate(orb.angle);\n        ctx.beginPath();\n        ctx.ellipse(0, 0, orb.rx, orb.ry, 0, 0, PI2);\n        ctx.strokeStyle = orb.color + '0.25)';\n        ctx.lineWidth = 1;\n        ctx.stroke();\n\n        \/\/ Electron position\n        const eAngle = t * orb.speed + i * PI2 \/ 3;\n        const ex = Math.cos(eAngle) * orb.rx;\n        const ey = Math.sin(eAngle) * orb.ry;\n\n        \/\/ Electron trail\n        for (let tr = 1; tr <= 8; tr++) {\n          const ta = eAngle - tr * 0.12;\n          const tx2 = Math.cos(ta) * orb.rx;\n          const ty2 = Math.sin(ta) * orb.ry;\n          ctx.beginPath();\n          ctx.arc(tx2, ty2, 1.5 * (1 - tr \/ 10), 0, PI2);\n          ctx.fillStyle = orb.color + (0.5 - tr * 0.055) + ')';\n          ctx.fill();\n        }\n\n        \/\/ Electron\n        ctx.beginPath();\n        ctx.arc(ex, ey, 3.5, 0, PI2);\n        ctx.fillStyle = orb.color + '1)';\n        ctx.fill();\n\n        \/\/ Electron glow\n        const eg = ctx.createRadialGradient(ex, ey, 0, ex, ey, 8);\n        eg.addColorStop(0, orb.color + '0.5)');\n        eg.addColorStop(1, orb.color + '0)');\n        ctx.beginPath();\n        ctx.arc(ex, ey, 8, 0, PI2);\n        ctx.fillStyle = eg;\n        ctx.fill();\n\n        ctx.restore();\n      });\n\n      t += 0.016;\n      requestAnimationFrame(draw);\n    }\n    draw();\n  })();\n\n  \/\/ \u2500\u2500 ICON 2: Nanophotonics \u2014 photon wave passing through a nano aperture \u2500\u2500\n  (function () {\n    const canvas = document.getElementById('icon2');\n    const ctx = canvas.getContext('2d');\n    const W = 128, H = 128, cx = W \/ 2, cy = H \/ 2;\n    let t = 0;\n\n    function draw() {\n      ctx.clearRect(0, 0, W, H);\n\n      \/\/ Incoming parallel rays (left side)\n      const rayYs = [-24, -12, 0, 12, 24];\n      rayYs.forEach(ry => {\n        const y = cy + ry;\n        const waveX = 18 + Math.sin(t * 3 + ry * 0.3) * 3;\n\n        \/\/ Ray line\n        ctx.beginPath();\n        ctx.moveTo(8, y);\n        ctx.lineTo(50, y);\n        ctx.strokeStyle = `rgba(255,180,0,${0.3 + Math.sin(t * 3 + ry * 0.2) * 0.2})`;\n        ctx.lineWidth = ry === 0 ? 2 : 1;\n        ctx.stroke();\n\n        \/\/ Wave dots on ray\n        for (let wx = 8; wx < 50; wx += 8) {\n          const wa = Math.sin((wx - t * 40) * 0.25) * 3;\n          ctx.beginPath();\n          ctx.arc(wx, y + wa * 0.3, 1.2, 0, PI2);\n          ctx.fillStyle = `rgba(255,200,50,0.6)`;\n          ctx.fill();\n        }\n      });\n\n      \/\/ Aperture slit (nano structure)\n      ctx.fillStyle = 'rgba(255,180,0,0.15)';\n      ctx.fillRect(50, 8, 10, cy - 8 - 14);\n      ctx.fillRect(50, cy + 14, 10, cy - 14 - 8);\n      ctx.strokeStyle = 'rgba(255,200,100,0.5)';\n      ctx.lineWidth = 1;\n      ctx.strokeRect(50, 8, 10, cy - 8 - 14);\n      ctx.strokeRect(50, cy + 14, 10, cy - 14 - 8);\n\n      \/\/ Slit opening glow\n      const slitGrad = ctx.createLinearGradient(50, cy - 14, 50, cy + 14);\n      slitGrad.addColorStop(0, 'rgba(255,220,0,0)');\n      slitGrad.addColorStop(0.5, 'rgba(255,220,0,0.4)');\n      slitGrad.addColorStop(1, 'rgba(255,220,0,0)');\n      ctx.fillStyle = slitGrad;\n      ctx.fillRect(48, cy - 14, 14, 28);\n\n      \/\/ Diffracted waves (right side, circular)\n      for (let ring = 1; ring <= 6; ring++) {\n        const rr = ring * 11 + (t * 28) % 11;\n        if (rr > 70) continue;\n        const alpha = (1 - rr \/ 70) * 0.55;\n        ctx.beginPath();\n        ctx.arc(60, cy, rr, -Math.PI * 0.75, Math.PI * 0.75);\n        ctx.strokeStyle = `rgba(255,180,0,${alpha})`;\n        ctx.lineWidth = 1.2;\n        ctx.stroke();\n      }\n\n      \/\/ Bright spot at slit\n      const sg = ctx.createRadialGradient(60, cy, 0, 60, cy, 10);\n      sg.addColorStop(0, 'rgba(255,240,100,0.9)');\n      sg.addColorStop(1, 'rgba(255,200,0,0)');\n      ctx.beginPath();\n      ctx.arc(60, cy, 10, 0, PI2);\n      ctx.fillStyle = sg;\n      ctx.fill();\n\n      t += 0.016;\n      requestAnimationFrame(draw);\n    }\n    draw();\n  })();\n\n  \/\/ \u2500\u2500 ICON 3: Self-assembly \u2014 molecules drifting and bonding \u2500\u2500\n  (function () {\n    const canvas = document.getElementById('icon3');\n    const ctx = canvas.getContext('2d');\n    const W = 128, H = 128, cx = W \/ 2, cy = H \/ 2;\n    let t = 0;\n\n    const nodes = Array.from({ length: 9 }, (_, i) => {\n      const angle = (i \/ 9) * PI2;\n      const r = i < 6 ? 38 : 18;\n      return {\n        baseX: cx + Math.cos(angle) * r,\n        baseY: cy + Math.sin(angle) * r,\n        phase: Math.random() * PI2,\n        speed: 0.4 + Math.random() * 0.4,\n        r: i < 6 ? 6 : 5,\n        color: i < 3 ? 'rgba(0,255,180,' : i < 6 ? 'rgba(0,200,150,' : 'rgba(100,255,200,'\n      };\n    });\n\n    const bonds = [\n      [0,1],[1,2],[2,3],[3,4],[4,5],[5,0],\n      [0,6],[2,7],[4,8],[6,7],[7,8],[8,6]\n    ];\n\n    function draw() {\n      ctx.clearRect(0, 0, W, H);\n\n      \/\/ Get current positions\n      const pos = nodes.map(n => ({\n        x: n.baseX + Math.cos(t * n.speed + n.phase) * 4,\n        y: n.baseY + Math.sin(t * n.speed + n.phase) * 4\n      }));\n\n      \/\/ Bonds\n      bonds.forEach(([i, j]) => {\n        const a = pos[i], b = pos[j];\n        const dist = Math.hypot(a.x - b.x, a.y - b.y);\n        const alpha = Math.max(0, 1 - dist \/ 55) * 0.5;\n\n        \/\/ Double bond style\n        const dx = b.x - a.x, dy = b.y - a.y;\n        const len = Math.hypot(dx, dy);\n        const nx = -dy \/ len * 1.5, ny = dx \/ len * 1.5;\n\n        ctx.beginPath();\n        ctx.moveTo(a.x + nx, a.y + ny);\n        ctx.lineTo(b.x + nx, b.y + ny);\n        ctx.strokeStyle = `rgba(0,255,180,${alpha})`;\n        ctx.lineWidth = 0.8;\n        ctx.stroke();\n\n        ctx.beginPath();\n        ctx.moveTo(a.x - nx, a.y - ny);\n        ctx.lineTo(b.x - nx, b.y - ny);\n        ctx.strokeStyle = `rgba(0,255,180,${alpha * 0.6})`;\n        ctx.lineWidth = 0.8;\n        ctx.stroke();\n      });\n\n      \/\/ Nodes\n      nodes.forEach((n, i) => {\n        const p = pos[i];\n\n        \/\/ Glow\n        const g = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, n.r * 2.5);\n        g.addColorStop(0, n.color + '0.6)');\n        g.addColorStop(1, n.color + '0)');\n        ctx.beginPath();\n        ctx.arc(p.x, p.y, n.r * 2.5, 0, PI2);\n        ctx.fillStyle = g;\n        ctx.fill();\n\n        \/\/ Core\n        ctx.beginPath();\n        ctx.arc(p.x, p.y, n.r, 0, PI2);\n        ctx.fillStyle = n.color + '0.9)';\n        ctx.fill();\n\n        \/\/ Highlight\n        ctx.beginPath();\n        ctx.arc(p.x - n.r * 0.3, p.y - n.r * 0.3, n.r * 0.35, 0, PI2);\n        ctx.fillStyle = 'rgba(255,255,255,0.5)';\n        ctx.fill();\n      });\n\n      \/\/ Center assembly indicator\n      const pulse = Math.sin(t * 2) * 0.5 + 0.5;\n      ctx.beginPath();\n      ctx.arc(cx, cy, 10 + pulse * 4, 0, PI2);\n      ctx.strokeStyle = `rgba(0,255,180,${0.2 + pulse * 0.3})`;\n      ctx.lineWidth = 1;\n      ctx.stroke();\n\n      t += 0.016;\n      requestAnimationFrame(draw);\n    }\n    draw();\n  })();\n\n  \/\/ \u2500\u2500 GSAP card entrance \u2500\u2500\n  gsap.fromTo('.interest-card', {\n    opacity: 0,\n    y: 30\n  }, {\n    opacity: 1,\n    y: 0,\n    duration: 0.7,\n    stagger: 0.15,\n    ease: 'power3.out',\n    delay: 0.2\n  });\n\n  \/\/ Hover glow border effect\n  document.querySelectorAll('.interest-card').forEach((card, i) => {\n    const colors = [\n      'rgba(100,200,255,0.2)',\n      'rgba(167,139,250,0.2)',\n      'rgba(255,180,0,0.2)',\n      'rgba(0,255,180,0.2)'\n    ];\n    card.addEventListener('mouseenter', () => {\n      gsap.to(card, { borderColor: colors[i], duration: 0.3 });\n    });\n    card.addEventListener('mouseleave', () => {\n      gsap.to(card, { borderColor: 'rgba(255,255,255,0.06)', duration: 0.3 });\n    });\n  });\n\n})();\n<\/script>\n\n\n\n<p><\/p>\n\n\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-full is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"320\" height=\"116\" data-id=\"89\" src=\"https:\/\/labs.engineering.asu.edu\/yanglab\/wp-content\/uploads\/sites\/85\/2022\/07\/Clip-Graphical-figure-show2-1.gif\" alt=\"\" class=\"wp-image-89\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"320\" height=\"116\" data-id=\"90\" src=\"https:\/\/labs.engineering.asu.edu\/yanglab\/wp-content\/uploads\/sites\/85\/2022\/07\/Clip-Graphical-figure-showq1-1.gif\" alt=\"\" class=\"wp-image-90\"\/><\/figure>\n<\/figure>\n<\/div>\n<\/div>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n","protected":false},"excerpt":{"rendered":"<p class=\"mb-2\">YLab MetaMatters YLab MetaMatters YLab MetaMatters Yang Lab &nbsp;\u00b7&nbsp; Arizona State University Y Yang Lab \u00b7 ASU Lab (Yang Lab) strives to bring scientific solutions to our world. We study light\u2013matter interactions with artificial structures, molecules, and atoms to drive innovations and applications across science and engineering disciplines. YLab Newsletter Yang Lab \u00b7 Arizona State&#8230;<\/p>\n","protected":false},"author":179,"featured_media":0,"parent":0,"menu_order":4,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-84","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>- Yang Lab (YLab)<\/title>\n<meta name=\"description\" content=\"We study light-matter interactions with artificial atoms, molecules, and structures to realize extraordinary properties and applications across science and engineering disciplines.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/labs.engineering.asu.edu\/yanglab\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"- Yang Lab (YLab)\" \/>\n<meta property=\"og:description\" content=\"We study light-matter interactions with artificial atoms, molecules, and structures to realize extraordinary properties and applications across science and engineering disciplines.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/labs.engineering.asu.edu\/yanglab\/\" \/>\n<meta property=\"og:site_name\" content=\"Yang Lab (YLab)\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-12T13:20:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/labs.engineering.asu.edu\/yanglab\/wp-content\/uploads\/sites\/85\/2026\/04\/yang-2w.jpg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/labs.engineering.asu.edu\\\/yanglab\\\/\",\"url\":\"https:\\\/\\\/labs.engineering.asu.edu\\\/yanglab\\\/\",\"name\":\"- Yang Lab (YLab)\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/labs.engineering.asu.edu\\\/yanglab\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/labs.engineering.asu.edu\\\/yanglab\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/labs.engineering.asu.edu\\\/yanglab\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/labs.engineering.asu.edu\\\/yanglab\\\/wp-content\\\/uploads\\\/sites\\\/85\\\/2026\\\/04\\\/yang-2w.jpg\",\"datePublished\":\"2022-07-15T23:36:17+00:00\",\"dateModified\":\"2026-04-12T13:20:28+00:00\",\"description\":\"We study light-matter interactions with artificial atoms, molecules, and structures to realize extraordinary properties and applications across science and engineering disciplines.\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/labs.engineering.asu.edu\\\/yanglab\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/labs.engineering.asu.edu\\\/yanglab\\\/#primaryimage\",\"url\":\"https:\\\/\\\/labs.engineering.asu.edu\\\/yanglab\\\/wp-content\\\/uploads\\\/sites\\\/85\\\/2026\\\/04\\\/yang-2w.jpg\",\"contentUrl\":\"https:\\\/\\\/labs.engineering.asu.edu\\\/yanglab\\\/wp-content\\\/uploads\\\/sites\\\/85\\\/2026\\\/04\\\/yang-2w.jpg\",\"width\":1920,\"height\":1080},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/labs.engineering.asu.edu\\\/yanglab\\\/#website\",\"url\":\"https:\\\/\\\/labs.engineering.asu.edu\\\/yanglab\\\/\",\"name\":\"Yang Lab (YLab)\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/labs.engineering.asu.edu\\\/yanglab\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/labs.engineering.asu.edu\\\/yanglab\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/labs.engineering.asu.edu\\\/yanglab\\\/#organization\",\"name\":\"Yang Lab (YLab)\",\"url\":\"https:\\\/\\\/labs.engineering.asu.edu\\\/yanglab\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/labs.engineering.asu.edu\\\/yanglab\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/labs.engineering.asu.edu\\\/yanglab\\\/wp-content\\\/uploads\\\/sites\\\/85\\\/2025\\\/11\\\/cropped-image-14-1.png\",\"contentUrl\":\"https:\\\/\\\/labs.engineering.asu.edu\\\/yanglab\\\/wp-content\\\/uploads\\\/sites\\\/85\\\/2025\\\/11\\\/cropped-image-14-1.png\",\"width\":819,\"height\":540,\"caption\":\"Yang Lab (YLab)\"},\"image\":{\"@id\":\"https:\\\/\\\/labs.engineering.asu.edu\\\/yanglab\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"- Yang Lab (YLab)","description":"We study light-matter interactions with artificial atoms, molecules, and structures to realize extraordinary properties and applications across science and engineering disciplines.","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:\/\/labs.engineering.asu.edu\/yanglab\/","og_locale":"en_US","og_type":"article","og_title":"- Yang Lab (YLab)","og_description":"We study light-matter interactions with artificial atoms, molecules, and structures to realize extraordinary properties and applications across science and engineering disciplines.","og_url":"https:\/\/labs.engineering.asu.edu\/yanglab\/","og_site_name":"Yang Lab (YLab)","article_modified_time":"2026-04-12T13:20:28+00:00","og_image":[{"url":"https:\/\/labs.engineering.asu.edu\/yanglab\/wp-content\/uploads\/sites\/85\/2026\/04\/yang-2w.jpg","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/labs.engineering.asu.edu\/yanglab\/","url":"https:\/\/labs.engineering.asu.edu\/yanglab\/","name":"- Yang Lab (YLab)","isPartOf":{"@id":"https:\/\/labs.engineering.asu.edu\/yanglab\/#website"},"primaryImageOfPage":{"@id":"https:\/\/labs.engineering.asu.edu\/yanglab\/#primaryimage"},"image":{"@id":"https:\/\/labs.engineering.asu.edu\/yanglab\/#primaryimage"},"thumbnailUrl":"https:\/\/labs.engineering.asu.edu\/yanglab\/wp-content\/uploads\/sites\/85\/2026\/04\/yang-2w.jpg","datePublished":"2022-07-15T23:36:17+00:00","dateModified":"2026-04-12T13:20:28+00:00","description":"We study light-matter interactions with artificial atoms, molecules, and structures to realize extraordinary properties and applications across science and engineering disciplines.","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/labs.engineering.asu.edu\/yanglab\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/labs.engineering.asu.edu\/yanglab\/#primaryimage","url":"https:\/\/labs.engineering.asu.edu\/yanglab\/wp-content\/uploads\/sites\/85\/2026\/04\/yang-2w.jpg","contentUrl":"https:\/\/labs.engineering.asu.edu\/yanglab\/wp-content\/uploads\/sites\/85\/2026\/04\/yang-2w.jpg","width":1920,"height":1080},{"@type":"WebSite","@id":"https:\/\/labs.engineering.asu.edu\/yanglab\/#website","url":"https:\/\/labs.engineering.asu.edu\/yanglab\/","name":"Yang Lab (YLab)","description":"","publisher":{"@id":"https:\/\/labs.engineering.asu.edu\/yanglab\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/labs.engineering.asu.edu\/yanglab\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/labs.engineering.asu.edu\/yanglab\/#organization","name":"Yang Lab (YLab)","url":"https:\/\/labs.engineering.asu.edu\/yanglab\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/labs.engineering.asu.edu\/yanglab\/#\/schema\/logo\/image\/","url":"https:\/\/labs.engineering.asu.edu\/yanglab\/wp-content\/uploads\/sites\/85\/2025\/11\/cropped-image-14-1.png","contentUrl":"https:\/\/labs.engineering.asu.edu\/yanglab\/wp-content\/uploads\/sites\/85\/2025\/11\/cropped-image-14-1.png","width":819,"height":540,"caption":"Yang Lab (YLab)"},"image":{"@id":"https:\/\/labs.engineering.asu.edu\/yanglab\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/labs.engineering.asu.edu\/yanglab\/wp-json\/wp\/v2\/pages\/84","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/labs.engineering.asu.edu\/yanglab\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/labs.engineering.asu.edu\/yanglab\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/labs.engineering.asu.edu\/yanglab\/wp-json\/wp\/v2\/users\/179"}],"replies":[{"embeddable":true,"href":"https:\/\/labs.engineering.asu.edu\/yanglab\/wp-json\/wp\/v2\/comments?post=84"}],"version-history":[{"count":10,"href":"https:\/\/labs.engineering.asu.edu\/yanglab\/wp-json\/wp\/v2\/pages\/84\/revisions"}],"predecessor-version":[{"id":1111,"href":"https:\/\/labs.engineering.asu.edu\/yanglab\/wp-json\/wp\/v2\/pages\/84\/revisions\/1111"}],"wp:attachment":[{"href":"https:\/\/labs.engineering.asu.edu\/yanglab\/wp-json\/wp\/v2\/media?parent=84"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}