awesome-crossfade-grid-carousel 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.
- package/LICENSE.txt +21 -0
- package/README.md +214 -0
- package/dist/awesome-crossfade-grid-carousel.cjs +28 -0
- package/dist/awesome-crossfade-grid-carousel.js +963 -0
- package/dist/data/slides.json +90 -0
- package/dist/style.css +1 -0
- package/package.json +61 -0
package/LICENSE.txt
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) [2026-27] [Pravinkumar Dabade]
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,214 @@
|
|
|
1
|
+
# Awesome Crossfade Grid Carousel
|
|
2
|
+
|
|
3
|
+
A React carousel that reveals the next slide through a tiled grid dissolve, with optional CRT-style flicker and multiple transition patterns. It supports local data or remote JSON and ships as a library-ready component.
|
|
4
|
+
|
|
5
|
+
## Watch the demo here
|
|
6
|
+
|
|
7
|
+
[](https://youtu.be/gPex69Gz1MU)
|
|
8
|
+
|
|
9
|
+
## Installation
|
|
10
|
+
|
|
11
|
+
```bash
|
|
12
|
+
npm install awesome-crossfade-grid-carousel
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## Styles
|
|
16
|
+
|
|
17
|
+
```js
|
|
18
|
+
import 'awesome-crossfade-grid-carousel/style.css'
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
Peer dependencies:
|
|
22
|
+
|
|
23
|
+
- `react` `^18 || ^19`
|
|
24
|
+
- `react-dom` `^18 || ^19`
|
|
25
|
+
|
|
26
|
+
## Quick Start
|
|
27
|
+
|
|
28
|
+
```tsx
|
|
29
|
+
import { AwesomeCrossfadeGridCarousel } from "awesome-crossfade-grid-carousel";
|
|
30
|
+
import type { GridSlide } from "awesome-crossfade-grid-carousel";
|
|
31
|
+
|
|
32
|
+
const slides: GridSlide[] = [
|
|
33
|
+
{
|
|
34
|
+
id: 1,
|
|
35
|
+
title: "Aurora Ridge",
|
|
36
|
+
subtitle: "Lofoten, Norway",
|
|
37
|
+
tag: "ARCTIC",
|
|
38
|
+
body: "Crimson cabins cling to rock above mirror-still fjords.",
|
|
39
|
+
stat: "02°",
|
|
40
|
+
statLabel: "AVERAGE TEMP",
|
|
41
|
+
accent: "#34d399",
|
|
42
|
+
bg: "#071a12",
|
|
43
|
+
imageUrl:
|
|
44
|
+
"https://images.unsplash.com/photo-1531366936337-7c912a4589a7?w=1600&q=80",
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
id: 2,
|
|
48
|
+
title: "Desert Light",
|
|
49
|
+
subtitle: "Sahara, Morocco",
|
|
50
|
+
tag: "DESERT",
|
|
51
|
+
body: "A sea of sculpted dunes that shifts overnight.",
|
|
52
|
+
accent: "#fbbf24",
|
|
53
|
+
bg: "#1c1007",
|
|
54
|
+
imageUrl:
|
|
55
|
+
"https://images.unsplash.com/photo-1509316785289-025f5b846b35?w=1600&q=80",
|
|
56
|
+
},
|
|
57
|
+
];
|
|
58
|
+
|
|
59
|
+
export default function App() {
|
|
60
|
+
return (
|
|
61
|
+
<AwesomeCrossfadeGridCarousel
|
|
62
|
+
data={slides}
|
|
63
|
+
gridCols={8}
|
|
64
|
+
gridRows={6}
|
|
65
|
+
autoInterval={4800}
|
|
66
|
+
cellDuration={380}
|
|
67
|
+
staggerSpread={600}
|
|
68
|
+
patterns={["wave", "scatter", "radial", "blinds", "spiral"]}
|
|
69
|
+
/>
|
|
70
|
+
);
|
|
71
|
+
}
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
## JSX Example (No TypeScript)
|
|
75
|
+
|
|
76
|
+
```jsx
|
|
77
|
+
import { AwesomeCrossfadeGridCarousel } from "awesome-crossfade-grid-carousel";
|
|
78
|
+
|
|
79
|
+
const slides = [
|
|
80
|
+
{
|
|
81
|
+
id: 1,
|
|
82
|
+
title: "Aurora Ridge",
|
|
83
|
+
subtitle: "Lofoten, Norway",
|
|
84
|
+
tag: "ARCTIC",
|
|
85
|
+
body: "Crimson cabins cling to rock above mirror-still fjords.",
|
|
86
|
+
stat: "02°",
|
|
87
|
+
statLabel: "AVERAGE TEMP",
|
|
88
|
+
accent: "#34d399",
|
|
89
|
+
bg: "#071a12",
|
|
90
|
+
imageUrl:
|
|
91
|
+
"https://images.unsplash.com/photo-1531366936337-7c912a4589a7?w=1600&q=80",
|
|
92
|
+
},
|
|
93
|
+
{
|
|
94
|
+
id: 2,
|
|
95
|
+
title: "Desert Light",
|
|
96
|
+
subtitle: "Sahara, Morocco",
|
|
97
|
+
tag: "DESERT",
|
|
98
|
+
body: "A sea of sculpted dunes that shifts overnight.",
|
|
99
|
+
accent: "#fbbf24",
|
|
100
|
+
bg: "#1c1007",
|
|
101
|
+
imageUrl:
|
|
102
|
+
"https://images.unsplash.com/photo-1509316785289-025f5b846b35?w=1600&q=80",
|
|
103
|
+
},
|
|
104
|
+
];
|
|
105
|
+
|
|
106
|
+
export default function App() {
|
|
107
|
+
return (
|
|
108
|
+
<AwesomeCrossfadeGridCarousel
|
|
109
|
+
data={slides}
|
|
110
|
+
gridCols={8}
|
|
111
|
+
gridRows={6}
|
|
112
|
+
autoInterval={4800}
|
|
113
|
+
cellDuration={380}
|
|
114
|
+
staggerSpread={600}
|
|
115
|
+
patterns={["wave", "scatter", "radial", "blinds", "spiral"]}
|
|
116
|
+
/>
|
|
117
|
+
);
|
|
118
|
+
}
|
|
119
|
+
```
|
|
120
|
+
|
|
121
|
+
## Sample Data (Full)
|
|
122
|
+
|
|
123
|
+
```ts
|
|
124
|
+
export const SAMPLE_SLIDES: GridSlide[] = [
|
|
125
|
+
{
|
|
126
|
+
id: 1,
|
|
127
|
+
title: "Into the Mountains",
|
|
128
|
+
subtitle: "Patagonia, Argentina",
|
|
129
|
+
tag: "LANDSCAPE",
|
|
130
|
+
body: "Where granite spires pierce the sky and the wind never stops.",
|
|
131
|
+
accent: "#7dd3fc",
|
|
132
|
+
bg: "#0c1a2e",
|
|
133
|
+
imageUrl:
|
|
134
|
+
"https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?w=1600&q=80",
|
|
135
|
+
},
|
|
136
|
+
{
|
|
137
|
+
id: 2,
|
|
138
|
+
title: "Desert Light",
|
|
139
|
+
subtitle: "Sahara, Morocco",
|
|
140
|
+
tag: "DESERT",
|
|
141
|
+
body: "A sea of sculpted dunes that shifts overnight.",
|
|
142
|
+
accent: "#fbbf24",
|
|
143
|
+
bg: "#1c1007",
|
|
144
|
+
imageUrl:
|
|
145
|
+
"https://images.unsplash.com/photo-1509316785289-025f5b846b35?w=1600&q=80",
|
|
146
|
+
},
|
|
147
|
+
{
|
|
148
|
+
id: 3,
|
|
149
|
+
title: "Northern Passage",
|
|
150
|
+
subtitle: "Lofoten Islands, Norway",
|
|
151
|
+
tag: "ARCTIC",
|
|
152
|
+
body: "Crimson cabins cling to rock above mirror-still fjords.",
|
|
153
|
+
accent: "#34d399",
|
|
154
|
+
bg: "#071a12",
|
|
155
|
+
imageUrl:
|
|
156
|
+
"https://images.unsplash.com/photo-1531366936337-7c912a4589a7?w=1600&q=80",
|
|
157
|
+
},
|
|
158
|
+
];
|
|
159
|
+
```
|
|
160
|
+
|
|
161
|
+
## Props
|
|
162
|
+
|
|
163
|
+
### `AwesomeCrossfadeGridCarousel` Props
|
|
164
|
+
|
|
165
|
+
| Prop | Type | Default | Description |
|
|
166
|
+
| --------------- | ------------------------------------------- | ----------------------------------------------- | ------------------------------------------------------- |
|
|
167
|
+
| `data` | `GridSlide[]` | `[]` | Local slides data. Prefer this or `apiEndpoint`. |
|
|
168
|
+
| `apiEndpoint` | `string` | `undefined` | URL returning `GridSlide[]` or `{ data: GridSlide[] }`. |
|
|
169
|
+
| `apiHeaders` | `Record<string, string>` | `undefined` | Headers for the remote request. |
|
|
170
|
+
| `apiTransform` | `(raw: unknown) => GridSlide[]` | `undefined` | Transform API response into slides. |
|
|
171
|
+
| `gridCols` | `number` | `8` | Number of columns in the grid. |
|
|
172
|
+
| `gridRows` | `number` | `6` | Number of rows in the grid. |
|
|
173
|
+
| `autoInterval` | `number` | `4000` | Auto-advance interval (ms). |
|
|
174
|
+
| `cellDuration` | `number` | `360` | Duration of each cell fade (ms). |
|
|
175
|
+
| `staggerSpread` | `number` | `580` | Maximum stagger delay across cells (ms). |
|
|
176
|
+
| `flicker` | `boolean` | `true` | Enables CRT-style flicker during fades. |
|
|
177
|
+
| `patterns` | `PatternMode[]` | `['wave','scatter','radial','blinds','spiral']` | Pattern cycle order. |
|
|
178
|
+
| `onSlideClick` | `(slide: GridSlide) => void` | `undefined` | Global click fallback for slides. |
|
|
179
|
+
| `onSlideChange` | `(index: number, slide: GridSlide) => void` | `undefined` | Called after the slide changes. |
|
|
180
|
+
|
|
181
|
+
### `GridSlide` Type
|
|
182
|
+
|
|
183
|
+
| Field | Type | Required | Description |
|
|
184
|
+
| ----------- | ---------------------------- | -------- | -------------------------------- |
|
|
185
|
+
| `id` | `number` | Yes | Unique slide ID. |
|
|
186
|
+
| `title` | `string` | Yes | Main headline. |
|
|
187
|
+
| `subtitle` | `string` | No | Supporting line under the title. |
|
|
188
|
+
| `tag` | `string` | No | Small uppercase label. |
|
|
189
|
+
| `body` | `string` | No | Body copy shown near the bottom. |
|
|
190
|
+
| `stat` | `string` | No | Large stat number or highlight. |
|
|
191
|
+
| `statLabel` | `string` | No | Label under the stat. |
|
|
192
|
+
| `accent` | `string` | Yes | Accent color (hex recommended). |
|
|
193
|
+
| `bg` | `string` | Yes | Fallback background color. |
|
|
194
|
+
| `imageUrl` | `string` | No | Full-bleed background image. |
|
|
195
|
+
| `textColor` | `string` | No | Override text color. |
|
|
196
|
+
| `onClick` | `(slide: GridSlide) => void` | No | Per-slide click handler. |
|
|
197
|
+
|
|
198
|
+
### Pattern Modes
|
|
199
|
+
|
|
200
|
+
`PatternMode` can be: `wave`, `scatter`, `radial`, `blinds`, `spiral`.
|
|
201
|
+
|
|
202
|
+
## Remote Data Example
|
|
203
|
+
|
|
204
|
+
```tsx
|
|
205
|
+
<AwesomeCrossfadeGridCarousel
|
|
206
|
+
apiEndpoint="https://example.com/slides"
|
|
207
|
+
apiHeaders={{ Authorization: "Bearer token" }}
|
|
208
|
+
apiTransform={(raw) => (Array.isArray(raw) ? raw : (raw as any).data)}
|
|
209
|
+
/>
|
|
210
|
+
```
|
|
211
|
+
|
|
212
|
+
## License
|
|
213
|
+
|
|
214
|
+
MIT
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const x=require("react");var X={exports:{}},W={};/**
|
|
2
|
+
* @license React
|
|
3
|
+
* react-jsx-runtime.production.js
|
|
4
|
+
*
|
|
5
|
+
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
6
|
+
*
|
|
7
|
+
* This source code is licensed under the MIT license found in the
|
|
8
|
+
* LICENSE file in the root directory of this source tree.
|
|
9
|
+
*/var K;function oe(){if(K)return W;K=1;var t=Symbol.for("react.transitional.element"),o=Symbol.for("react.fragment");function p(k,f,c){var h=null;if(c!==void 0&&(h=""+c),f.key!==void 0&&(h=""+f.key),"key"in f){c={};for(var v in f)v!=="key"&&(c[v]=f[v])}else c=f;return f=c.ref,{$$typeof:t,type:k,key:h,ref:f!==void 0?f:null,props:c}}return W.Fragment=o,W.jsx=p,W.jsxs=p,W}var G={};/**
|
|
10
|
+
* @license React
|
|
11
|
+
* react-jsx-runtime.development.js
|
|
12
|
+
*
|
|
13
|
+
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
14
|
+
*
|
|
15
|
+
* This source code is licensed under the MIT license found in the
|
|
16
|
+
* LICENSE file in the root directory of this source tree.
|
|
17
|
+
*/var ee;function ae(){return ee||(ee=1,process.env.NODE_ENV!=="production"&&(function(){function t(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===L?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case j:return"Fragment";case T:return"Profiler";case R:return"StrictMode";case F:return"Suspense";case V:return"SuspenseList";case H:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case l:return"Portal";case y:return e.displayName||"Context";case Z:return(e._context.displayName||"Context")+".Consumer";case q:var s=e.render;return e=e.displayName,e||(e=s.displayName||s.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case B:return s=e.displayName||null,s!==null?s:t(e.type)||"Memo";case D:s=e._payload,e=e._init;try{return t(e(s))}catch{}}return null}function o(e){return""+e}function p(e){try{o(e);var s=!1}catch{s=!0}if(s){s=console;var g=s.error,S=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return g.call(s,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",S),o(e)}}function k(e){if(e===j)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===D)return"<...>";try{var s=t(e);return s?"<"+s+">":"<...>"}catch{return"<...>"}}function f(){var e=A.A;return e===null?null:e.getOwner()}function c(){return Error("react-stack-top-frame")}function h(e){if($.call(e,"key")){var s=Object.getOwnPropertyDescriptor(e,"key").get;if(s&&s.isReactWarning)return!1}return e.key!==void 0}function v(e,s){function g(){P||(P=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",s))}g.isReactWarning=!0,Object.defineProperty(e,"key",{get:g,configurable:!0})}function r(){var e=t(this.type);return J[e]||(J[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function a(e,s,g,S,N,U){var u=g.ref;return e={$$typeof:E,type:e,key:s,props:g,_owner:S},(u!==void 0?u:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:r}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:N}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:U}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function i(e,s,g,S,N,U){var u=s.children;if(u!==void 0)if(S)if(O(u)){for(S=0;S<u.length;S++)d(u[S]);Object.freeze&&Object.freeze(u)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else d(u);if($.call(s,"key")){u=t(e);var w=Object.keys(s).filter(function(ne){return ne!=="key"});S=0<w.length?"{key: someKey, "+w.join(": ..., ")+": ...}":"{key: someKey}",_[u+S]||(w=0<w.length?"{"+w.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
|
|
18
|
+
let props = %s;
|
|
19
|
+
<%s {...props} />
|
|
20
|
+
React keys must be passed directly to JSX without using spread:
|
|
21
|
+
let props = %s;
|
|
22
|
+
<%s key={someKey} {...props} />`,S,u,w,u),_[u+S]=!0)}if(u=null,g!==void 0&&(p(g),u=""+g),h(s)&&(p(s.key),u=""+s.key),"key"in s){g={};for(var M in s)M!=="key"&&(g[M]=s[M])}else g=s;return u&&v(g,typeof e=="function"?e.displayName||e.name||"Unknown":e),a(e,u,g,f(),N,U)}function d(e){m(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===D&&(e._payload.status==="fulfilled"?m(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function m(e){return typeof e=="object"&&e!==null&&e.$$typeof===E}var b=x,E=Symbol.for("react.transitional.element"),l=Symbol.for("react.portal"),j=Symbol.for("react.fragment"),R=Symbol.for("react.strict_mode"),T=Symbol.for("react.profiler"),Z=Symbol.for("react.consumer"),y=Symbol.for("react.context"),q=Symbol.for("react.forward_ref"),F=Symbol.for("react.suspense"),V=Symbol.for("react.suspense_list"),B=Symbol.for("react.memo"),D=Symbol.for("react.lazy"),H=Symbol.for("react.activity"),L=Symbol.for("react.client.reference"),A=b.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,$=Object.prototype.hasOwnProperty,O=Array.isArray,I=console.createTask?console.createTask:function(){return null};b={react_stack_bottom_frame:function(e){return e()}};var P,J={},z=b.react_stack_bottom_frame.bind(b,c)(),Y=I(k(c)),_={};G.Fragment=j,G.jsx=function(e,s,g){var S=1e4>A.recentlyCreatedOwnerStacks++;return i(e,s,g,!1,S?Error("react-stack-top-frame"):z,S?I(k(e)):Y)},G.jsxs=function(e,s,g){var S=1e4>A.recentlyCreatedOwnerStacks++;return i(e,s,g,!0,S?Error("react-stack-top-frame"):z,S?I(k(e)):Y)}})()),G}var te;function ie(){return te||(te=1,process.env.NODE_ENV==="production"?X.exports=oe():X.exports=ae()),X.exports}var n=ie();function se(t,o,p){return p===o?0:(t-o)/(p-o)}function le(t,o,p,k=0){const f=Array.from({length:o},()=>new Array(t).fill(0)),c=Array.from({length:o},()=>new Array(t).fill(0));switch(p){case"wave":{for(let r=0;r<o;r++)for(let a=0;a<t;a++)c[r][a]=r/(o-1||1)+a/(t-1||1);break}case"scatter":{let r=k*1664525+1013904223;for(let a=0;a<o;a++)for(let i=0;i<t;i++)r=Math.imul(r,1664525)+1013904223>>>0,c[a][i]=r/4294967295;break}case"radial":{const r=(o-1)/2,a=(t-1)/2;for(let i=0;i<o;i++)for(let d=0;d<t;d++)c[i][d]=Math.sqrt(Math.pow((i-r)/(o/2),2)+Math.pow((d-a)/(t/2),2));break}case"blinds":{for(let r=0;r<o;r++)for(let a=0;a<t;a++)c[r][a]=r/(o-1||1);break}case"spiral":{let r=0,a=o-1,i=0,d=t-1,m=0;const b=o*t,E=Array.from({length:o},()=>new Array(t).fill(0));for(;r<=a&&i<=d;){for(let l=i;l<=d;l++)E[r][l]=m++;r++;for(let l=r;l<=a;l++)E[l][d]=m++;if(d--,r<=a){for(let l=d;l>=i;l--)E[a][l]=m++;a--}if(i<=d){for(let l=a;l>=r;l--)E[l][i]=m++;i++}}for(let l=0;l<o;l++)for(let j=0;j<t;j++)c[l][j]=E[l][j]/(b-1||1);break}}let h=1/0,v=-1/0;for(let r=0;r<o;r++)for(let a=0;a<t;a++)c[r][a]<h&&(h=c[r][a]),c[r][a]>v&&(v=c[r][a]);for(let r=0;r<o;r++)for(let a=0;a<t;a++)f[r][a]=se(c[r][a],h,v);return f}const ce={wave:"WAVE",scatter:"SCATTER",radial:"RADIAL",blinds:"BLINDS",spiral:"SPIRAL"};function ue(t){const[o,p]=x.useState(t.data??[]),[k,f]=x.useState(!t.data&&!!t.apiEndpoint),[c,h]=x.useState(null),v=x.useRef(0),r=x.useCallback(async()=>{if(!t.apiEndpoint)return;const a=++v.current;f(!0),h(null);try{const i=await fetch(t.apiEndpoint,{headers:{"Content-Type":"application/json",...t.apiHeaders}});if(!i.ok)throw new Error(`HTTP ${i.status}: ${i.statusText}`);const d=await i.json();if(a!==v.current)return;const m=t.apiTransform?t.apiTransform(d):Array.isArray(d)?d:d.data;p(m)}catch(i){if(a!==v.current)return;h(i instanceof Error?i.message:"Failed to load")}finally{a===v.current&&f(!1)}},[t.apiEndpoint]);return x.useEffect(()=>{if(t.data){p(t.data);return}r()},[t.data,r]),{slides:o,loading:k,error:c,refetch:r}}function C(t){const o=t.replace("#","");if(o.length<6)return!1;const p=parseInt(o.slice(0,2),16),k=parseInt(o.slice(2,4),16),f=parseInt(o.slice(4,6),16);return .299*p+.587*k+.114*f<140}function fe({data:t,apiEndpoint:o,apiHeaders:p,apiTransform:k,gridCols:f=8,gridRows:c=6,autoInterval:h=4e3,cellDuration:v=360,staggerSpread:r=580,flicker:a=!0,patterns:i=["wave","scatter","radial","blinds","spiral"],onSlideClick:d,onSlideChange:m}){const{slides:b,loading:E,error:l,refetch:j}=ue({data:t,apiEndpoint:o,apiHeaders:p,apiTransform:k}),R=b.length,[T,Z]=x.useState(0),[y,q]=x.useState(null),[F,V]=x.useState(!1),B=x.useRef(0),D=x.useRef(1),H=x.useRef(0),L=x.useRef(0),A=x.useRef(!1),$=r+v,O=x.useCallback(u=>{if(A.current||R<2)return;A.current=!0;const w=i[B.current%i.length];B.current++;const M=++D.current;q({fromIdx:T,toIdx:u,pattern:w,seed:M}),H.current=window.setTimeout(()=>{Z(u),q(null),A.current=!1,m==null||m(u,b[u])},$+60)},[T,R,i,$,b,m]),I=x.useCallback(()=>{O((T+1)%R)},[O,T,R]),P=x.useCallback(()=>{O((T-1+R)%R)},[O,T,R]),J=x.useCallback(u=>{u===T||A.current||O(u)},[O,T]);x.useEffect(()=>{if(!(F||R<2))return L.current=window.setInterval(I,h),()=>clearInterval(L.current)},[F,I,h,R]),x.useEffect(()=>{const u=w=>{w.key==="ArrowRight"&&I(),w.key==="ArrowLeft"&&P()};return window.addEventListener("keydown",u),()=>window.removeEventListener("keydown",u)},[I,P]),x.useEffect(()=>()=>{clearTimeout(H.current),clearInterval(L.current)},[]);const z=x.useCallback(u=>{if(A.current)return;const w=u.onClick??d;w==null||w(u)},[d]),Y=x.useMemo(()=>y?le(f,c,y.pattern,y.seed):null,[y==null?void 0:y.pattern,y==null?void 0:y.seed,f,c]);if(E)return n.jsx(Q,{type:"loading"});if(l)return n.jsx(Q,{type:"error",message:l,onRetry:j});if(!R)return n.jsx(Q,{type:"error",message:"No slides to display.",onRetry:j});const _=b[T],e=y?b[y.toIdx]:null,s=e??_,g=!C(s.bg),S=s.textColor??(g?"#0f0f0f":"#f0ede8"),N=g?"rgba(15,15,15,0.45)":"rgba(240,237,232,0.45)",U=g?"rgba(15,15,15,0.12)":"rgba(240,237,232,0.12)";return n.jsxs("div",{style:{width:"100vw",height:"100vh",overflow:"hidden",position:"relative",background:_.bg,userSelect:"none"},onMouseEnter:()=>V(!0),onMouseLeave:()=>V(!1),children:[n.jsx(re,{slide:_,ink:C(_.bg)?"#f0ede8":"#0f0f0f",inkDim:C(_.bg)?"rgba(240,237,232,0.45)":"rgba(15,15,15,0.45)",inkRule:C(_.bg)?"rgba(240,237,232,0.12)":"rgba(15,15,15,0.12)",activeIdx:T,total:R,onSlideClick:()=>z(_),zIndex:1,animateIn:!1,zoomDelay:y?-9999:0}),e&&n.jsx(re,{slide:e,ink:C(e.bg)?"#f0ede8":"#0f0f0f",inkDim:C(e.bg)?"rgba(240,237,232,0.45)":"rgba(15,15,15,0.45)",inkRule:C(e.bg)?"rgba(240,237,232,0.12)":"rgba(15,15,15,0.12)",activeIdx:y.toIdx,total:R,onSlideClick:()=>z(e),zIndex:2,animateIn:!1,zoomDelay:$}),y&&Y&&e&&n.jsx(de,{cols:f,rows:c,slide:e,delayGrid:Y,cellDuration:v,staggerSpread:r,flicker:a,onSlideClick:()=>z(e)}),n.jsx(pe,{slides:b,activeIdx:y?y.toIdx:T,transition:y,hovered:F,autoInterval:h,onPrev:P,onNext:I,onDot:J,ink:S,inkDim:N,inkRule:U,patternLabel:y?ce[y.pattern]:null})]})}function de({cols:t,rows:o,slide:p,delayGrid:k,cellDuration:f,staggerSpread:c,flicker:h,onSlideClick:v}){const r=h?"cellOut":"cellOutClean";return n.jsx("div",{style:{position:"absolute",inset:0,zIndex:30,pointerEvents:"auto",cursor:"pointer"},onClick:v,children:Array.from({length:o},(a,i)=>Array.from({length:t},(d,m)=>{var l;const b=(((l=k[i])==null?void 0:l[m])??0)*c,E=p.imageUrl?{backgroundImage:`url(${p.imageUrl})`,backgroundSize:`${t*100}% ${o*100}%`,backgroundPosition:`${m*(100/(t-1||1))}% ${i*(100/(o-1||1))}%`,backgroundRepeat:"no-repeat"}:{background:p.bg};return n.jsx("div",{style:{position:"absolute",left:`${m/t*100}%`,top:`${i/o*100}%`,width:`${100/t}%`,height:`${100/o}%`,...E,boxShadow:"inset 0 0 0 0.5px rgba(0,0,0,0.15)",animation:`${r} ${f}ms ease-in-out ${b}ms both`,willChange:"opacity"}},`${i}-${m}`)}))})}function re({slide:t,ink:o,inkDim:p,inkRule:k,activeIdx:f,total:c,onSlideClick:h,zIndex:v=1,animateIn:r=!0,zoomDelay:a=0}){const i=!!t.imageUrl,d=i||C(t.bg),m=i?"#f0ede8":o,b=i?"rgba(240,237,232,0.6)":p,E=i?"rgba(240,237,232,0.1)":k;return n.jsxs("div",{onClick:h,style:{position:"absolute",inset:0,display:"flex",flexDirection:"column",justifyContent:"space-between",padding:"clamp(32px, 5vw, 72px)",cursor:"pointer",zIndex:v,overflow:"hidden"},children:[i&&n.jsx("div",{style:{position:"absolute",inset:0,backgroundImage:`url(${t.imageUrl})`,backgroundSize:"cover",backgroundPosition:"center",zIndex:0,transformOrigin:"center center",animation:a>=0?`subtleZoom 7s ease-in-out ${a}ms forwards`:"none"}},`img-${t.id}`),i&&n.jsx("div",{style:{position:"absolute",inset:0,zIndex:1,pointerEvents:"none",background:`
|
|
23
|
+
linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.3) 45%, transparent 100%),
|
|
24
|
+
linear-gradient(to right, rgba(0,0,0,0.45) 0%, transparent 55%)
|
|
25
|
+
`}}),n.jsx("div",{style:{position:"absolute",inset:0,pointerEvents:"none",backgroundImage:`
|
|
26
|
+
linear-gradient(${E} 1px, transparent 1px),
|
|
27
|
+
linear-gradient(90deg, ${E} 1px, transparent 1px)
|
|
28
|
+
`,backgroundSize:"40px 40px",zIndex:2,opacity:i?.4:1}}),n.jsx("div",{style:{position:"absolute",left:0,top:"15%",bottom:"15%",width:3,background:t.accent,boxShadow:`2px 0 20px ${t.accent}88`,zIndex:3}}),n.jsxs("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"flex-start",position:"relative",zIndex:4,animation:r?"slideDown 0.5s 0.05s ease both":"none"},children:[n.jsxs("div",{style:{display:"flex",gap:12,alignItems:"center"},children:[n.jsx("div",{style:{width:10,height:10,background:t.accent,boxShadow:`0 0 12px ${t.accent}88`}}),t.tag&&n.jsx("span",{style:{fontFamily:"var(--font-mono)",fontSize:11,letterSpacing:"0.22em",color:t.accent,textTransform:"uppercase",background:`${t.accent}22`,border:`1px solid ${t.accent}66`,padding:"3px 10px"},children:t.tag})]}),n.jsxs("span",{style:{fontFamily:"var(--font-mono)",fontSize:11,color:b,letterSpacing:"0.15em"},children:[String(f+1).padStart(2,"0")," / ",String(c).padStart(2,"0")]})]}),n.jsxs("div",{style:{position:"relative",zIndex:4,maxWidth:"70%"},children:[t.stat&&n.jsxs("div",{style:{marginBottom:8,animation:r?"slideUp 0.5s 0.1s ease both":"none"},children:[n.jsx("div",{style:{fontFamily:"var(--font-display)",fontSize:"clamp(72px, 11vw, 160px)",fontWeight:800,lineHeight:.9,letterSpacing:"-0.03em",color:t.accent,textShadow:d?`0 0 80px ${t.accent}55`:"none"},children:t.stat}),t.statLabel&&n.jsx("div",{style:{fontFamily:"var(--font-mono)",fontSize:11,letterSpacing:"0.22em",textTransform:"uppercase",color:b,marginTop:4},children:t.statLabel})]}),n.jsx("h2",{style:{fontFamily:"var(--font-display)",fontSize:"clamp(42px, 6.5vw, 96px)",fontWeight:700,lineHeight:.95,letterSpacing:"-0.02em",color:m,marginBottom:16,animation:r?"slideUp 0.5s 0.15s ease both":"none",textShadow:i?"0 2px 20px rgba(0,0,0,0.5)":"none"},children:t.title}),t.subtitle&&n.jsx("div",{style:{fontFamily:"var(--font-serif)",fontSize:"clamp(14px, 1.8vw, 22px)",fontStyle:"italic",color:b,letterSpacing:"0.01em",marginBottom:16,animation:r?"slideUp 0.5s 0.2s ease both":"none"},children:t.subtitle}),n.jsx("div",{style:{width:"clamp(40px, 8vw, 80px)",height:2,background:t.accent,boxShadow:`0 0 10px ${t.accent}88`,marginBottom:18,animation:r?"slideUp 0.5s 0.22s ease both":"none"}}),t.body&&n.jsx("p",{style:{fontFamily:"var(--font-mono)",fontSize:"clamp(11px, 1.1vw, 14px)",fontWeight:300,lineHeight:1.75,color:b,maxWidth:480,animation:r?"slideUp 0.5s 0.27s ease both":"none"},children:t.body})]}),n.jsxs("div",{style:{position:"relative",zIndex:4,animation:r?"fadeIn 0.5s 0.3s ease both":"none",display:"flex",justifyContent:"space-between",alignItems:"flex-end"},children:[n.jsxs("div",{style:{fontFamily:"var(--font-mono)",fontSize:9,color:b,opacity:.4,letterSpacing:"0.2em"},children:["ID_",String(t.id).padStart(4,"0")]}),n.jsx("div",{style:{fontFamily:"var(--font-mono)",fontSize:9,color:b,opacity:.35,letterSpacing:"0.18em",textTransform:"uppercase"},children:"click to open →"})]})]})}function pe({slides:t,activeIdx:o,transition:p,hovered:k,autoInterval:f,onPrev:c,onNext:h,onDot:v,ink:r,inkDim:a,inkRule:i,patternLabel:d}){var E;const m=!!p,b=((E=t[o])==null?void 0:E.accent)??"#000";return n.jsxs(n.Fragment,{children:[["prev","next"].map(l=>n.jsx("button",{onClick:l==="prev"?c:h,disabled:m,style:{position:"absolute",[l==="prev"?"left":"right"]:"clamp(16px, 3vw, 40px)",top:"50%",transform:"translateY(-50%)",zIndex:30,width:44,height:44,background:"transparent",border:`1.5px solid ${m?i:r}`,color:m?a:r,fontSize:18,cursor:m?"default":"pointer",display:"flex",alignItems:"center",justifyContent:"center",transition:"all 0.2s ease",fontFamily:"var(--font-mono)"},children:l==="prev"?"←":"→"},l)),n.jsxs("div",{style:{position:"absolute",bottom:0,left:0,right:0,zIndex:30,pointerEvents:"none",padding:"clamp(16px, 3vh, 28px) clamp(32px, 5vw, 72px)",display:"flex",alignItems:"center",justifyContent:"space-between",borderTop:`1px solid ${i}`},children:[n.jsxs("div",{style:{fontFamily:"var(--font-mono)",fontSize:10,letterSpacing:"0.22em",color:a,textTransform:"uppercase",display:"flex",alignItems:"center",gap:8},children:[n.jsx("span",{style:{display:"inline-block",width:6,height:10,background:d?b:"transparent",animation:d?"blink 0.5s step-end infinite":"none"}}),d??"IDLE"]}),n.jsx("div",{style:{display:"flex",gap:6,alignItems:"center",pointerEvents:"auto"},children:t.map((l,j)=>n.jsx("button",{onClick:()=>v(j),style:{width:j===o?24:7,height:7,background:j===o?b:i,border:"none",padding:0,cursor:"pointer",transition:"all 0.3s ease",boxShadow:j===o?`0 0 10px ${b}88`:"none"}},l.id))}),n.jsx("div",{style:{width:72,height:1,background:i,position:"relative",overflow:"hidden"},children:!k&&!m&&n.jsx("div",{style:{position:"absolute",inset:0,background:b,transformOrigin:"left center",animation:`progressAnim ${f}ms linear forwards`}},`${o}-prog`)})]}),k&&!m&&n.jsx("div",{style:{position:"absolute",top:24,left:"50%",transform:"translateX(-50%)",zIndex:30,pointerEvents:"none",fontFamily:"var(--font-mono)",fontSize:9,color:a,letterSpacing:"0.2em",whiteSpace:"nowrap",animation:"fadeIn 0.2s ease both"},children:"⏸ PAUSED"}),n.jsx("div",{style:{position:"absolute",top:"clamp(16px,3vh,28px)",right:"clamp(16px,3vw,28px)",zIndex:30,pointerEvents:"none",fontFamily:"var(--font-mono)",fontSize:9,color:a,letterSpacing:"0.15em",opacity:.5},children:"← → KEYS · DRAG DOTS"})]})}function Q({type:t,message:o,onRetry:p}){return n.jsx("div",{style:{width:"100vw",height:"100vh",background:"var(--bg)",display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",gap:20},children:t==="loading"?n.jsxs(n.Fragment,{children:[n.jsx("div",{style:{width:36,height:36,border:"1.5px solid var(--ink-dimmer)",borderTop:"1.5px solid var(--ink)",borderRadius:"50%",animation:"spin 0.8s linear infinite"}}),n.jsx("p",{style:{fontFamily:"var(--font-mono)",fontSize:11,color:"var(--ink-dim)",letterSpacing:"0.22em"},children:"LOADING SLIDES"})]}):n.jsxs(n.Fragment,{children:[n.jsxs("p",{style:{fontFamily:"var(--font-mono)",fontSize:12,color:"#cc2222",letterSpacing:"0.1em"},children:["⚠ ",o]}),p&&n.jsx("button",{onClick:p,style:{background:"transparent",border:"1.5px solid var(--ink)",color:"var(--ink)",padding:"8px 22px",cursor:"pointer",fontFamily:"var(--font-mono)",fontSize:10,letterSpacing:"0.18em"},children:"RETRY"})]})})}exports.AwesomeCrossfadeGridCarousel=fe;
|