@ssgoi/svelte 6.4.0 → 6.5.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/README.md +26 -9
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -6,6 +6,16 @@ try this: [ssgoi.dev](https://ssgoi.dev)
|
|
|
6
6
|
|
|
7
7
|
|
|
8
8
|
|
|
9
|
+
## AI-Assisted Setup
|
|
10
|
+
|
|
11
|
+
Using Claude, Cursor, ChatGPT, or another AI assistant? Point it at:
|
|
12
|
+
|
|
13
|
+
```
|
|
14
|
+
https://ssgoi.dev/llms.txt
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
It has the full setup guide, every transition, the API, and troubleshooting — everything an agent needs to wire SSGOI into your app.
|
|
18
|
+
|
|
9
19
|
## What is SSGOI?
|
|
10
20
|
|
|
11
21
|
SSGOI brings native app-like page transitions to the web. Transform your static page navigations into smooth, delightful experiences that users love.
|
|
@@ -44,8 +54,8 @@ pnpm add @ssgoi/svelte
|
|
|
44
54
|
</script>
|
|
45
55
|
|
|
46
56
|
<Ssgoi {config}>
|
|
47
|
-
<!-- ⚠️ Important: position: relative
|
|
48
|
-
<div style="position: relative; min-height: 100vh;">
|
|
57
|
+
<!-- ⚠️ Important: position: relative + z-index: 0 are required (the outgoing page is cloned with position:absolute). Add overflow-x-clip if you use horizontal transitions. -->
|
|
58
|
+
<div style="position: relative; z-index: 0; min-height: 100vh;">
|
|
49
59
|
<slot />
|
|
50
60
|
</div>
|
|
51
61
|
</Ssgoi>
|
|
@@ -113,7 +123,7 @@ The route helpers return path transition groups, so nested arrays are accepted i
|
|
|
113
123
|
</script>
|
|
114
124
|
|
|
115
125
|
<Ssgoi {config}>
|
|
116
|
-
<div style="position: relative; min-height: 100vh;">
|
|
126
|
+
<div style="position: relative; z-index: 0; min-height: 100vh;">
|
|
117
127
|
<nav>
|
|
118
128
|
<a href="/">Home</a>
|
|
119
129
|
<a href="/about">About</a>
|
|
@@ -167,12 +177,19 @@ inside `<Ssgoi>`.
|
|
|
167
177
|
|
|
168
178
|
### Page Transitions (`@ssgoi/svelte/view-transitions`)
|
|
169
179
|
|
|
170
|
-
- `fade()` -
|
|
171
|
-
- `
|
|
172
|
-
- `
|
|
173
|
-
- `
|
|
174
|
-
- `
|
|
175
|
-
- `
|
|
180
|
+
- `fade()` - Calm cross-fade. Safe default for unrelated pages
|
|
181
|
+
- `drill()` - iOS-style hierarchical navigation (list → detail)
|
|
182
|
+
- `slide()` - Horizontal push for tabs / sequential flows
|
|
183
|
+
- `scroll()` - Vertical page scroll for onboarding / paginated views
|
|
184
|
+
- `axis()` - Material/Flutter shared-axis swap for sibling/tab routes
|
|
185
|
+
- `sheet()` - Bottom sheet that slides up (modal-like flows)
|
|
186
|
+
- `hero()` - Shared element transition (matching `data-hero-enter-key` / `data-hero-exit-key`)
|
|
187
|
+
- `zoom()` - Card-to-detail expansion (matching `data-zoom-enter-key` / `data-zoom-exit-key`)
|
|
188
|
+
- `strip()` - 3D Y-axis perspective flip
|
|
189
|
+
- `blind()` - Window-blinds wipe reveal
|
|
190
|
+
- `film()` - Cinematic shrink + tile (gallery / lightbox)
|
|
191
|
+
- `rotate()` - Card flip between siblings
|
|
192
|
+
- `jaemin()` - Playful rotated zoom for special moments
|
|
176
193
|
|
|
177
194
|
## Typed Preset Configuration
|
|
178
195
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ssgoi/svelte",
|
|
3
|
-
"version": "6.
|
|
3
|
+
"version": "6.5.0",
|
|
4
4
|
"description": "Svelte bindings for SSGOI - Native app-like page transitions for Svelte and SvelteKit applications",
|
|
5
5
|
"private": false,
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
"types": "./dist/index.d.ts",
|
|
15
15
|
"type": "module",
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"@ssgoi/core": "^6.
|
|
17
|
+
"@ssgoi/core": "^6.5.0"
|
|
18
18
|
},
|
|
19
19
|
"peerDependencies": {
|
|
20
20
|
"svelte": "^5.0.0"
|