@gigo-ui/components 1.0.0-alpha → 1.0.0-release
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/README.md +109 -26
- package/package.json +7 -2
package/README.md
CHANGED
|
@@ -2,48 +2,131 @@
|
|
|
2
2
|
|
|
3
3
|
### _High-Performance Components for Low-Performance Experiences._
|
|
4
4
|
|
|
5
|
-
[](https://svelte.dev)
|
|
6
|
+
[](https://svelte.dev)
|
|
7
|
+
[](https://www.typescriptlang.org/)
|
|
8
|
+
[](https://tailwindcss.com/)
|
|
8
9
|
[](https://opensource.org/licenses/MIT)
|
|
9
10
|
|
|
10
|
-
|
|
11
|
+
A Svelte 5 component library of intentionally terrible UI patterns. Every component is production-quality code implementing the worst UX ideas imaginable.
|
|
11
12
|
|
|
12
|
-
|
|
13
|
+
Built with modern runes (`$state`, `$derived`, `$effect`, `$bindable`), TypeScript, and Tailwind CSS 4.
|
|
13
14
|
|
|
14
15
|
---
|
|
15
16
|
|
|
16
|
-
##
|
|
17
|
+
## Install
|
|
17
18
|
|
|
18
|
-
|
|
19
|
+
```bash
|
|
20
|
+
pnpm add @gigo-ui/components
|
|
21
|
+
```
|
|
19
22
|
|
|
20
|
-
|
|
23
|
+
## Quick Start
|
|
21
24
|
|
|
22
|
-
|
|
25
|
+
```svelte
|
|
26
|
+
<script lang="ts">
|
|
27
|
+
import { ShatterPane, CatchSubmit } from '@gigo-ui/components';
|
|
23
28
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
| **`RotaryDial`** | Sequential Input | Replaces a 10ms text input with a 30s manual rotation per digit. |
|
|
27
|
-
| **`GravityInput`** | Physics-based | Characters use CSS transforms or physics to pool at the bottom of the input box. |
|
|
28
|
-
| **`PasswordPeekhole`** | Obfuscation | Uses a dynamic `clip-path` mask to limit visibility to a tiny, moving radius. |
|
|
29
|
-
| **`ProgressDoom`** | Stochastic Logic | Progress bars that regress or reset based on non-linear, unpredictable math. |
|
|
30
|
-
| **`CatchSubmit`** | Kinetic Avoidance | A button that calculates the cursor trajectory to actively flee from the user. |
|
|
31
|
-
| **`SliderPhone`** | Granular Selection | A single range slider mapping 0 to 10. |
|
|
29
|
+
let broken = $state(false);
|
|
30
|
+
</script>
|
|
32
31
|
|
|
33
|
-
|
|
32
|
+
<ShatterPane bind:isShattered={broken}>
|
|
33
|
+
<div class="card">
|
|
34
|
+
<h2>Fragile Content</h2>
|
|
35
|
+
<CatchSubmit label="Submit" />
|
|
36
|
+
</div>
|
|
37
|
+
</ShatterPane>
|
|
38
|
+
|
|
39
|
+
<button onclick={() => broken = true}>Break it</button>
|
|
40
|
+
```
|
|
34
41
|
|
|
35
|
-
|
|
42
|
+
---
|
|
36
43
|
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
44
|
+
## Components
|
|
45
|
+
|
|
46
|
+
### 🌪 Chaos (Destruction Overlays)
|
|
47
|
+
|
|
48
|
+
Wrap any component. One function call and it's physically destroyed.
|
|
49
|
+
|
|
50
|
+
| Component | Effect | Engine |
|
|
51
|
+
| :---------------- | :------------------------------- | :------------------------------------- |
|
|
52
|
+
| **GigoCompactor** | Voxel crush implosion | Three.js InstancedMesh + Rapier3D WASM |
|
|
53
|
+
| **ShatterPane** | Voronoi glass fracture | Canvas2D + physics sim |
|
|
54
|
+
| **PixelDissolve** | Per-pixel wave contagion | Canvas2D particle system |
|
|
55
|
+
| **BlackHoleSink** | Gravitational singularity | Canvas2D warp + accretion glow |
|
|
56
|
+
| **ChaosButton** | Button with random chaos effects | CSS transforms |
|
|
57
|
+
| **ChaosForm** | Form that fights back | DOM manipulation |
|
|
58
|
+
|
|
59
|
+
### 😈 BadUI (Hostile Interactions)
|
|
60
|
+
|
|
61
|
+
Technically functional. Emotionally devastating.
|
|
62
|
+
|
|
63
|
+
| Component | What it does |
|
|
64
|
+
| :------------------- | :---------------------------------------- |
|
|
65
|
+
| **RotaryDial** | Rotary phone dial for number input |
|
|
66
|
+
| **GravityInput** | Characters fall with gravity as you type |
|
|
67
|
+
| **PasswordPeekhole** | Tiny draggable circle to view password |
|
|
68
|
+
| **ProgressDoom** | Progress bar that regresses randomly |
|
|
69
|
+
| **CatchSubmit** | Submit button that runs from your cursor |
|
|
70
|
+
| **SliderPhone** | Single slider for entering phone numbers |
|
|
71
|
+
| **GhostCard** | Cards that vanish and reappear corrupted |
|
|
72
|
+
| **DropdownCalc** | Dropdown menus for basic arithmetic |
|
|
73
|
+
| **VolumeSlider** | Deliberately confusing volume control |
|
|
74
|
+
| **ColorPickerWrong** | Color picker that picks the wrong color |
|
|
75
|
+
| **TermsSidescroll** | Terms of service in a horizontal scroller |
|
|
76
|
+
|
|
77
|
+
### 🛠 Standard (The Bait)
|
|
78
|
+
|
|
79
|
+
Normal, usable components to lull users into a false sense of security.
|
|
80
|
+
|
|
81
|
+
| Component | Purpose |
|
|
82
|
+
| :------------- | :-------------- |
|
|
83
|
+
| **Button** | Standard button |
|
|
84
|
+
| **Card** | Content card |
|
|
85
|
+
| **Carousel** | Image carousel |
|
|
86
|
+
| **Form** | Form container |
|
|
87
|
+
| **Input** | Text input |
|
|
88
|
+
| **Modal** | Dialog overlay |
|
|
89
|
+
| **Navigation** | Nav component |
|
|
40
90
|
|
|
41
91
|
---
|
|
42
92
|
|
|
43
|
-
##
|
|
93
|
+
## Breaker Overlays
|
|
44
94
|
|
|
45
|
-
|
|
95
|
+
The destruction overlays are the flagship feature. They snapshot any wrapped content, then destroy it with real physics:
|
|
46
96
|
|
|
47
|
-
```
|
|
48
|
-
|
|
97
|
+
```svelte
|
|
98
|
+
<script lang="ts">
|
|
99
|
+
import { GigoCompactor } from '@gigo-ui/components';
|
|
100
|
+
|
|
101
|
+
let compactor: GigoCompactor;
|
|
102
|
+
</script>
|
|
103
|
+
|
|
104
|
+
<GigoCompactor bind:this={compactor} cols={20} rows={20} intensity={8}>
|
|
105
|
+
<div class="card">This will be voxelized</div>
|
|
106
|
+
</GigoCompactor>
|
|
107
|
+
|
|
108
|
+
<button onclick={() => compactor.crush()}>Crush</button>
|
|
109
|
+
<button onclick={() => compactor.restore()}>Restore</button>
|
|
49
110
|
```
|
|
111
|
+
|
|
112
|
+
Each overlay lazy-loads its engine only when triggered. Three.js, Rapier WASM, and html-to-image are all dynamically imported — zero cost until destruction begins.
|
|
113
|
+
|
|
114
|
+
| Overlay | Method | Prop | Size |
|
|
115
|
+
| :------------ | :------------------------- | :------------ | :-------------------- |
|
|
116
|
+
| GigoCompactor | `crush()` / `restore()` | `isGarbage` | ~180KB (Three+Rapier) |
|
|
117
|
+
| ShatterPane | `shatter()` / `restore()` | `isShattered` | ~2KB |
|
|
118
|
+
| PixelDissolve | `dissolve()` / `restore()` | `isDead` | ~2KB |
|
|
119
|
+
| BlackHoleSink | `consume()` / `restore()` | `isConsumed` | ~2KB |
|
|
120
|
+
|
|
121
|
+
---
|
|
122
|
+
|
|
123
|
+
## Requirements
|
|
124
|
+
|
|
125
|
+
- Svelte 5.0+
|
|
126
|
+
- SvelteKit 2.0+
|
|
127
|
+
- Tailwind CSS 4.0+
|
|
128
|
+
- TypeScript 5.0+
|
|
129
|
+
|
|
130
|
+
## License
|
|
131
|
+
|
|
132
|
+
MIT
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gigo-ui/components",
|
|
3
|
-
"version": "1.0.0-
|
|
3
|
+
"version": "1.0.0-release",
|
|
4
4
|
"description": "Deliberately dysfunctional UI components — technically excellent, intentionally terrible UX",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -22,8 +22,13 @@
|
|
|
22
22
|
"svelte": "^5.0.0"
|
|
23
23
|
},
|
|
24
24
|
"dependencies": {
|
|
25
|
+
"@dimforge/rapier3d-compat": "^0.19.3",
|
|
26
|
+
"@threlte/core": "^8.4.1",
|
|
27
|
+
"@types/three": "^0.183.1",
|
|
25
28
|
"clsx": "^2.1.1",
|
|
26
|
-
"
|
|
29
|
+
"html-to-image": "^1.11.13",
|
|
30
|
+
"tailwind-merge": "^3.5.0",
|
|
31
|
+
"three": "^0.183.2"
|
|
27
32
|
},
|
|
28
33
|
"devDependencies": {
|
|
29
34
|
"@sveltejs/adapter-auto": "^7.0.0",
|