Let scenes layer on each other, and give the camera somewhere to look

Two devices that were built, wired up, and doing nothing.

OVERLAYS. buildStack gated layering on `surfaceOf(m) === 'composable'`, and
no scene in the library declared `surface` — so the only thing that could ever
sit on top was the one scene declaring `role: 'accent'`, and the overlay roster
excluded accents by construction. Empty intersection, every time: 0/144 stacks
carried an overlay. Every layered frame in every song was the same particle
field.

Labelled the library from the phase 12 coverage gate rather than by eye: the
37 scenes painting under 30% of the frame are composable. Particle Field loses
its privileged slot and becomes one of them, keeping only `background: false`,
which is the honest part — points in empty space cannot carry a section alone.
The reserved accent slot is gone; one roster, two passes at it. 1 distinct
overlay scene becomes 27, and the rate lands at 34% of stacks after trimming a
base chance that had been tuned while the branch was dead.

THE CAMERA. framing.shift moved the frame by a median of 0.029 of a half-frame
at a fresh random angle every shot, so successive offsets cancelled and the
median jump at a cut was 0.014. Present in every frame, visible in none.

look/Camera.js is the director's camera department: the story says tension,
order and which act a section is in, and this turns that into where the frame
looks and how it travels there. Each director names a camera. Jump distance
follows tension and act, speed follows energy, and the curve is one of four.
Cuts choose between reframing and matching, so two scenes can still read as one
place. Median offset 0.190, median reframe 0.135, and 94% of shots now move
during the shot rather than only at the cut.

Four new gates, each with a FLOOR — the device this replaces passed every
existing check while doing nothing, because the only bound was a ceiling.

Also lands the in-progress Epic 4 story layer it builds on: Story.js, phase 13,
and the direction statistic.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

flow-state/src/scenes/layers3d/particles.js

