@uppercut-labs/ps1-backgrounds 0.1.0

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 (66) hide show
  1. package/LICENSE +216 -0
  2. package/NOTICE +24 -0
  3. package/README.md +159 -0
  4. package/dist/element.d.ts +12 -0
  5. package/dist/element.js +115 -0
  6. package/dist/index.d.ts +4 -0
  7. package/dist/index.js +2 -0
  8. package/dist/kit.d.ts +74 -0
  9. package/dist/kit.js +383 -0
  10. package/dist/runtime.d.ts +20 -0
  11. package/dist/runtime.js +415 -0
  12. package/dist/scene.d.ts +137 -0
  13. package/dist/scene.js +10 -0
  14. package/dist/scenes/generated/atlas-of-little-worlds.d.ts +48 -0
  15. package/dist/scenes/generated/atlas-of-little-worlds.js +100 -0
  16. package/dist/scenes/generated/black-ocean-causeway.d.ts +35 -0
  17. package/dist/scenes/generated/black-ocean-causeway.js +118 -0
  18. package/dist/scenes/generated/cassette-cathedral.d.ts +35 -0
  19. package/dist/scenes/generated/cassette-cathedral.js +121 -0
  20. package/dist/scenes/generated/clockwork-tidelocks.d.ts +35 -0
  21. package/dist/scenes/generated/clockwork-tidelocks.js +165 -0
  22. package/dist/scenes/generated/coilwell-descent.d.ts +35 -0
  23. package/dist/scenes/generated/coilwell-descent.js +156 -0
  24. package/dist/scenes/generated/copper-fungal-mesa.d.ts +35 -0
  25. package/dist/scenes/generated/copper-fungal-mesa.js +94 -0
  26. package/dist/scenes/generated/coral-signal-trench.d.ts +40 -0
  27. package/dist/scenes/generated/coral-signal-trench.js +136 -0
  28. package/dist/scenes/generated/counterweight-monastery.d.ts +35 -0
  29. package/dist/scenes/generated/counterweight-monastery.js +111 -0
  30. package/dist/scenes/generated/flooded-arcade.d.ts +35 -0
  31. package/dist/scenes/generated/flooded-arcade.js +144 -0
  32. package/dist/scenes/generated/fossil-sail-harbor.d.ts +35 -0
  33. package/dist/scenes/generated/fossil-sail-harbor.js +170 -0
  34. package/dist/scenes/generated/inverted-orchard.d.ts +35 -0
  35. package/dist/scenes/generated/inverted-orchard.js +100 -0
  36. package/dist/scenes/generated/kilnstep-foundry.d.ts +35 -0
  37. package/dist/scenes/generated/kilnstep-foundry.js +134 -0
  38. package/dist/scenes/generated/kitebone-viaduct.d.ts +35 -0
  39. package/dist/scenes/generated/kitebone-viaduct.js +167 -0
  40. package/dist/scenes/generated/lantern-moth-cloister.d.ts +35 -0
  41. package/dist/scenes/generated/lantern-moth-cloister.js +126 -0
  42. package/dist/scenes/generated/mesh-codec.d.ts +21 -0
  43. package/dist/scenes/generated/mesh-codec.js +46 -0
  44. package/dist/scenes/generated/midnight-platform-09.d.ts +40 -0
  45. package/dist/scenes/generated/midnight-platform-09.js +112 -0
  46. package/dist/scenes/generated/moonseed-conservatory.d.ts +35 -0
  47. package/dist/scenes/generated/moonseed-conservatory.js +134 -0
  48. package/dist/scenes/generated/neon-drift-interchange.d.ts +46 -0
  49. package/dist/scenes/generated/neon-drift-interchange.js +224 -0
  50. package/dist/scenes/generated/ochre-relay-ruins.d.ts +40 -0
  51. package/dist/scenes/generated/ochre-relay-ruins.js +111 -0
  52. package/dist/scenes/generated/paper-moon-parade.d.ts +40 -0
  53. package/dist/scenes/generated/paper-moon-parade.js +127 -0
  54. package/dist/scenes/generated/pocket-planet-orchard.d.ts +40 -0
  55. package/dist/scenes/generated/pocket-planet-orchard.js +90 -0
  56. package/dist/scenes/generated/prism-quarry.d.ts +35 -0
  57. package/dist/scenes/generated/prism-quarry.js +94 -0
  58. package/dist/scenes/generated/radio-observatory.d.ts +35 -0
  59. package/dist/scenes/generated/radio-observatory.js +120 -0
  60. package/dist/scenes/generated/signal-freightyard.d.ts +35 -0
  61. package/dist/scenes/generated/signal-freightyard.js +146 -0
  62. package/dist/scenes/generated/tape-terraces.d.ts +35 -0
  63. package/dist/scenes/generated/tape-terraces.js +96 -0
  64. package/dist/scenes/generated/vector-dojo-showdown.d.ts +46 -0
  65. package/dist/scenes/generated/vector-dojo-showdown.js +110 -0
  66. package/package.json +48 -0
