howone 0.1.50 → 0.1.51

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (28) hide show
  1. package/package.json +1 -1
  2. package/templates/vite/.howone/skills/web-clone/SKILL.md +14 -14
  3. package/templates/vite/.howone/skills/web-clone/follow-wechat-qrcode.jpg +0 -0
  4. package/templates/vite/.howone/skills/web-clone/references/design-dna.md +1 -1
  5. package/templates/vite/.howone/skills/web-clone/references/static-mirror.md +1 -1
  6. package/templates/vite/.howone/skills/web-clone/scripts/lib/playwright-loader.mjs +3 -10
  7. package/templates/vite/.howone/skills/web-shader-extractor/SKILL.md +0 -123
  8. package/templates/vite/.howone/skills/web-shader-extractor/references/capture-backends.md +0 -201
  9. package/templates/vite/.howone/skills/web-shader-extractor/references/evidence-policy.md +0 -93
  10. package/templates/vite/.howone/skills/web-shader-extractor/references/operating-contract.md +0 -82
  11. package/templates/vite/.howone/skills/web-shader-extractor/references/qa-failure-policy.md +0 -100
  12. package/templates/vite/.howone/skills/web-shader-extractor/references/recon-kernel.md +0 -206
  13. package/templates/vite/.howone/skills/web-shader-extractor/references/replay-policy.md +0 -145
  14. package/templates/vite/.howone/skills/web-shader-extractor/references/shaders-com.md +0 -212
  15. package/templates/vite/.howone/skills/web-shader-extractor/references/source-analysis.md +0 -112
  16. package/templates/vite/.howone/skills/web-shader-extractor/references/surface-discovery.md +0 -113
  17. package/templates/vite/.howone/skills/web-shader-extractor/references/target-lock.md +0 -205
  18. package/templates/vite/.howone/skills/web-shader-extractor/references/three-shader-reconstruction.md +0 -155
  19. package/templates/vite/.howone/skills/web-shader-extractor/references/tool-capability-matrix.md +0 -57
  20. package/templates/vite/.howone/skills/web-shader-extractor/references/unicorn-studio.md +0 -387
  21. package/templates/vite/.howone/skills/web-shader-extractor/scripts/fetch-rendered-dom.mjs +0 -178
  22. package/templates/vite/.howone/skills/web-shader-extractor/scripts/scan-bundle.sh +0 -80
  23. package/templates/vite/.howone/skills/web-shader-extractor/templates/extraction-report.md +0 -41
  24. package/templates/vite/.howone/skills/web-shader-extractor/templates/known-gaps.md +0 -14
  25. package/templates/vite/.howone/skills/web-shader-extractor/templates/qa-report.md +0 -74
  26. package/templates/vite/.howone/skills/web-shader-extractor/templates/replay-manifest.json +0 -147
  27. package/templates/vite/.howone/skills/web-shader-extractor/templates/run-state.json +0 -75
  28. package/templates/vite/.howone/skills/web-shader-extractor/templates/scout-card.json +0 -106
