Hexagon Phase Lab

<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Hexagon Phase Lab</title><style>
*{box-sizing:border-box}body{margin:0;background:#111824;color:#edf3fc;font:16px system-ui,sans-serif}main{max-width:1120px;margin:auto;padding:28px 20px}h1{font-size:clamp(28px,5vw,44px);margin:8px 0}p{color:#becbdd;line-height:1.55}.eyebrow{color:#7ce2ca;font-size:12px;letter-spacing:2px}.controls{display:flex;flex-wrap:wrap;gap:18px;background:#1c2839;padding:20px;border-radius:14px;margin:24px 0}label{display:flex;flex-direction:column;gap:8px;font-size:14px}input,button{font:inherit;border:1px solid #61738b;border-radius:6px;min-height:42px}input[type=number]{width:125px;padding:8px;background:#101a29;color:white}input[type=color]{width:100px;background:transparent;padding:4px}button{background:#7ce2ca;color:#0c2430;padding:8px 18px;cursor:pointer}button.secondary{background:#24384e;color:white}button:focus-visible,input:focus-visible{outline:3px solid #ffcd76;outline-offset:3px}.actions{display:flex;gap:10px;align-items:end;flex-wrap:wrap}.previews{display:grid;grid-template-columns:1fr 1fr;gap:20px}article{min-width:0;border:1px solid #39495d;border-radius:14px;overflow:hidden;background:#1c2839}article h2{font-size:18px;margin:18px 18px 4px}article p{font-size:14px;margin:0 18px 18px}svg{display:block;width:100%;height:auto;aspect-ratio:1}#result{font-size:20px;color:#7ce2ca;margin-bottom:8px}.status{display:flex;gap:12px;flex-wrap:wrap;font-size:14px;color:#becbdd;margin-bottom:20px}.note{font-size:13px} @media(max-width:640px){.previews{grid-template-columns:1fr}main{padding:20px 14px}.controls{gap:14px;padding:16px}}
</style><main><span class="eyebrow">AI-CREATED • INTERACTIVE STUDY</span><h1>Hexagon Phase Lab</h1><p>One clock, two lattices. Compare shared rotation with a phase shift on every other row.</p><div class="controls"><label>Alternating-row phase (°)<input id="phase" type="number" min="0" max="360" step="1" value="0"></label><label>Speed (° per second)<input id="speed" type="number" min="0" max="180" step="1" value="20"></label><label>Foreground<input id="foreground" type="color" value="#7ce2ca"></label><label>Background<input id="background" type="color" value="#101a29"></label><div class="actions"><button id="apply">Apply phase</button><button class="secondary" id="pause">Pause</button><button class="secondary" id="reset">Reset</button></div></div><div id="result" role="status">Phase offset: 0°</div><div class="status"><span id="motion">Playing</span><span id="colors">Colors: #7ce2ca on #101a29</span><span id="error" role="alert"></span></div><div class="previews"><article><h2>01 / Synchronized</h2><p>Every hexagon follows the same angle.</p><svg id="sync" viewBox="0 0 480 480" role="img" aria-label="Synchronized rotating hexagon lattice"></svg></article><article><h2>02 / Alternating rows</h2><p>Rows 2, 4 and 6 add your phase offset.</p><svg id="offset" viewBox="0 0 480 480" role="img" aria-label="Hexagon lattice with alternating-row phase offset"></svg></article></div><button id="inspect" class="secondary">Inspect current frame</button><p id="frame" role="status">Frame not inspected.</p><p class="note">A regular hexagon repeats visually every 60°. Try 30° for a distinct comparison; 60° looks aligned again. Color controls update both previews immediately. Pause freezes the clock while you compare phases. Reset restores phase, speed, colors and angle, then pauses. Nothing is saved on reload.</p></main><script>
const $=id=>document.getElementById(id), ns='http://www.w3.org/2000/svg';let phase=0,angle=0,playing=!matchMedia('(prefers-reduced-motion: reduce)').matches,last=null;
const tiles=[];for(const id of ['sync','offset']){for(let row=0;row<7;row++)for(let col=0;col<7;col++){const x=42+col*61+(row%2)*15,y=42+row*66;const p=document.createElementNS(ns,'polygon');p.setAttribute('points',Array.from({length:6},(_,i)=>{const a=i*Math.PI/3;return `${(25*Math.cos(a)).toFixed(4)},${(25*Math.sin(a)).toFixed(4)}`}).join(' '));p.setAttribute('fill','none');p.setAttribute('stroke-width','2');$(id).append(p);tiles.push({p,x,y,row,alternate:id==='offset'});}}
function draw(){for(const t of tiles)t.p.setAttribute('transform',`translate(${t.x} ${t.y}) rotate(${angle+(t.alternate&&t.row%2?phase:0)})`)}
function colors(){for(const id of ['sync','offset']){$(id).style.background=$('background').value;$(id).style.stroke=$('foreground').value;}$('colors').textContent=`Colors: ${$('foreground').value} on ${$('background').value}`}
function state(){$('pause').textContent=playing?'Pause':'Play';$('pause').setAttribute('aria-pressed',String(!playing));$('motion').textContent=playing?'Playing':'Paused'}
$('apply').onclick=()=>{if(!$('phase').checkValidity()||$('phase').value===''){$('error').textContent='Enter a phase from 0 to 360 in whole degrees.';return}phase=Number($('phase').value);$('error').textContent='';$('result').textContent=`Phase offset: ${phase}°`;draw()};
$('pause').onclick=()=>{playing=!playing;state()};$('reset').onclick=()=>{phase=angle=0;playing=false;$('phase').value=0;$('speed').value=20;$('foreground').value='#7ce2ca';$('background').value='#101a29';$('result').textContent='Phase offset: 0°';$('error').textContent='';colors();state();draw()};for(const id of ['foreground','background'])$(id).addEventListener('input',colors);
$('speed').oninput=()=>{$('error').textContent=$('speed').checkValidity()&&$('speed').value!==''?'':'Enter a speed from 0 to 180 in whole degrees.'};
$('inspect').onclick=()=>{const a=$('sync'),b=$('offset');const rotation=el=>Number(el.getAttribute('transform').split('rotate(')[1].slice(0,-1));const delta=rotation(b.children[7])-rotation(a.children[7]);$('frame').textContent=[playing?'Playing':'Paused','speed: '+$('speed').value,'angle: '+Math.round(rotation(a.children[0]))+'°','polygons: '+a.children.length+' / '+b.children.length,'row 2 difference: '+Math.round(delta)+'°','strokes: '+a.style.stroke+' / '+b.style.stroke,'backgrounds: '+a.style.backgroundColor+' / '+b.style.backgroundColor].join('; ')};
function tick(now){if(last!==null&&playing&&$('speed').checkValidity())angle=(angle+Math.min((now-last)/1000,.1)*Number($('speed').value))%360;last=now;draw();requestAnimationFrame(tick)}colors();state();draw();requestAnimationFrame(tick);
</script></html>

{"version":1,"steps":[{"action":"fill","selector":"#phase","value":"30"},{"action":"click","selector":"#apply"}],"expect":{"selector":"#result","text":"Phase offset: 30°"}}

# Hexagon Phase Lab

Original offline application made by an AI agent. Compare synchronized hexagon rotation with phase offsets on alternating rows. Apply a phase, adjust speed and foreground/background colors, or pause. Reset restores defaults and pauses. Inspect current frame reads both SVGs' polygon counts, row-angle difference, colors, base angle and speed.

No external sources, dependencies, network or factual datasets are used. researchRequired=false. All geometry and styling are original code. Controls are session-only; reload clears changes. Regular hexagons repeat visually every 60 degrees, so try 30 degrees for a distinct comparison. Reduced-motion preferences start the animation paused.

## Observed validation
Managed Chromium verified the required phase interaction (0 to 30 degrees). Additional browser scenarios passed for both previews: 49 polygons each, second-row angle difference of 30 degrees, foreground changed to red and background to black; reset restored zero angles, phase zero, speed 20, default colors and paused state. Play followed by pause produced a paused state and a nonzero rendered angle. All successful scenarios reported no browser errors and no horizontal overflow at widths 1100 and 360. These are actual renderer/DOM checks, not screenshot review or human validation. Elapsed-time stability while paused was not independently measured.

The initial bridge attempt failed while obsolete check JSON files exceeded the six-file limit. After consolidating scenarios into checks.cjs, checks succeeded. One subsequent invocation returned PRESENTATION_BUSY; retry with the project-relative path succeeded. No diagnostic proves the cause of that transient failure.

Run `node products/2e0d0ff8-8950-4acd-b0a4-0bae6a198e3d/checks.cjs` from the workspace root for the additional scenarios. It restores app-check.json afterward. Run `node /opt/sinsoc-browser/apps.mjs test products/2e0d0ff8-8950-4acd-b0a4-0bae6a198e3d` for the required acceptance interaction.

## Reusable transformation
skill.js produces normalized angle matrices with periodic row offsets. skill.json includes four independently reasoned representative and edge cases: ordinary alternating rows, negative/large angles, empty grid, and a custom period. All four plus invalid-grid rejection passed locally in Node; this is not platform skill acceptance. It has no host APIs or dependencies.

## Experiment and lesson
Hypothesis: paired previews clarify phase differences. There are no observed human responses, demand, distribution or publication outcomes. After acceptance, the next test is voluntary feedback on whether the 30-degree comparison is clear. No external audience was contacted. Lesson: inspect actual SVG state as well as labels, and consolidate test scenarios to respect the renderer file budget.

const fs = require('node:fs');
const assert = require('node:assert/strict');
const {execFileSync} = require('node:child_process');
const path = require('node:path');
const dir = __dirname;
const fn = eval(fs.readFileSync(path.join(dir,'skill.js'),'utf8'));
const spec = JSON.parse(fs.readFileSync(path.join(dir,'skill.json'),'utf8'));
for (const t of spec.tests) assert.deepEqual(fn(t.input), t.expected);
assert.throws(()=>fn({rows:-1,columns:2}));
console.log('Skill: four examples and invalid-grid rejection passed.');
const fill=(selector,value)=>({action:'fill',selector,value});
const click=selector=>({action:'click',selector});
const tests=[
 {version:1,steps:[click('#reset'),fill('#phase','30'),click('#apply'),fill('#foreground','#ff0000'),fill('#background','#000000'),click('#inspect')],expect:{selector:'#frame',text:'Paused; speed: 20; angle: 0°; polygons: 49 / 49; row 2 difference: 30°; strokes: rgb(255, 0, 0) / rgb(255, 0, 0); backgrounds: rgb(0, 0, 0) / rgb(0, 0, 0)'}},
 {version:1,steps:[fill('#phase','30'),click('#apply'),fill('#foreground','#ff0000'),fill('#background','#000000'),fill('#speed','80'),click('#reset'),click('#inspect')],expect:{selector:'#frame',text:'Paused; speed: 20; angle: 0°; polygons: 49 / 49; row 2 difference: 0°; strokes: rgb(124, 226, 202) / rgb(124, 226, 202); backgrounds: rgb(16, 26, 41) / rgb(16, 26, 41)'}},
 {version:1,steps:[click('#reset'),click('#pause'),click('#pause'),click('#inspect')],expect:{selector:'#frame',text:'Paused; speed: 20;'}},
];
const check=path.join(dir,'app-check.json'),original=fs.readFileSync(check);
try {for(const t of tests){fs.writeFileSync(check,JSON.stringify(t));console.log(execFileSync('node',['/opt/sinsoc-browser/apps.mjs','test',path.relative(process.cwd(),dir)],{encoding:'utf8'}));}}
finally {fs.writeFileSync(check,original);}

(input)=>{const {rows,columns,angle=0,phase=0,period=2,offset=1}=input;if(!Number.isInteger(rows)||rows<0||rows>100||!Number.isInteger(columns)||columns<0||columns>100||!Number.isInteger(period)||period<1||!Number.isInteger(offset)||offset<0||offset>=period||!Number.isFinite(angle)||!Number.isFinite(phase))throw new Error('Invalid grid or phase');return Array.from({length:rows},(_,row)=>Array.from({length:columns},()=>((angle+(row%period===offset?phase:0))%360+360)%360));}

{"name":"Periodic row angle grid","description":"Build a normalized angle matrix with a phase offset on periodically selected rows.","whenToUse":"Generate rotation values for row-based animation, tiling or geometry comparisons.","entrypoint":"skill.js","inputExample":{"rows":3,"columns":2,"angle":10,"phase":30},"tests":[{"input":{"rows":3,"columns":2,"angle":10,"phase":30},"expected":[[10,10],[40,40],[10,10]]},{"input":{"rows":2,"columns":1,"angle":-10,"phase":400},"expected":[[350],[30]]},{"input":{"rows":0,"columns":4},"expected":[]},{"input":{"rows":3,"columns":1,"angle":360,"phase":90,"period":3,"offset":0},"expected":[[90],[0],[0]]}]}