f20a8d5d4e
MOVES grammar + solveMove(): push in/pull out (one rung along the shot ladder,
along the aim ray), truck L/R (lateral, parallel, no re-aim), crane up/down
(vertical then re-aim, floor-clamped), orbit L/R (constant distance, +/-25deg),
zoom in/out (focal only - pos and rot returned identical). Amounts are
frame-relative so a move reads the same on a CU as a WS. Emits a new 'move' op
on scenegod:direct with explicit from/to states, pre-clamped duration and ease;
the START is applied to the live camera immediately.
'+ angle' creates a NEW camera from the current shot settings instead of
reframing the active one - the friction hit while building a 4-camera scene by
hand. 🎥 frame now prefers the live camera so it adjusts what you just made
rather than silently editing camera 1. fitAnchor exposed in the backdrop
inspector (it was inert from the UI).
Verified live: push_in 1.975->1.588m fov fixed; zoom_in travel 0.000 with
pos/rot identical, fov 37.85->26.99; orbit_L constant distance; truck_R
parallel. 4 suites green.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
113 lines
7.2 KiB
CSS
113 lines
7.2 KiB
CSS
/* SCENEGOD — dark director UI, visual language borrowed from MESHGOD rigroom */
|
|
:root{
|
|
--bg:#101317; --bg2:#161b21; --panel:#1a2027; --line:#2a323b; --line2:#39434e;
|
|
--ink:#e8ecf1; --mut:#8a95a2; --teal:#43c0cf; --teal-d:#2a8b98; --bad:#e0604a; --good:#5bc98b;
|
|
--sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
|
|
--mono:ui-monospace,"SF Mono",Menlo,monospace;
|
|
}
|
|
*{box-sizing:border-box}
|
|
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);height:100vh;
|
|
display:flex;flex-direction:column;overflow:hidden}
|
|
header{padding:10px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;flex:0 0 auto}
|
|
header h1{margin:0;font-size:16px;letter-spacing:-.01em}
|
|
header .tag{font-family:var(--mono);font-size:10px;color:var(--teal);letter-spacing:.12em;text-transform:uppercase}
|
|
#selftest{margin-left:auto;font-family:var(--mono);font-size:11px}
|
|
#selftest.ok{color:var(--good)} #selftest.bad{color:var(--bad)}
|
|
|
|
#app{flex:1;min-height:0;display:grid;
|
|
grid-template-columns:280px 1fr 260px;
|
|
grid-template-rows:1fr 260px;
|
|
grid-template-areas:"dock view inspector" "dock timeline inspector";}
|
|
#dock{grid-area:dock;border-right:1px solid var(--line);overflow-y:auto;padding:10px}
|
|
#view{grid-area:view;position:relative;min-width:0;
|
|
background:radial-gradient(120% 100% at 50% 0%,#20272f,#0d1013)}
|
|
#view canvas{display:block;width:100%;height:100%}
|
|
#inspector{grid-area:inspector;border-left:1px solid var(--line);overflow-y:auto;padding:12px}
|
|
#timeline{grid-area:timeline;border-top:1px solid var(--line);background:var(--bg2);overflow:auto}
|
|
|
|
.empty{color:var(--mut);font-family:var(--mono);font-size:11.5px;padding:14px;line-height:1.6}
|
|
|
|
/* dock */
|
|
.tabs{display:flex;background:var(--bg2);border:1px solid var(--line2);border-radius:7px;overflow:hidden;margin-bottom:10px}
|
|
.tabs button{flex:1;background:transparent;border:0;color:var(--mut);padding:7px 6px;font-family:var(--mono);
|
|
font-size:10.5px;cursor:pointer;letter-spacing:.04em}
|
|
.tabs button.on{background:var(--teal);color:#0c0f12;font-weight:700}
|
|
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px}
|
|
.card{background:var(--bg2);border:1px solid var(--line);border-radius:9px;overflow:hidden;cursor:pointer}
|
|
.card:hover{border-color:var(--teal)}
|
|
.card .th{width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:30px;
|
|
background:radial-gradient(120% 100% at 50% 0%,#20272f,#0d1013);color:var(--mut)}
|
|
.card .nm{padding:5px 7px;font-size:10.5px;line-height:1.3;color:var(--ink);
|
|
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:30px}
|
|
|
|
/* inspector */
|
|
.ihd{margin-bottom:10px} .ihd b{font-size:14px}
|
|
.ihd .kind{display:block;font-family:var(--mono);font-size:10px;color:var(--mut);text-transform:uppercase;letter-spacing:.08em;margin-top:2px}
|
|
.ihd .warn{color:var(--bad)}
|
|
.fld{display:flex;align-items:center;gap:8px;margin:7px 0;font-family:var(--mono);font-size:11px;color:var(--mut)}
|
|
.fld>span{width:52px;flex:0 0 auto}
|
|
.fld input,.fld select{flex:1;min-width:0;background:var(--panel);border:1px solid var(--line2);color:var(--ink);
|
|
border-radius:6px;padding:5px 7px;font-family:var(--mono);font-size:11px}
|
|
.fld input[type=color]{padding:2px;height:26px}
|
|
.fld input[type=checkbox]{flex:0 0 auto;width:15px;height:15px;accent-color:var(--teal)}
|
|
.fld input[type=range]{padding:0;height:22px;border:0;background:transparent;accent-color:var(--teal)}
|
|
.fld .rv{flex:0 0 auto;width:30px;text-align:right;color:var(--ink);font-weight:400}
|
|
.fld.vec input{width:100%}
|
|
.fld.vec{align-items:center}
|
|
.ibtns{display:flex;gap:8px;margin-top:14px}
|
|
.ibtns button{flex:1;background:var(--panel);border:1px solid var(--line2);color:var(--ink);border-radius:7px;
|
|
padding:8px;font-family:var(--mono);font-size:12px;cursor:pointer}
|
|
.ibtns button:hover{border-color:var(--teal)}
|
|
.ibtns button.danger:hover{border-color:var(--bad);color:var(--bad)}
|
|
button.wide{width:100%;margin:8px 0 0;background:var(--panel);border:1px solid var(--line2);color:var(--ink);
|
|
border-radius:7px;padding:8px;font-family:var(--mono);font-size:11px;cursor:pointer}
|
|
button.wide:hover{border-color:var(--teal)}
|
|
.viseme{font-family:var(--mono);font-size:10.5px;color:var(--teal);background:var(--bg2);
|
|
border:1px solid var(--line2);border-radius:6px;padding:6px 8px;margin:8px 0 0;word-break:break-word}
|
|
.viseme.off{color:var(--mut);opacity:.6}
|
|
|
|
/* drop + toast */
|
|
body.hot::after{content:'drop to load';position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
|
|
font-size:24px;color:var(--teal);background:rgba(16,19,23,.85);pointer-events:none;z-index:99}
|
|
#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--panel);
|
|
border:1px solid var(--teal);border-radius:9px;padding:9px 16px;font-size:13px;display:none;z-index:50;max-width:80vw}
|
|
|
|
/* PiP — active camera preview inset (bottom-right, ~24% wide, click to swap). Size set in JS. */
|
|
.pip{position:absolute;right:12px;bottom:12px;border:1px solid var(--teal);border-radius:6px;
|
|
background:#000;cursor:pointer;box-shadow:0 4px 18px rgba(0,0,0,.55);z-index:5}
|
|
.pip:hover{border-color:var(--ink)}
|
|
|
|
/* dock "add rig" toolbar (cameras + lights have no asset file) */
|
|
.addbar{display:flex;gap:6px;margin-bottom:10px}
|
|
.addbar button{flex:1;background:var(--panel);border:1px solid var(--line2);color:var(--ink);border-radius:7px;
|
|
padding:6px 4px;font-family:var(--mono);font-size:10.5px;cursor:pointer}
|
|
.addbar button:hover{border-color:var(--teal)}
|
|
.card[draggable]{cursor:grab}
|
|
|
|
/* DIRECT panel — cinema-grammar one-click presets (M5) */
|
|
#direct{flex:0 0 auto;display:flex;align-items:center;gap:14px;padding:6px 12px;
|
|
border-bottom:1px solid var(--line);background:var(--bg2);overflow-x:auto;white-space:nowrap}
|
|
#direct:empty{display:none}
|
|
.dseg{display:flex;align-items:center;gap:4px}
|
|
.dlab{font-family:var(--mono);font-size:9.5px;color:var(--mut);text-transform:uppercase;letter-spacing:.08em;margin-right:2px}
|
|
.dseg button{background:var(--panel);border:1px solid var(--line2);color:var(--ink);border-radius:6px;
|
|
padding:4px 8px;font-family:var(--mono);font-size:10.5px;cursor:pointer}
|
|
.dseg button:hover{border-color:var(--teal)}
|
|
.dseg button.on{background:var(--teal);border-color:var(--teal);color:#0c0f12;font-weight:700}
|
|
.dseg select{background:var(--panel);border:1px solid var(--line2);color:var(--ink);border-radius:6px;
|
|
padding:4px 6px;font-family:var(--mono);font-size:10.5px}
|
|
.dseg.nl input{background:var(--panel);border:1px solid var(--line2);color:var(--ink);border-radius:6px;
|
|
padding:4px 8px;font-family:var(--mono);font-size:11px;width:230px}
|
|
.dseg input.dur{background:var(--panel);border:1px solid var(--line2);color:var(--ink);border-radius:6px;
|
|
padding:4px 6px;font-family:var(--mono);font-size:10.5px;width:56px}
|
|
.dinfo{font-family:var(--mono);font-size:10.5px;color:var(--teal);margin-left:auto;padding-left:10px}
|
|
|
|
/* M6 video plates: 📺 add-as-screen button on dock cards */
|
|
.card{position:relative}
|
|
.card .tv{position:absolute;top:4px;right:4px;background:rgba(16,19,23,.82);border:1px solid var(--line2);
|
|
border-radius:6px;font-size:13px;padding:2px 5px;cursor:pointer}
|
|
.card .tv:hover{border-color:var(--teal)}
|
|
|
|
/* === LANE B === */
|
|
/* Lane B appends timeline styling below this marker */
|