@@ -1,100 +0,0 @@
1
- # QA and Failure Policy
2
-
3
- Validation happens twice:
4
-
5
- 1. Source -> Baseline: does the local baseline match the target evidence?
6
- 2. Baseline -> Editable: did projectization avoid regression?
7
-
8
- ## Fixed Conditions
9
-
10
- Keep these identical across comparisons:
11
-
12
- - viewport
13
- - DPR
14
- - browser/backend
15
- - fixed time or selected frame
16
- - pointer, scroll, resize, route state
17
- - random seed when controllable
18
- - background, alpha, and DOM composite
19
- - crop and time point
20
-
21
- ## Validation Levels
22
-
23
- 1. Build: dependencies and assets resolve
24
- 2. GPU: shaders/pipelines compile and link
25
- 3. Structural: pass, FBO, program, resource, and state match Manifest
26
- 4. Visual: color, composition, alpha, edges
27
- 5. Temporal: multi-frame rhythm, phase, randomness
28
- 6. Interaction: pointer, scroll, resize, route
29
- 7. Regression: editable project vs baseline
30
-
31
- ## Minimum Source -> Baseline Protocol
32
-
33
- Minimum verification requires more than one static screenshot:
34
-
35
- 1. Compare at the initial frame or a fixed time.
36
- 2. Compare at a later frame.
37
- 3. Compare after one relevant interaction if the target is interactive.
38
- 4. For scroll-coupled effects, compare at top, middle, and target section.
39
- 5. For route-coupled effects, compare at the route transition or persistent renderer state.
40
- 6. Always record viewport, DPR, browser/backend, crop, time, pointer, scroll, and route state.
41
-
42
- Every comparison must save or reference:
43
-
44
- - source image or frame evidence
45
- - baseline image or frame evidence
46
- - diff image, numeric comparison, or written visual difference record
47
-
48
- If the environment cannot produce image diffs, write a structured visual difference record and keep that limitation in `known-gaps.md`. A single matching first frame is not enough for `BASELINE_VERIFIED`.
49
-
50
- ## Truth Audit
51
-
52
- Run this audit before marking the final state:
53
-
54
- - Every implementation-critical fact in `replay-manifest.json` has direct evidence or a `PARTIAL` / `GUESS` label.
55
- - Leaf facts and wiring facts were checked separately. A verified shader or config value does not prove the active render graph, timing, coordinate space, or input route.
56
- - Any parameter changed to improve appearance is recorded as `GUESS` unless source/runtime/frame evidence proves it.
57
- - Any mismatch is routed to the upstream unknown that explains it. Do not cover mismatches with tuning.
58
- - Known gaps state the blocking unknown and the evidence needed to resolve it.
59
-
60
- The QA report is the gate artifact for `BASELINE_VERIFY` and `PROJECT_VERIFY`. Do not mark either gate passed while any required row is `pending`, any P0/P1/P2 issue is open, or the final status is absent.
61
-
62
- ## Severity
63
-
64
- - `P0`: cannot run, cannot render, or route impossible
65
- - `P1`: wrong target, render graph, composition, or main interaction
66
- - `P2`: visible timing, color, alpha, responsive, or input drift
67
- - `P3`: polish or performance issue that does not block delivery
68
-
69
- Automatically loop only P0/P1/P2.
70
-
71
- ## Failure Routing
72
-
73
- | Symptom | Category | Return |
74
- |---|---|---|
75
- | wrong canvas or missing shared surface | target | `SURFACE_ATTRIBUTION` |
76
- | missing shader/resource/input | evidence | `SOURCE_TRACE` |
77
- | wrong FBO, time, coordinates, color model | replay model | `CAPTURE_MINIMUM_TRUTH` |
78
- | dependency, path, or code error | implementation | `RAW_REPLAY` |
79
- | browser, GPU, CORS, or context issue | environment | `BASELINE_RUN` |
80
- | evidence complete but implementation visually wrong | fidelity implementation | `RAW_REPLAY` |
81
-
82
- Do not route all mismatches into parameter tuning.
83
-
84
- ## Failure Signatures
85
-
86
- Use these signatures to classify mismatches before editing values.
87
-
88
- | Symptom | Likely Root Cause |
89
- |---|---|
90
- | overall too bright or color-shifted | color space, tone mapping, premultiplied alpha |
91
- | animation slowly drifts | seconds vs frames, delta, time origin |
92
- | vertical flip | UVs, render target orientation, SDF/image coordinate system |
93
- | black blocks or missing layers | FBO, clear, blend, depth, missing resources |
94
- | noise differs | RNG, precision, filtering, noise implementation |
95
- | edge softness differs | DPR, AA, derivatives, SDF smoothing |
96
- | scroll position drifts | DOM-canvas binding or scroll normalization |
97
- | route flicker | renderer lifecycle, resource cache, route persistence |
98
- | pointer response offset | canvas CSS transform, DPR, page scroll, coordinate normalization |
99
-
100
- Confirm the category with evidence before changing implementation constants.
@@ -1,206 +0,0 @@
1
- # Recon Kernel
2
-
3
- The Recon Kernel is the core workflow. It prevents scope drift into website cloning or unrelated bundle analysis.
4
-
5
- ## Kernel Loop
6
-
7
- ```text
8
- LIST list candidate surfaces and rank them
9
- ATTRIBUTE prove which surfaces contribute to the requested target visual
10
- LOCK bind target surface group to context, owner, and source clues
11
- TRACE choose the lowest-cost authoritative evidence route
12
- REPLAY capture required facts and build a local baseline
13
- ```
14
-
15
- ## State Flow
16
-
17
- ```text
18
- INTAKE
19
- -> CAPABILITY_SNAPSHOT
20
- -> QUICK_SCOUT
21
- -> SURFACE_ATTRIBUTION
22
- -> TARGET_LOCK_GATE
23
- -> SCOPE_CHECK
24
- -> TRACE_ROUTE_SELECT
25
- -> SOURCE_TRACE
26
- -> CAPTURE_MINIMUM_TRUTH
27
- -> REPLAY_READY_GATE
28
- -> RAW_REPLAY
29
- -> BASELINE_RUN
30
- -> BASELINE_VERIFY
31
- -> BASELINE_VERIFIED
32
- -> PROJECTIZE
33
- -> PROJECT_VERIFY
34
- -> OPTIONAL_LITE
35
- -> PACKAGE
36
- ```
37
-
38
- Use these branches:
39
-
40
- ```text
41
- TARGET_LOCK_GATE
42
- - failed/provisional -> REFINE_SCOUT loop
43
- - attributed -> owner/backend/source probe, then return to TARGET_LOCK_GATE
44
- - locked -> SCOPE_CHECK
45
-
46
- REPLAY_READY_GATE
47
- - blocking unknowns remain -> SOURCE_TRACE / CAPTURE_MINIMUM_TRUTH loop
48
- - ready -> RAW_REPLAY
49
-
50
- BASELINE_VERIFY
51
- - target error -> SURFACE_ATTRIBUTION
52
- - evidence gap -> SOURCE_TRACE
53
- - replay model error -> CAPTURE_MINIMUM_TRUTH / RAW_REPLAY
54
- - implementation error -> RAW_REPLAY
55
- - environment error -> BASELINE_RUN
56
- - passed -> BASELINE_VERIFIED
57
- ```
58
-
59
- Use `REFINE_SCOUT` when target lock fails or remains provisional. Use the failure routes in `references/qa-failure-policy.md` when verification fails.
60
-
61
- ## Initial Protocol
62
-
63
- Perform these actions first and persist artifacts under the output directory:
64
-
65
- 1. Record canonical URL, route, viewport, DPR, browser/backend, and a source screenshot.
66
- 2. Enumerate visible canvases in the main page and iframes. Record OffscreenCanvas, Worker, WebGPU, video, and DOM mask/clip/sticky clues.
67
- 3. Sample two or three frames per plausible surface; estimate visual coverage, temporal activity, z-order, and interaction response.
68
- 4. For top candidates, run short reversible ablation tests: hide, opacity/freeze, transform, or output replacement. Record which target pixels or behaviors disappear.
69
- 5. Probe minimal pointer, scroll, and resize interactions to identify coupling.
70
- 6. Identify the target surface group context, owner thread/frame/worker, and creation source. If needed, reload once with a preload probe.
71
- 7. Accept platform, framework, runtime, and source evidence only when it is bound to the target surface group.
72
- 8. Select exactly one next evidence path and write `scout-card.json`.
73
- 9. Before `TARGET_LOCKED`, do not download or deobfuscate full bundles. Use source maps, public structured definitions, or narrow bundle slices only when they resolve the next unknown.
74
-
75
- ## Gate Semantics
76
-
77
- `TARGET_ATTRIBUTED` means visual causality is proven for a surface group.
78
- Context, owner, framework, or source may still be incomplete.
79
- Only owner/backend/source probes tied to `nextProbe` are allowed.
80
-
81
- `TARGET_LOCKED` means the target is a surface group.
82
- Visual attribution exists.
83
- Context and owner are known or reliably located.
84
- Source/framework evidence is target-bound.
85
- Effect boundary is known.
86
- One trace route is selected.
87
- Alternatives are recorded.
88
-
89
- `REPLAY_READY` means no blocking unknowns remain, or every remaining blocker has an explicit fallback and fidelity tier.
90
- Time/input rules, output color/alpha/composite, critical resources, and replay route are sufficient for the first local baseline.
91
-
92
- `BASELINE_VERIFIED` means the baseline starts independently.
93
- Main composition/layers are correct.
94
- Animation and key interactions are checked.
95
- Render graph/output composite has no P0/P1/P2 issue.
96
- Known gaps are documented instead of masked by manual tuning.
97
-
98
- ## Gate Artifact Contract
99
-
100
- Gate artifacts are transition guards.
101
- A gate is not passed until the required artifact exists, uses the bundled template shape, has no placeholders in gate-critical fields, and points to persisted evidence or a documented external blocker.
102
-
103
- | Gate | Required artifact | Minimum pass condition |
104
- |---|---|---|
105
- | `TARGET_LOCK_GATE` | `scout-card.json` | `lockStatus=locked`; `targetSet` non-empty; attribution evidence referenced; context and owner known; alternatives recorded; primary trace route selected. |
106
- | `REPLAY_READY_GATE` | `replay-manifest.json` | replay route and fidelity tier set; target surfaces and runtime owner/backend recorded; facts labeled; no blocking unknowns without fallback and downgrade. |
107
- | `BASELINE_VERIFY` | `qa-report.md` plus `replay-manifest.json` | Source -> Baseline checks have evidence; P0/P1/P2 issues closed or routed back; fact audit complete; final status set. |
108
- | `PROJECT_VERIFY` | `qa-report.md` | Baseline -> Editable regression checks have evidence; P0/P1/P2 regressions closed; projectization did not change replay route or fidelity tier silently. |
109
-
110
- Evidence checklist entries must be structured objects, not prose strings:
111
-
112
- ```json
113
- {
114
- "status": "unknown",
115
- "allowedStatus": ["passed", "blocked", "unknown"],
116
- "evidenceId": "ev-001",
117
- "path": "evidence/scout/ablation-surface-1.json",
118
- "truth": "GUESS",
119
- "allowedTruth": ["SOURCE", "PARTIAL", "GUESS"],
120
- "notes": ""
121
- }
122
- ```
123
-
124
- If a required artifact is missing or incomplete, keep the current state.
125
- Set `run-state.json.nextAction` to create or repair that artifact.
126
- Do not replace artifact fields with prose in the final answer.
127
-
128
- `run-state.json.gateStatus` copies the artifact status. It is not a separate evidence source. Update it only after the corresponding gate artifact passes.
129
-
130
- ## Working Rule
131
-
132
- At every step, write down the unknown being reduced. A valid next action has this shape:
133
-
134
- ```text
135
- state: SURFACE_ATTRIBUTION
136
- unknown: whether canvas#hero or iframe[0] owns the target distortion
137
- action: hide/freeze both candidates for one frame window and compare target crop
138
- expected evidence: ablation impact by surface
139
- ```
140
-
141
- If the action has no target unknown, reject it.
142
-
143
- ## Evidence Chain
144
-
145
- Prefer evidence in this order when it is target-bound:
146
-
147
- 1. Public structured definition or source for the target embed/effect.
148
- 2. Runtime object directly owning the target canvas/context.
149
- 3. Source map or readable module that creates the target surface.
150
- 4. GPU/frame capture tied to the target context.
151
- 5. Narrow bundle slice selected by stack, call stack, or target IDs.
152
- 6. Inference from minified code or visual behavior.
153
-
154
- Do not promote global framework hints to conclusions. They become conclusions only after `references/target-lock.md` criteria pass.
155
-
156
- ## Artifact Discipline
157
-
158
- Keep large facts out of the conversation:
159
-
160
- - screenshots and crops under `evidence/screenshots/`
161
- - DOM and style snapshots under `evidence/dom/`
162
- - network index under `evidence/network/`
163
- - frame captures under `evidence/gpu/`
164
- - runtime probes under `evidence/runtime/`
165
- - source slices under `evidence/source/`
166
-
167
- Reference them from `scout-card.json`, `replay-manifest.json`, and `qa-report.md`.
168
-
169
- ## Autonomy And State
170
-
171
- Default to autonomous execution. Ask only for product scope changes or external access/permission blockers.
172
-
173
- ```text
174
- Observe
175
- -> Compare against current Gate / Manifest
176
- -> Classify failure or unknown
177
- -> Choose the lowest-cost action that reduces an unknown
178
- -> Execute
179
- -> Persist evidence and state
180
- -> Measure progress
181
- ```
182
-
183
- "Try again" is not a valid action unless something changes.
184
-
185
- A retry must change at least one:
186
-
187
- - tool
188
- - injection timing
189
- - browser or GPU backend
190
- - target surface
191
- - interaction state
192
- - viewport
193
- - evidence source
194
- - bundle slice
195
- - root-cause hypothesis
196
-
197
- Default budgets:
198
-
199
- - same strategy: 2 attempts
200
- - capture strategy categories: 3
201
- - P0/P1/P2 repair rounds: 6
202
- - plateau: 2 consecutive rounds with no reduction in blocking unknowns and no QA improvement
203
-
204
- Persist `.web-shader-extractor/run-state.json`.
205
- Include state, gate status, strategy, attempts, target set, unknowns, evidence index, artifacts, budgets, plateau, next action, replay tier, and QA.
206
- Use `templates/run-state.json` as the starting schema.
@@ -1,145 +0,0 @@
1
- # Replay Policy
2
-
3
- Replay policy covers the `REPLAY_READY` gate, first local baseline, and stack choice.
4
- The goal is to match recorded source behavior with the fewest new assumptions.
5
-
6
- ## Replay Ready Contract
7
-
8
- Record before entering `RAW_REPLAY`:
9
-
10
- - replay route: `SOURCE_REPLAY`, `PIPELINE_REPLAY`, or `BEHAVIOR_REBUILD`
11
- - fidelity tier and known limits
12
- - blocking, important, deferred, and external unknowns
13
- - fallback for any unresolved blocking unknown
14
- - truth labels for implementation-critical leaf and wiring facts
15
-
16
- Do not mark `REPLAY_READY` because the capture appears plausible.
17
- `SOURCE` leaf facts do not imply `SOURCE` wiring.
18
- If pass order, input coupling, time units, or output composite are still inferred, label those facts `PARTIAL` or `GUESS`.
19
- Keep inferred gate facts blocking or record an explicit fidelity downgrade.
20
-
21
- Proceed to `RAW_REPLAY` only when `blockingUnknowns` is empty, or every blocker has an explicit fallback with a recorded fidelity downgrade.
22
- Move important unknowns into QA focus.
23
-
24
- Do not enter `RAW_REPLAY` until `replay-manifest.json.gateDecision.replayReady` is true.
25
- Its required evidence checklist must contain structured evidence items.
26
- If the baseline depends on a fallback, record the fallback and downgrade in the manifest before implementation starts.
27
-
28
- If a local baseline uses fitted values to run, those facts are not source replay.
29
- Keep the values labeled `GUESS`.
30
- Place them in `known-gaps.md`.
31
- Route QA toward the missing source/runtime evidence.
32
-
33
- ## Replay Routes
34
-
35
- Choose and record one replay route in `replay-manifest.json`:
36
-
37
- - `SOURCE_REPLAY`: public structured definitions, original source, source maps, readable framework modules, platform exports, or configs. Prefer this when available.
38
- - `PIPELINE_REPLAY`: shader/WGSL, runtime objects, GPU frame capture, draw/pass/resource/state, input, and timing trace. Use when source is incomplete but runtime facts are sufficient.
39
- - `BEHAVIOR_REBUILD`: partial source plus observed behavior. This is the last fallback and must be labeled approximate.
40
-
41
- Do not describe a behavior rebuild as source extraction. Projectization does not change the baseline fidelity tier.
42
-
43
- ## Stack Selection
44
-
45
- Use native WebGL/WebGL2 when the target is:
46
-
47
- - fullscreen shader
48
- - small number of passes
49
- - no complex scene graph
50
- - no PBR/material lifecycle
51
- - no GPGPU lifecycle tied to a framework
52
- - conversion facts are complete
53
-
54
- Use the source stack when:
55
-
56
- - the framework/platform version is known or closely bounded
57
- - source, source map, platform definition, or runtime objects are complete
58
- - behavior depends on material systems, node graphs, post-processing, scene graph, resource lifecycle, or renderer quirks
59
- - retaining the source stack reaches an evidence-matched baseline with fewer assumptions
60
-
61
- Project-lite is a post-verification optimization. It is not a substitute for the verified baseline.
62
-
63
- ## Raw Replay Priorities
64
-
65
- Raw replay creates the first local baseline with the least rewriting:
66
-
67
- 1. Preserve recorded source behavior and data shape.
68
- 2. Keep original constants, shader code, pass order, timing, resources, and color model.
69
- 3. Make it run locally with a minimal launch path.
70
- 4. Document known gaps rather than masking them with tuning.
71
-
72
- Use the source stack when it adds fewer assumptions. Use native WebGL/WebGL2 only when conversion does not add uncertainty.
73
-
74
- ## Baseline Directory
75
-
76
- Output artifacts should be layered:
77
-
78
- ```text
79
- output/
80
- |-- capture-baseline/
81
- |-- editable-project/
82
- |-- project-lite/
83
- |-- scout-card.json
84
- |-- replay-manifest.json
85
- |-- qa-report.md
86
- |-- extraction-report.md
87
- |-- known-gaps.md
88
- `-- .web-shader-extractor/run-state.json
89
- ```
90
-
91
- ```text
92
- output/capture-baseline/
93
- |-- index.html
94
- |-- src/
95
- |-- assets/
96
- |-- README-run.md
97
- `-- evidence-links.md
98
- ```
99
-
100
- ## No Compensation Tuning
101
-
102
- Do not change brightness, speed, offsets, noise scale, fresnel multipliers, SDF epsilons, or color values without evidence.
103
- If the result differs, classify the root cause: color, timing, coordinates, FBO graph, resource, state, input, or environment.
104
-
105
- Once baseline verification starts, do not overwrite it for projectization.
106
- Fix baseline in place only for baseline errors.
107
- Create `editable-project/` separately for refactors.
108
-
109
- Use the bundled templates as starting schemas, not free-form notes:
110
- `templates/scout-card.json`, `templates/replay-manifest.json`, `templates/run-state.json`, `templates/qa-report.md`, `templates/known-gaps.md`, and `templates/extraction-report.md`.
111
- Fill every placeholder with target-bound evidence or record the gap.
112
-
113
- ## Projectization
114
-
115
- Projectization starts only after `BASELINE_VERIFIED`.
116
-
117
- Default output:
118
-
119
- ```text
120
- output/editable-project/
121
- |-- package.json or importmap-based index.html
122
- |-- src/
123
- |-- assets/
124
- |-- README.md
125
- `-- qa/
126
- ```
127
-
128
- Projectization may modularize source, add parameter interfaces, improve naming, or introduce a build pipeline.
129
- It must not silently change the replay route or fidelity tier.
130
-
131
- Run Baseline -> Editable validation after projectization:
132
-
133
- - same viewport, DPR, browser/backend
134
- - same fixed time/frame
135
- - same pointer/scroll/resize state
136
- - same crop and background/composite
137
-
138
- Any P0/P1/P2 regression returns to `PROJECTIZE`, not to target scouting unless the regression reveals the baseline was wrong.
139
-
140
- Create `project-lite/` only when simplification is supported by evidence and independently verified.
141
- If it fails, remove or mark it experimental.
142
- Do not downgrade the verified editable project.
143
-
144
- Do not create `editable-project/` as the primary deliverable until `qa-report.md` records Source -> Baseline as passed or passed with documented gaps.
145
- Do not mark `DONE_PROJECTIZED` until Baseline -> Editable regression is recorded in `qa-report.md`.
@@ -1,212 +0,0 @@
1
- # shaders.com / TSL Adapter
2
-
3
- Use this adapter only after the target surface group has been attributed to a shaders.com renderer or a shaders.com public definition.
4
- Treat versions, keys, mappings, and backend choice as runtime facts to verify on the current target.
5
-
6
- Stability: volatile. Treat endpoint names, variable names, keys, component IDs, short-code mappings, and backend choices as hints until verified on the current target.
7
-
8
- shaders.com is a shader design tool. Observed builds use Nuxt.js, Three.js TSL, and Supabase. Verify the exact Three.js version and WebGPU/WebGL backend from target runtime or current bundle evidence.
9
-
10
- ## Adapter Interface
11
-
12
- - `detect(context)`: target canvas has shaders.com renderer evidence, target route/API returns the matching preset/collection definition, or runtime owner binds the renderer to target.
13
- - `preferredEvidence(context)`: public collection/preset definition, current runtime config, and target-bound Three.js/TSL module route.
14
- - `capture(context)`: component tree, decoded definition, TSL node source, assets/SDFs, renderer backend, time/input rules, color/output model.
15
- - `replay(context)`: `SOURCE_REPLAY` when definition and TSL source are sufficient; `PIPELINE_REPLAY` when runtime/capture facts are sufficient but source is incomplete.
16
- - `validationHints(context)`: SDF Y flip, linear color pipeline, TSL timer rules, Glass parameter fidelity, WebGPU vs WebGL backend.
17
- - `fallback(context)`: target-bound source-map or module slice, frame capture, then behavior rebuild with explicit downgrade.
18
-
19
- ## Recognition Signals
20
-
21
- - URL pattern: `shaders.com/collection/{slug}/{presetId}` or `shaders.com/preset/{id}`
22
- - Canvas hints such as `data-renderer="shaders"` plus `data-engine`; verify the version dynamically
23
- - Nuxt.js paths such as `_nuxt/`
24
- - Clerk authentication on the site
25
- - Supabase storage URLs such as `data.shaders.com/storage/v1/`
26
-
27
- ## Architecture Differences
28
-
29
- Compared with Unicorn Studio:
30
-
31
- - It commonly uses Three.js TSL node graphs rather than raw GLSL source.
32
- - It has multiple component types, each potentially backed by a TSL `fragmentNode`; verify the current count and names from the current bundle.
33
- - Definition data may be XOR + base64 encoded.
34
- - Components can be nested; for example a Glass component may contain child effects.
35
-
36
- ## Data Acquisition
37
-
38
- ### API Endpoints
39
-
40
- ```bash
41
- # Collection variant with encoded definition; public when accessible without auth.
42
- curl -s "https://shaders.com/api/collections/{slug}/{variantId}"
43
-
44
- # Preview API with encoded definition and possible watermark injection.
45
- curl -s "https://shaders.com/api/preview/preset/{presetId}"
46
-
47
- # Nuxt payload, usually metadata only rather than shader definition.
48
- curl -s "https://shaders.com/collection/{slug}/{id}/_payload.json"
49
- ```
50
-
51
- ### Definition Decoding
52
-
53
- Definitions may use XOR + base64 encoding with route-specific keys.
54
-
55
- 1. Website API (`/api/collections/`):
56
- - Extract the obfuscation key from the current Nuxt runtime config. Do not reuse fixed keys from old samples.
57
- - Component/property names may use short codes such as `C52` for `Plasma` or `p06` for `angle`.
58
- - Decode with `JSON.parse(XOR(base64decode(encoded), keyBytes))`.
59
- - Restore readable names with the current code-to-name mapping table.
60
-
61
- 2. Preview API (`/api/preview/`):
62
- - Verify the key and response shape from the current public frontend code.
63
- - It may use readable property names directly.
64
- - It may inject a watermark `ImageTexture` component.
65
-
66
- ### Code Mapping Table
67
-
68
- Extract component and property short-code mappings from the current JS bundle. Do not assume component counts, sorting, or numeric IDs are stable across releases.
69
-
70
- ## Known Failure Cases
71
-
72
- ### Y-Axis Flip
73
-
74
- Observed shaders.com samples show a Y flip for SDF textures and UVs.
75
-
76
- SDF binaries (`.bin`) often use image coordinates where Y=0 is at the top, while WebGL texture coordinates use Y=0 at the bottom. Loading them directly can flip shapes vertically.
77
-
78
- ```glsl
79
- // Wrong: direct sampling.
80
- float sdf = texture(tSDF, shapeUV).r;
81
-
82
- // Correct for known flipped SDFs: flip Y.
83
- vec2 sdfUV = vec2(shapeUV.x, 1.0 - shapeUV.y);
84
- float sdf = texture(tSDF, sdfUV).r;
85
-
86
- // The Y component of the gradient may also need sign inversion.
87
- float dSdy = -(texture(tSDF, sdfUV - vec2(0, eps)).r - sdf) / eps;
88
- ```
89
-
90
- Component definitions may also use DOM coordinates where Y=0 is at the top. For Glass-style shaders, verify whether `center.y` must be flipped as `center.y = 1.0 - center.y`.
91
-
92
- ### SDF Binary Format
93
-
94
- Known samples use:
95
-
96
- - 512 x 512 Float32 single-channel data
97
- - 1,048,576 bytes: `512 * 512 * 4`
98
- - signed distance values, negative inside and positive outside
99
- - raw values without `* 2.0 - 1.0` remapping
100
- - `OES_texture_float_linear` for linear filtering when needed
101
-
102
- WebGL2 loading pattern:
103
-
104
- ```js
105
- gl.texImage2D(gl.TEXTURE_2D, 0, gl.R32F, 512, 512, 0, gl.RED, gl.FLOAT, data);
106
- ```
107
-
108
- ## Component Table
109
-
110
- | Category | Components | Complexity |
111
- |---|---|---|
112
- | Texture | Plasma, Godrays, SimplexNoise, LinearGradient, RadialGradient | medium |
113
- | Shape | Glass, Blob, Circle, Ring, Star, RoundedRect, Polygon | high |
114
- | Distortion | WaveDistortion, ChromaticAberration, Liquify, Twirl, Bulge | low to medium |
115
- | Stylization | FilmGrain, Halftone, Ascii, Dither, Glow, Bloom | low to medium |
116
- | Post-processing | Blur, ProgressiveBlur, BrightnessContrast, HueShift | low |
117
-
118
- ## Render Pipeline
119
-
120
- Typical target-bound evidence may reveal:
121
-
122
- ```text
123
- Three.js TSL renderer; verify version dynamically
124
- |- prefers WebGPU, falls back to WebGL
125
- |- orthographic camera plus one fullscreen quad
126
- |- component tree composited bottom to top
127
- |- components with children capture child content through RTT
128
- |- blend mode implemented with custom blend functions
129
- `- Glass path: SDF evaluation -> gradient normal -> refraction -> chromatic aberration -> blur -> tint -> highlight -> Fresnel -> composite
130
- ```
131
-
132
- ## Replay Strategy
133
-
134
- 1. TSL cannot be copied as raw GLSL; translate it or replay it through the source stack.
135
- 2. Extract the target-bound TSL `fragmentNode` from the current JS bundle when source replay requires it.
136
- 3. Convert the component tree into a multi-pass FBO graph.
137
- 4. Validate SDF Y orientation against the target.
138
- 5. Glass components have many parameters; keep source multipliers exact.
139
-
140
- ## Color Space
141
-
142
- Known shaders.com / Three.js TSL samples commonly use a linear workflow, but the current target must still be verified from renderer, runtime, or source evidence.
143
-
144
- - Hex colors such as `#2c2c42` are commonly sRGB values.
145
- - TSL `color()` commonly converts sRGB to linear.
146
- - Whether intermediate FBOs store linear values must be verified from the target render graph.
147
- - The final output encoding stage must be verified from target renderer configuration.
148
-
149
- Example for a common path:
150
-
151
- ```glsl
152
- // Common path: sRGB hex -> linear at definition time.
153
- vec3 colorA = pow(vec3(0.173, 0.173, 0.259), vec3(2.2)); // #2c2c42
154
-
155
- // Intermediate passes and final output encoding must follow target evidence.
156
- fragColor = vec4(pow(color.rgb, vec3(1.0 / 2.2)), color.a);
157
- ```
158
-
159
- Error case: applying a fixed gamma correction in intermediate or final passes without verifying the target renderer's color configuration.
160
-
161
- ## Parameter Fidelity
162
-
163
- Do not tune parameters manually. Match the formulas and multipliers from the TSL translation:
164
-
165
- ```text
166
- Original TSL multiplier GLSL must use
167
- aberration * 0.06 not 0.12
168
- fresnelSoftness * 0.06 not 0.12
169
- fresnel = 0.17 not 0.4
170
- SDF gradient eps = 0.01 not 0.005
171
- ```
172
-
173
- If the visual result does not match, inspect:
174
-
175
- 1. color space, especially sRGB/linear confusion
176
- 2. noise implementation differences such as Perlin vs `mx_noise_float`
177
- 3. time base
178
- 4. FBO/component-tree order
179
-
180
- Do not change multipliers to mask a mismatch. That may fit one preset while breaking other parameter combinations.
181
-
182
- ## TSL Time Convention
183
-
184
- `timerLocal(speed)` increments by `speed` units per second. Replay as `uTime = seconds * speed`, then apply any component-specific multiplier inside the shader.
185
-
186
- | Component | speed parameter | shader multiplier | effective rate per second |
187
- |---|---:|---:|---:|
188
- | Plasma | 2 | 0.125 | 0.25 |
189
- | Godrays | 0.7 | 0.2 | 0.14 |
190
- | WaveDistortion | 0.8 | 0.5 | 0.4 |
191
- | FilmGrain | none | none | static |
192
-
193
- ## TSL To GLSL Identifier Mapping
194
-
195
- These mappings are examples from one observed bundle and may change. Extract them dynamically from the current build.
196
-
197
- | Local name | TSL function | GLSL |
198
- |---|---|---|
199
- | `C` / `z` | `vec4()` | `vec4` |
200
- | `x` / `D` | `vec2()` | `vec2` |
201
- | `q` / `N` | `vec3()` | `vec3` |
202
- | `P` / `J` | `resolution` | `u_resolution` |
203
- | `A` / `$` | `uv` | `vUv` |
204
- | `se` / `Oe` | `sin()` | `sin` |
205
- | `W` / `I` | `cos()` | `cos` |
206
- | `ne` | `mix()` | `mix` |
207
- | `D` | `smoothstep()` | `smoothstep` |
208
- | `fe` | `clamp()` | `clamp` |
209
- | `ar` | `mx_noise_float()` | `perlinNoise3D()` candidate |
210
- | `dr` / `Gt` | `timerLocal()` | `u_time * speed` |
211
- | `Me` / `wt` | `rtt()` | FBO pass |
212
- | `Ce` | `renderOutput()` | `fragColor` |