{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"moon-phase","type":"registry:component","title":"Moon Phase","description":"An approximate lunar phase and illumination for any date.","author":"Notion Arena","categories":["dashboards"],"tags":["widget","free","moon","phase","lunar","date","sky"],"meta":{"kind":"widget","tier":"free","version":"1.0.0","updatedAt":"2026-10-11","notionPlan":"Free","emoji":"🌙","delivery":["embed","html-block","download"],"capabilities":{"interactive":true,"offlineSafe":true,"persistsLocally":false,"writesToNotion":false,"needsNetwork":false},"embedUrl":"https://notionarena.vercel.app/embed/moon-phase","fileUrl":"https://notionarena.vercel.app/widgets/moon-phase.html","downloadUrl":"https://notionarena.vercel.app/api/widget/moon-phase","height":230,"minHeight":190,"maxHeight":350,"params":[{"key":"label","label":"Widget title","type":"text","default":"Moon phase"},{"key":"date","label":"Starting date","type":"date","default":"","help":"Blank starts at the viewer's local date."},{"key":"accent","label":"Accent","type":"color","default":"#6940a5"},{"key":"theme","label":"Theme","type":"select","default":"auto","options":[{"value":"auto","label":"Match Notion"},{"value":"light","label":"Light"},{"value":"dark","label":"Dark"}]}]},"files":[{"path":"widgets/moon-phase.html","type":"registry:file","target":"notion/widgets/moon-phase.html","content":"<!doctype html>\n<html lang=\"en\" data-theme=\"auto\">\n<head>\n<meta charset=\"utf-8\" /><meta name=\"viewport\" content=\"width=device-width,initial-scale=1\" />\n<title>Moon Phase</title>\n<style>\n:root{--bg:#fff;--fg:#37352f;--muted:#787774;--surface:#f7f7f5;--border:#e9e9e7;--accent:#6940a5;--track:#e9e9e7;--font:ui-sans-serif,-apple-system,BlinkMacSystemFont,\"Segoe UI\",Helvetica,Arial,sans-serif}\nhtml[data-theme=\"dark\"]{--bg:#191919;--fg:#e6e6e4;--muted:#9b9a97;--surface:#252525;--border:#343434;--track:#343434}\n@media(prefers-color-scheme:dark){html[data-theme=\"auto\"]{--bg:#191919;--fg:#e6e6e4;--muted:#9b9a97;--surface:#252525;--border:#343434;--track:#343434}}\n*{box-sizing:border-box}html,body{margin:0;height:100%}body{background:var(--bg);color:var(--fg);font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,\"Segoe UI\",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;overflow:hidden}\n.wrap{height:100%;min-height:200px;display:flex;flex-direction:column;gap:9px;padding:14px;overflow:auto}.head{display:flex;align-items:center;justify-content:space-between;gap:8px}.kicker{font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:650}.title{font-size:14px;font-weight:650;margin-top:2px}.date{width:128px;height:30px;border:1px solid var(--border);border-radius:7px;background:var(--surface);color:var(--fg);padding:4px 6px;font:inherit;font-size:10px}\n.main{display:flex;align-items:center;justify-content:center;gap:18px;flex:1;flex-wrap:wrap}.moon{display:grid;place-items:center;width:100px;height:100px;flex:0 0 auto;border-radius:50%;background:color-mix(in oklab,var(--accent) 9%,var(--surface));font-size:58px;line-height:1}.details{display:flex;min-width:155px;flex:1;flex-direction:column;gap:6px}.phase{font-size:14px;font-weight:650}.illum{font-size:11px;color:var(--muted)}.bar{height:5px;border-radius:99px;background:var(--track);overflow:hidden}.bar i{display:block;height:100%;width:0;background:var(--accent);border-radius:99px;transition:width .3s ease}.foot{font-size:9px;color:var(--muted);line-height:1.35}\n@media(max-width:350px){.wrap{padding:10px}.main{gap:10px}.moon{width:78px;height:78px;font-size:48px}.details{min-width:140px}.date{width:112px}}\n@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}\n</style>\n</head>\n<body><main class=\"wrap\">\n  <header class=\"head\"><div><div class=\"kicker\">Lunar cycle</div><div class=\"title\" id=\"title\">Moon phase</div></div><input class=\"date\" id=\"date\" type=\"date\" aria-label=\"Choose date\" /></header>\n  <section class=\"main\"><div class=\"moon\" id=\"moon\" role=\"img\" aria-label=\"Moon phase icon\">🌔</div><div class=\"details\"><div class=\"phase\" id=\"phase\">Waxing gibbous</div><div class=\"illum\" id=\"illum\">Illumination 72%</div><div class=\"bar\" role=\"progressbar\" id=\"bar\" aria-label=\"Lunar cycle progress\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-valuenow=\"0\"><i id=\"fill\"></i></div><div class=\"foot\" id=\"nextFull\"></div></div></section>\n  <div class=\"foot\">Approximate phase estimate. Local date only, no location or live astronomy service.</div>\n</main>\n<script>\n(function(){\n  var cfgEl=document.getElementById('bk-config'),base={};try{base=cfgEl?JSON.parse(cfgEl.textContent||'{}'):{};}catch(e){}\n  var q=new URLSearchParams(location.search),c={};for(var k in base)c[k]=base[k];q.forEach(function(v,k){c[k]=v;});\n  function safeColor(v,d){return /^#[0-9a-f]{6}$/i.test(String(v||''))?String(v):d;}\n  function iso(d){return d.getFullYear()+'-'+String(d.getMonth()+1).padStart(2,'0')+'-'+String(d.getDate()).padStart(2,'0');}\n  var theme=['auto','light','dark'].indexOf(String(c.theme||'auto'))>-1?String(c.theme||'auto'):'auto',ACCENT=safeColor(c.accent,'#6940a5'),LABEL=String(c.label||'Moon phase').slice(0,48);\n  document.documentElement.setAttribute('data-theme',theme);document.documentElement.style.setProperty('--accent',ACCENT);document.getElementById('title').textContent=LABEL;document.title=LABEL;\n  var dateInput=document.getElementById('date');dateInput.value=/^\\d{4}-\\d{2}-\\d{2}$/.test(String(c.date||''))?String(c.date):iso(new Date());\n  var SYNODIC=29.530588853,EPOCH=Date.UTC(2000,0,6,18,14),NAMES=['New moon','Waxing crescent','First quarter','Waxing gibbous','Full moon','Waning gibbous','Last quarter','Waning crescent'],ICONS=['🌑','🌒','🌓','🌔','🌕','🌖','🌗','🌘'];\n  function paint(){\n    var parts=dateInput.value.split('-').map(Number),valid=parts.length===3&&parts[0]>999&&!isNaN(Date.UTC(parts[0],parts[1]-1,parts[2]));\n    if(!valid)return;\n    var stamp=Date.UTC(parts[0],parts[1]-1,parts[2],12),phase=((stamp-EPOCH)/(SYNODIC*864e5)%1+1)%1,age=phase*SYNODIC,index=Math.round(phase*8)%8,illum=(1-Math.cos(2*Math.PI*phase))/2;\n    document.getElementById('moon').textContent=ICONS[index];document.getElementById('moon').setAttribute('aria-label',NAMES[index]);\n    document.getElementById('phase').textContent=NAMES[index];document.getElementById('illum').textContent='Illumination '+Math.round(illum*100)+'%';\n    var pct=Math.round(phase*100);document.getElementById('fill').style.width=pct+'%';document.getElementById('bar').setAttribute('aria-valuenow',String(pct));\n    var toFull=((.5-phase+1)%1)*SYNODIC;document.getElementById('nextFull').textContent='Cycle day '+age.toFixed(1)+' of about '+SYNODIC.toFixed(1)+' · about '+Math.max(0,Math.round(toFull))+' days to full moon.';\n  }\n  dateInput.addEventListener('input',paint);paint();\n})();\n</script>\n</body>\n</html>\n"}]}