package/LICENSE ADDED
@@ -0,0 +1,216 @@
1
+ “Commons Clause” License Condition v1.0
2
+
3
+ The Software is provided to you by the Licensor under the License, as defined below, subject to the following condition.
4
+
5
+ Without limiting other conditions in the License, the grant of rights under the License will not include, and the License does not grant to you, the right to Sell the Software.
6
+
7
+ For purposes of the foregoing, “Sell” means practicing any or all of the rights granted to you under the License to provide to third parties, for a fee or other consideration (including without limitation fees for hosting or consulting/ support services related to the Software), a product or service whose value derives, entirely or substantially, from the functionality of the Software. Any license notice or attribution required by the License must also include this Commons Clause License Condition notice.
8
+
9
+ Software: PS1 Backgrounds (@uppercut-labs/ps1-backgrounds)
10
+
11
+ License: Apache License, Version 2.0
12
+
13
+ Licensor: Devin Thomas (Uppercut Labs)
14
+
15
+
16
+ Apache License
17
+ Version 2.0, January 2004
18
+ http://www.apache.org/licenses/
19
+
20
+ TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
21
+
22
+ 1. Definitions.
23
+
24
+ "License" shall mean the terms and conditions for use, reproduction,
25
+ and distribution as defined by Sections 1 through 9 of this document.
26
+
27
+ "Licensor" shall mean the copyright owner or entity authorized by
28
+ the copyright owner that is granting the License.
29
+
30
+ "Legal Entity" shall mean the union of the acting entity and all
31
+ other entities that control, are controlled by, or are under common
32
+ control with that entity. For the purposes of this definition,
33
+ "control" means (i) the power, direct or indirect, to cause the
34
+ direction or management of such entity, whether by contract or
35
+ otherwise, or (ii) ownership of fifty percent (50%) or more of the
36
+ outstanding shares, or (iii) beneficial ownership of such entity.
37
+
38
+ "You" (or "Your") shall mean an individual or Legal Entity
39
+ exercising permissions granted by this License.
40
+
41
+ "Source" form shall mean the preferred form for making modifications,
42
+ including but not limited to software source code, documentation
43
+ source, and configuration files.
44
+
45
+ "Object" form shall mean any form resulting from mechanical
46
+ transformation or translation of a Source form, including but
47
+ not limited to compiled object code, generated documentation,
48
+ and conversions to other media types.
49
+
50
+ "Work" shall mean the work of authorship, whether in Source or
51
+ Object form, made available under the License, as indicated by a
52
+ copyright notice that is included in or attached to the work
53
+ (an example is provided in the Appendix below).
54
+
55
+ "Derivative Works" shall mean any work, whether in Source or Object
56
+ form, that is based on (or derived from) the Work and for which the
57
+ editorial revisions, annotations, elaborations, or other modifications
58
+ represent, as a whole, an original work of authorship. For the purposes
59
+ of this License, Derivative Works shall not include works that remain
60
+ separable from, or merely link (or bind by name) to the interfaces of,
61
+ the Work and Derivative Works thereof.
62
+
63
+ "Contribution" shall mean any work of authorship, including
64
+ the original version of the Work and any modifications or additions
65
+ to that Work or Derivative Works thereof, that is intentionally
66
+ submitted to Licensor for inclusion in the Work by the copyright owner
67
+ or by an individual or Legal Entity authorized to submit on behalf of
68
+ the copyright owner. For the purposes of this definition, "submitted"
69
+ means any form of electronic, verbal, or written communication sent
70
+ to the Licensor or its representatives, including but not limited to
71
+ communication on electronic mailing lists, source code control systems,
72
+ and issue tracking systems that are managed by, or on behalf of, the
73
+ Licensor for the purpose of discussing and improving the Work, but
74
+ excluding communication that is conspicuously marked or otherwise
75
+ designated in writing by the copyright owner as "Not a Contribution."
76
+
77
+ "Contributor" shall mean Licensor and any individual or Legal Entity
78
+ on behalf of whom a Contribution has been received by Licensor and
79
+ subsequently incorporated within the Work.
80
+
81
+ 2. Grant of Copyright License. Subject to the terms and conditions of
82
+ this License, each Contributor hereby grants to You a perpetual,
83
+ worldwide, non-exclusive, no-charge, royalty-free, irrevocable
84
+ copyright license to reproduce, prepare Derivative Works of,
85
+ publicly display, publicly perform, sublicense, and distribute the
86
+ Work and such Derivative Works in Source or Object form.
87
+
88
+ 3. Grant of Patent License. Subject to the terms and conditions of
89
+ this License, each Contributor hereby grants to You a perpetual,
90
+ worldwide, non-exclusive, no-charge, royalty-free, irrevocable
91
+ (except as stated in this section) patent license to make, have made,
92
+ use, offer to sell, sell, import, and otherwise transfer the Work,
93
+ where such license applies only to those patent claims licensable
94
+ by such Contributor that are necessarily infringed by their
95
+ Contribution(s) alone or by combination of their Contribution(s)
96
+ with the Work to which such Contribution(s) was submitted. If You
97
+ institute patent litigation against any entity (including a
98
+ cross-claim or counterclaim in a lawsuit) alleging that the Work
99
+ or a Contribution incorporated within the Work constitutes direct
100
+ or contributory patent infringement, then any patent licenses
101
+ granted to You under this License for that Work shall terminate
102
+ as of the date such litigation is filed.
103
+
104
+ 4. Redistribution. You may reproduce and distribute copies of the
105
+ Work or Derivative Works thereof in any medium, with or without
106
+ modifications, and in Source or Object form, provided that You
107
+ meet the following conditions:
108
+
109
+ (a) You must give any other recipients of the Work or
110
+ Derivative Works a copy of this License; and
111
+
112
+ (b) You must cause any modified files to carry prominent notices
113
+ stating that You changed the files; and
114
+
115
+ (c) You must retain, in the Source form of any Derivative Works
116
+ that You distribute, all copyright, patent, trademark, and
117
+ attribution notices from the Source form of the Work,
118
+ excluding those notices that do not pertain to any part of
119
+ the Derivative Works; and
120
+
121
+ (d) If the Work includes a "NOTICE" text file as part of its
122
+ distribution, then any Derivative Works that You distribute must
123
+ include a readable copy of the attribution notices contained
124
+ within such NOTICE file, excluding those notices that do not
125
+ pertain to any part of the Derivative Works, in at least one
126
+ of the following places: within a NOTICE text file distributed
127
+ as part of the Derivative Works; within the Source form or
128
+ documentation, if provided along with the Derivative Works; or,
129
+ within a display generated by the Derivative Works, if and
130
+ wherever such third-party notices normally appear. The contents
131
+ of the NOTICE file are for informational purposes only and
132
+ do not modify the License. You may add Your own attribution
133
+ notices within Derivative Works that You distribute, alongside
134
+ or as an addendum to the NOTICE text from the Work, provided
135
+ that such additional attribution notices cannot be construed
136
+ as modifying the License.
137
+
138
+ You may add Your own copyright statement to Your modifications and
139
+ may provide additional or different license terms and conditions
140
+ for use, reproduction, or distribution of Your modifications, or
141
+ for any such Derivative Works as a whole, provided Your use,
142
+ reproduction, and distribution of the Work otherwise complies with
143
+ the conditions stated in this License.
144
+
145
+ 5. Submission of Contributions. Unless You explicitly state otherwise,
146
+ any Contribution intentionally submitted for inclusion in the Work
147
+ by You to the Licensor shall be under the terms and conditions of
148
+ this License, without any additional terms or conditions.
149
+ Notwithstanding the above, nothing herein shall supersede or modify
150
+ the terms of any separate license agreement you may have executed
151
+ with Licensor regarding such Contributions.
152
+
153
+ 6. Trademarks. This License does not grant permission to use the trade
154
+ names, trademarks, service marks, or product names of the Licensor,
155
+ except as required for reasonable and customary use in describing the
156
+ origin of the Work and reproducing the content of the NOTICE file.
157
+
158
+ 7. Disclaimer of Warranty. Unless required by applicable law or
159
+ agreed to in writing, Licensor provides the Work (and each
160
+ Contributor provides its Contributions) on an "AS IS" BASIS,
161
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
162
+ implied, including, without limitation, any warranties or conditions
163
+ of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
164
+ PARTICULAR PURPOSE. You are solely responsible for determining the
165
+ appropriateness of using or redistributing the Work and assume any
166
+ risks associated with Your exercise of permissions under this License.
167
+
168
+ 8. Limitation of Liability. In no event and under no legal theory,
169
+ whether in tort (including negligence), contract, or otherwise,
170
+ unless required by applicable law (such as deliberate and grossly
171
+ negligent acts) or agreed to in writing, shall any Contributor be
172
+ liable to You for damages, including any direct, indirect, special,
173
+ incidental, or consequential damages of any character arising as a
174
+ result of this License or out of the use or inability to use the
175
+ Work (including but not limited to damages for loss of goodwill,
176
+ work stoppage, computer failure or malfunction, or any and all
177
+ other commercial damages or losses), even if such Contributor
178
+ has been advised of the possibility of such damages.
179
+
180
+ 9. Accepting Warranty or Additional Liability. While redistributing
181
+ the Work or Derivative Works thereof, You may choose to offer,
182
+ and charge a fee for, acceptance of support, warranty, indemnity,
183
+ or other liability obligations and/or rights consistent with this
184
+ License. However, in accepting such obligations, You may act only
185
+ on Your own behalf and on Your sole responsibility, not on behalf
186
+ of any other Contributor, and only if You agree to indemnify,
187
+ defend, and hold each Contributor harmless for any liability
188
+ incurred by, or claims asserted against, such Contributor by reason
189
+ of your accepting any such warranty or additional liability.
190
+
191
+ END OF TERMS AND CONDITIONS
192
+
193
+ APPENDIX: How to apply the Apache License to your work.
194
+
195
+ To apply the Apache License to your work, attach the following
196
+ boilerplate notice, with the fields enclosed by brackets "[]"
197
+ replaced with your own identifying information. (Don't include
198
+ the brackets!) The text should be enclosed in the appropriate
199
+ comment syntax for the file format. We also recommend that a
200
+ file or class name and description of purpose be included on the
201
+ same "printed page" as the copyright notice for easier
202
+ identification within third-party archives.
203
+
204
+ Copyright [yyyy] [name of copyright owner]
205
+
206
+ Licensed under the Apache License, Version 2.0 (the "License");
207
+ you may not use this file except in compliance with the License.
208
+ You may obtain a copy of the License at
209
+
210
+ http://www.apache.org/licenses/LICENSE-2.0
211
+
212
+ Unless required by applicable law or agreed to in writing, software
213
+ distributed under the License is distributed on an "AS IS" BASIS,
214
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
215
+ See the License for the specific language governing permissions and
216
+ limitations under the License.
package/NOTICE ADDED
@@ -0,0 +1,24 @@
1
+ PS1 Backgrounds
2
+ Copyright 2026 Devin Thomas
3
+ Developed and distributed by Uppercut Labs.
4
+
5
+ Browser adaptations of original procedural scene concepts from Devin Thomas's
6
+ PS1 Scene Lab. The accompanying LICENSE sets the redistribution terms for this
7
+ work and its attribution notices.
8
+
9
+ The following license condition accompanies this attribution. The complete
10
+ Apache License, Version 2.0 is in LICENSE.
11
+
12
+ “Commons Clause” License Condition v1.0
13
+
14
+ The Software is provided to you by the Licensor under the License, as defined below, subject to the following condition.
15
+
16
+ Without limiting other conditions in the License, the grant of rights under the License will not include, and the License does not grant to you, the right to Sell the Software.
17
+
18
+ For purposes of the foregoing, “Sell” means practicing any or all of the rights granted to you under the License to provide to third parties, for a fee or other consideration (including without limitation fees for hosting or consulting/ support services related to the Software), a product or service whose value derives, entirely or substantially, from the functionality of the Software. Any license notice or attribution required by the License must also include this Commons Clause License Condition notice.
19
+
20
+ Software: PS1 Backgrounds (@uppercut-labs/ps1-backgrounds)
21
+
22
+ License: Apache License, Version 2.0
23
+
24
+ Licensor: Devin Thomas (Uppercut Labs)
package/README.md ADDED
@@ -0,0 +1,159 @@
1
+ # PS1 Backgrounds
2
+
3
+ Procedural PS1-style worlds for the background of an ordinary website. Choose one of 25 scenes, keep your HTML on top, and use the JavaScript API or `<ps1-background>` on any static host. The canvas is decorative and does not take pointer or keyboard input.
4
+
5
+ ```sh
6
+ npm install @uppercut-labs/ps1-backgrounds
7
+ ```
8
+
9
+ The package needs a browser with WebGL for live rendering. It does not require Godot, a server API, credentials, or a hosted scene editor.
10
+
11
+ ## JavaScript
12
+
13
+ Import only the scene you use. Each built-in scene has a separate export path.
14
+
15
+ ```ts
16
+ import { createBackground } from "@uppercut-labs/ps1-backgrounds";
17
+ import tapeTerraces from "@uppercut-labs/ps1-backgrounds/scenes/tape-terraces";
18
+
19
+ const background = createBackground({
20
+ element: "#background",
21
+ scene: tapeTerraces,
22
+ motion: "ambient",
23
+ quality: "auto",
24
+ });
25
+
26
+ // When the view is removed:
27
+ background.dispose();
28
+ ```
29
+
30
+ `element` may be a CSS selector or an existing element. The returned instance exposes `state`, `setMotion()`, `setQuality()`, and `dispose()`. Call `dispose()` when your framework or page removes the host. An invalid host or scene produces an actionable error.
31
+
32
+ Position the host behind your content and give it a real size:
33
+
34
+ ```html
35
+ <div id="background" aria-hidden="true"></div>
36
+ <main>
37
+ <h1>Your site remains the foreground</h1>
38
+ <a href="/work">Explore the work</a>
39
+ </main>
40
+
41
+ <style>
42
+ #background { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
43
+ main { position: relative; z-index: 1; min-height: 100vh; color: white; }
44
+ </style>
45
+ ```
46
+
47
+ ## Web Component
48
+
49
+ Import the registration entry once, then select a built-in scene by its ID:
50
+
51
+ ```html
52
+ <script type="module">
53
+ import "@uppercut-labs/ps1-backgrounds/element";
54
+ </script>
55
+
56
+ <ps1-background
57
+ scene="tape-terraces"
58
+ motion="ambient"
59
+ quality="auto"
60
+ aria-hidden="true"
61
+ ></ps1-background>
62
+
63
+ <main><h1>Your content</h1></main>
64
+
65
+ <style>
66
+ ps1-background { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
67
+ main { position: relative; z-index: 1; min-height: 100vh; color: white; }
68
+ </style>
69
+ ```
70
+
71
+ The component loads the named scene and owns its rendering lifecycle. The HTML and CSS can be deployed as static files after bundling the module imports. A browser cannot resolve the npm package's bare imports from an unbundled local HTML file.
72
+
73
+ ## Make a scene
74
+
75
+ `defineScene` accepts palette and camera data plus a typed builder. The kit creates geometry at runtime, so this example needs no image files:
76
+
77
+ ```ts
78
+ import { createBackground, defineScene } from "@uppercut-labs/ps1-backgrounds";
79
+
80
+ const harbor = defineScene({
81
+ id: "my-harbor",
82
+ title: "My Harbor",
83
+ palette: {
84
+ body: "#607b80",
85
+ accent: "#b3a77c",
86
+ stone: "#637985",
87
+ metal: "#99a6a5",
88
+ light: "#f1d7a2",
89
+ water: "#31566c",
90
+ sky: "#1e344b",
91
+ fog: "#6b8997",
92
+ },
93
+ fog: [12, 110],
94
+ cameras: {
95
+ survey: {
96
+ from: [12, 8, 16],
97
+ to: [8, 7, 14],
98
+ target_from: [0, 0, 0],
99
+ target_to: [0, 0, 0],
100
+ fov: 50,
101
+ },
102
+ detail: {
103
+ from: [5, 3, 7],
104
+ to: [4, 3, 6],
105
+ target_from: [0, 0, 0],
106
+ target_to: [0, 0, 0],
107
+ fov: 50,
108
+ },
109
+ },
110
+ build(kit) {
111
+ kit.box({ position: [0, -0.5, 0], size: [8, 1, 8], material: "stone" });
112
+ kit.box({ position: [0, 1.5, 0], size: [1, 3, 1], material: "light" });
113
+ },
114
+ });
115
+
116
+ const background = createBackground({ element: "#background", scene: harbor });
117
+ ```
118
+
119
+ Custom scenes can use the other typed kit primitives and may provide a `poster` image URL for fallback. Their IDs use lowercase letters, digits, and hyphens.
120
+
121
+ ## Motion, quality, and fallback
122
+
123
+ - `motion: "ambient"` is the default continuous background view. `"fixed"` holds the authored framing, `"cinematic"` uses the scene's camera paths, and `"still"` renders a stable frame.
124
+ - `quality: "auto"` is the default and adjusts rendering to the device. `"high"` and `"low"` select explicit profiles. Change either setting with `background.setMotion(...)` or `background.setQuality(...)`.
125
+ - The runtime pauses when the page or background is hidden and respects reduced-motion preferences. On WebGL failure or context loss, a scene poster provides a static fallback; live rendering resumes when the context is restored and the page is eligible to animate.
126
+
127
+ The package does not dim or recolor your foreground. Choose text colors and overlays that remain readable over the scene, and keep normal controls in HTML above it.
128
+
129
+ ## Static hosting
130
+
131
+ Place the JavaScript or Web Component example in a Vite project's `index.html`/entry module, install this package, and build the site:
132
+
133
+ ```sh
134
+ npm install @uppercut-labs/ps1-backgrounds
135
+ npm install --save-dev vite
136
+ npx vite build
137
+ ```
138
+
139
+ Upload Vite's `dist/` directory to any static host. The build resolves the npm imports and emits ordinary JS/CSS/image assets. For local development, run `npx vite --host 127.0.0.1`.
140
+
141
+ ## Built-in scenes
142
+
143
+ Every ID below is available as `@uppercut-labs/ps1-backgrounds/scenes/<id>` and as the component's `scene` attribute:
144
+
145
+ | | | | |
146
+ | --- | --- | --- | --- |
147
+ | `tape-terraces` | `cassette-cathedral` | `radio-observatory` | `flooded-arcade` |
148
+ | `copper-fungal-mesa` | `black-ocean-causeway` | `prism-quarry` | `inverted-orchard` |
149
+ | `clockwork-tidelocks` | `kilnstep-foundry` | `kitebone-viaduct` | `lantern-moth-cloister` |
150
+ | `coilwell-descent` | `moonseed-conservatory` | `counterweight-monastery` | `fossil-sail-harbor` |
151
+ | `ochre-relay-ruins` | `neon-drift-interchange` | `paper-moon-parade` | `pocket-planet-orchard` |
152
+ | `midnight-platform-09` | `coral-signal-trench` | `vector-dojo-showdown` | `atlas-of-little-worlds` |
153
+ | `signal-freightyard` | | | |
154
+
155
+ ## License and credit
156
+
157
+ PS1 Backgrounds is **source available under Apache License 2.0 with the Commons Clause License Condition v1.0**. It is free to install and can be used on commercial websites. The Commons Clause restricts selling the library itself or a product or service whose value derives entirely or substantially from its functionality. See [LICENSE](LICENSE) for the exact terms and [NOTICE](NOTICE) for attribution to Devin Thomas and Uppercut Labs. No visible credit link is required on websites that use it.
158
+
159
+ The scenes adapt original procedural concepts from Devin Thomas's PS1 Scene Lab. Three.js is a separate MIT-licensed dependency. PS1 Backgrounds is a visual style toolkit, not a native PlayStation game or a claim of pixel-identical hardware emulation.
@@ -0,0 +1,12 @@
1
+ export declare class Ps1BackgroundElement extends HTMLElement {
2
+ static get observedAttributes(): string[];
3
+ private readonly container;
4
+ private background?;
5
+ private generation;
6
+ constructor();
7
+ connectedCallback(): void;
8
+ disconnectedCallback(): void;
9
+ attributeChangedCallback(name: string): void;
10
+ private load;
11
+ private report;
12
+ }
@@ -0,0 +1,115 @@
1
+ import { createBackground } from "./runtime.js";
2
+ const scenes = {
3
+ "atlas-of-little-worlds": () => import("./scenes/generated/atlas-of-little-worlds.js").then((module) => module.default),
4
+ "black-ocean-causeway": () => import("./scenes/generated/black-ocean-causeway.js").then((module) => module.default),
5
+ "cassette-cathedral": () => import("./scenes/generated/cassette-cathedral.js").then((module) => module.default),
6
+ "clockwork-tidelocks": () => import("./scenes/generated/clockwork-tidelocks.js").then((module) => module.default),
7
+ "coilwell-descent": () => import("./scenes/generated/coilwell-descent.js").then((module) => module.default),
8
+ "copper-fungal-mesa": () => import("./scenes/generated/copper-fungal-mesa.js").then((module) => module.default),
9
+ "coral-signal-trench": () => import("./scenes/generated/coral-signal-trench.js").then((module) => module.default),
10
+ "counterweight-monastery": () => import("./scenes/generated/counterweight-monastery.js").then((module) => module.default),
11
+ "flooded-arcade": () => import("./scenes/generated/flooded-arcade.js").then((module) => module.default),
12
+ "fossil-sail-harbor": () => import("./scenes/generated/fossil-sail-harbor.js").then((module) => module.default),
13
+ "inverted-orchard": () => import("./scenes/generated/inverted-orchard.js").then((module) => module.default),
14
+ "kilnstep-foundry": () => import("./scenes/generated/kilnstep-foundry.js").then((module) => module.default),
15
+ "kitebone-viaduct": () => import("./scenes/generated/kitebone-viaduct.js").then((module) => module.default),
16
+ "lantern-moth-cloister": () => import("./scenes/generated/lantern-moth-cloister.js").then((module) => module.default),
17
+ "midnight-platform-09": () => import("./scenes/generated/midnight-platform-09.js").then((module) => module.default),
18
+ "moonseed-conservatory": () => import("./scenes/generated/moonseed-conservatory.js").then((module) => module.default),
19
+ "neon-drift-interchange": () => import("./scenes/generated/neon-drift-interchange.js").then((module) => module.default),
20
+ "ochre-relay-ruins": () => import("./scenes/generated/ochre-relay-ruins.js").then((module) => module.default),
21
+ "paper-moon-parade": () => import("./scenes/generated/paper-moon-parade.js").then((module) => module.default),
22
+ "pocket-planet-orchard": () => import("./scenes/generated/pocket-planet-orchard.js").then((module) => module.default),
23
+ "prism-quarry": () => import("./scenes/generated/prism-quarry.js").then((module) => module.default),
24
+ "radio-observatory": () => import("./scenes/generated/radio-observatory.js").then((module) => module.default),
25
+ "signal-freightyard": () => import("./scenes/generated/signal-freightyard.js").then((module) => module.default),
26
+ "tape-terraces": () => import("./scenes/generated/tape-terraces.js").then((module) => module.default),
27
+ "vector-dojo-showdown": () => import("./scenes/generated/vector-dojo-showdown.js").then((module) => module.default),
28
+ };
29
+ export class Ps1BackgroundElement extends HTMLElement {
30
+ static get observedAttributes() { return ["scene", "motion", "quality"]; }
31
+ container;
32
+ background;
33
+ generation = 0;
34
+ constructor() {
35
+ super();
36
+ const root = this.attachShadow({ mode: "open" });
37
+ const style = document.createElement("style");
38
+ style.textContent = ":host{display:block;position:relative;overflow:hidden;pointer-events:none}div{position:absolute;inset:0}";
39
+ this.container = document.createElement("div");
40
+ this.container.setAttribute("aria-hidden", "true");
41
+ this.container.addEventListener("ps1-background-error", (event) => {
42
+ if (event instanceof CustomEvent && event.detail instanceof Error) {
43
+ this.setAttribute("data-error", event.detail.message);
44
+ }
45
+ });
46
+ this.container.addEventListener("ps1-background-restored", () => this.removeAttribute("data-error"));
47
+ root.append(style, this.container);
48
+ }
49
+ connectedCallback() { void this.load(); }
50
+ disconnectedCallback() {
51
+ this.generation++;
52
+ this.background?.dispose();
53
+ this.background = undefined;
54
+ }
55
+ attributeChangedCallback(name) {
56
+ if (!this.isConnected)
57
+ return;
58
+ if (this.background && (name === "motion" || name === "quality")) {
59
+ try {
60
+ if (name === "motion")
61
+ this.background.setMotion((this.getAttribute(name) ?? "ambient"));
62
+ else
63
+ this.background.setQuality((this.getAttribute(name) ?? "auto"));
64
+ if (this.background.state !== "fallback")
65
+ this.removeAttribute("data-error");
66
+ }
67
+ catch (error) {
68
+ this.report(error instanceof Error ? error : new Error(String(error)));
69
+ }
70
+ return;
71
+ }
72
+ void this.load();
73
+ }
74
+ async load() {
75
+ const generation = ++this.generation;
76
+ this.background?.dispose();
77
+ this.background = undefined;
78
+ const slug = this.getAttribute("scene");
79
+ if (!slug || !scenes[slug]) {
80
+ this.report(new Error(`Unknown PS1 background scene: ${slug ?? "(missing)"}`));
81
+ return;
82
+ }
83
+ const motion = this.getAttribute("motion") ?? "ambient";
84
+ const quality = this.getAttribute("quality") ?? "auto";
85
+ if (!["ambient", "fixed", "cinematic", "still"].includes(motion)) {
86
+ this.report(new Error(`Unknown motion mode: ${motion}`));
87
+ return;
88
+ }
89
+ if (!["auto", "high", "low"].includes(quality)) {
90
+ this.report(new Error(`Unknown quality mode: ${quality}`));
91
+ return;
92
+ }
93
+ try {
94
+ const scene = await scenes[slug]();
95
+ if (!this.isConnected || generation !== this.generation)
96
+ return;
97
+ this.removeAttribute("data-error");
98
+ this.background = createBackground({
99
+ element: this.container, scene, motion: motion, quality: quality,
100
+ });
101
+ }
102
+ catch (error) {
103
+ if (generation === this.generation)
104
+ this.report(error instanceof Error ? error : new Error(String(error)));
105
+ }
106
+ }
107
+ report(error) {
108
+ this.setAttribute("data-error", error.message);
109
+ this.dispatchEvent(new CustomEvent("ps1-background-error", { detail: error, bubbles: true, composed: true }));
110
+ console.error("PS1 Backgrounds element:", error);
111
+ }
112
+ }
113
+ if (!customElements.get("ps1-background")) {
114
+ customElements.define("ps1-background", Ps1BackgroundElement);
115
+ }
@@ -0,0 +1,4 @@
1
+ export { createBackground } from "./runtime.js";
2
+ export type { BackgroundHandle, BackgroundOptions, BackgroundState, MotionMode, QualityMode } from "./runtime.js";
3
+ export { defineScene } from "./scene.js";
4
+ export type { CameraPath, MaterialRecord, MeshRecord, MotionRecord, PresentationSpec, PrimitiveRecord, Role, SceneDefinition, SceneKit, SceneNode, ScenePalette, TransformRecord, Vec2, Vec3, } from "./scene.js";
package/dist/index.js ADDED
@@ -0,0 +1,2 @@
1
+ export { createBackground } from "./runtime.js";
2
+ export { defineScene } from "./scene.js";
package/dist/kit.d.ts ADDED
@@ -0,0 +1,74 @@
1
+ import * as THREE from "three";
2
+ import type { MeshRecord, PrimitiveRecord, Role, SceneDefinition, SceneKit, SceneNode, Vec2, Vec3 } from "./scene.js";
3
+ export declare class Kit implements SceneKit {
4
+ readonly definition: SceneDefinition;
5
+ private readonly onTextureReady?;
6
+ private readonly onTextureError?;
7
+ readonly scene: THREE.Scene<THREE.Object3DEventMap>;
8
+ private readonly nodes;
9
+ private readonly geometries;
10
+ private readonly materials;
11
+ private readonly textures;
12
+ private rolePattern?;
13
+ private readonly animations;
14
+ private disposed;
15
+ constructor(definition: SceneDefinition, onTextureReady?: (() => void) | undefined, onTextureError?: ((error: unknown) => void) | undefined);
16
+ private material;
17
+ private roleTexture;
18
+ private put;
19
+ addPrimitive(record: PrimitiveRecord): SceneNode;
20
+ addMesh(record: MeshRecord): SceneNode;
21
+ box({ position, size, material, rotation }: {
22
+ position: Vec3;
23
+ size: Vec3;
24
+ material: Role;
25
+ rotation?: Vec3;
26
+ }): SceneNode;
27
+ cylinder({ position, radius, height, material, segments, topRadius }: {
28
+ position: Vec3;
29
+ radius: number;
30
+ height: number;
31
+ material: Role;
32
+ segments?: number;
33
+ topRadius?: number;
34
+ }): SceneNode;
35
+ sphere({ position, radius, material, rings, segments }: {
36
+ position: Vec3;
37
+ radius: number;
38
+ material: Role;
39
+ rings?: number;
40
+ segments?: number;
41
+ }): SceneNode;
42
+ torus({ position, inner, outer, material, rotation }: {
43
+ position: Vec3;
44
+ inner: number;
45
+ outer: number;
46
+ material: Role;
47
+ rotation?: Vec3;
48
+ }): SceneNode;
49
+ beam({ from, to, width, material }: {
50
+ from: Vec3;
51
+ to: Vec3;
52
+ width: number;
53
+ material: Role;
54
+ }): SceneNode;
55
+ island({ position, radius, height, depth, phase }: {
56
+ position: Vec3;
57
+ radius: number;
58
+ height?: number;
59
+ depth?: number;
60
+ phase?: Vec2;
61
+ }): SceneNode;
62
+ ribbonArch({ position, radius, width, material }: {
63
+ position: Vec3;
64
+ radius: number;
65
+ width: number;
66
+ material: Role;
67
+ }): SceneNode[];
68
+ rotate(node: SceneNode, { axis, speed }: {
69
+ axis: Vec3;
70
+ speed: number;
71
+ }): void;
72
+ setTime(seconds: number): void;
73
+ dispose(): void;
74
+ }