@@ -12,9 +12,17 @@ export const particleField = {
     family: 'flow',
     kind: 'layer3d',
     // Composited over a background, never used as one: most of the frame is
-    // legitimately black, so it is judged on variance rather than luminance and
-    // the look generator only picks it as an accent layer.
-    role: 'accent',
+    // legitimately black, so it is judged on variance rather than luminance.
+    //
+    // This used to say `role: 'accent'`, which was a privileged slot rather than
+    // a description. It made this scene the ONLY thing that could ever sit on
+    // top — every layered stack in every song was these particles — while the
+    // general overlay path sat dead because nothing else was labelled. It is one
+    // composable scene among many now.
+    surface: 'composable',
+    // Points in empty space with no ground of their own — the one scene in the
+    // library that genuinely cannot carry a section alone. See schema.canBackground.
+    background: false,
     // Personality: see look/Personality.js. A point cloud cannot draw the
     // signature form and has no horizon, so it claims only the camera — which
     // it can honour exactly, being the one scene with a real one.

flow-state/src/scenes/shader/aqueduct-march.js

@@ -20,6 +20,8 @@ export const aqueductMarch = {
     name: 'Aqueduct March',
     family: 'structural',
     kind: 'fragment',
+    // Paints 27% of the frame — see checks/phase12 coverage.
+    surface: 'composable',
     texture: 0.9,
     consumes: ['cast', 'ink'],
     traits: ['shape', 'camera', 'space', 'style'],

flow-state/src/scenes/shader/aurora-veil.js

@@ -13,6 +13,8 @@ export const auroraVeil = {
     name: 'Aurora Veil',
     family: 'flow',
     kind: 'fragment',
+    // Paints 13% of the frame — see checks/phase12 coverage.
+    surface: 'composable',
     consumes: ['ink'],
     traits: ['camera', 'space', 'style'],
 

flow-state/src/scenes/shader/cargo-belt.js

@@ -13,6 +13,8 @@ export const cargoBelt = {
     name: 'Cargo Belt',
     family: 'structural',
     kind: 'fragment',
+    // Paints 12% of the frame — see checks/phase12 coverage.
+    surface: 'composable',
     // Takes the track's surface grain, but lightly — this is drawn, not filmed.
     texture: 0.4,
     consumes: ['cast', 'ink'],

flow-state/src/scenes/shader/circuit-bloom.js

@@ -13,6 +13,8 @@ export const circuitBloom = {
     name: 'Circuit Bloom',
     family: 'geometric',
     kind: 'fragment',
+    // Paints 1% of the frame — see checks/phase12 coverage.
+    surface: 'composable',
     // Takes the track's surface grain, but lightly — this is drawn, not filmed.
     texture: 0.4,
     consumes: ['cast', 'ink'],

flow-state/src/scenes/shader/curl-flow.js

@@ -8,6 +8,8 @@ export const curlFlow = {
     name: 'Curl Flow',
     family: 'flow',
     kind: 'fragment',
+    // Paints 21% of the frame — see checks/phase12 coverage.
+    surface: 'composable',
     // Personality: see look/Personality.js.
     consumes: ['ink'],
     traits: ['camera', 'space', 'style'],

flow-state/src/scenes/shader/data-aisle.js

@@ -11,6 +11,8 @@ export const dataAisle = {
     name: 'Data Aisle',
     family: 'structural',
     kind: 'fragment',
+    // Paints 21% of the frame — see checks/phase12 coverage.
+    surface: 'composable',
     texture: 0.6,
     consumes: ['ink'],
     traits: ['camera', 'space', 'style'],

flow-state/src/scenes/shader/droste-feedback.js

@@ -21,6 +21,8 @@ export const drosteFeedback = {
     name: 'Droste Feedback',
     family: 'glitch',
     kind: 'fragment',
+    // Paints 2% of the frame — see checks/phase12 coverage.
+    surface: 'composable',
     texture: 0.5,
     consumes: ['ink'],
     traits: ['camera', 'style'],

flow-state/src/scenes/shader/dust-chamber.js

@@ -13,6 +13,8 @@ export const dustChamber = {
     name: 'Dust Chamber',
     family: 'minimal',
     kind: 'fragment',
+    // Paints 2% of the frame — see checks/phase12 coverage.
+    surface: 'composable',
     consumes: ['cast', 'ink'],
     traits: ['shape', 'camera', 'space', 'style'],
 

flow-state/src/scenes/shader/eclipse-field.js

@@ -16,6 +16,8 @@ export const eclipseField = {
     name: 'Eclipse Field',
     family: 'minimal',
     kind: 'fragment',
+    // Paints 17% of the frame — see checks/phase12 coverage.
+    surface: 'composable',
     // Crisp line work: the track's surface grain would only fur the edges.
     texture: 0,
     consumes: ['cast', 'ink'],

flow-state/src/scenes/shader/firefly-drift.js

@@ -9,6 +9,8 @@ export const fireflyDrift = {
     name: 'Firefly Drift',
     family: 'flow',
     kind: 'fragment',
+    // Paints 2% of the frame — see checks/phase12 coverage.
+    surface: 'composable',
     // Personality: see look/Personality.js.
     consumes: ['cast', 'ink', 'staging'],
     traits: ['camera', 'style'],

flow-state/src/scenes/shader/flora.js

@@ -11,6 +11,8 @@ export const flora = {
     name: 'Flora',
     family: 'organic',
     kind: 'fragment',
+    // Paints 15% of the frame — see checks/phase12 coverage.
+    surface: 'composable',
     // Personality: see look/Personality.js.
     consumes: ['cast', 'ink'],
     traits: ['shape', 'camera', 'style'],

flow-state/src/scenes/shader/gate-corridor.js

@@ -14,6 +14,8 @@ export const gateCorridor = {
     name: 'Gate Corridor',
     family: 'structural',
     kind: 'fragment',
+    // Paints 29% of the frame — see checks/phase12 coverage.
+    surface: 'composable',
     // Takes the track's surface grain, but lightly — this is drawn, not filmed.
     texture: 0.4,
     consumes: ['cast', 'ink'],

flow-state/src/scenes/shader/horizon-lines.js

@@ -6,6 +6,8 @@ export const horizonLines = {
     name: 'Horizon Lines',
     family: 'minimal',
     kind: 'fragment',
+    // Paints 16% of the frame — see checks/phase12 coverage.
+    surface: 'composable',
     // Personality: see look/Personality.js.
     // Crisp line work: the track's surface grain would only fur the edges.
     texture: 0,

flow-state/src/scenes/shader/ink-bleed.js

@@ -13,6 +13,8 @@ export const inkBleed = {
     name: 'Ink Bleed',
     family: 'organic',
     kind: 'fragment',
+    // Paints 1% of the frame — see checks/phase12 coverage.
+    surface: 'composable',
     consumes: ['ink'],
     traits: ['camera', 'space', 'style'],
 

flow-state/src/scenes/shader/magnet-lines.js

@@ -12,6 +12,8 @@ export const magnetLines = {
     name: 'Magnet Lines',
     family: 'flow',
     kind: 'fragment',
+    // Paints 18% of the frame — see checks/phase12 coverage.
+    surface: 'composable',
     // Line work. Grain furs it up, so take only a dusting.
     texture: 0.5,
     consumes: ['cast', 'ink'],

flow-state/src/scenes/shader/metaballs.js

@@ -7,6 +7,8 @@ export const metaballs = {
     name: 'Metaballs',
     family: 'organic',
     kind: 'fragment',
+    // Paints 26% of the frame — see checks/phase12 coverage.
+    surface: 'composable',
     // Personality: see look/Personality.js.
     consumes: ['cast', 'ink', 'staging'],
     traits: ['shape', 'camera', 'style'],

flow-state/src/scenes/shader/mycelium-web.js

@@ -12,6 +12,8 @@ export const myceliumWeb = {
     name: 'Mycelium Web',
     family: 'organic',
     kind: 'fragment',
+    // Paints 22% of the frame — see checks/phase12 coverage.
+    surface: 'composable',
     consumes: ['ink'],
     traits: ['camera', 'space', 'style'],
 

flow-state/src/scenes/shader/neon-city.js

@@ -11,6 +11,8 @@ export const neonCity = {
     name: 'Neon City',
     family: 'structural',
     kind: 'fragment',
+    // Paints 26% of the frame — see checks/phase12 coverage.
+    surface: 'composable',
     // Personality: see look/Personality.js.
     consumes: ['ink'],
     traits: ['space', 'camera', 'style'],

flow-state/src/scenes/shader/pendulum-trace.js

@@ -13,6 +13,8 @@ export const pendulumTrace = {
     name: 'Pendulum Trace',
     family: 'minimal',
     kind: 'fragment',
+    // Paints 0% of the frame — see checks/phase12 coverage.
+    surface: 'composable',
     // Fine line work; grain only furs it up.
     texture: 0.25,
     consumes: ['ink'],

flow-state/src/scenes/shader/prism-bloom.js

@@ -7,6 +7,8 @@ export const prismBloom = {
     name: 'Prism Bloom',
     family: 'geometric',
     kind: 'fragment',
+    // Paints 1% of the frame — see checks/phase12 coverage.
+    surface: 'composable',
     // Personality: see look/Personality.js.
     // Crisp line work: the track's surface grain would only fur the edges.
     texture: 0,

flow-state/src/scenes/shader/psychedelic-drift.js

@@ -9,6 +9,8 @@ export const psychedelicDrift = {
     name: 'Psychedelic Drift',
     family: 'glitch',
     kind: 'fragment',
+    // Paints 6% of the frame — see checks/phase12 coverage.
+    surface: 'composable',
     // Personality: see look/Personality.js.
     consumes: ['cast', 'ink'],
     traits: ['shape', 'camera', 'style'],

flow-state/src/scenes/shader/pylon-grid.js

@@ -8,6 +8,8 @@ export const pylonGrid = {
     name: 'Pylon Grid',
     family: 'structural',
     kind: 'fragment',
+    // Paints 27% of the frame — see checks/phase12 coverage.
+    surface: 'composable',
     // Personality: see look/Personality.js.
     // Takes the track's surface grain, but lightly — this is drawn, not filmed.
     texture: 0.4,

flow-state/src/scenes/shader/ridge-terrain.js

@@ -7,6 +7,8 @@ export const ridgeTerrain = {
     name: 'Ridge Terrain',
     family: 'structural',
     kind: 'fragment',
+    // Paints 13% of the frame — see checks/phase12 coverage.
+    surface: 'composable',
     // Personality: see look/Personality.js.
     consumes: ['ink'],
     traits: ['space', 'camera', 'style'],

flow-state/src/scenes/shader/shoji-grid.js

@@ -12,6 +12,8 @@ export const shojiGrid = {
     name: 'Shoji Grid',
     family: 'minimal',
     kind: 'fragment',
+    // Paints 23% of the frame — see checks/phase12 coverage.
+    surface: 'composable',
     // Paper has a tooth, and this is the one scene that wants it.
     texture: 1.0,
     consumes: ['cast', 'ink'],

flow-state/src/scenes/shader/signal-decay.js

@@ -10,6 +10,8 @@ export const signalDecay = {
     name: 'Signal Decay',
     family: 'glitch',
     kind: 'fragment',
+    // Paints 5% of the frame — see checks/phase12 coverage.
+    surface: 'composable',
     consumes: ['ink'],
     traits: ['camera', 'style'],
 

flow-state/src/scenes/shader/silk-ribbon.js

@@ -8,6 +8,8 @@ export const silkRibbon = {
     name: 'Silk Ribbon',
     family: 'minimal',
     kind: 'fragment',
+    // Paints 3% of the frame — see checks/phase12 coverage.
+    surface: 'composable',
     // Personality: see look/Personality.js.
     // A soft drape of light. Grain furs the one thing it is made of.
     texture: 0,

flow-state/src/scenes/shader/slow-orb.js

@@ -9,6 +9,8 @@ export const slowOrb = {
     name: 'Slow Orb',
     family: 'minimal',
     kind: 'fragment',
+    // Paints 11% of the frame — see checks/phase12 coverage.
+    surface: 'composable',
     // Personality: see look/Personality.js.
     // One soft body in an empty frame — the emptiest scene in the library, and
     // the one where speckle is most visible for being least justified. It keeps

flow-state/src/scenes/shader/smoke-column.js

@@ -12,6 +12,8 @@ export const smokeColumn = {
     name: 'Smoke Column',
     family: 'flow',
     kind: 'fragment',
+    // Paints 16% of the frame — see checks/phase12 coverage.
+    surface: 'composable',
     consumes: ['ink'],
     traits: ['camera', 'space', 'style'],
 

flow-state/src/scenes/shader/spectrum-sculpture.js

@@ -9,6 +9,8 @@ export const spectrumSculpture = {
     name: 'Spectrum Sculpture',
     family: 'minimal',
     kind: 'fragment',
+    // Paints 2% of the frame — see checks/phase12 coverage.
+    surface: 'composable',
     // Personality: see look/Personality.js.
     // Takes the track's surface grain, but lightly — this is drawn, not filmed.
     texture: 0.4,

flow-state/src/scenes/shader/storm-rift.js

@@ -13,6 +13,8 @@ export const stormRift = {
     name: 'Storm Rift',
     family: 'glitch',
     kind: 'fragment',
+    // Paints 0% of the frame — see checks/phase12 coverage.
+    surface: 'composable',
     consumes: ['ink'],
     traits: ['camera', 'space', 'style'],
 

flow-state/src/scenes/shader/suspension-span.js

@@ -12,6 +12,8 @@ export const suspensionSpan = {
     name: 'Suspension Span',
     family: 'structural',
     kind: 'fragment',
+    // Paints 21% of the frame — see checks/phase12 coverage.
+    surface: 'composable',
     texture: 0.6,
     consumes: ['cast', 'ink'],
     traits: ['shape', 'camera', 'space', 'style'],

flow-state/src/scenes/shader/synthwave-run.js

@@ -10,6 +10,8 @@ export const synthwaveRun = {
     name: 'Synthwave Run',
     family: 'structural',
     kind: 'fragment',
+    // Paints 5% of the frame — see checks/phase12 coverage.
+    surface: 'composable',
     // Personality: see look/Personality.js.
     consumes: ['ink'],
     traits: ['space', 'camera', 'style'],

flow-state/src/scenes/shader/vortex-drift.js

@@ -13,6 +13,8 @@ export const vortexDrift = {
     name: 'Vortex Drift',
     family: 'flow',
     kind: 'fragment',
+    // Paints 21% of the frame — see checks/phase12 coverage.
+    surface: 'composable',
     consumes: ['cast', 'ink'],
     traits: ['shape', 'camera', 'style'],
 

flow-state/src/scenes/stage/constellation.js

@@ -8,6 +8,8 @@ export const constellation = {
     name: 'Constellation',
     family: 'minimal',
     kind: 'fragment',
+    // Paints 1% of the frame — see checks/phase12 coverage.
+    surface: 'composable',
     consumes: ['cast', 'ink', 'staging'],
     texture: 0.6,
     traits: ['shape', 'camera', 'space', 'style'],

flow-state/src/scenes/stage/procession.js

@@ -9,6 +9,8 @@ export const procession = {
     name: 'Procession',
     family: 'structural',
     kind: 'fragment',
+    // Paints 18% of the frame — see checks/phase12 coverage.
+    surface: 'composable',
     consumes: ['cast', 'ink', 'staging'],
     texture: 0.4,
     traits: ['shape', 'camera', 'style'],

flow-state/src/scenes/stage/soloist.js

@@ -8,6 +8,8 @@ export const soloist = {
     name: 'Soloist',
     family: 'minimal',
     kind: 'fragment',
+    // Paints 20% of the frame — see checks/phase12 coverage.
+    surface: 'composable',
     consumes: ['cast', 'ink', 'staging'],
     texture: 0.5,
     traits: ['shape', 'camera', 'style'],

flow-state/src/scenes/stage/swarm.js

@@ -8,6 +8,8 @@ export const swarm = {
     name: 'Swarm',
     family: 'organic',
     kind: 'fragment',
+    // Paints 2% of the frame — see checks/phase12 coverage.
+    surface: 'composable',
     consumes: ['cast', 'ink', 'staging'],
     texture: 0.5,
     traits: ['shape', 'camera', 'style'],