@uxpilot/openai-astra-shape-cue 1.0.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.
- package/LICENSE.md +39 -0
- package/README.md +126 -0
- package/SETTINGS.md +260 -0
- package/THIRD_PARTY_NOTICES.md +53 -0
- package/dist/astra.min.js +4876 -0
- package/dist/index.d.ts +92 -0
- package/dist/index.js +4876 -0
- package/dist/panel.css +178 -0
- package/dist/react.d.ts +27 -0
- package/dist/react.js +50 -0
- package/dist/settings.d.ts +188 -0
- package/examples/ReactHero.jsx +34 -0
- package/examples/customize.html +21 -0
- package/examples/index.html +25 -0
- package/examples/two-rings.svg +4 -0
- package/package.json +24 -0
package/LICENSE.md
ADDED
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
# UX Pilot Creative Use License 1.0
|
|
2
|
+
|
|
3
|
+
For `@uxpilot/openai-astra-shape-cue`.
|
|
4
|
+
|
|
5
|
+
Inspired by the particle animation on OpenAI’s Astra page. Adapted and packaged by UX Pilot. This project is not affiliated with or endorsed by OpenAI.
|
|
6
|
+
|
|
7
|
+
Copyright © 2026 UX Pilot Inc., for its original contributions. We do not claim ownership of OpenAI’s work, the underlying visual idea, or third-party software.
|
|
8
|
+
|
|
9
|
+
## What you can do
|
|
10
|
+
|
|
11
|
+
You may use, copy, and modify this package for personal or commercial websites, apps, games, and other finished projects, free of charge. This includes paid client work.
|
|
12
|
+
|
|
13
|
+
You may host the code, serve it to browsers, and deliver it with a finished project, including that project’s source files. Your clients receive the same permissions and conditions.
|
|
14
|
+
|
|
15
|
+
Keep this license and the applicable third-party notices with copies of the code. You do not need to display a credit or logo in your interface.
|
|
16
|
+
|
|
17
|
+
## What needs separate permission
|
|
18
|
+
|
|
19
|
+
Please get written permission from UX Pilot Inc. before:
|
|
20
|
+
|
|
21
|
+
- Redistributing or selling the package, or a modified version, as a standalone engine, library, plugin, or reusable resource.
|
|
22
|
+
- Including it in component libraries, UI kits, reusable themes or templates, starter kits, asset packs, or marketplaces.
|
|
23
|
+
- Using it in AI design tools, website or app builders, UI editors, prototyping platforms, or other products that offer similar design functionality to UX Pilot, including offering it as a selectable or exportable effect.
|
|
24
|
+
|
|
25
|
+
These conditions apply to modified versions too. Delivering a finished, client-specific project is allowed; offering a reusable kit for others to build projects is not.
|
|
26
|
+
|
|
27
|
+
## Hosting and other people’s work
|
|
28
|
+
|
|
29
|
+
npm, jsDelivr, UNPKG, and their delivery providers may host, cache, and distribute our official releases as needed to provide their services. Hosting providers may also serve copies for permitted finished projects.
|
|
30
|
+
|
|
31
|
+
Third-party components keep their own licenses and rights. These conditions do not restrict rights granted by their authors or independently created implementations of similar effects. See THIRD_PARTY_NOTICES.md.
|
|
32
|
+
|
|
33
|
+
The inspiration credit and package name do not grant rights to OpenAI’s or UX Pilot’s trademarks or imply endorsement.
|
|
34
|
+
|
|
35
|
+
## A few basics
|
|
36
|
+
|
|
37
|
+
By using the package, you agree to these conditions. Uses outside them need separate written permission. This is a custom license with use restrictions, not an open-source license.
|
|
38
|
+
|
|
39
|
+
The package is provided “as is,” without warranties. To the extent permitted by law, UX Pilot Inc. is not liable for damages arising from its use. Mandatory rights under applicable law are unaffected.
|
package/README.md
ADDED
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
# @uxpilot/openai-astra-shape-cue
|
|
2
|
+
|
|
3
|
+
Particle shapes for websites and React apps. Inspired by the particle animation on OpenAI’s Astra page; adapted and packaged by UX Pilot. Not affiliated with or endorsed by OpenAI.
|
|
4
|
+
|
|
5
|
+
Use the minified browser bundle with one script tag, or install the package in a React project. Three.js and postprocessing are included. No runtime CDN imports or base64 decoder are required inside the engine.
|
|
6
|
+
|
|
7
|
+
## HTML
|
|
8
|
+
|
|
9
|
+
```html
|
|
10
|
+
<script defer src="https://cdn.jsdelivr.net/npm/@uxpilot/openai-astra-shape-cue@1.0.0/dist/astra.min.js"></script>
|
|
11
|
+
<astra-shape-cue
|
|
12
|
+
shape="star"
|
|
13
|
+
transform="load"
|
|
14
|
+
interaction="rotate"
|
|
15
|
+
palette="aurora"
|
|
16
|
+
colors="#9b87ff,#47e2c2,#ffffff"
|
|
17
|
+
speed="0.4" bloom="0.5" particle-density="2"
|
|
18
|
+
style="display:block;width:100%;height:600px"
|
|
19
|
+
></astra-shape-cue>
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
The script registers `<astra-shape-cue>` automatically. Load it once per page. Give the element an explicit height. Generic shapes are `star`, `heart`, `infinity`, `hexagon`, and a procedural `spiral` field. There are no OpenAI logo, cursor, or branded galaxy templates.
|
|
23
|
+
|
|
24
|
+
Use `transform="off"` for an already formed shape, `load` for gathering on entry, or `scroll` for gathering as the element enters the viewport. Interaction modes are `rotate`, `depth-lens`, and `none`. Palettes are `astra`, `aurora`, and `ember`. Boolean attributes include `ambient`, `auto-rotate`, `parallax`, and `hold-at-end`; use `="false"` to explicitly disable them.
|
|
25
|
+
|
|
26
|
+
For self hosting, copy `dist/astra.min.js` and the license notices alongside your finished project. Keep versions pinned when using a CDN.
|
|
27
|
+
|
|
28
|
+
## JavaScript and custom SVG
|
|
29
|
+
|
|
30
|
+
```js
|
|
31
|
+
import { createShapeCue, mountControls } from '@uxpilot/openai-astra-shape-cue';
|
|
32
|
+
import '@uxpilot/openai-astra-shape-cue/panel.css';
|
|
33
|
+
|
|
34
|
+
const cue = createShapeCue(document.querySelector('#effect'), {
|
|
35
|
+
shape: 'heart',
|
|
36
|
+
transform: 'load',
|
|
37
|
+
palette: 'aurora',
|
|
38
|
+
colors: ['#9b87ff', '#47e2c2', '#ffffff'],
|
|
39
|
+
particles: { density: 3, size: 1.5 },
|
|
40
|
+
animation: { speed: 0.4, duration: 3 },
|
|
41
|
+
bloom: 0.5,
|
|
42
|
+
});
|
|
43
|
+
const removeControls = mountControls(cue, document.querySelector('#controls'));
|
|
44
|
+
|
|
45
|
+
// Supply SVG markup from a local file picker:
|
|
46
|
+
// await cue.loadSVG(file);
|
|
47
|
+
cue.update({ particles: { intensity: 1.5 } });
|
|
48
|
+
cue.setColors(['#ff8e5e', '#ffcf87']);
|
|
49
|
+
cue.pause();
|
|
50
|
+
cue.play();
|
|
51
|
+
cue.replay();
|
|
52
|
+
|
|
53
|
+
// When your view is removed:
|
|
54
|
+
// removeControls();
|
|
55
|
+
// cue.dispose();
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
After loading the HTML script, the same functions are available as `window.UXPShapeCue.createShapeCue()` and `window.UXPShapeCue.mountControls()`. The custom element exposes its instance as `element.cue` after connection. Use a dedicated empty `<div>` for `createShapeCue`; do not also mount it on an automatically initialized custom element.
|
|
59
|
+
|
|
60
|
+
Controls are optional and include a local SVG picker with a 2 MB limit. The public `setShape()` API accepts SVG markup or a shape definition object; callers using their own picker should enforce appropriate file limits. SVG geometry and ancestor transforms are retained; scripts, links, and event handlers are not imported. Separate geometry elements retain their own particle lanes. Uploading a file does not send it to a server.
|
|
61
|
+
|
|
62
|
+
Use `await cue.loadSVG(file)` to apply the panel's 2 MB validation automatically. `cue.getOptions()` returns a settings snapshot (including custom shapes), `cue.update(snapshot)` restores it, and `cue.onChange(callback)` subscribes to changes. The optional panel stays synchronized with API updates.
|
|
63
|
+
|
|
64
|
+
## All panel settings are available
|
|
65
|
+
|
|
66
|
+
```js
|
|
67
|
+
cue.update({
|
|
68
|
+
shape: 'heart', // Or pass custom SVG markup / a shape definition
|
|
69
|
+
transform: 'scroll', holdAtEnd: true, parallax: true,
|
|
70
|
+
scroll: { gather: [0.1, 0.4], disperse: [0.7, 0.95] },
|
|
71
|
+
interaction: 'rotate', ambient: true, padding: 0.12,
|
|
72
|
+
config: {
|
|
73
|
+
pathShapeAutoRotate: true, pathShapeAutoRotateAmount: 0.3,
|
|
74
|
+
pathShapeScatter: 0.5, rotationDepth: 0.8, faceForward: true,
|
|
75
|
+
stars: { density: 2, intensity: 1.2, size: 1.5 },
|
|
76
|
+
bloomIntensity: 0.4,
|
|
77
|
+
lensFlare: { enabled: true, intensity: 0.2 },
|
|
78
|
+
interaction: { particleRepel: true, repelRadius: 200 },
|
|
79
|
+
dirtyGlass: { enabled: false }, orbitalDust: { enabled: true },
|
|
80
|
+
showCenterCluster: true,
|
|
81
|
+
},
|
|
82
|
+
});
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
Every slider, switch, and selector is mapped in [SETTINGS.md](SETTINGS.md#every-panel-control-and-its-api-equivalent). `getControlDefinitions()` exposes that mapping in code. TypeScript checks `cue.set('lensFlare.intensity', 0.2)` paths and value types. For custom scroll drivers, use `cue.setScrollProgress(0.5)` in scroll mode; pass `null` to resume window-driven progress.
|
|
86
|
+
|
|
87
|
+
## React
|
|
88
|
+
|
|
89
|
+
```bash
|
|
90
|
+
npm install @uxpilot/openai-astra-shape-cue
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
```jsx
|
|
94
|
+
'use client';
|
|
95
|
+
import { useState } from 'react';
|
|
96
|
+
import { ShapeCue } from '@uxpilot/openai-astra-shape-cue/react';
|
|
97
|
+
|
|
98
|
+
export default function Hero() {
|
|
99
|
+
const [shape, setShape] = useState('heart');
|
|
100
|
+
return <>
|
|
101
|
+
<button onClick={() => setShape('star')}>Star</button>
|
|
102
|
+
<ShapeCue shape={shape}
|
|
103
|
+
colors={['#9b87ff', '#47e2c2', '#ffffff']}
|
|
104
|
+
particles={{ density: 2, size: 1.5 }}
|
|
105
|
+
animation={{ speed: 0.4, duration: 3 }}
|
|
106
|
+
bloom={0.5}
|
|
107
|
+
options={{ transform: 'load', interaction: 'rotate' }}
|
|
108
|
+
style={{ height: 600 }}
|
|
109
|
+
onError={error => console.error(error)} />
|
|
110
|
+
</>;
|
|
111
|
+
}
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
The wrapper initializes in an effect and disposes the renderer on unmount. Importing the package during server rendering does not create a renderer. Inline options work: updates compare values and keep the existing cue. A forwarded ref exposes `cue`, `update()`, `replay()`, `setShape()`, `pause()`, and `play()`.
|
|
115
|
+
|
|
116
|
+
See [SETTINGS.md](SETTINGS.md) for every option, accepted ranges, HTML attributes, partial-update rules, custom shapes, and the advanced engine configuration reference. Omitted settings retain their current values; send an explicit value to reset them.
|
|
117
|
+
|
|
118
|
+
Runnable examples: [HTML with settings panel](examples/index.html), [HTML with colors and motion controls](examples/customize.html), and [React component](examples/ReactHero.jsx). The HTML examples use the adjacent `dist/` files and can be served by any static web server. Copy the React component into an app with React and this package installed.
|
|
119
|
+
|
|
120
|
+
## Requirements
|
|
121
|
+
|
|
122
|
+
A modern browser with WebGL2 and hardware acceleration. The engine honors reduced-motion preferences and contains no raster fallback. You can inspect `cue.status` (`ready` or `error`) to show your own message when rendering is unavailable. Controls and examples are intended for a single browser document; manage dimensions and placement in your own layout.
|
|
123
|
+
|
|
124
|
+
## License
|
|
125
|
+
|
|
126
|
+
Copyright © 2026 UX Pilot Inc., for its original contributions. Free personal/commercial use and modifications in finished projects, subject to the [UX Pilot Creative Use License](LICENSE.md). Standalone redistribution, reusable libraries/templates, and use in competing design tools require separate written permission. This is not an open-source license. See [third-party notices](THIRD_PARTY_NOTICES.md) for bundled dependencies and inspiration credit.
|
package/SETTINGS.md
ADDED
|
@@ -0,0 +1,260 @@
|
|
|
1
|
+
# Customizing Shape Cue
|
|
2
|
+
|
|
3
|
+
Use attributes in HTML, props in React, or `cue.update()` in JavaScript. No editing of the bundled code is required. Dimensions and placement belong to your page's CSS.
|
|
4
|
+
|
|
5
|
+
## Common options
|
|
6
|
+
|
|
7
|
+
| JavaScript option / React prop | Default | Accepted values |
|
|
8
|
+
|---|---|---|
|
|
9
|
+
| `shape` | `star` | `star`, `heart`, `infinity`, `hexagon`, `spiral`, SVG markup, or a shape object |
|
|
10
|
+
| `colors` | named palette | Array of 1–8 `#rgb` or `#rrggbb` colors; `null` restores the named palette |
|
|
11
|
+
| `particles.density` | 4 | 0.25–4; lower values use fewer particles |
|
|
12
|
+
| `particles.size` | 2.05 | 0.25–3 |
|
|
13
|
+
| `particles.intensity` | 1.35 | 0.1–3 |
|
|
14
|
+
| `particles.scatter` | 0.4 | 0–0.45 |
|
|
15
|
+
| `particles.twinkle` | 0.62 | 0–2 |
|
|
16
|
+
| `animation.speed` | 0.8 | 0–3; controls travel along contours |
|
|
17
|
+
| `animation.duration` | 5.5 | 1–10 seconds; approximate gather settling time, not a fixed timeline |
|
|
18
|
+
| `animation.playing` | true | Pause/resume particle flow while retaining pointer interaction |
|
|
19
|
+
| `bloom` | 0.7 | 0–2 |
|
|
20
|
+
| `transform` | `load` | `load` (gather on entry), `scroll` (gather with viewport progress), `off` (already formed) |
|
|
21
|
+
| `interaction` | `rotate` | `rotate`, `depth-lens`, `none` |
|
|
22
|
+
| `palette` | `astra` | `astra`, `aurora`, `ember`; explicit `colors` take priority |
|
|
23
|
+
| `background` | `#000` | A CSS color or `transparent` |
|
|
24
|
+
| `padding` | 0.1 | 0–0.45; fraction of the stage kept clear |
|
|
25
|
+
| `autoRotate` | true | Enable the shape's built-in rotation during gathering |
|
|
26
|
+
| `ambient` | false | Background glow and vignette |
|
|
27
|
+
| `holdAtEnd` | false | Retain a shape after it scrolls past |
|
|
28
|
+
| `parallax` | true | Dispersed particle parallax in scroll mode |
|
|
29
|
+
| `tier` | 3 | 1 (lighter), 2 (balanced), 3 (full); 0 disables WebGL and reports an error |
|
|
30
|
+
| `interactionLabel` | generated | Accessible label for pointer/keyboard rotation |
|
|
31
|
+
|
|
32
|
+
The renderer may rebuild its GPU resources for changes to palette, density, size, scatter, depth, or quality. Changes are batched; the cue instance and its canvas remain mounted. Cheap settings such as speed and bloom update without rebuilding the field.
|
|
33
|
+
|
|
34
|
+
## HTML attributes
|
|
35
|
+
|
|
36
|
+
```html
|
|
37
|
+
<astra-shape-cue shape="heart"
|
|
38
|
+
colors="#9b87ff,#47e2c2,#ffffff"
|
|
39
|
+
particle-density="2" particle-size="1.5"
|
|
40
|
+
speed="0.4" gather-duration="3" bloom="0.5"
|
|
41
|
+
transform="load" interaction="rotate"
|
|
42
|
+
style="display:block;height:500px"
|
|
43
|
+
></astra-shape-cue>
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
Load `dist/astra.min.js` first, or use `defer` and place the element in the HTML. The additional attributes are `colors`, `particle-density`, `particle-size`, `speed`, `gather-duration`, `bloom`, and `paused`. `paused` pauses particle flow; removing it or setting it to `false` resumes. Removing another shortcut attribute restores its documented default. Set boolean attributes such as `ambient` and `auto-rotate` to `false` to explicitly disable them. Removing a `colors` attribute restores the default Astra palette.
|
|
47
|
+
|
|
48
|
+
## Update, pause, and resume
|
|
49
|
+
|
|
50
|
+
```js
|
|
51
|
+
cue.update({
|
|
52
|
+
colors: ['#ff8e5e', '#ffcf87'],
|
|
53
|
+
particles: { density: 2, size: 1.2 },
|
|
54
|
+
animation: { speed: 0.35, duration: 3 },
|
|
55
|
+
bloom: 0.4,
|
|
56
|
+
});
|
|
57
|
+
cue.pause();
|
|
58
|
+
cue.play();
|
|
59
|
+
cue.setColors(['#9b87ff', '#ffffff']);
|
|
60
|
+
cue.update({ palette: 'aurora', colors: null });
|
|
61
|
+
cue.replay();
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
Updates are patches: omitted values remain as they are. Explicitly send the desired default to reset a setting. This also applies when React props/options change; removing a prop is not a reset. React's direct `colors`, `particles`, `animation`, and `bloom` props override the same fields in `options`. Shortcuts override matching advanced `config` fields in the same update. `cue.update()` validates supported options before applying them and reports invalid values instead of silently ignoring them.
|
|
65
|
+
|
|
66
|
+
## Custom shapes
|
|
67
|
+
|
|
68
|
+
```js
|
|
69
|
+
cue.setShape('<svg viewBox="0 0 200 100"><circle cx="50" cy="50" r="35"/><circle cx="150" cy="50" r="25"/></svg>');
|
|
70
|
+
// Or supply path geometry directly:
|
|
71
|
+
cue.setShape({ width:100, height:100, paths:['M10 10 L90 10 L50 90 Z'] });
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
Use separate SVG geometry elements for disconnected contours. SVG markup is treated as geometry only; scripts, links, and event handlers are excluded. Files selected with the optional control panel stay local and are limited to 2 MB. Your own file picker can pass `await file.text()` to `setShape()`.
|
|
75
|
+
|
|
76
|
+
The `spiral` preset is a procedural five-arm field, with no imported OpenAI SVG artwork. Center cluster and orbital dust are most visible in that native field. The center cluster is intentionally suppressed on formed SVG shapes to avoid a duplicate contour. Shape-scatter, shape-depth, and SVG gathering controls apply to the outline presets and custom SVGs; native `spiral` stays in its field mode.
|
|
77
|
+
|
|
78
|
+
```js
|
|
79
|
+
// Direct file upload, with the same validation as the panel:
|
|
80
|
+
await cue.loadSVG(fileInput.files[0]);
|
|
81
|
+
// Also accepts a Blob or markup; it does not fetch URLs.
|
|
82
|
+
await cue.loadSVG('<svg viewBox="0 0 100 100"><circle cx="50" cy="50" r="35"/></svg>');
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
`loadSVG()` enforces 2 MB, leaves the previous shape in place on validation failure, and prevents a slower earlier upload from overwriting a newer shape choice.
|
|
86
|
+
|
|
87
|
+
## Scroll behavior
|
|
88
|
+
|
|
89
|
+
```js
|
|
90
|
+
cue.update({
|
|
91
|
+
transform: 'scroll',
|
|
92
|
+
holdAtEnd: true,
|
|
93
|
+
parallax: true,
|
|
94
|
+
scroll: { gather: [0.1, 0.4], disperse: [0.7, 0.95] },
|
|
95
|
+
});
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
Progress runs from 0 when the stage enters the bottom of the window to 1 when it leaves the top. `gather` sets the formation interval; `disperse` sets the exit interval. Both ranges must increase within 0–1. Defaults are `[0, 0.36]` and `[0.5, 0.86]`. `holdAtEnd: true` skips exit dispersion. `transform: 'load'` gathers once on visibility; `transform: 'off'` keeps the SVG formed. Reduced-motion users see the formed SVG immediately.
|
|
99
|
+
|
|
100
|
+
For your own scroll container, timeline, or scroll library, call `cue.setScrollProgress(progress)` with a normalized value. This drives the same gathering intervals in `transform: 'scroll'` mode. `cue.setScrollProgress(null)` returns to window-driven behavior. Native dispersed parallax still follows window scrolling. React accepts `scroll` as a direct prop; set `transform`, `holdAtEnd`, and `parallax` through `options`, and use the ref for manual progress.
|
|
101
|
+
|
|
102
|
+
## Read, save, restore, and observe settings
|
|
103
|
+
|
|
104
|
+
```js
|
|
105
|
+
const saved = cue.getOptions(); // Detached, JSON-serializable snapshot
|
|
106
|
+
const unsubscribe = cue.onChange(settings => console.log(settings));
|
|
107
|
+
cue.update({config:{lensFlare:{enabled:false},interaction:{repelRadius:220}}});
|
|
108
|
+
cue.update(saved); // Restore the snapshot
|
|
109
|
+
unsubscribe();
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
Snapshots include the custom SVG/shape and all effective engine settings. Treat uploaded artwork in saved settings as user data. Change notifications are batched once per microtask and omitted when values have not changed. They cover both API calls and stock-panel edits; they do not fire for animation frames. React exposes `onSettingsChange` and ref methods `getOptions()`, `loadSVG()`, and `setScrollProgress()`.
|
|
113
|
+
|
|
114
|
+
## React
|
|
115
|
+
|
|
116
|
+
```jsx
|
|
117
|
+
<ShapeCue shape="heart"
|
|
118
|
+
colors={['#9b87ff', '#47e2c2', '#ffffff']}
|
|
119
|
+
particles={{ density:2, size:1.5 }}
|
|
120
|
+
animation={{ speed:0.4, duration:3, playing:true }}
|
|
121
|
+
bloom={0.5}
|
|
122
|
+
options={{ interaction:'rotate', background:'transparent' }}
|
|
123
|
+
style={{ height:500 }}
|
|
124
|
+
/>
|
|
125
|
+
```
|
|
126
|
+
|
|
127
|
+
You can use inline option objects. The wrapper compares setting values and updates the same cue; ordinary parent renders do not dispose and recreate it. `onReady` fires after creation, and `onError` receives initialization or update errors. Importing during server rendering is safe; renderer creation waits until client mount. React Strict Mode intentionally exercises mounting twice in development.
|
|
128
|
+
|
|
129
|
+
## Optional settings panel
|
|
130
|
+
|
|
131
|
+
Import `@uxpilot/openai-astra-shape-cue/panel.css` and call `mountControls(cue, container)`. It returns a cleanup function. The panel and API stay synchronized: programmatic updates refresh control values, and panel edits emit `onChange`. Custom colors/backgrounds appear as custom selections. Use `getControlDefinitions()` to create your own UI with the same control mapping and limits. The panel is optional and contains no page-level layout styles.
|
|
132
|
+
|
|
133
|
+
|
|
134
|
+
## Every panel control and its API equivalent
|
|
135
|
+
|
|
136
|
+
Generated from the actual control panel. Use the option path with `cue.update()`; paths beginning with `config.` also support `cue.set()` with that prefix removed. `getControlDefinitions()` returns this mapping, defaults, ranges, and choices for building your own UI.
|
|
137
|
+
|
|
138
|
+
| Panel control | Option path | Range / choices | Default |
|
|
139
|
+
|---|---|---|---|
|
|
140
|
+
| Shape | `shape` | star, heart, infinity, hexagon, spiral, custom | `"star"` |
|
|
141
|
+
| Transform on scroll | `transform` | scroll, load, off | `"load"` |
|
|
142
|
+
| Interaction | `interaction` | rotate, depth-lens, none | `"rotate"` |
|
|
143
|
+
| Palette | `palette` | astra, aurora, ember | `"astra"` |
|
|
144
|
+
| Background | `background` | #000, #0b0f1a, transparent | `"#000"` |
|
|
145
|
+
| Hold shape after scrolling past | `holdAtEnd` | true / false | `false` |
|
|
146
|
+
| Scroll parallax while dispersed | `parallax` | true / false | `true` |
|
|
147
|
+
| Ambient glow + vignette | `ambient` | true / false | `false` |
|
|
148
|
+
| Padding | `padding` | 0–0.4 (step 0.01) | `0.1` |
|
|
149
|
+
| Auto-rotate amount | `config.pathShapeAutoRotateAmount` | 0–1.2 (step 0.01) | `0.42` |
|
|
150
|
+
| Shape scatter | `config.pathShapeScatter` | 0–3 (step 0.01) | `1` |
|
|
151
|
+
| Shape depth | `config.rotationDepth` | 0–2 (step 0.01) | `1.4` |
|
|
152
|
+
| Star density | `config.stars.density` | 0.25–4 (step 0.05) | `4` |
|
|
153
|
+
| Star intensity | `config.stars.intensity` | 0.1–3 (step 0.01) | `1.35` |
|
|
154
|
+
| Star size | `config.stars.size` | 0.25–3 (step 0.01) | `2.05` |
|
|
155
|
+
| Bloom | `config.bloomIntensity` | 0–2 (step 0.01) | `0.7` |
|
|
156
|
+
| Lens flare | `config.lensFlare.intensity` | 0–1.5 (step 0.01) | `0.28` |
|
|
157
|
+
| Pointer repel radius | `config.interaction.repelRadius` | 16–360 (step 1) | `176` |
|
|
158
|
+
| Auto-rotate shape | `config.pathShapeAutoRotate` | true / false | `true` |
|
|
159
|
+
| Return to front on release | `config.faceForward` | true / false | `true` |
|
|
160
|
+
| Pointer repels particles | `config.interaction.particleRepel` | true / false | `true` |
|
|
161
|
+
| Lens flare | `config.lensFlare.enabled` | true / false | `true` |
|
|
162
|
+
| Dirty glass + grain | `config.dirtyGlass.enabled` | true / false | `true` |
|
|
163
|
+
| Orbital dust | `config.orbitalDust.enabled` | true / false | `false` |
|
|
164
|
+
| Center cluster | `config.showCenterCluster` | true / false | `true` |
|
|
165
|
+
| Upload SVG | `await cue.loadSVG(file)` | SVG File, Blob, or markup, max 2 MB | — |
|
|
166
|
+
| Replay gather | `cue.replay()` | Action | — |
|
|
167
|
+
| Collapse panel | Panel display only | No engine setting | Expanded |
|
|
168
|
+
|
|
169
|
+
|
|
170
|
+
## Advanced engine configuration
|
|
171
|
+
|
|
172
|
+
All fields are optional and support nested partial updates through `config`. The values below are the engine defaults. Animation preset choices are `converge-tilt`, `legacy-zoom`, `grow`, `accretion-exhale`, and `none`; their intro behavior depends on transform mode. `animation.duration` controls SVG gathering independently of those intro presets.
|
|
173
|
+
|
|
174
|
+
| Setting | Default |
|
|
175
|
+
|---|---|
|
|
176
|
+
| `animationPlaying` | `true` |
|
|
177
|
+
| `animationRestartKey` | `0` |
|
|
178
|
+
| `bloomIntensity` | `0.7` |
|
|
179
|
+
| `bloomThreshold` | `0.08` |
|
|
180
|
+
| `colorMode` | `true` |
|
|
181
|
+
| `convergeDuration` | `5.5` |
|
|
182
|
+
| `faceForward` | `true` |
|
|
183
|
+
| `pathShapeAutoRotate` | `true` |
|
|
184
|
+
| `pathShapeAutoRotateAmount` | `0.42` |
|
|
185
|
+
| `pathShapeAutoRotateSpeed` | `0.22` |
|
|
186
|
+
| `pathShapeScatter` | `1` |
|
|
187
|
+
| `rotationDepth` | `1.4` |
|
|
188
|
+
| `scrollDisperseDistance` | `800` |
|
|
189
|
+
| `scrollEffects` | `true` |
|
|
190
|
+
| `scrollStarDriftSpeed` | `3` |
|
|
191
|
+
| `scrollStartOffset` | `0` |
|
|
192
|
+
| `scrollTextFadeDistance` | `200` |
|
|
193
|
+
| `showCenterCluster` | `true` |
|
|
194
|
+
| `accretionExhale.accretionRatio` | `0.42` |
|
|
195
|
+
| `accretionExhale.ambientAmount` | `0.04` |
|
|
196
|
+
| `accretionExhale.ambientSpeed` | `0.55` |
|
|
197
|
+
| `accretionExhale.coreIntensity` | `1.45` |
|
|
198
|
+
| `accretionExhale.duration` | `8` |
|
|
199
|
+
| `accretionExhale.exhaleStrength` | `0.42` |
|
|
200
|
+
| `accretionExhale.inwardStrength` | `1.2` |
|
|
201
|
+
| `accretionExhale.propagationSoftness` | `0.16` |
|
|
202
|
+
| `accretionExhale.settleDuration` | `1.2` |
|
|
203
|
+
| `accretionExhale.startScale` | `0.58` |
|
|
204
|
+
| `animationPreset` | `"converge-tilt"` |
|
|
205
|
+
| `colorPalette` | `"astra"` |
|
|
206
|
+
| `colorPaletteColors` | `["#6DCBF4","#7AB1FE","#F87915","#FA994C","#F5F6FB"]` |
|
|
207
|
+
| `dirtyGlass.distortion` | `0.68` |
|
|
208
|
+
| `dirtyGlass.drift` | `true` |
|
|
209
|
+
| `dirtyGlass.driftStrength` | `0.28` |
|
|
210
|
+
| `dirtyGlass.enabled` | `true` |
|
|
211
|
+
| `dirtyGlass.grain` | `0.031` |
|
|
212
|
+
| `dirtyGlass.procedural` | `0` |
|
|
213
|
+
| `dirtyGlass.texture` | `0` |
|
|
214
|
+
| `grow.duration` | `8` |
|
|
215
|
+
| `grow.growthSpeed` | `0.55` |
|
|
216
|
+
| `grow.softness` | `0.075` |
|
|
217
|
+
| `grow.startZoom` | `4` |
|
|
218
|
+
| `interaction.depthDisplacement` | `0.5` |
|
|
219
|
+
| `interaction.followDamping` | `6` |
|
|
220
|
+
| `interaction.illumination` | `0.55` |
|
|
221
|
+
| `interaction.magnification` | `0.18` |
|
|
222
|
+
| `interaction.particleRepel` | `true` |
|
|
223
|
+
| `interaction.repelDistance` | `52` |
|
|
224
|
+
| `interaction.repelFalloff` | `2` |
|
|
225
|
+
| `interaction.repelHighlight` | `0.16` |
|
|
226
|
+
| `interaction.repelHighlightRadius` | `196` |
|
|
227
|
+
| `interaction.repelPressMultiplier` | `2.2` |
|
|
228
|
+
| `interaction.repelRadius` | `176` |
|
|
229
|
+
| `interaction.repelReturnSpring` | `2.8` |
|
|
230
|
+
| `interaction.repelSpring` | `7` |
|
|
231
|
+
| `interaction.rotationLag` | `0.68` |
|
|
232
|
+
| `interaction.radius` | `156` |
|
|
233
|
+
| `interaction.smearCurl` | `0.24` |
|
|
234
|
+
| `interaction.smearTrailLength` | `2.25` |
|
|
235
|
+
| `interactionMode` | `"rotate"` |
|
|
236
|
+
| `lensFlare.animated` | `true` |
|
|
237
|
+
| `lensFlare.enabled` | `true` |
|
|
238
|
+
| `lensFlare.ghosts` | `0.1` |
|
|
239
|
+
| `lensFlare.halo` | `0.12` |
|
|
240
|
+
| `lensFlare.intensity` | `0.28` |
|
|
241
|
+
| `lensFlare.secondary` | `0.55` |
|
|
242
|
+
| `lensFlare.streakLength` | `0.03485` |
|
|
243
|
+
| `lensFlare.streaks` | `0.18` |
|
|
244
|
+
| `lensFlare.verticalStreaks` | `1` |
|
|
245
|
+
| `orbitalDust.density` | `0.55` |
|
|
246
|
+
| `orbitalDust.driftSpeed` | `0.2` |
|
|
247
|
+
| `orbitalDust.enabled` | `false` |
|
|
248
|
+
| `orbitalDust.intensity` | `2` |
|
|
249
|
+
| `orbitalDust.reach` | `0.17` |
|
|
250
|
+
| `orbitalDust.spread` | `0.4` |
|
|
251
|
+
| `orbitalDust.tightSpread` | `0.03` |
|
|
252
|
+
| `stars.density` | `4` |
|
|
253
|
+
| `stars.densityFalloff` | `0.22` |
|
|
254
|
+
| `stars.flowInward` | `true` |
|
|
255
|
+
| `stars.flowSpeed` | `0.8` |
|
|
256
|
+
| `stars.intensity` | `1.35` |
|
|
257
|
+
| `stars.scatter` | `0.4` |
|
|
258
|
+
| `stars.size` | `2.05` |
|
|
259
|
+
| `stars.sizeFalloff` | `0.45` |
|
|
260
|
+
| `stars.twinkleSpeed` | `0.62` |
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
# Third-party notices
|
|
2
|
+
|
|
3
|
+
Inspired by the particle animation on OpenAI’s Astra page. Adapted and packaged by UX Pilot. Not affiliated with or endorsed by OpenAI. OpenAI-specific logos and authored SVG artwork are not included.
|
|
4
|
+
|
|
5
|
+
The following components are bundled with the engine. Their licenses apply independently of the UX Pilot license.
|
|
6
|
+
|
|
7
|
+
## three 0.180.0
|
|
8
|
+
|
|
9
|
+
The MIT License
|
|
10
|
+
|
|
11
|
+
Copyright © 2010-2025 three.js authors
|
|
12
|
+
|
|
13
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
14
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
15
|
+
in the Software without restriction, including without limitation the rights
|
|
16
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
17
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
18
|
+
furnished to do so, subject to the following conditions:
|
|
19
|
+
|
|
20
|
+
The above copyright notice and this permission notice shall be included in
|
|
21
|
+
all copies or substantial portions of the Software.
|
|
22
|
+
|
|
23
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
24
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
25
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
26
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
27
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
28
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
|
29
|
+
THE SOFTWARE.
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
## postprocessing 6.37.8
|
|
33
|
+
|
|
34
|
+
Copyright © 2015 Raoul van Rüschen
|
|
35
|
+
|
|
36
|
+
This software is provided 'as-is', without any express or implied warranty. In
|
|
37
|
+
no event will the authors be held liable for any damages arising from the use of
|
|
38
|
+
this software.
|
|
39
|
+
|
|
40
|
+
Permission is granted to anyone to use this software for any purpose, including
|
|
41
|
+
commercial applications, and to alter it and redistribute it freely, subject to
|
|
42
|
+
the following restrictions:
|
|
43
|
+
|
|
44
|
+
1. The origin of this software must not be misrepresented; you must not claim
|
|
45
|
+
that you wrote the original software. If you use this software in a product,
|
|
46
|
+
an acknowledgment in the product documentation would be appreciated but is
|
|
47
|
+
not required.
|
|
48
|
+
|
|
49
|
+
2. Altered source versions must be plainly marked as such, and must not be
|
|
50
|
+
misrepresented as being the original software.
|
|
51
|
+
|
|
52
|
+
3. This notice may not be removed or altered from any source distribution.
|
|
53
|
+
|